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);
                });
            });