jQuery与AJAX
1、Ajax原理与XMLHttpRequest对象
Ajax使用XMLHttpRequest对象发送异步请求得到服务器的响应。Ajax是几种技术的
合体，每种技术都有其独特之处，合在一起就形成了一个功能强大的新技术。
XMLHttpRequest虽然名字中含有XML,但实际上是针对JavaScript的普通HTTP客户端
是由JavaScript创建的一个对象
XMLHttpRequest对象方法
方法 描述
abort() 停止当前请求
getAllResponseHeaders() 将HTTP请求的所有响应首部都作为键值对返回
getReponseHeader("headerLabel") 返回指定首部的字符串值
open("method","URL",[,asyncFlag 建立对服务器的调用，method参数可以使GET、POST或PUT，URL可以是相对或者绝对的
[,"userName"[,"password"]]]) asyncFlag表示是否异步标记，userName表示用户名，password表示密码
sent(content) 向服务器发送请求
setRequestHeader("label","value") 把指定首部设置为所提供的值，在调用该方法之前必须调用Open方法。
XMLHttpRequest对象属性
属性 描述
onreadystatechange 状态改变的事件触发器，每个状态改变都会触发这个事件触发器
readyState 对象状态：0表示为初始化；1表示正在加载；2表示已经加载；3表示交互中；4表示完成
reponseText 服务器的响应，字符串
reponseXML 服务器的响应，XML，该对象可以解析为一个DOM对象
status 服务器返回的HTTP状态码
status HTTP状态码的相应文本
在实际应用中为了兼容多种不同版本的浏览器，一般将创建XMLHttpRequest类的方法写成如下形式：
var xmlHttp=false; //开始初始化XMLHttpRequest对象 if(window.XMLHttpRequest){ xmlHttp=new XMLHttpRequest(); //Mozilla (IE7+)浏览器 if(xmlHttp.overrideMimeType){ //设置Mine类型 xmlHttp.overrideMimeType('text/xml'); } }else if(window.ActiveXObject){ try{ xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); //IE(7以下版本) }catch(e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ xmlHttp=false; } }
2、jQuery中的Ajax
jQuery提供了一些针对Ajax的API函数，是根据日常开发的需要而封装的一些快捷操作
如load()、ajax()、get()、post()等
在支持AJAX的众多API中，最常用的就是load()、get()和post()函数
jQuery的AJAX的工具封装有三个层次
getScript、getJSON
load、get、post
ajax
load(url,[data],[callback]) 载入远程HTML文件代码并插入到DOM中
这个方法默认使用GET方式传递，当[data]中有数据传递的时候会自动转化为POST方法
调用方式：
$("#result").load("test.html", function(responseText, textStatus, XMLHttpRequest){
//请求返回的内容
$("#display").append("<b>responseText:</b>" + responseText);
//请求状态：success，error
$("#display").append("<br/><b>textStatus:</b>" + textStatus);
//XMLHttpRequest对象
$("#display").append("<br/><b>XMLHttpRequest:</b>" + XMLHttpRequest);
}
);
textStatus为success，表示Ajax请求成功。
get(url,[data],[callback],[type]) 使用GET方式来进行AJAX异步请求
post(url,[data],[callback],[type]) 使用POST方式来进行AJAX异步请求
有个问题是能返回状态，但是返回不了data的值
getScript()和getJSON()
getScript(url,[callback]) 函数用于通过GET方式请求载入并执行一个JavaScript文件。
getJSON(url,[callback]) 函数用于通过GET方式请求载入JSON数据。
getJSON也无法返回正常的数据信息
jQuery中的AJAX服务端返回方式
html,text
而返回XML时候使用的是reponseXML，必须按照XML对象的方式进行操作。
具体的应用实例为一个国家->省会->城市的多级列表（详见示例）
jQuery中的AJAX事件
AJAX局部事件
包括beforeSend、Success、error、complete
AJAX各局部事件执行的顺序为beforeSend->success(error)->complete
success事件和error事件不能同时触发
AJAX全局事件
全局事件是AJAX每次请求都会触发的，主要有ajaxStart、ajaxSend、ajaxSuccess、ajaxError、ajaxComplete、ajaxStop
如过有需要还可以使用特定的请求将全局事件禁用，可以通过设置$ajax()函数参数的global来实现,代码如下所示：
$.ajax({ url:"text.html", global:false,//禁用全局AJAX事件 //其他处理 });
各个全局事件执行的顺序为ajaxStart->ajaxSend->ajaxSuccess(ajaxError)->ajaxComplete->ajaxStop
全局事件和局部事件的执行顺序为
[全局事件] 触发ajaxStart事件.
[局部事件] 触发beforeSend事件.
[全局事件] 触发ajaxSend事件.
[局部事件] 触发success事件.
[全局事件] 触发ajaxSuccess事件.
[局部事件] 触发complete事件.
[全局事件] 触发ajaxComplete事件.
[全局事件] 触发ajaxStop事件.
