ajax 基础

Posted 2020-08-19 兔小灰385

一、简介

AJAX = Asynchronous javascript and XML（异步的 JavaScript 和 XML）。

AJAX 是一种用于创建快速动态网页的技术。

AJAX通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

二、xml和json的作用：在不同语言之间进行数据传递

最早使用的数据类型是 xml
劣势：
1、代码量较大
2、结构不清晰
3、解析起来麻烦

现在使用的数据类型是 json
优势：
1、结构清晰
2、类似于面向对象的解析方式

json基本格式：
{"key":"value","":"","":""}

三、ajax应用实例

ajax展示数据库所有数据：

1.body中的代码

<table style="background-color:navy;text-align:center;width:90%;margin:auto;" id="tb1">
        <thead>
            <tr style="color:white;">
                <td>用户名</td>
                <td>密码</td>
                <td>昵称</td>
                <td>性别</td>
                <td>生日</td>
                <td>民族</td>
            </tr>
        </thead>
        <tbody>
            
        </tbody>
    </table>

    <input type="button" id="btn1" value="添加" />

2.js代码

<script type="text/javascript">
    $("#btn1").click(function () {
        $.ajax({
            url: "ajax/LoadUsers.ashx",//将数据要提交到哪个服务端
            data: {},//将什么数据提交到服务端去
            type: "post",//用什么样的方式将数据提交过去
            dataType: "json",//返回一个什么样的数据类型
            success: function (data) {      //success
                $("#tb1 tbody").empty();
                for (i in data)
                {
                    var str = "<tr style=\\"background-color:white;\\">";
                    str += "<td>" + data[i].username + "</td>";
                    str += "<td>" + data[i].password + "</td>";
                    str += "<td>" + data[i].nickname + "</td>";
                    str += "<td>" + data[i].sex + "</td>";
                    str += "<td>" + data[i].birthday + "</td>";
                    str += "<td>" + data[i].nation + "</td>";
                    str += "</tr>";

                    $("#tb1 tbody").append(str);
                }


            },//success
            error: function () {
                alert(\'服务器连接失败！！！\');
            }

        });//ajax
    });//btn1.click
</script>

　　在js代码中，书写url链接地址时要注意仔细；在写success中的str字符串时，应注意其中的属性名不可写错；最后可以写error来方便找错。

3.LoadUsers.ashx代码

using System;
using System.Web;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Text;

public class LoadUsers : IHttpHandler {
    
    public void ProcessRequest (HttpContext context)
    {
        int count = 0;        
        string end = "[";
        
        
        using (Data0720DataContext con = new Data0720DataContext())
        {
            var ulist = con.Users;
            foreach(Users u in ulist)
            {
                if (count > 0)
                {
                    end += ",";
                }
                end += "{\\"username\\":\\""+u.UserName+"\\",\\"password\\":\\""+u.PassWord+"\\",\\"nickname\\":\\""+u.NickName+"\\",\\"sex\\":\\""+u.Sex+"\\",\\"birthday\\":\\""+u.Birthday+"\\",\\"nation\\":\\""+u.Nation+"\\"}";
                
                count++;
            }
        
        }
        end += "]";

        context.Response.Write(end);//将json返回出去
        context.Response.End();//结束输出
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

在此部分的内容中，应注意的是：json字符串的拼写，其中，应格外注意转义字符（\\），双引号（""）以及每行最后的逗号的位置，逗号的英文状态，并且，在输出多行数据时，应注意在字符串两侧加上（[]）。

ajax实现省市区三级联动

<div>
            <asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>
            <asp:DropDownList ID="DropDownList2" runat="server"></asp:DropDownList>
            <asp:DropDownList ID="DropDownList3" runat="server"></asp:DropDownList>
        </div>

body

<script type="text/javascript">
    bind1($("#DropDownList1"), \'0001\', \'1\');

    function bind1(drop, pc, aa) {
        $.ajax({
            url: "ajax/China.ashx",
            data: { "pcode": pc },
            type: "post",
            dataType: "json",
            success: function (data) {
                if (aa == \'1\') {
                    drop.empty();

                    for (i in data) {
                        var str = "<option value=\\"" + data[i].code + "\\">" + data[i].name + "</option>";
                        drop.append(str);
                    }
                    bind1($("#DropDownList2"), $("#DropDownList1").val(), \'2\');
                    bind1($("#DropDownList3"), $("#DropDownList2").val(), \'3\');
                }
                if (aa == \'2\') {
                    drop.empty();

                    for (i in data) {
                        var str = "<option value=\\"" + data[i].code + "\\">" + data[i].name + "</option>";
                        drop.append(str);
                    }
                    bind1($("#DropDownList3"), $("#DropDownList2").val(), \'3\');
                }
                if (aa == \'3\') {
                    drop.empty();

                    for (i in data) {
                        var str = "<option value=\\"" + data[i].code + "\\">" + data[i].name + "</option>";
                        drop.append(str);
                    }
                }
            },
            error: function () {
                alert(\'服务器连接失败！\');
            }
        });

    }

    $("#DropDownList1").change(function () {
        bind1($("#DropDownList2"), $(this).val(), \'2\');
    });

    $("#DropDownList2").change(function () {
        bind1($("#DropDownList3"), $(this).val(), \'3\');
    });


</script>

jquery

using System;
using System.Web;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Text;

public class China : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        string pcode = context.Request["pcode"];
        System.Text.StringBuilder end = new StringBuilder();
        int count = 0;

        end.Append("[");
        using (mydbDataContext con = new mydbDataContext())
        {
            List<ChinaStates> clist = con.ChinaStates.Where(r => r.ParentAreaCode == pcode).ToList();

            foreach (ChinaStates c in clist)
            {
                if (count > 0)
                    end.Append(",");

                end.Append("{\\"code\\":\\"" + c.AreaCode + "\\",\\"name\\":\\"" + c.AreaName + "\\"}");
                count++;
            }
        }

        end.Append("]");
        context.Response.Write(end);
        context.Response.End();
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

China.ashx