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对象所处的状态，通过该属性的访问，来判断此次的状态然后做出相应的操作。
|
0 |
未初始状态；此时已经创建了XHR对象，但是还未初始化 |
|
1 |
准备发送状态；此时，已经调用XHR对象的open方法，并且XHR对象已经准备将一个请求发送到服务器 |
|
2 |
已发送状态；此时，通过send方法把一个请求发送到服务器，但是会没有接收到响应 |
|
3 |
正在接收状态；此时，已经接收到http头部信息，但是消息体还没有完全接收到 |
|
4 |
完成响应状态；此时，已经完成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
|
100 |
初始的请求已经接受，客户应当继续发送请求的其余部分。（HTTP 1.1新） |
|
101 |
OK 服务器将遵从客户的请求转换到另外一种协议（HTTP 1.1新） |
|
200 |
一切正常，对GET和POST请求的应答文档跟在后面。 |
|
201 |
Created 服务器已经创建了文档，Location头给出了它的URL |
|
202 |
Accepted 已经接受请求，但处理尚未完成 |
|
203 |
Non-Authoritative Information 文档已经正常地返回，但一些应答头可能不正确，因为使用的是文档的拷贝，非权威性信息（HTTP 1.1新）。 |
|
204 |
No Content 没有新文档，浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的。 |
|
205 |
Reset Content 没有新的内容，但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容（HTTP 1.1新）。 |
|
206 |
Partial Content 客户发送了一个带有Range头的GET请求，服务器完成了它（HTTP 1.1新）。 |
|
301 |
Moved Permanently 客户请求的文档在其他地方，新的URL在Location头中给出，浏览器应该自动地访问新的URL。 |
|
302 |
Found 类似于301，但新的URL应该被视为临时性的替代，而不是永久性的。注意，在HTTP1.0中对应的状态信息是“Moved Temporatily”。出现该状态代码时，浏览器能够自动访问新的URL，因此它是一个很有用的状态代码。注意这个状态代码有时候可以和301替换使用。例如，如果浏览器错误地请求 http://host/~user （缺少了后面的斜杠），有的服务器返回301，有的则返回302。严格地说，我们只能假定只有当原来的请求是GET时浏览器才会自动重定向。 |
|
304 |
Not Modified 客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。 |
|
305 |
Use Proxy 客户请求的文档应该通过Location头所指明的代理服务器提取（HTTP 1.1新）。 |
|
400 |
400 - Bad Request 请求出现语法错误。 |
|
401 |
Unauthorized 访问被拒绝，客户试图未经授权访问受密码保护的页面。 |
|
403 |
Forbidden 请求不允许(由于服务器上文件或目录的权限设置导致资源不可用) |
|
404 |
Not Found 没有发现文件、查询或URl(没有找到指定的资源) |
|
500 |
Internal Server Error 服务器产生内部错误 |
|
501 |
Not Found 没有发现文件、查询或URl(没有找到指定的资源) |
|
502 |
Bad Gateway 服务器暂时不可用，有时是为了防止发生系统过载 |
|
503 |
Service Unavailable 服务器过载或暂停维修 |
|
504 |
Gateway Timeout 关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长 |
|
505 |
HTTP Version Not Supported服务器不支持或拒绝支请求头中指定的HTTP版本 |
（5）statusText属性
statusText属性描述了HTTP状态代码文本，readyState>=3是才可用，否则异常。
（6）onreadystatechange事件
每当readyState值发生改变时，就会触发onreadystatechange事件。一般用于触发回调处理函数。
（7）open方法
XHR对象通过调用open(method, url, async, username, passwrod)方法来进行初始化工作。
|
method |
必填，http方法，例如：POST、GET、PUT及PROPFIND。大小写不敏感。 |
|
url |
必填，请求的URL地址，可以为绝对地址也可以为相对地址。 |
|
async |
可选，布尔型，指定此请求是否为异步方式，默认为true。如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。 |
|
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] )
|
url |
string |
请求HTML页面的url地址 |
|
Date（可选） |
Object |
发送到服务器的key/value数据 |
|
Callback（可选） |
Function |
请求完成时的回调函数，无论请求成功或失败 |
2.$.get和$.post方法
$.get(url [,data] [,callback] [,type])
$.post(url [,data] [,callback] [,type])
|
url |
string |
请求HTML页面的url地址 |
|
Date（可选） |
Object |
发送到服务器的key/value数据 |
|
Callback（可选） |
Function |
载入成功是回调函数(只有当response的返回状态是success才调用该方法)自动将请求的结果和状态传递给该方法 |
|
Type （可选） |
String |
服务器返回内容格式，包括xml、html、scrip、json和_default |
3.$.getScript方法和$.getJson方法
$.getScript(url,callback)
$.getScript(getJson,callback)
4.$.ajax方法
|
url |
要求为String类型的参数，（默认为当前页地址）发送请求的地址。 |
|
type |
要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。 |
|
timeout |
要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。 |
|
async |
要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行 |
|
cache |
要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false）。设置为false将不会从浏览器缓存中加载请求信息. |
|
data |
要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。 |
|
dataType |
要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。 可用的类型如下： xml：返回XML文档，可用JQuery处理。 html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。 script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。 json：返回JSON数据。 jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。 text：返回纯文本字符串。 |
|
beforeSend |
要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。 function(XMLHttpRequest, textStatus){ this;//调用本次ajax请求时传递的options参数 } |
|
success |
要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。 (1)由服务器返回，并根据dataType参数进行处理后的数据。 (2)描述状态的字符串。 function(data, textStatus){ //data可能是xmlDoc、jsonObj、html、text等等 this; //调用本次ajax请求时传递的options参数 } |
|
error |
要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错 误信息、捕获的错误对象(可选)。 ajax事件函数如下： function(XMLHttpRequest, textStatus, errorThrown){ //通常情况下textStatus和errorThrown只有其中一个包含信息 This;//调用本次ajax请求时传递的options参数 } |
|
contentType |
要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。 |
|
global |
要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。 |
|
ifModified |
要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。 服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。 |
|
jsonp |
要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如 {jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
|
