ajax請求ashx數據

1、Get方式

• 參數在open中通過querystring傳遞

                var xhr;
                if (window.XMLHttpRequest) {//ie8及以上版本、ff、chrom
                    xhr = new XMLHttpRequest();
                }
                else {//ie6及以下版本
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                //設定請求對象和后台哪個頁面進行交互
                xhr.open("get", "Handler1.ashx?aaa=1", true);
                //發送請求
                xhr.send();
                //后台返回數據后，會調用此方法（回調函數）
                xhr.onreadystatechange = function (data) {
                    if (xhr.readyState == 4) {
                        alert(xhr.responseText);
                    }
                }

 2、post方式

• 參數在send中傳遞
• 需要設置頭部信息 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

                var xhr;
                if (window.XMLHttpRequest) {//ie8及以上版本、ff、chrom
                    xhr = new XMLHttpRequest();
                }
                else {//ie6及以下版本
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                //設定請求對象和后台哪個頁面進行交互
                xhr.open("post", "Handler1.ashx", true);
                //post請求要設置一下頭部信息
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                //發送請求
                //post通過此處來傳遞參數
                xhr.send("aaa=1&bbb=2");
                //后台返回數據后，會調用此方法（回調函數）
                xhr.onreadystatechange = function (data) {
                    if (xhr.readyState == 4) {
                        alert(xhr.responseText);
                    }
                }

 3、請求JSON

• 后台 Handler1.ashx

1）定義類

    public class class_Test
    {
        public string id { get; set; }
        public string name { get; set; }
    }

2）構建JSON

方法一：格式字符串（注意：鍵值對一定全為字符串才可以被前台$.parseJSON方法接收）

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            List<class_Test> list = new List<class_Test>() { 
            new class_Test(){ id="1", name="張三"},
            new class_Test(){ id="2",name="李四"},
            new class_Test(){ id="3",name="王五"},
            new class_Test(){ id="4",name="趙六"}
            };
            //拼接JSON格式字符串
            StringBuilder sb = new StringBuilder();
            sb.Append("[");
            foreach (class_Test i in list)
            {
                sb.Append("{");
                //鍵值對一定要全部轉義成字符串，否則前台$.parseJSON無法獲取數據
                sb.AppendFormat("\"id\":\"{0}\",\"name\":\"{1}\"", i.id, i.name);
                sb.Append("},");
            }
            string str = sb.ToString().TrimEnd(',');
            str += "]";
            //輸出
            context.Response.Write(str);
        }

方法二：添加System.Web.Extensions引用，用JavascriptSerializer處理

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            List<class_Test> list = new List<class_Test>() { 
            new class_Test(){ id="1", name="張三"},
            new class_Test(){ id="2",name="李四"},
            new class_Test(){ id="3",name="王五"},
            new class_Test(){ id="4",name="趙六"}
            };

            //將對象序列化成json格式的另外一種方法
            JavaScriptSerializer javascriptSerializer = new JavaScriptSerializer();
            string str=javascriptSerializer.Serialize(list);
            //輸出
            context.Response.Write(str);
        }

 

• 前台（注意代碼最后兩行，將返回的數據轉換為JSON格式，就能用 變量[0].xx 獲取所需數據了）

                var xhr;
                if (window.XMLHttpRequest) {//ie8及以上版本、ff、chrom
                    xhr = new XMLHttpRequest();
                }
                else {//ie6及以下版本
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                //設定請求對象和后台哪個頁面進行交互
                xhr.open("post", "Handler1.ashx", true);
                //post請求要設置一下頭部信息
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                //發送請求
                //post通過此處來傳遞參數
                xhr.send("aaa=1&bbb=2");
                //后台返回數據后，會調用此方法（回調函數）
                xhr.onreadystatechange = function (data) {
                    if (xhr.readyState == 4) {
                        //將后台的數據返回，轉換為JSON
                        var json = $.parseJSON(xhr.responseText);
                        alert(json[0].name);
                    }
                }

 用jquery前台返回ashx數值的幾種方法

     用下列方法時注意：

           ① $.getJSON、$.get、$.post、$.ajax、$("#控件").load 傳參可以用{aaa:1,bbb:2}，也可以用"aaa=1&bbb=2"
           ② $.get、$.post、$.ajax返回json格式方法：

                            1）設定dataType為"json"

                            2）用$.parseJSON(數據)

           ③對於$("#控件").load（地址,參數,回調函數）

                            1）因為沒有dataType參數，所以只能用$.parseJSON(數據)輸出JSON格式

                            2）如果參數為"aaa=1&bbb=2"形式，則為get請求；如果為{aaa:1,bbb:2}形式，則為post請求

            //$.getJSON(地址,參數,回調函數)
            $('#getJSON').click(function () {
                $.getJSON('Handler1.ashx', { aaa: 1, bbb: 2 }, function (data) {
                    alert(data[0].name);
                });
            });
            //$.get(地址,參數,回調函數,返回格式)
            $('#get').click(function () {
                $.get('Handler1.ashx', { aaa: 1, bbb: 2 }, function (data) {
                    alert(data[0].name);
                }, 'json');
            });
            //$.post(地址,參數,回調函數,返回格式)
            $('#post').click(function () {
                $.post(
                    'Handler1.ashx', { aaa: 1, bbb: 2 }, function (data) {
                        alert(data[0].name);
                    }, 'json');
            });
            //$.ajax({參數:值})
            $('#ajax').click(function () {
                $.ajax({
                    async: false,//是否異步
                    url: 'Handler1.ashx',
                    data: { aaa: 1, bbb: 2 },
                    type: 'post',//post方法
                    dataType: 'json',//返回json格式數據
                    success: function (data) {
                        alert(data[0].name);
                    },
                    error: function () { alert('錯誤'); }
                });
            });
            //$("#控件").load(地址,參數,回調函數);
            $('#load').click(function () {
                $('#test').load('Handler1.ashx', { aaa: 1, bbb: 2 }, function (data) {
                    alert($.parseJSON(data)[0].name);
                });
            });