让页面无刷新的AJAX、ASP.NET核心知识（9）

AJAX简介

1.如果没有AJAX

普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面，如果没有ajax，在youku看视频的过程中，就没法提交评论，页面会刷新，视频会被打断。

2.说说AJAX

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

局部：一小部分刷新，其他部分不刷新；

异步：网络请求期间，浏览器不卡。

XMLHTTPRequest

1.使用 XMLHTTPRequest

//  创建XMLHTTP对象，考虑兼容性
            var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new  ActiveXObject('Microsoft.XMLHTTP');
            //“准备”向服务器的GetDate1.ashx发出Post请求（GET可能会有缓存问题）
            // Post请求浏览器一定不会缓存。这里还没有发出请求。true代表异步请求。
            xmlhttp.open("POST", "AJAXTest.ashx?i=5&j=10", true);
            xmlhttp.onreadystatechange = function ()
            {
                // readyState == 4 表示服务器返回完成数据了。之前可能会经历
                // 2（请求已发送，正在处理中）、
                // 3（响应中已有部分数据可用了，但是服务器还没有完成响应的生成）
                if (xmlhttp.readyState == 4) 

                {
                    //如果状态码为200则是成功

                    if (xmlhttp.status == 200)

                    {
                        alert(xmlhttp.responseText);
                    }
                    else
                    {
                        alert("AJAX服务器返回错误！");
                    }
                }
            }

         //不要以为if (xmlhttp.readyState == 4) {在send之前执行！！！！
         xmlhttp.send(); //这时才开始发送请求
         //发出请求后不等服务器返回数据，就继续向下执行，所以不会阻塞，界面就不卡了，这就是AJAX中“A”的含义“异步”。试着在ashx加一句Thread.Sleep(3000);

2.简单封装一下

// url：请求的URL 、
//onsuccess：请求成功后的处理、
//onfail：请求失败后的处理
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(); //这时才开始发送请求
        }

之后调用Ajax的时候，就可以

ajax("test.ashx",function(){
//请求返回成功时处理的函数。。。
},
function(){
//请求失败时处理的函数。。。
})

Json

1.什么是Json？

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

2.格式

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

以上这些都可以转化成Json。

3.转换

  1）如何把json字符串转换为js对象：

var obj = eval("a("+data+")")。举例：普通对象、数组、对象数组、多对象关联。

2）C#中将.Net对象序列化为Json字符串的方法：

JavaScriptSerializer().Serialize(p)。.Net对象→json字符串→JavaScript对象。

JavaScriptSerializer在System.Web.Extensions.dll中。Json.Net

3）C#中的匿名类： var p = new { Id=5,Name="rupeng"}  通过反编译看到其实还是生成一个类。

JQuery AJAX

1.$.ajax

//Jquery封装简化了AJAX，有$.get、$.post等不同效果的方法，这里介绍最常使用的$.ajax（可以获得请求失败的消息）。

$.ajax({

type: "post",

url: "Ajax1.ashx",

data: { i1: $("#txt1").val(), i2: $("#txt2").val() },

success: function(data, txtStatus) {alert(data);},

error: function () { alert("错误"); }

});

//ajax方法的参数就是一个字典，

//最好设定post提交

//data为提交的报文体

//success为请求成功的处理事件

//error为请求通讯失败的处理事件（服务器错误、404等）

2.JQuery AJAX Json处理

1）可以使用$.parseJSON()把json字符串解析为JavaScript对象，比eval更安全

2）如果设定ajax请求的ContentType为"application/json" 或者ajax请求中设定dataType: "json"，那么success的第一个参数就是JavaScript对象，不用手动解析了。