ajax異步加載

AJAX：

　　即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創建交互式網頁應用的網頁開發技術。

　　AJAX可以跨語言傳遞數據，所需文件類型是一般處理程序（數據接口）：ashx

數據交換格式：

　　xml：

　　　　結構不清晰

　　　　代碼量比較大

　　　　查找起來比較費事

　　　　非面向對象結構
　　json：

　　　　結構清晰

　　　　代碼量相對較小

　　　　面向對象的處理解析方式，查找數據很簡單

json的格式：

　　鍵值對

　　　　{"key1":"value","key2":"value"}

　　多個對象的json

　　　　[{"key1":"value","key2":"value"},{"key1":"value","key2":"value"},{"key1":"value","key2":"value"}]

AJAX的使用：

　　JS部分的固定格式：（需引用jquery）

 

$.ajax({
            url: "ajax/bbb.ashx", //要將此次請求提交到哪個服務端去
            data: { "zhangke": c }, //給服務端帶的數據，可以沒有，也可以多個
            type: "post", //傳遞的方式
            dataType: "json", //數據傳遞的格式
            success: function (aaa) {
                document.getElementById("Label1").innerHTML = aaa.lmz;
                if (aaa.xc == "true") {
                    document.getElementById("Label1").style.color = "green";
                }
                else {
                    document.getElementById("Label1").style.color = "red";
                }
            }
        });

 

 $.ajax({
            url: "", //服務器路徑
            data: { }, //傳遞的參數，可為空，可多個
            type: "post", //傳遞參數的方式，可POST可GET，一般用POST
            dataType: "json", //數據傳遞的格式，有Json和xml兩種
            success: function (data) { //成功返回數據執行這里，排第2
                
            },
            beforeSend: function () { //一觸發ajax就執行，無任何延遲，排第1
               
            },
            complete: function () { //所有的方法都執行完畢后再來執行這里，排最后（不管成功失敗都會執行）
                
            },
            error: function () { //服務器路徑錯誤，或是服務器內部錯誤，走這里報錯，此位置與success只會走一個
            
            }
        });

 

　　后台部分：

public void ProcessRequest (HttpContext context) {

        string s = context.Request["zhangke"];

        string end = "{\"lmz\":\"恭喜！用戶名可用！\",\"xc\":\"true\"}";
        
        if (s == "zhangsan" || s == "lisi")
        {
            end = "{\"lmz\":\"用戶名已被占用！\",\"xc\":\"false\"}";
        }

        context.Response.Write(end);
        context.Response.End();
        
    }

　　注意：json的格式一定不能錯，中間的許多雙引號需要轉義符，如果容易弄錯，個人方法是可以先用個其他符號代替，比如單引號，然后對字符串進行操作把里面的所有單引號替換為雙引號

AJAX擴展：（加載多行數據）

　　關鍵部分是后台中需要給JS傳遞過去多個json對象，以及JS中如何把多個對象的數據加載到表格中

　　首先，寫好查詢方法，查詢出需要的數據，返回一個泛型集合，然后用循環拼接出json，特別要注意逗號的拼接

 

string json = "[";

        List<Users> ulist = new UsersData().Select(c, n);

        int count = 0;
        foreach (Users u in ulist)
        {
            if (count > 0)
            {
                json += ",";
            }

            json += "{\"username\":\"" + u.UserName + "\",\"password\":\"" + u.PassWord + "\",\"nickname\":\"" + u.NickName + "\",\"sex\":\"" + (u.Sex ? "男" : "女") + "\",\"birthday\":\"" + u.Birthday.ToString("yyyy年MM月dd日") + "\",\"nation\":\"" + u.Nation + "\",\"class\":\"" + u.Class + "\",\"age\":\"" + u.Age + "\"}";
            count++;
        }

        json += "]";

        context.Response.Write(json);
        context.Response.End();

 

　　然后在界面的表格中，我們需要先寫一個tbody標簽並給一個id，創建一個變量，把從后台接收過來的多個json對象中的數據進行拼接加工，把這個變量拼接成表格中一段完整的HTML代碼，然后使用innerHTML直接添加到tbody中

$.ajax({
        url: "ajax/Load.ashx",
        data: { "count": count, "number": number },
        type: "post",
        dataType: "json",
        success: function (data) {
            document.getElementById("tbody").innerHTML = "";
            for (i in data) {
                var end = "<tr>";
                end += "<td>" + data[i].username + "</td>";
                end += "<td>" + data[i].password + "</td>";
                end += "<td>" + data[i].nickname + "</td>";
                end += "<td>" + data[i].sex + "</td>";
                end += "<td>" + data[i].age + "</td>";
                end += "<td>" + data[i].birthday + "</td>";
                end += "<td>" + data[i].nation + "</td>";
                end += "<td>" + data[i].class + "</td>";
                end += "</tr>";

                document.getElementById("tbody").innerHTML += end;
            }
            document.getElementById("sp-number").innerHTML = number;
        }
    });