break: normal; margin: 5px 0px; letter-spacing: normal; line-height: 1.5; background-color: #ffffff; text-indent: 0px; -webkit-text-stroke-width: 0px;" align="left">1.如果没有AJAX
普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面,如果没有ajax,在youku看视频的过程中,就没法提交评论,页面会刷新,视频会被打断。
2.说说AJAX
AJAX是一种进行页面局部异步刷新的技术。用AJAX向服务器发送请求和获得服务器返回的数据并且更新到界面中,不是整个页面刷新,而是在HTML页面中使用JavaScript创建XMLHTTPRequest(简称XHR)对象来向服务器发出请求以及获得返回的数据,在页面中由XMLHTTPRequest来发出Http请求和获得服务器的返回数据,这样页面就不会刷新了。 XMLHTTPRequest是AJAX的核心对象。
局部:一小部分刷新,其他部分不刷新;
异步:网络请求期间,浏览器不卡。
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(){ //请求失败时处理的函数。。。 })
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.转换
class="Apple-converted-space"> 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"} 通过反编译看到其实还是生成一个类。
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对象,不用手动解析了。