ASP.NET AJAX

ASP.NET AJAX

AJAX

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

没有AJAX会怎么样？普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面。在youku看视频的过程中如果提交评论，页面就不会刷新，视频不会被打断。开发一个看效果：用<video  src="diaosi.mp4" autoplay controls></video>播放视频（只有支持html5的浏览器能播放），然后放一个评论功能，服务器只是存到一个文件中。

AJAX是一种进行页面局部异步刷新的技术。用AJAX向服务器发送请求和获得服务器返回的数据并且更新到界面中，不是整个页面刷新，而是在HTML页面中使用JavaScript创建XMLHTTPRequest（简称XHR）对象来向服务器发出请求以及获得返回的数据，在页面中由XMLHTTPRequest来发出Http请求和获得服务器的返回数据，这样页面就不会刷新了。 XMLHTTPRequest是AJAX的核心对象。局部：一小部分刷新，其他部分不刷新；异步：网络请求期间，浏览器不卡。

var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建XMLHTTP对象，考虑兼容性
            xmlhttp.open("POST", "AJAXTest.ashx?i=5&j=10", true); //“准备”向服务器的GetDate1.ashx发出Post请求（GET可能会有缓存问题）,Post请求浏览器一定不会缓存。这里还没有发出请求。true代表异步请求。
            xmlhttp.onreadystatechange = function ()
            {
                if (xmlhttp.readyState == 4) //readyState == 4 表示服务器返回完成数据了。之前可能会经历2（请求已发送，正在处理中）、3（响应中已有部分数据可用了，但是服务器还没有完成响应的生成）
                {
                    if (xmlhttp.status == 200) //如果状态码为200则是成功
                    {
                        alert(xmlhttp.responseText);
                    }
                    else
                    {
                        alert("AJAX服务器返回错误！");
                    }
                }
            }
//不要以为if (xmlhttp.readyState == 4) {在send之前执行！！！！
            xmlhttp.send(); //这时才开始发送请求
//发出请求后不等服务器返回数据，就继续向下执行，所以不会阻塞，界面就不卡了，这就是AJAX中“A”的含义“异步”。试着在ashx加一句Thread.Sleep(3000);

简单的ajax封装：

 function ajax(url,onsuccess,onfail)
        {
            var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
            xmlhttp.open("POST", url, true);
            xmlhttp.onreadystatechange = function ()
            {
                if (xmlhttp.readyState == 4)
                {
                    if (xmlhttp.status == 200)
                    {
                        onsuccess(xmlhttp.responseText);
                    }
                    else
                    {
                        onfail(xmlhttp.status);
                    }
                }
            }
            xmlhttp.send(); //这时才开始发送请求
        }

 Json

AJAX传递复杂数据如果自己进行格式定义的话会经历组装、解析的过程，因此AJAX中有一个事实上的数据传输标准JSon。Json（是一个标准，就像XML一样，Json规定了对象以什么样的格式保存为一个字符串）将复杂对象序列化为一个字符串，在浏览器端再将字符串反序列化为JavaScript可以读取的对象。Json被几乎所有语言支持。Json就是一个把对象（js、java、.net）表示为字符串的标准。

Json是什么，Json就是javascript对象或者数组格式的字符串,Http协议不能传递JavaScript对象，所以要转换为字符串进行传输。

 JavaScript对象（键值对） var person= {name:'rupeng',age:8};

 JavaScript数组：var names = ['rupeng','qq','taobao'];

 JavaScript对象数组：var persons = [{name:'rupeng',age:8}, {name:'qq',age:15}, {name:'taobao',age:10}];

 JavaScript对象关联：var p = {name:'yzk',child:{name:'timi',age:1}};

    <script type="text/javascript">

        var p1 = { name: 'rupeng', age: 8 };
        //alert(p1.name);
        var strs1 = ["rupeng", "baidu", "qq"];
        for (var i = 0; i < strs1.length; i++) {
            //alert(strs1[i]);
        }

        var persons = [{ name: 'rupeng', age: 8 }, { name: 'baidu', age: 15 }, { name: 'qq', age: 18 }];
        for (var i = 0; i < persons.length; i++) {
            var person = persons[i];
           // alert(person.name+"|"+person.age);
        }

        var dog = { name: 'xiaoquan', age: 3, master: { name: 'china', renkou: 13 } };
        //alert(dog.name);
        //alert(dog.master.renkou);

        /*
        var dog2 = { name: 'xiaoquan' };
        var p2 = { name: 'china', renkou: 13 };
        dog2.master = p2;*/

        //json的标准就是js中字典、数组的格式。
        var s = "{ name: 'rupeng', age: 8 }";//ajax从服务器中"{ name: 'rupeng', age: 8 }"这样一个字符串，怎么样取出name的值呢？首先要把这个字符串转换为JavaScript对象
       // alert(s);
        //alert(s.name);
        var p2 = eval("(" + s + ")");//p2就是一个对象了{ name: 'rupeng', age: 8 }
        //eval把一个json格式的字符串解析为一个js对象
        alert(p2.name);
        var s = "[{ name: 'rupeng', age: 8 }, { name: 'baidu', age: 15 }, { name: 'qq', age: 18 }]";
        var persons = eval("("+s+")");//eval()动态运行JavaScript
        for (var i = 0; i < persons.length; i++) {
            var person = persons[i];
            alert(person.name+"|"+person.age);
        }
    </script>

C#转换Json:

 int[] nums = new int[] {3,5,89};  
2             JavaScriptSerializer jss = new JavaScriptSerializer();
3             string json = jss.Serialize(nums);
4             context.Response.Write(json);

JQuery的AJAX封装

$.ajax({
                type: "post", url: "Ajax1.ashx",
                data: { i1: $("#txt1").val(), i2: $("#txt2").val() },
                success: function (data, txtStatus) {alert(data);},
                error: function () { alert("错误"); }
            });

 三种Json装换JavaScript的方法：

var nums = $.parseJSON(resTxt);//json字符串转换为javascript对象

$.ajax({
                type: "post", url: "JQueryAJAXTest1.ashx",
                dataType:"json",
                data: { i1: 10, i2: 3 },
                success: function (nums) {
                    //如果把dataType设置为"json"，那么success的第一个参数就是json转换后的JavaScript对象，不需要再手动parseJson
                    for (var i = 0; i < nums.length; i++) {
                        alert(nums[i]);
                    }
                },
                error: function () {
                    alert("ajax出错");
                }

context.Response.ContentType = "application/json";//C#

 JQuery AJAX其他

表单序列化（*）：

如果表单元素放到form中，并且按照http的标准（有name等）设置，那么$("#form1").serializeArray()就可以得到一个键值对数组，把这个值赋值给$.ajax的data属性。

全局事件：

1）全局Loading的显示

$("body").bind("ajaxSend", function () {

               //显示Loading

            }).bind("ajaxComplete", function () {

                //隐藏loading

            });

2）、 ajaxError  全局错误处理