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事件.