标签：
Ajax全称为Asynchronous Javascript and XML。一般用于页面数据交互响应，最大的好处是响应时无需刷新页面。
Ajax的优点：
1、不需要插件的支持。用户只需允许javascript在浏览器上执行。
2、强大的用户体验。这是ajax最大的优点，用户能在不刷新页面的情况下更新数据，使得Web应用程序能更为迅速地回应用户的操作。
3、提高Web程序的性能。传统模式中，数据提交是以表单form来实现的，数据获取是靠刷新全页面的内容。而Ajax模式只是通y过XMLHttpRequest对象向服务器端提交数据，即按需发送。
4、减轻服务器和带宽的负担。Ajax的工作原理相当于在客户端和服务器端之间多了一个中间层，使用户操作与服务器响应异步化。它在客户端创建一个Ajax引擎，把传统方式下的一些服务器负担的工作转移到客户端，减轻服务器和带宽的负担。
Ajax的不足：
1、浏览器对XMLHttpRequest对象的支持度不足。IE5及以后的版本才支持XMLHttpRequest对象。
2、破坏浏览器的前进、后退按钮。在Ajax中“前进”、“后退”按钮的功能都会失效，虽然可以通过一定方法（锚点）使用户可以使用“前进”、“后退”按钮，但相比传统方法还是麻烦许多。
3、对搜索引擎的支持度不足。
Ajax的核心就是XMLHttpRequest对象。
传统javascript编写Ajax的例子：
先编写html文件：
<input type = "button" value = "AjaxSubmit" onclick = "Ajax();"/> <div id = "resText"></div>
然后编写函数
function Ajax() { var xmlHttpReq = null; if(window.ActiveXObject) { //IE5、IE6是以ActiveXObject的方式 //引入XMLHttpRequest对象的 xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { //除IE5、IE6以外的浏览器 //XMLHttpRequest是window的子对象 xmlHttpReq = new XMLHttpRequest(); //实例化XMLHttpRequest对象 } xmlHttpReq.open("GET",url,true); //调用open方法并采用异步方式 xmlHttpReq.onreadystatechange = RequestCallBack; //设置回调函数 xmlHttpReq.send(null); //get方法所以可以发送null } function RequestCallBack() { //一旦readystate改变则调用该函数 if(xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) { //当请求已经加载(readystate==4)并且响应成功(status==200) document.getElementById(‘resText‘).innerHTML = xmlHttpReq.responseText; } }
jQuery中的Ajax
1、load()方法
load方法一般结构：
load(url,data,callback);
| 参数名称 | 类型 | 说明 |
| url | String | 请求HTTP页面的URL地址 |
| data | Object | 发送至服务器key/value的数据 |
| callback | Function | 请求完成时的回调函数，无论请求成功还是失败 |
一般使用方法：
// 当send按钮点击时将test.html的内容加载到id为resText的元素中 (document).ready(function() { $(‘#send‘).click = function() { $(‘#resText‘).load("test.html"); } }); // 当send按钮点击时将test.html里class为parent的内容加载到id为resText的元素中 (document).ready(function() { $(‘#send‘).click = function() { $(‘#resText‘).load("test.html .parent"); } }); // 无参数传递时是GET方式 $(‘#resText‘).load("test.html",function() { //..... }); //有参数传递时是POST方式 $(‘#resText‘).load("test.html",{name: "kkk", age: "20"},function(){ //..... }); // 回调函数 $(‘#resText‘).load("test.html",function(responseText, textStatus, XMLHttpRequest){ // responseText 请求返回的内容 // textStatus 请求状态：success、error、notmodified、timeout // XMLHttpRequest XMLHttpRequest对象 });
标签：
原文地址：http://www.cnblogs.com/RRirring/p/5770563.html
