jquery学习（三）-ajax

来自锋利的jquery第二版

1、Ajax的优势和不足

1.优势

A.不需要插件支持：不需要任何浏览器插件，且大多数主流浏览器支持；

B.优秀的用户体验：实现局部刷新，使得web应用能够迅速的回应用户操作；

C.提高web程序性能：在传统模式中数据交换时通过from表达实现，而数据获取靠的是全页面刷新来获取正页内容，效率非常低。而Ajax模式通过XMLHttpRequest对象向服务器提交希望提交的数据，实现按需发送和加载。

D.减轻服务器和带宽负担：Ajax工作原理相当与早用户和服务器之间加了一个中间层，使得用户操作与服务器响应异步化。它在客户端创建ajax引擎，把传统方式下的一些服务负担工作转移到客户端，使用客户端资源来处理，减轻服务器和宽带的负担。

2.不足

A.浏览器对XMLHttpRequest对象支持不足；

B.破坏浏览器的前进和后退按钮的功能；

C.对搜索引擎支持不足；

D.开发和调试工具缺乏

2、Ajax的XMLHttpRequest（为方便书写以后XMLHttpRequest简写为XHR）

1.属性和方法

（1）readyState属性

readyState属性标识了当前XHR对象所处的状态，通过该属性的访问，来判断此次的状态然后做出相应的操作。

（2）responseText的属性

responseText属性包含客户端接收到的HTTP响应文本内容。当readyState属性值为0、1或2时，responseText属性包含一个字符串；当readyState属性为3（正在接收）时，响应中包含客户端还未完成的响应信息；当readyState属性为4（已加载）时，该readyText才包含完整的响应信息。

（3）responseXML属性

responseXML属性用来描述被XHR对象解析后的XML文档属性。也就是说，只有当属性值为会4，并且响应头部的Content-Type的MIME类型被指定为XML（text/xml或者application/xml）时，该属性才会 值并且解析为一个XML文档。

（4）Status属性

该属性表示HTTP请求的状态代码。仅当readyState>=3时才能访问，否则会报异常。状态代码代码状态如下表：

转自:http://hibeary.iteye.com/blog/697997

（5）statusText属性

statusText属性描述了HTTP状态代码文本，readyState>=3是才可用，否则异常。

（6）onreadystatechange事件

每当readyState值发生改变时，就会触发onreadystatechange事件。一般用于触发回调处理函数。

（7）open方法

XHR对象通过调用open(method, url, async, username, passwrod)方法来进行初始化工作。

（8）send方法

一般情况下，使用Ajax提交的参数多是些简单的字符串，可以直接使用GET方法将要提交的参数写到open方法的url参数中，此时send方法的参数为null。

例如 ：
                    var url = "login.jsp?user=XXX&pwd=XXX";
                    xmlHttpRequest.open("GET",url,true);
                    xmlHttpRequset.send(null);

此外，也可以使用send方法传递参数。使用send方法传递参数使用的是POST方法，需要设定Content-Type头信息，模拟HTTP POST方法发送一个表单，这样服务器才会知道如何处理上传的内容。参数的提交格式和GET方法中url的写法一样。设置头信息前必须先调用open方法。

例如：
                   xmlHttpRequest.open("POST","login.jsp",true);
                   xmlHttpRequest.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
                   xmlHttpRequest.send("user="+username+"&pwd="+password);

（9）abort 方法

该方法可以可以暂停一个HttpRequest的请求发送或者HttpResponse的介绍，并且将XHR对象设置为初始状态。

（10）setRequestHeader方法

该方法用于设置请求头部信息。当readyState属性值为1时，可以在调用open方法后调用这个方法；否则会报异常。setRequestHeader（header，value）方法包含两个参数：前一个是header键名称，后一个是键值。

（11）getResponseHeader方式

此方法用于检索响应的头部值，仅当readyState>=3时才可以调用这个方法；否则， 返回空字符串。此处通过getResponseHeader方法获取所有的XHR的头部信息。

2.Ajax实例，代码如下：

var xhr=null;

If(window.ActiveXObject){  //IE5、IE6是以ActiveXObject

//引入XMLHttpRequest对象的

xhr=new ActiveXObject(“Microsoft.XMLHTTP”);

}else if(window.XMLHttpRequest){ //除IE5、IE6外的浏览器

//XMLHttpRequest是window的子对象

xhr=new XMLHttpRequest();    //实例化一个XMLHttpRequest对象

}

xhr.open(“GET”,”test.php”,true) //调用open方法（采用get方式、异步方法）

xhr.onreadystatechange=requestCallBack;  //设置回调函数

xhr.send(null);  //因为get方法提交，所以可以使用null作为参数调用

function requestCallBack(){    //一旦readyState值改变时就会调用该函数

if(xhr.readyState==4){    //完成响应状态，已经完成HttpResponse响应接收

if(xhr.status==200){  //请求成功

//responseText返回的信息

//将xhr.responseText的值赋予id为resText的元素

Document.getElementById(“resText”).innerHtml=xhr.responseText

}

}

}

3、jQuery中的Ajax

1.load方法

Load(url [,data] [,callback] )

2.$.get和$.post方法

$.get(url [,data] [,callback] [,type])

$.post(url [,data] [,callback] [,type])

3.$.getScript方法和$.getJson方法

$.getScript(url,callback)

$.getScript(getJson,callback)

4.$.ajax方法