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

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/16474.html