让页面无刷新的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}];