淘先锋技术网

首页 1 2 3 4 5 6 7

原理
在这里插入图片描述
Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。


一.XMLHttpRequest的对象属性

onreadystatechang: 状态改变时会触发这个事件处理器,指向一个javascript函数
status: 服务器的http状态代码
statusText: http状态码的相应文本
responseText: 服务器的响应,通常为一个字符串
responseXML:  服务器的响应,通常为一个XML,可以解析为一个DOM对象
readyState: 请求状态

(1)readyState属性:

readyState属性值为0时,表示未初始化,此时已经创建了一个XMLHttpRequest对象,但是还没有初始化。

readyState属性值为1时,表示发送状态,调用了open()方法,并已经准备好把一个请求发送到服务器。

readyState属性值为3时,表示正在接收状态,已经接收到http响应头部信息,但是消息体部分还没完全接收结束。

readyState属性值为4时,表示接收完全状态,即响应信息已被完全接收。

(2)onreadystatechange属性:
该属性是readyState属性值改变时的事件触发器,用来制定当readyState属性值改变时的处理事件。在使用时,常常以事件处理器函数名称赋予onreadystatechange的方式,来为XMLHttpRequest指定事件触发器,而在事件处理函数中通过判断readyState状态值做出相应的处理。

(3)responseText属性:

该属性包含接收到的http响应的文本内容,当readyState的值为0,1,2时,该属性值作为一个空字符串,当readyState的值为3时,该属性值包含客户端中未完场的响应信息。当readyState值为4时,该属性值包含完整的相应信息。

(4)responseXML属性:

该属性包含接收的http响应的xml内容.当服务器以xml文档的格式返回响应数据时,responseXML属性值才不为null.

(5)status属性:

status属性描述了htpp状态代码,仅当readtyState值为3或4时该属性才有效,当readyState值小于3时,试图存取status的值将会引发一个异常。

(5)statusText属性:

该属性描述了http状态代码文本,仅当readyState值为3或4时该属性才有效,当readyState值小于3时,试图存取status的值将会引发一个异常。

二.XMLHttpRequest对象方法

abort(): 停止当前请求
getAllResponseHeaders(): 将http请求的所有响应首部作为key-value对返回
getResponseHeader(): 返回指定首部的值
open(): 建立对服务器的调用
send(): 向服务器发送请求
setRequestHeader(): 把指定首部设置为所提供的值
(1)abort()方法:
该方法用来停止与XMLHttpRequest对象联系的http请求,从而把该对象复位到未初始化状态。

(2)open(DOMString method, DomString uri, Boolean async, DOMString username, DOMString password)方法:

该方法用来初始化一个XMLHttpRequest对象,其中,method参数用于指定发送请求的http方法(可以时get,post,delete,head方法)。如果想将数据发送到服务器,则该使用post方法。如果想从服务器检索数据,应使用get方法。open方法中的uri参数用于指定XMLHttpRequest对象把请求发送到与服务器相应的URI。async参数指定了请求是否是异步的,其默认值是true。如果想发送一个同步请求,则需要把这个设置为false。在调用open()方法后,XMLHttpRequest对象会将他的readyState属性设置为1,并且把responseText,responseXML,status和statusText属性设置为他们的初始值。

(3)send()方法:

在调用oepn()方法准备好一个请求后,还需要把该请求发送到服务器,这时就需要调用send()方法。send()方法中包含了一个可选的参数,该参数可以包含可变类型的数据。

(4)setRequestHeader(DOMString Header,DOMString value)方法:

该方法用来设置请求的头部信息,该方法的调用必须在调用open()方法之后。

(5)getResponseHeader(DOMString header)方法:

该方法用来得到首部信息,其中header参数表示要得到的首部。该方法仅当readyState值是3或4时才可调用,否则会返回一个空字符串。

(6)getAllResponseHeaders()方法:

该方法用来得到所有的响应首部,此时readyState属性值必须为3或4,否则该方法将返回null值。


XMLHttpRequest对象的使用需要四个步骤:

(1) 初始化XMLHttpRequest对象

(2) 指定响应处理函数

(3) 发送HTTP请求

(4) 处理服务器返回的信息