异步、Ajax

★除了解析Json，还可以XML

注意：下文中的涉及HTTP方法的参数，例如，GET，POST根据HTTP标准，须保持大写，否则一些浏览器（例如火狐）可能无法处理请求

★一、原始JS写法：
步骤：
1、首先创建一个XMLHttpRequest对象
2、然后利用该对象向服务器发送请求"（在此时可以通过参数传递的方式向服务器端发送数据），读取服务器端的文件（xml、asp、php等）
3、最后根据读取的文件内容来更新当前页面的部分区域的内容
例：
$(function () {
            $('input').click(function () {
                var xhr;
                if (XMLHttpRequest) { // 1、初始化XMLHttpRequest对象
                    xhr = new XMLHttpRequest(); // Firefox等现代浏览器中的XMLHttpRequest对象创建
                } else {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP"); // IE老版本中的XMLHttpRequest对象创建
                }
                //2、三个参数分别是，请求方式，请求地址(可以接上QueryString的数据)，是否异步请求
                xhr.open("get", "AjaxHandler2.ashx", true);
                xhr.send();//发送


                //3、回调函数，响应状态改变时调用
                xhr.onreadystatechange = function (data) {
                    if (xhr.readyState == 4 && xhr.status == 200) {//接收完毕
                        alert(xhr.responseText);//响应的文本
                    }
                };
            });
        });



 /*
                post请求方式
                xhr.open("post", "AjaxHandler2.ashx", true);
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//需设置请求头，即从因特网邮件扩展类型引申来的MIME类型设定
                xhr.send("b=100&a=200");//发送时写参数
                */


★XMLHttpRequest请求对象的readyState属性：
0---刚new完，未初始化
1---已open
2---已send
3---正在接受数据
4---接收完成
status属性---响应状态码，200成功，404NOT FOUND
statusText属性与status参数代表的含义相同，只是该参数使用字符串而不是数字来表示当前状态。,OK,NOT FOUND






★响应的内容
XMLHttpRequest对象有两个属性来存储响应的内容（应该就是读取的目标文件的内容）：responseText和responseXML


1. responseText属性：目前为止从服务器端接收到的响应体（不包括头部），如果还没有接收到数据（例如readyState<3），则是一个空字符串。


注：如果响应包含了为响应体指定编码的头部，则使用该编码。否则，使用Unicode UTF-8。


2. responseXML属性：对请求的响应，解析为XML并作为DOM对象返回。这意味着取数据可以像取HTML标签中数据一样操作




★如果要返回Json格式数据（JS原始写法）
    这里说一句，在ASP.NET一般处理程序中，一般将查询的数据，转化为Contoller的数据对象，再用JavaScriptSerializer序列化为Json字符串（或手动拼接字符串），发往前台解析再展示在页面上
    但如果存在类互相引用JavaScriptSerializer会序列出错，无限递归


xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200)
                        var json = $.parseJSON(xhr.responseText);//转为Json对象或数组
                    alert(json[0].name);


                };


★二、Jquery写法

//URL，参数，回调函数，状态改变时调用，此处data就是json对象，如果返回的不是json就为空，固定是get方式

//另外，此方法和getScript一样可以解决跨域问题，因为其根本都是Jquery封装的Jsonp的操作

 1、$.getJSON("AjaxHandler2.ashx", "a=0&b=2", function (data) { 
                  alert(data[0].name);
                });


 2、$.get("AjaxHandler2.ashx", "a=0", function (data) {
                    alert(data);
                });
 3、$.post("AjaxHandler2.ashx", "a=0", function (data) {
                    alert(data);
                });
2和3如果需要返回json
    $.get("AjaxHandler2.ashx", "a=0", function (data) {//data默认是text型数据对象，如果设置json就返回json对像
                    alert(data[0].name);
                },"json");


以上3种实际都是对以下写法的简化


★4、、$.AJAX写法


$(function () {
            $('input').click(function () {
                $.ajax({
                    type: "get", //使用get提交
                    url: "AjaxHandler2.ashx", 
                    data: { a: 0 }, 
                    dataType: "json",
                    success: function (mesg) { 


                        alert(mesg);
                    },
                    error: function (msg) { alert('出错'); }
                });
            });
        });