XMLHttpRequest详解
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
getResponseHeader()方法
getResponseHeader(DOMString header,value)方法用于检索响 应的头部值。仅当readyState值是3或4(换句话说,在响应头部可用以 后)时,才可以调用这个方法;否则,该方法返回一个空字符串。
getAllResponseHeaders()方法
全面剖析XMLHttpRequest对象
XMLHttpRequest对象是当今所有AJAX和Web 2.0应用程序的技术 基础。尽管软件经销商和开源社团现在都在提供各种AJAX框架以进一 步简化XMLHttpRequest对象的使用;但是,我们仍然很有必要理解这
个对象的详细工作机制。
一、 引言
async,DOMString username,DOMString password)方法初始化一个 XMLHttpRequest对象。其中,method参数是必须提供的-用于指定你 想用来发送请求的HTTP方法(GET,POST,PUT,DELETE或 HEAD)。为了把数据发送到服务器,应该使用POST方法;为了从服务 器端检索数据,应该使用GET方法。另外,uri参数用于指定 XMLHttpRequest对象把请求发送到的服务器相应的URI。借助于 window.document.baseURI属性,该uri被解析为一个绝对的URI-换句 话说,你可以使用相对的URI-它将使用与浏览器解析相对的URI一样的 方式被解析。async参数指定是否请求是异步的-缺省值为true。为了发 送一个同步请求,需要把这个参数设置为false。对于要求认证的服务 器,你可以提供可选的用户名和口令参数。在调用open()方法后, XMLHttpRequest对象把它的readyState属性设置为1(打开)并且把 responseText、responseXML、status和statusText属性复位到它们的 初始值。另外,它还复位请求头部。注意,如果你调用open()方法并且 此时readyState为4,则XMLHttpRequest对象将复位这些值。
务器的响应为止。
微软在其Internet Explorer(IE) 5中作为一个ActiveX对象形式引入 了XMLHttpRequest对象。其他的认识到这一对象重要性的浏览器制造 商也都纷纷在他们的浏览器内实现了XMLHttpRequest对象,但是作为 一个本地JavaScript对象而不是作为一个ActiveX对象实现。而如今,在 认识到实现这一类型的价值及安全性特征之后,微软已经在其IE 7中把
该getAllResponseHeaders()方法以一个字符串形式返回所有的响 应头部(每一个头部占单独的一行)。如果readyState的值不是3或4, 则该方法返回null。
四、 发送请求
在AJAX中,许多使用XMLHttpRequest的请求都是从一个HTML事 件(例如一个调用JavaScript函数的按钮点击(onclick)或一个按键 (onkeypress))中被初始化的。AJAX支持包括表单校验在内的各种应 用程序。有时,在填充表单的其它内容之前要求校验一个唯一的表单 域。例如要求使用一个唯一的UserID来注册表单。如果不是使用AJAX 技术来校验这个UserID域,那么整个表单都必须被填充和提交。如果该 UserID不是有效的,这个表单必须被重新提交。例如,一个相应于一个 要求必须在服务器端进行校验的Catalog ID的表单域可能按下列形式指 定:
data.xmlEncoding指定的编码串行化该数据。
setRequestHeader()方法
该setRequestHeader(DOMString header,DOMString value)方法 用来设置请求的头部信息。当readyState值为1时,你可以在调用 open()方法后调用这个方法;否则,你将得到一个异常。
对象的当前状态的readyState属性,如表格1所示。
表格1.XMLHttpRequest对象的ReadyState属性值列表。
ReadyState 取值
描述
描述一种"未初始化"状态;此时,已经创建 0 一个XMLHttpRequest对象,但是还没有初
始化。
描述一种"发送"状态;此时,代码已经调用
<form
name="validationForm"
action="validateForm"ຫໍສະໝຸດ Baidu
method="post">
<table>
<tr><td>Catalog Id:</td>
<td>
<input type="text" size="20" id="catalogId"
name="catalogId"
序。
Google的Gmail和Outlook Express就是两个使用AJAX技术的我们 所熟悉的例子。而且,AJAX可以用于任何客户端脚本语言中,这包括
JavaScript,Jscript和VBScript。
AJAX利用一个构建到所有现代浏览器内部的对象XMLHttpRequest-来实现发送和接收HTTP请求与响应信息。一个经由 XMLHttpRequest对象发送的HTTP请求并不要求页面中拥有或回寄一
异步JavaScript与XML(AJAX)是一个专用术语,用于实现在客户端 脚本与服务器之间的数据交互过程。这一技术的优点在于,它向开发者 提供了一种从Web服务器检索数据而不必把用户当前正在观察的页面回
馈给服务器。与现代浏览器的通过存取浏览器DOM结构的编程代码 (JavaScript)动态地改变被显示内容的支持相配合,AJAX让开发者在浏 览器端更新被显示的HTML内容而不必刷新页面。换句话说,AJAX可 以使基于浏览器的应用程序更具交互性而且更类似传统型桌面应用程
个<form>元素。AJAX中的"A"代表了"异步",这意味着 XMLHttpRequest对象的send()方法可以立即返回,从而让Web页面上 的其它HTML/JavaScript继续其浏览器端处理而由服务器处理HTTP请 求并发送响应。尽管缺省情况下请求是异步进行的,但是,你可以选择 发送同步请求,这将会暂停其它Web页面的处理,直到该页面接收到服
send()方法
在通过调用open()方法准备好一个请求之后,你需要把该请求发送 到服务器。仅当readyState值为1时,你才可以调用send()方法;否则 的话,XMLHttpRequest对象将引发一个异常。该请求被使用提供给 open()方法的参数发送到服务器。当async参数为true时,send()方法立 即返回,从而允许其它客户端脚本处理继续。在调用send()方法后, XMLHttpRequest对象把readyState的值设置为2(发送)。当服务器响应 时,在接收消息体之前,如果存在任何消息体的话,XMLHttpRequest 对象将把readyState设置为3(正在接收中)。当请求完成加载时,它把 readyState设置为4(已加载)。对于一个HEAD类型的请求,它将在把 readyState值设置为3后再立即把它设置为4。
XMLHttpRequest实现为一个窗口对象属性。幸运的是,尽管其实现(因 而也影响到调用方式)细节不同,但是,所有的浏览器实现都具有类似
的功能,并且实质上是相同方法。目前,W3C组织正在努力进行 XMLHttpRequest对象的标准化,并且已经发行了有关该W3C规范的一
个草案。
本文将对XMLHttpRequest对象API进行详细讨论,并将解释其所 有的属性和方法。
其实,这个responseXML属性值是一个文档接口类型的对象,用来 描述被分析的文档。如果文档不能被分析(例如,如果文档不是良构的 或不支持文档相应的字符编码),那么responseXML的值将为null。
status属性
这个status属性描述了HTTP状态代码,而且其类型为short。而 且,仅当readyState值为3(正在接收中)或4(已加载)时,这个status属性 才可用。当readyState的值小于3时试图存取status的值将引发一个异 常。 statusText属性 这个statusText属性描述了HTTP状态代码文本;并且仅当 readyState值为3或4才可用。当readyState为其它值时试图存取 statusText属性将引发一个异常。
responseXML属性
此responseXML属性用于当接收到完整的HTTP响应时(readyState 为4)描述XML响应;此时,Content-Type头部指定MIME(媒体)类型为 text/xml,application/xml或以+xml结尾。如果Content-Type头部并不 包含这些媒体类型之一,那么responseXML的值为null。无论何时,只 要readyState值不为4,那么该responseXML的值也为null。
二、 XMLHttpRequest对象的属性和事件
XMLHttpRequest对象暴露各种属性、方法和事件以便于脚本处理 和控制HTTP请求与响应。下面,我们将对此展开详细的讨论。 readyState属性
当XMLHttpRequest对象把一个HTTP请求发送到服务器时将经历 若干种状态:一直等待直到请求被处理;然后,它才接收一个响应。这 样以来,脚本才正确响应各种状态-XMLHttpRequest对象暴露一个描述
send()方法使用一个可选的参数-该参数可以包含可变类型的数据。 典型地,你使用它并通过POST方法把数据发送到服务器。另外,你可 以显式地使用null参数调用send()方法,这与不用参数调用它一样。对 于大多数其它的数据类型,在调用send()方法之前,应该使用 setRequestHeader()方法(见后面的解释)先设置Content-Type头部。如 果在send(data)方法中的data参数的类型为DOMString,那么,数据将 被编码为UTF-8。如果数据是Document类型,那么将使用由
1
了XMLHttpRequest
open()方法并且
XMLHttpRequest已经准备好把一个请求发
送到服务器。
描述一种"发送"状态;此时,已经通过 2 send()方法把一个请求发送到服务器端,但
是还没有收到一个响应。
3
描述一种"正在接收"状态;此时,已经接收
到HTTP响应头部信息,但是消息体部分还
三、 XMLHttpRequest对象的方法 XMLHttpRequest对象提供了各种方法用于初始化和处理HTTP请 求,下列将逐个展开详细讨论。 abort()方法 你可以使用这个abort()方法来暂停与一个XMLHttpRequest对象相 联系的HTTP请求,从而把该对象复位到未初始化状态。 open()方法 你需要调用open(DOMString method,DOMString uri,boolean
responseText属性
这个responseText属性包含客户端接收到的HTTP响应的文本内 容。当readyState值为0、1或2时,responseText包含一个空字符串。 当readyState值为3(正在接收)时,响应中包含客户端还未完成的响应信 息。当readyState为4(已加载)时,该responseText包含完整的响应信 息。
没有完全接收结束。
4
描述一种"已加载"状态;此时,响应已经被 完全接收。
onreadystatechange事件
无论readyState值何时发生改变,XMLHttpRequest对象都会激发 一个readystatechange事件。其中,onreadystatechange属性接收一个 EventListener值-向该方法指示无论readyState值何时发生改变,该对 象都将激活。
getResponseHeader(DOMString header,value)方法用于检索响 应的头部值。仅当readyState值是3或4(换句话说,在响应头部可用以 后)时,才可以调用这个方法;否则,该方法返回一个空字符串。
getAllResponseHeaders()方法
全面剖析XMLHttpRequest对象
XMLHttpRequest对象是当今所有AJAX和Web 2.0应用程序的技术 基础。尽管软件经销商和开源社团现在都在提供各种AJAX框架以进一 步简化XMLHttpRequest对象的使用;但是,我们仍然很有必要理解这
个对象的详细工作机制。
一、 引言
async,DOMString username,DOMString password)方法初始化一个 XMLHttpRequest对象。其中,method参数是必须提供的-用于指定你 想用来发送请求的HTTP方法(GET,POST,PUT,DELETE或 HEAD)。为了把数据发送到服务器,应该使用POST方法;为了从服务 器端检索数据,应该使用GET方法。另外,uri参数用于指定 XMLHttpRequest对象把请求发送到的服务器相应的URI。借助于 window.document.baseURI属性,该uri被解析为一个绝对的URI-换句 话说,你可以使用相对的URI-它将使用与浏览器解析相对的URI一样的 方式被解析。async参数指定是否请求是异步的-缺省值为true。为了发 送一个同步请求,需要把这个参数设置为false。对于要求认证的服务 器,你可以提供可选的用户名和口令参数。在调用open()方法后, XMLHttpRequest对象把它的readyState属性设置为1(打开)并且把 responseText、responseXML、status和statusText属性复位到它们的 初始值。另外,它还复位请求头部。注意,如果你调用open()方法并且 此时readyState为4,则XMLHttpRequest对象将复位这些值。
务器的响应为止。
微软在其Internet Explorer(IE) 5中作为一个ActiveX对象形式引入 了XMLHttpRequest对象。其他的认识到这一对象重要性的浏览器制造 商也都纷纷在他们的浏览器内实现了XMLHttpRequest对象,但是作为 一个本地JavaScript对象而不是作为一个ActiveX对象实现。而如今,在 认识到实现这一类型的价值及安全性特征之后,微软已经在其IE 7中把
该getAllResponseHeaders()方法以一个字符串形式返回所有的响 应头部(每一个头部占单独的一行)。如果readyState的值不是3或4, 则该方法返回null。
四、 发送请求
在AJAX中,许多使用XMLHttpRequest的请求都是从一个HTML事 件(例如一个调用JavaScript函数的按钮点击(onclick)或一个按键 (onkeypress))中被初始化的。AJAX支持包括表单校验在内的各种应 用程序。有时,在填充表单的其它内容之前要求校验一个唯一的表单 域。例如要求使用一个唯一的UserID来注册表单。如果不是使用AJAX 技术来校验这个UserID域,那么整个表单都必须被填充和提交。如果该 UserID不是有效的,这个表单必须被重新提交。例如,一个相应于一个 要求必须在服务器端进行校验的Catalog ID的表单域可能按下列形式指 定:
data.xmlEncoding指定的编码串行化该数据。
setRequestHeader()方法
该setRequestHeader(DOMString header,DOMString value)方法 用来设置请求的头部信息。当readyState值为1时,你可以在调用 open()方法后调用这个方法;否则,你将得到一个异常。
对象的当前状态的readyState属性,如表格1所示。
表格1.XMLHttpRequest对象的ReadyState属性值列表。
ReadyState 取值
描述
描述一种"未初始化"状态;此时,已经创建 0 一个XMLHttpRequest对象,但是还没有初
始化。
描述一种"发送"状态;此时,代码已经调用
<form
name="validationForm"
action="validateForm"ຫໍສະໝຸດ Baidu
method="post">
<table>
<tr><td>Catalog Id:</td>
<td>
<input type="text" size="20" id="catalogId"
name="catalogId"
序。
Google的Gmail和Outlook Express就是两个使用AJAX技术的我们 所熟悉的例子。而且,AJAX可以用于任何客户端脚本语言中,这包括
JavaScript,Jscript和VBScript。
AJAX利用一个构建到所有现代浏览器内部的对象XMLHttpRequest-来实现发送和接收HTTP请求与响应信息。一个经由 XMLHttpRequest对象发送的HTTP请求并不要求页面中拥有或回寄一
异步JavaScript与XML(AJAX)是一个专用术语,用于实现在客户端 脚本与服务器之间的数据交互过程。这一技术的优点在于,它向开发者 提供了一种从Web服务器检索数据而不必把用户当前正在观察的页面回
馈给服务器。与现代浏览器的通过存取浏览器DOM结构的编程代码 (JavaScript)动态地改变被显示内容的支持相配合,AJAX让开发者在浏 览器端更新被显示的HTML内容而不必刷新页面。换句话说,AJAX可 以使基于浏览器的应用程序更具交互性而且更类似传统型桌面应用程
个<form>元素。AJAX中的"A"代表了"异步",这意味着 XMLHttpRequest对象的send()方法可以立即返回,从而让Web页面上 的其它HTML/JavaScript继续其浏览器端处理而由服务器处理HTTP请 求并发送响应。尽管缺省情况下请求是异步进行的,但是,你可以选择 发送同步请求,这将会暂停其它Web页面的处理,直到该页面接收到服
send()方法
在通过调用open()方法准备好一个请求之后,你需要把该请求发送 到服务器。仅当readyState值为1时,你才可以调用send()方法;否则 的话,XMLHttpRequest对象将引发一个异常。该请求被使用提供给 open()方法的参数发送到服务器。当async参数为true时,send()方法立 即返回,从而允许其它客户端脚本处理继续。在调用send()方法后, XMLHttpRequest对象把readyState的值设置为2(发送)。当服务器响应 时,在接收消息体之前,如果存在任何消息体的话,XMLHttpRequest 对象将把readyState设置为3(正在接收中)。当请求完成加载时,它把 readyState设置为4(已加载)。对于一个HEAD类型的请求,它将在把 readyState值设置为3后再立即把它设置为4。
XMLHttpRequest实现为一个窗口对象属性。幸运的是,尽管其实现(因 而也影响到调用方式)细节不同,但是,所有的浏览器实现都具有类似
的功能,并且实质上是相同方法。目前,W3C组织正在努力进行 XMLHttpRequest对象的标准化,并且已经发行了有关该W3C规范的一
个草案。
本文将对XMLHttpRequest对象API进行详细讨论,并将解释其所 有的属性和方法。
其实,这个responseXML属性值是一个文档接口类型的对象,用来 描述被分析的文档。如果文档不能被分析(例如,如果文档不是良构的 或不支持文档相应的字符编码),那么responseXML的值将为null。
status属性
这个status属性描述了HTTP状态代码,而且其类型为short。而 且,仅当readyState值为3(正在接收中)或4(已加载)时,这个status属性 才可用。当readyState的值小于3时试图存取status的值将引发一个异 常。 statusText属性 这个statusText属性描述了HTTP状态代码文本;并且仅当 readyState值为3或4才可用。当readyState为其它值时试图存取 statusText属性将引发一个异常。
responseXML属性
此responseXML属性用于当接收到完整的HTTP响应时(readyState 为4)描述XML响应;此时,Content-Type头部指定MIME(媒体)类型为 text/xml,application/xml或以+xml结尾。如果Content-Type头部并不 包含这些媒体类型之一,那么responseXML的值为null。无论何时,只 要readyState值不为4,那么该responseXML的值也为null。
二、 XMLHttpRequest对象的属性和事件
XMLHttpRequest对象暴露各种属性、方法和事件以便于脚本处理 和控制HTTP请求与响应。下面,我们将对此展开详细的讨论。 readyState属性
当XMLHttpRequest对象把一个HTTP请求发送到服务器时将经历 若干种状态:一直等待直到请求被处理;然后,它才接收一个响应。这 样以来,脚本才正确响应各种状态-XMLHttpRequest对象暴露一个描述
send()方法使用一个可选的参数-该参数可以包含可变类型的数据。 典型地,你使用它并通过POST方法把数据发送到服务器。另外,你可 以显式地使用null参数调用send()方法,这与不用参数调用它一样。对 于大多数其它的数据类型,在调用send()方法之前,应该使用 setRequestHeader()方法(见后面的解释)先设置Content-Type头部。如 果在send(data)方法中的data参数的类型为DOMString,那么,数据将 被编码为UTF-8。如果数据是Document类型,那么将使用由
1
了XMLHttpRequest
open()方法并且
XMLHttpRequest已经准备好把一个请求发
送到服务器。
描述一种"发送"状态;此时,已经通过 2 send()方法把一个请求发送到服务器端,但
是还没有收到一个响应。
3
描述一种"正在接收"状态;此时,已经接收
到HTTP响应头部信息,但是消息体部分还
三、 XMLHttpRequest对象的方法 XMLHttpRequest对象提供了各种方法用于初始化和处理HTTP请 求,下列将逐个展开详细讨论。 abort()方法 你可以使用这个abort()方法来暂停与一个XMLHttpRequest对象相 联系的HTTP请求,从而把该对象复位到未初始化状态。 open()方法 你需要调用open(DOMString method,DOMString uri,boolean
responseText属性
这个responseText属性包含客户端接收到的HTTP响应的文本内 容。当readyState值为0、1或2时,responseText包含一个空字符串。 当readyState值为3(正在接收)时,响应中包含客户端还未完成的响应信 息。当readyState为4(已加载)时,该responseText包含完整的响应信 息。
没有完全接收结束。
4
描述一种"已加载"状态;此时,响应已经被 完全接收。
onreadystatechange事件
无论readyState值何时发生改变,XMLHttpRequest对象都会激发 一个readystatechange事件。其中,onreadystatechange属性接收一个 EventListener值-向该方法指示无论readyState值何时发生改变,该对 象都将激活。