标签：
AJAX是一种进行页面布局异步刷新的技术。
用AJAX向服务器发送请求和获得服务器返回的数据并且更新到界面中，不是整个页面刷新，在HTML页面中使用JavaScript创建XMLHTTPRequest（简称XHR）对象来向服务器发出请以及获得返回的数据，在HTML页面中使用JavaScript创建XMLHTTPRequest（简称XHR）对象来向服务器发出请求以及获得返回的数据，在页面中由XMLHTTPRequest来发出Http请求和获得服务器的返回数据，这样页面就不会刷新了。 XMLHTTPRequest是AJAX的核心对象。局部：一小部分刷新，其他部分不刷新；异步：网络请求期间，浏览器不卡。
XMLHttpRequest对象是ajax基础
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
<script type="text/javascript"> $(function () { $(‘#btnOK‘).click(function () { var i1 = $(‘#i1‘).val(); var i2 = $(‘#i2‘).val(); var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(‘Microsoft.XMLHTTP‘);//创建XMLHTTP对象，考虑兼容性 //XMLHttpRequest 对象的 open()方法“准备”向服务器的AddTest1.ashx发出Post请求（GET可能会有缓存问题）,Post请求浏览器一定不会缓存。这里还没有发出请求。true代表异步请求。 xhr.open(‘POST‘, ‘AddTest1.ashx?i1=‘ + i1 + ‘&i2=‘ + i2, true); xhr.onreadystatechange = function () {//每当 readyState 属性改变时，就会调用onreadystatechange。 if (xhr.readyState == 4 && xhr.state==200) {//readyState == 4 表示服务器返回完成数据了。之前可能会经历2（请求已发送，正在处理中）、3（响应中已有部分数据可用了，但是服务器还没有完成响应的生成） $(‘#result‘).text(xhr.responseText);//获得字符串形式的响应数据。 } else { aler("服务器出错" + xhr.status); } }; xhr.send();//发送请求，不要以为if (xmlhttp.readyState == 4) 在send之前执行！！！！ //发出请求后不等服务器返回数据，就继续向下执行，所以不会阻塞，界面就不卡了，这就是AJAX中“A”的含义“异步”。试着在ashx加一句Thread.Sleep(3000); }); }); </script>
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
否则在服务器端是无法通过context.Request["fname"]获得值的。
自己封装一个ajax（seanjs.js文件）:
function ajax(url, onsuccess, onfail) { var xhr = new XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(‘Microsoft XMLHTTP‘); xhr.open(‘POST‘, url, true) xhr.onreadystatechange = function (resTxt) { if (xhr.readyState == 4) { if (xhr.status == 200) { onsuccess(xhr.responseText); } else { if (onfail) { onfail(xhr.status) } } } }; xhr.send(); }
看下怎么调用：
<script type="text/javascript"> $(function () { $(‘#username‘).blur(function () { var username = $(‘#username‘).val(); ajax(‘CheckName.ashx?username=‘ + username, function (resTxt) {//resTxt接收从 if (resTxt==‘ok‘) { $("#msg").text("此用户名可用"); } else { var strs = resTxt.split(‘|‘); if (strs[0]=="Error") { $("#msg").text(strs[1]); } } }, function (status) { alert(‘出错！‘); }); }); }); </script>
JQueryAJAX
编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，JQuery封装简化了AJAX，有$.get、$.post等不同效果的方法，这里介绍最常使用的$.ajax（可以获得请求失败的消息）。
看个例子：
<script type="text/javascript"> $(function () { $(function () { $.ajax({ type: "post", url: "JQueryAJAXTest1.ashx", data: { i1: 2, i2: 5 }, success: function(resText){ alert(resText); }, error: function () { alert("ajax出错"); } }); }); }); </script>
Json
JSON：JavaScript 对象表示法（JavaScript Object Notation）。
AJAX传递复杂数据如果自己进行格式定义的话会经历组装、解析的过程，因此AJAX中有一个事实上的数据传输标准JSon。
Json（是一个标准，就像XML一样，Json规定了对象以什么样的格式保存为一个字符串）将复杂对象序列化为一个字符串，在浏览器端再将字符串反序列化为JavaScript可以读取的对象。Json被几乎所有语言支持。Json就是一个把对象（js、java、.net）表示为字符串的标准。
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:‘Sean‘,age:18,master:{name:‘Max‘,age:3}};
Json就是将javascriptjavascript中对象、数组的字符串格式：
var json=‘{name:‘Sean‘,age:18,master:{name:‘Max‘,age:3}}‘;
那么怎么取里面的值呢？还得转换成javascript对象：
var json = "{name:‘Sean‘,age:18,master:{name:‘Max‘,age:3}}"; var js = eval(‘(‘ + json + ‘)‘); alert(js.name + js.master.name);
如何把json字符串转换为javascript对象：
eval() 函数可编译并执行任何 JavaScript 代码。这隐藏了一个潜在的安全问题。
jquery提供了jQuery.parseJSON，新版浏览器都原生支持，不支持的引用第三方库json2.js也就可以了
C#中将.Net对象序列化为Json字符串的方法：JavaScriptSerializer().Serialize(p)。.Net对象→json字符串→JavaScript对象。
JavaScriptSerializer在System.Web.Extensions.dll中。Json.Net
context.Response.ContentType = "text/plain"; string[] name = {"Jackey","Sean","Tom"}; JavaScriptSerializer jss = new JavaScriptSerializer(); var json=jss.Serialize(name); context.Response.Write(json);
在html页面将.net对象序列化的Json字符串，转换为javascript的三种方法：
使用jquery提供的$.parseJSON()方法；（不推荐，麻烦！）
$.ajax({
type: "post", url: "JsonTest2.ashx",
success: function (resText) {
var str = $.parseJSON(resText);
for (var i = 0; i < str.length; i++) {
alert(str[i]);
}
},
error: function () {
alert("出错了");
}
});
添加dataType: "json"，success自动将服务器返回的Json转换为javascript对象
$.ajax({ type: "post", url: "JsonTest2.ashx", dataType: "json", success: function (str) { for (var i = 0; i < str.length; i++) { alert(str[i]); }
}, error: function () { alert("出错了"); } });
在服务器端ashx文件中设置
context.Response.ContentType = "application/json";
表单序列化，serializeArray()
如果表单元素放到form中，并且按照http的标准（有name等）设置，那么$("#form1").serializeArray()就可以得到一个键值对数组，把这个值赋值给$.ajax的data属性。
全局事件：
1）全局Loading的显示
$("body").bind("ajaxSend", function () {
//显示Loading
}).bind("ajaxComplete", function () {
//隐藏loading
});
2）、 ajaxError 全局错误处理
$(function () { $("body").bind("ajaxSend", function () { $("#imgLoading").show(); }).bind("ajaxComplete", function () { $("#imgLoading").hide(); }).bind("error", function () { alert("请求出错"); }); $("#btnOK").click(function () { var i1 = $("#i1").val(); var i2 = $("#i2").val(); $.ajax({ type: "post", url: "AddTest1.ashx", data: { i1: i1, i2: i2 }, success: function (data) { $("#result").text(data); }} }); }); });
标签：
原文地址：http://www.cnblogs.com/sean100/p/4537370.html
