AJAX 是一種網頁數據異步加載技術

通過在後臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

一、Json

註意Json裏面不可出現單引號，要用雙引號轉義。

xml --- 可擴展的標記語言。

Json是一種跨語言的數據傳遞格式

Json對象格式："{"key1":"value1","key2":"value2","key3":"value3"}"

註意：最後一個key：value後邊不能加逗號

Json數組格式："[{},{},{}]"

註意：數組格式最後一個Json對象後邊也不能加逗號。每一個{}都是一個Json對象

二、ashx 一般處理程序

只有後臺部分，用於數據處理。

只需要操作ProcessRequst這個方法裏面的內容，如需引用命名空間，則在最頂部引用，其他內容不需要操作。

引Linq命名空間 using System.Linq;

引泛型集合命名空間 Using System.Collections.Generic;

引用StringBuilder的命名空間 Using System.Text;

所有的內置對象在ashx裏都要通過context來點出來。

獲取Json中傳來的數據

string s =context.Requst["key"];

將返還數據拼成Json結構:

1、Json對象

string end="{\"has\":\"false\"}";

2、Json數組

StringBuilder str = new StringBuilder();

str.Append("[");

str.Append("{\"key1\":\"value1\",\"key2\":\"value2\",\"key3\":\"value3\"}");

str.Append("]");

將要返回的Json數據返回出去

context.Response.Write(end); 或者 context.Response.Write(str);

context.Response.End();

三、Ajax基本結構 （前臺Js部分）

$.ajax({

url:"Insert.ashx", 要提交到的服務端的相對路徑。

type:"post",

data:{"key":"value","key":"value","key":"value"}, key與服務端接受的key一致。

dataType:"json",

success:function(msg){ 處理完畢的回調。()內一般寫data或者msg，代表返還的Json數據對象，

alert(msg.has); 通過這個對象可以點出對象對應的屬性獲取對應的值。

}

});

<script type="text/javascript">

    $("#txt1").keyup(function () {

        var s = $(this).val();    //取文本框的值

        if (s.length < 6) {

            $("#txt1_msg").text("用戶名不可以小於6位！");

            return;    //當文本框的值不夠6位時，不進入AJAX
        }

        $.ajax({
            url: "Handler.ashx",
            data: { "uname": s },   //提交的數據，（k:v） k 與例1對應
            type: "post",
            dataType: "json",
            success: function (msg) {
                if (msg.has == ‘false‘) {
                    $("#txt1_msg").text("恭喜！用戶名可用！");
                    $("#txt1_msg").css(‘color‘,‘green‘);
                }
                else {
                    $("#txt1_msg").text("用戶名已被占用！");
                    $("#txt1_msg").css(‘color‘, ‘red‘);
                }
            }
        });

    });

解析Json數組來展示數據：

function DataLoad() {
        $.ajax({
            url: "LoadData.ashx",
            data: {},
            type: "post",
            dataType: "json",
            success: function (msg) {
                //先清空<tbody></tbody>裏面的html代碼
                $("#tbody1").empty();
                //循環創建行數據
                for (var i = 0; i < msg.length; i++) {
                    var str = "<tr style=\"background-color: white;\">";
                    str += "<td>" + msg[i].ids + "</td>";
                    str += "<td>" + msg[i].username + "</td>";
                    str += "<td>" + msg[i].password + "</td>";
                    str += "<td>" + msg[i].nickname + "</td>";
                    str += "<td>" + msg[i].sex + "</td>";
                    str += "<td>" + msg[i].birthday + "</td>";
                    str += "<td>" + msg[i].nation + "</td>";
                    str += "<td><input type=\"button\" class=\"btn_update\" name=\"" + msg[i].ids + "\" onclick=\"update(" + msg[i].ids + ")\" value=\"修改\"/>&nbsp;&nbsp;<input type=\"button\" name=\"" + msg[i].ids + "\" onclick=\"deletes(" + msg[i].ids + ")\" class=\"btn_delete\" value=\"刪除\"/></td>";
                    str += "</tr>";

                    //將創建的行數據追加到<tbody></tbody>裏
                    $("#tbody1").append(str);
                }
            }

        });
    }

【2017-06-05】Jquery.ajax