- 浏览: 2245773 次
文章分类
最新评论
window.XMLHttpRequest详解(AJAX工作原理)
window.XMLHttpRequest详解(AJAX工作原理)
XMLHttpRequest对象是当今所有AJAX和Web 2.0应用程序的技术基础。尽管软件经销商和开源社团现在都在提供各种AJAX框架以进一步简化XMLHttpRequest对象的使用;但是,我们仍然很有必要理解这个对象的详细工作机制。
一、 引言
AJAX利用一个构建到所有现代浏览器内部的对象-XMLHttpRequest-来实现发送和接收HTTP请求与响应信息。一个经由 XMLHttpRequest对象发送的HTTP请求并不要求页面中拥有或回寄一个<form>元素。AJAX中的"A"代表了"异步",这意味着 XMLHttpRequest对象的send()方法可以立即返回,从而让Web页面上的其它HTML/JavaS<wbr>cript继续其浏览器端处理而由服务器处理HTTP请求并发送响应。尽管缺省情况下请求是异步进行的,但是,你可以选择发送同步请求,这将会暂停其它Web页面的处理,直到该页面接收到服务器的响应为止。</wbr>
微软在其Internet Explorer(IE) 5中作为一个ActiveX对象形式引入了XMLHttpRequest对象。其他的认识到这一对象重要性的浏览器制造商也都纷纷在他们的浏览器内实现了 XMLHttpRequest对象,但是作为一个本地JavaS<wbr>cript对象而不是作为一个ActiveX对象实现。而如今,在认识到实现这一类型的价值及安全性特征之后,微软已经在其IE 7中把XMLHttpRequest实现为一个窗口对象属性。幸运的是,尽管其实现(因而也影响到调用方式)细节不同,但是,所有的浏览器实现都具有类似的功能,并且实质上是相同方法。目前,W3C组织正在努力进行XMLHttpRequest对象的标准化,并且已经发行了有关该W3C规范的一个草案。</wbr>
本文将对XMLHttpRequest对象API进行详细讨论,并将解释其所有的属性和方法。
二、 XMLHttpRequest对象的属性和事件
XMLHttpRequest对象暴露各种属性、方法和事件以便于脚本处理和控制HTTP请求与响应。下面,我们将对此展开详细的讨论。
readyState属性
当XMLHttpRequest对象把一个HTTP请求发送到服务器时将经历若干种状态:一直等待直到请求被处理;然后,它才接收一个响应。这样以来,脚本才正确响应各种状态-XMLHttpRequest对象暴露一个描述对象的当前状态的readyState属性,如表格1所示。
表格1.XMLHttpRequest对象的ReadyState属性值列表。
ReadyState取值 描述
0 描述一种"未初始化"状态;此时,已经创建一个XMLHttpRequest对象,但是还没有初始化。
1 描述一种"发送"状态;此时,代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。
2 描述一种"发送"状态;此时,已经通过send()方法把一个请求发送到服务器端,但是还没有收到一个响应。
3 描述一种"正在接收"状态;此时,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收结束。
4 描述一种"已加载"状态;此时,响应已经被完全接收。
on<wbr>readystatechange事件</wbr>
无论readyState值何时发生改变,XMLHttpRequest对象都会激发一个readystatechange事件。其中,on<wbr>readystatechange属性接收一个EventListener值-向该方法指示无论readyState值何时发生改变,该对象都将激活。</wbr>
responseText属性
这个responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1或2 时,responseText包含一个空字符串。当readyState值为3(正在接收)时,响应中包含客户端还未完成的响应信息。当 readyState为4(已加载)时,该responseText包含完整的响应信息。
responseXML属性
此responseXML属性用于当接收到完整的HTTP响应时(readyState为4)描述XML响应;此时,Content-Type 头部指定MIME(媒体)类型为text/xml,application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一,那么responseXML的值为null。无论何时,只要readyState值不为4,那么该responseXML的值也为null。
其实,这个responseXML属性值是一个文档接口类型的对象,用来描述被分析的文档。如果文档不能被分析(例如,如果文档不是良构的或不支持文档相应的字符编码),那么responseXML的值将为null。
status属性
这个status属性描述了HTTP状态代码,而且其类型为short。而且,仅当readyState值为3(正在接收中)或4(已加载)时,这个status属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。
statusText属性
这个statusText属性描述了HTTP状态代码文本;并且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。
三、 XMLHttpRequest对象的方法
XMLHttpRequest对象提供了各种方法用于初始化和处理HTTP请求,下列将逐个展开详细讨论。
abort()方法
你可以使用这个abort()方法来暂停与一个XMLHttpRequest对象相联系的HTTP请求,从而把该对象复位到未初始化状态。
open()方法
你需要调用open(DOMString method,DOMString uri,boolean 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对象将复位这些值。
send()方法
在通过调用open()方法准备好一个请求之后,你需要把该请求发送到服务器。仅当readyState值为1时,你才可以调用send()方法;否则的话,XMLHttpRequest对象将引发一个异常。该请求被使用提供给open()方法的参数发送到服务器。当async参数为true 时,send()方法立即返回,从而允许其它客户端脚本处理继续。在调用send()方法后,XMLHttpRequest对象把readyState的值设置为2(发送)。当服务器响应时,在接收消息体之前,如果存在任何消息体的话,XMLHttpRequest对象将把readyState设置为 3(正在接收中)。当请求完成加载时,它把readyState设置为4(已加载)。对于一个HEAD类型的请求,它将在把readyState值设置为 3后再立即把它设置为4。
send()方法使用一个可选的参数-该参数可以包含可变类型的数据。典型地,你使用它并通过POST方法把数据发送到服务器。另外,你可以显式地使用null参数调用send()方法,这与不用参数调用它一样。对于大多数其它的数据类型,在调用send()方法之前,应该使用 setRequestHeader()方法(见后面的解释)先设置Content-Type头部。如果在send(da<wbr>ta)方法中的da<wbr>ta参数的类型为DOMString,那么,数据将被编码为UTF-8。如果数据是Document类型,那么将使用由da<wbr>ta.xmlEncoding指定的编码串行化该数据。</wbr></wbr></wbr>
setRequestHeader()方法
该setRequestHeader(DOMString header,DOMString value)方法用来设置请求的头部信息。当readyState值为1时,你可以在调用open()方法后调用这个方法;否则,你将得到一个异常。
getResponseHeader()方法
getResponseHeader(DOMString header,value)方法用于检索响应的头部值。仅当readyState值是3或4(换句话说,在响应头部可用以后)时,才可以调用这个方法;否则,该方法返回一个空字符串。
getAllResponseHeaders()方法
该getAllResponseHeaders()方法以一个字符串形式返回所有的响应头部(每一个头部占单独的一行)。如果readyState的值不是3或4,则该方法返回null。
四、 发送请求
在AJAX中,许多使用XMLHttpRequest的请求都是从一个HTML事件(例如一个调用JavaS<wbr>cript函数的按钮点击 (on<wbr>click)或一个按键(on<wbr>keypress))中被初始化的。AJAX支持包括表单校验在内的各种应用程序。有时,在填充表单的其它内容之前要求校验一个唯一的表单域。例如要求使用一个唯一的UserID来注册表单。如果不是使用AJAX技术来校验这个UserID域,那么整个表单都必须被填充和提交。如果该UserID不是有效的,这个表单必须被重新提交。例如,一个相应于一个要求必须在服务器端进行校验的Catalog ID的表单域可能按下列形式指定: </wbr></wbr></wbr>
<form name="validationForm" act<wbr>ion="validateForm" method="post"></wbr>
<table>
<tr><td>Catalog Id:</td>
<td>
<input type="text" size="20" id="catalogId" name="catalogId" autocomplete="off" on<wbr>keyup="sendRequest()"></wbr>
</td>
<td><div id="validationMessage"></div></td>
</tr>
</table></form>
前面的HTML使用validationMessage div来显示相应于这个输入域Catalog Id的一个校验消息。on<wbr>keyup事件调用一个JavaS<wbr>cript sendRequest()函数。这个sendRequest()函数创建一个XMLHttpRequest对象。创建一个XMLHttpRequest 对象的过程因浏览器实现的不同而有所区别。如果浏览器支持XMLHttpRequest对象作为一个窗口属性(所有普通的浏览器都是这样的,除了IE 5和IE 6之外),那么,代码可以调用XMLHttpRequest的构造器。如果浏览器把XMLHttpRequest对象实现为一个 ActiveXObject对象(就象在IE 5和IE 6中一样),那么,代码可以使用ActiveXObject的构造器。下面的函数将调用一个init()函数,它负责检查并决定要使用的适当的创建方法- 在创建和返回对象之前。 </wbr></wbr>
<script type="text/javas<wbr>cript"></wbr>
function sendRequest(){
var xmlHttpReq=init();
function init(){
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
else if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
</script>
接下来,你需要使用Open()方法初始化XMLHttpRequest对象-指定HTTP方法和要使用的服务器URL。
var catalogId=encodeURIComponent(document.getElementById("catalogId").value);
xmlHttpReq.open("GET", "validateForm?catalogId=" + catalogId, true);
默认情况下,使用XMLHttpRequest发送的HTTP请求是异步进行的,但是你可以显式地把async参数设置为true,如上面所展示的。
在这种情况下,对URL validateForm的调用将激活服务器端的一个servlet,但是你应该能够注意到服务器端技术不是根本性的;实际上,该URL可能是一个 ASP,ASP.NET或PHP页面或一个Web服务-这无关紧要,只要该页面能够返回一个响应-指示CatalogID值是否是有效的-即可。因为你在作一个异步调用,所以你需要注册一个XMLHttpRequest对象将调用的回调事件处理器-当它的readyState值改变时调用。记住,readyState值的改变将会激发一个readystatechange事件。你可以使用on<wbr>readystatechange属性来注册该回调事件处理器。 </wbr>
xmlHttpReq.on<wbr>readystatechange=processRequest;</wbr>
然后,我们需要使用send()方法发送该请求。因为这个请求使用的是HTTP GET方法,所以,你可以在不指定参数或使用null参数的情况下调用send()方法。
xmlHttpReq.send(null);
五、 处理请求
在这个示例中,因为HTTP方法是GET,所以在服务器端的接收servlet将调用一个doGet()方法,该方法将检索在URL中指定的catalogId参数值,并且从一个数据库中检查它的有效性。
本文示例中的这个servlet需要构造一个发送到客户端的响应;而且,这个示例返回的是XML类型,因此,它把响应的HTTP内容类型设置为 text/xml并且把Cache-Control头部设置为no-cache。设置Cache-Control头部可以阻止浏览器简单地从缓存中重载页面。
public void doGet(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
...
...
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
}
来自于服务器端的响应是一个XML DOM对象,此对象将创建一个XML字符串-其中包含要在客户端进行处理的指令。另外,该XML字符串必须有一个根元素。
out.println("<catalogId>valid</catalogId>");
【注意】XMLHttpRequest对象的设计目的是为了处理由普通文本或XML组成的响应;但是,一个响应也可能是另外一种类型,如果用户代理(UA)支持这种内容类型的话。
当请求状态改变时,XMLHttpRequest对象调用使用on<wbr>readystatechange注册的事件处理器。因此,在处理该响应之前,你的事件处理器应该首先检查readyState的值和HTTP状态。当请求完成加载(readyState值为4)并且响应已经完成(HTTP状态为"OK")时,你就可以调用一个JavaS<wbr>cript函数来处理该响应内容。下列脚本负责在响应完成时检查相应的值并调用一个 processResponse()方法。 </wbr></wbr>
function processRequest(){
if(xmlHttpReq.readyState==4){
if(xmlHttpReq.status==200){
processResponse();
}
}
}
该processResponse()方法使用XMLHttpRequest对象的responseXML和responseText属性来检索HTTP响应。如上面所解释的,仅当在响应的媒体类型是text/xml,application/xml或以+xml结尾时,这个 responseXML才可用。这个responseText属性将以普通文本形式返回响应。对于一个XML响应,你将按如下方式检索内容:
var msg=xmlHttpReq.responseXML;
借助于存储在msg变量中的XML,你可以使用DOM方法getElementsByTagName()来检索该元素的值:
var catalogId=msg.getElementsByTagName("catalogId")[0].firstChild.nodeValue;
最后,通过更新Web页面的validationMessage div中的HTML内容并借助于innerHTML属性,你可以测试该元素值以创建一个要显示的消息:
if(catalogId=="valid"){
var validationMessage = document.getElementById("validationMessage");
validationMessage.innerHTML = "Catalog Id is Valid";
}
else
{
var validationMessage = document.getElementById("validationMessage");
validationMessage.innerHTML = "Catalog Id is not Valid";
}
六、 小结
上面就是XMLHttpRequest对象使用的所有细节实现。通过不必把Web页面寄送到服务器而实现数据传送,XMLHttpRequest对象为客户端与服务器之间提供了一种动态的交互能力。你可以使用JavaS<wbr>cript启动一个请求并处理相应的返回值,然后使用浏览器的DOM方法更新页面中的数据。 </wbr>
附:简单的示例代码
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>示例</title>
<script src="Ajax.js"></script>
</head>
<body>
<a href="#" on<wbr>click="ajaxReader('da<wbr>ta5.xml'); return false"> 查看</a></wbr></wbr>
<div id="dataArea">
</div>
</body>
</html>
script:
// JScript File
function ajaxReader(file)
{
//定义xmlobj对象
var xmlObj=null;
if(window.XMLHttpRequest)
{
xmlObj=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
xmlObj=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
return;
}
xmlObj.on<wbr>readystatechange=function(){</wbr>
if(xmlObj.readyState==4)
{
processXML(xmlObj.responseXML);
}
}
xmlObj.open('GET',file,true);
xmlObj.send('');
}
function processXML(obj)
{
var dataArray=obj.getElementsByTagName('pets')[0].childNodes;
var dataArrayLength=dataArray.length;
var insertData='<table>';
insertData +='<tr><th>Pet5</th><th>Tasks</th></tr>';
for(var i=0;i<dataArrayLength;i++)
{
if(dataArray[i].tagName)
{
insertData+='<tr>';
insertData +='<td>'+dataArray[i].tagName+'</td>';
insertData +="<td>"+dataArray[i].getAttribute('tasks')+'</td>';
insertData+='</tr>';
}
}
insertData +=+'</table>';
document.getElementById('dataArea4').innerHTML =insertData;
}
一、创建XMLHTTPRequest对象实例:
对了,说到区别,我们这里来看看怎么来声明(使用)它,在使用XMLHTTPRequest对象发送请求和处理响应之前,我们必须要用 javas<wbr>cript创建一个XMLHTTPRequest对象。(IE把XMLHTTPRequest实现为一个ActiveX对象,其他的浏览器[如 Firefox/Safari/Opear]则把它实现为一个本地的javas<wbr>cript对象)。下面我们就来看看具体怎么运用javas<wbr>cript来创建它吧:复制内容到剪贴板代码:</wbr></wbr></wbr>
<script language="javas<wbr>cript" type="text/javas<wbr>cript"></wbr></wbr>
<!--
var xmlhttp;
// 创建XMLHTTPRequest对象
function createXMLHTTPRequest(){
if(window.ActiveXObject){ // 判断是否支持ActiveX控件
xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // 通过实例化ActiveXObject的一个新实例来创建XMLHTTPRequest对象
}
else if(window.XMLHTTPRequest){ // 判断是否把XMLHTTPRequest实现为一个本地javas<wbr>cript对象</wbr>
xmlhttp = new XMLHTTPRequest(); // 创建XMLHTTPRequest的一个实例(本地javas<wbr>cript对象)</wbr>
}
}
//-->
</script>
二、属性和方法实例:
由于东西太多现在先用个页面来列举出说有的方法和属性,以后再来详细举例(主要是本人也在学习中)。复制内容到剪贴板代码:
<html>
<head>
<title>XMLHTTPRequest对象的说明DEMO</title>
<script language="javas<wbr>cript" type="text/javas<wbr>cript"></wbr></wbr>
<!--
var xmlhttp;
// 创建一个XMLHTTPRequest对象
function createXMLHTTPRequext(){
if(window.ActiveXObject) {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
else if(window.XMLHTTPRequest){
xmlhttp = new XMLHTTPRequest();
}
}
function PostOrder(xmldoc)
{
createXMLHTTPRequext();
// 方法:open
// 创建一个新的http请求,并指定此请求的方法、URL以及验证信息
// 语法:oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
// 参数
// bstrMethod
// http方法,例如:POST、GET、PUT及PROPFIND。大小写不敏感。
// bstrUrl
// 请求的URL地址,可以为绝对地址也可以为相对地址。
// varAsync[可选]
// 布尔型,指定此请求是否为异步方式,默认为true。如果为真,当状态改变时会调用on<wbr>readystatechange属性指定的回调函数。 </wbr>
// bstrUser[可选]
// 如果服务器需要验证,此处指定用户名,如果未指定,当服务器需要验证时,会弹出验证窗口。
// bstrPassword[可选]
// 验证信息中的密码部分,如果用户名为空,则此值将被忽略。
// 备注:调用此方法后,可以调用send方法向服务器发送数据。
xmlhttp.Open("get", "http://localhost/example.htm", false);
// var book = xmlhttp.responseXML.selectSingleNode("//book[@id='bk101']");
// alert(book.xml);
// 属性:on<wbr>readystatechange</wbr>
// on<wbr>readystatechange:指定当readyState属性改变时的事件处理句柄</wbr>
// 语法:oXMLHttpRequest.on<wbr>readystatechange = funcMyHandler;</wbr>
// 如下的例子演示当XMLHTTPRequest对象的readyState属性改变时调用HandleStateChange函数,
// 当数据接收完毕后(readystate == 4)此页面上的一个按钮将被激活
// 备注:此属性只写,为W3C文档对象模型的扩展.
xmlhttp.on<wbr>readystatechange= HandleStateChange; </wbr>
// 方法:send
// 发送请求到http服务器并接收回应
// 语法:oXMLHttpRequest.send(varBody);
// 参数:varBody (欲通过此请求发送的数据。)
// 备注:此方法的同步或异步方式取决于open方法中的bAsync参数,如果bAsync == False,此方法将会等待请求完成或者超时时才会返回,如果bAsync == True,此方法将立即返回。
// This method takes on<wbr>e optional parameter, which is the requestBody to use. The acceptable VARIANT input types are BSTR, SAFEARRAY of UI1 (unsigned bytes), IDispatch to an XML Document Object Model (DOM) object, and IStream *. You can use on<wbr>ly chunked encoding (for sending) when sending IStream * input types. The component automatically sets the Content-Length header for all but IStream * input types. </wbr></wbr>
// 如果发送的数据为BSTR,则回应被编码为utf-8, 必须在适当位置设置一个包含charset的文档类型头。
// If the input type is a SAFEARRAY of UI1, the response is sent as is without additional encoding. The caller must set a Content-Type header with the appropriate content type.
// 如果发送的数据为XML DOM object,则回应将被编码为在xml文档中声明的编码,如果在xml文档中没有声明编码,则使用默认的UTF-8。
// If the input type is an IStream *, the response is sent as is without additional encoding. The caller must set a Content-Type header with the appropriate content type.
xmlhttp.Send(xmldoc);
// 方法:getAllResponseHeaders
// 获取响应的所有http头
// 语法:strValue = oXMLHttpRequest.getAllResponseHeaders();
// 备注:每个http头名称和值用冒号分割,并以\r\n结束。当send方法完成后才可调用该方法。
alert(xmlhttp.getAllResponseHeaders());
// 方法:getResponseHeader
// 从响应信息中获取指定的http头
// 语法:strValue = oXMLHttpRequest.getResponseHeader(bstrHeader);
// 备注:当send方法成功后才可调用该方法。如果服务器返回的文档类型为"text/xml", 则这句话
// xmlhttp.getResponseHeader("Content-Type");将返回字符串"text/xml"。可以使用getAllResponseHeaders方法获取完整的http头信息。
alert(xmlhttp.getResponseHeader("Content-Type")); // 输出http头中的Content-Type列:当前web服务器的版本及名称。
document.frmTest.myButton.disabled = true;
// 方法:abort
// 取消当前请求
// 语法:oXMLHttpRequest.abort();
// 备注:调用此方法后,当前请求返回UNINITIALIZED 状态。
// xmlhttp.abort();
// 方法:setRequestHeader
// 单独指定请求的某个http头
// 语法:oXMLHttpRequest.setRequestHeader(bstrHeader, bstrValue);
// 参数:bstrHeader(字符串,头名称。)
// bstrValue(字符串,值。)
// 备注:如果已经存在已此名称命名的http头,则覆盖之。此方法必须在open方法后调用。
// xmlhttp.setRequestHeader(bstrHeader, bstrValue);
}
function HandleStateChange()
{
// 属性:readyState
// 返回XMLHTTP请求的当前状态
// 语法:lValue = oXMLHttpRequest.readyState;
// 备注:变量,此属性只读,状态用长度为4的整型表示.定义如下:
// 0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)
// 1 (初始化) 对象已建立,尚未调用send方法
// 2 (发送数据) send方法已调用,但是当前的状态及http头未知
// 3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误,
// 4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
if (xmlhttp.readyState == 4){
document.frmTest.myButton.disabled = false;
// 属性:responseBody
// 返回某一格式的服务器响应数据
// 语法:strValue = oXMLHttpRequest.responseBody;
// 备注:变量,此属性只读,以unsigned array格式表示直接从服务器返回的未经解码的二进制数据。
alert(xmlhttp.responseBody);
// 属性:responseStream
// 以Ado Stream对象的形式返回响应信息
// 语法:strValue = oXMLHttpRequest.responseStream;
// 备注:变量,此属性只读,以Ado Stream对象的形式返回响应信息。
alert(xmlhttp.responseStream);
// 属性:responseText
// 将响应信息作为字符串返回
// 语法:strValue = oXMLHttpRequest.responseText;
// 备注:变量,此属性只读,将响应信息作为字符串返回。XMLHTTP尝试将响应信息解码为Unicode字符串,
// XMLHTTP默认将响应数据的编码定为UTF-8,如果服务器返回的数据带BOM(byte-order mark),XMLHTTP可
// 以解码任何UCS-2 (big or little endian)或者UCS-4 数据。注意,如果服务器返回的是xml文档,此属
// 性并不处理xml文档中的编码声明。你需要使用responseXML来处理。
alert(xmlhttp.responseText);
// 属性:responseXML
// 将响应信息格式化为Xml Document对象并返回
// 语法:var objDispatch = oXMLHttpRequest.responseXML;
// 备注:变量,此属性只读,将响应信息格式化为Xml Document对象并返回。如果响应数据不是有效的XML文档,
// 此属性本身不返回XMLDOMParseError,可以通过处理过的DOMDocument对象获取错误信息。
alert("Result = " + xmlhttp.responseXML.xml);
// 属性:status
// 返回当前请求的http状态码
// 语法:lValue = oXMLHttpRequest.status;
// 返回值:长整形标准http状态码,定义如下:
// Number:Description
// 100:Continue
// 101:Switching protocols
// 200:OK
// 201:Created
// 202:Accepted
// 203:Non-Authoritative Information
// 204:No Content
// 205:Reset Content
// 206:Partial Content
// 300:Multiple Choices
// 301:Moved Permanently
// 302:Found
// 303:See Other
// 304:Not Modified
// 305:Use Proxy
// 307:Temporary Redirect
// 400:Bad Request
// 401:Unauthorized
// 402:Payment Required
// 403:Forbidden
// 404:Not Found
// 405:Method Not Allowed
// 406:Not Acceptable
// 407:Proxy Authentication Required
// 408:Request Timeout
// 409:Conflict
// 410:Gone
// 411:Length Required
// 412:Precondition Failed
// 413:Request Entity Too Large
// 414:Request-URI Too Long
// 415:Unsupported Media Type
// 416:Requested Range Not Suitable
// 417:Expectation Failed
// 500:Internal Server Error
// 501:Not Implemented
// 502:Bad Gateway
// 503:Service Unavailable
// 504:Gateway Timeout
// 505:HTTP Version Not Supported
// 备注:长整形,此属性只读,返回当前请求的http状态码,此属性仅当数据发送并接收完毕后才可获取。
alert(xmlhttp.status);
// 属性:statusText
// 返回当前请求的响应行状态
// 语法:strValue = oXMLHttpRequest.statusText;
// 备注:字符串,此属性只读,以BSTR返回当前请求的响应行状态,此属性仅当数据发送并接收完毕后才可获取。
alert(xmlhttp.statusText);
}
}
//-->
</script>
</head>
<body>
<form name="frmTest">
<input name="myButton" type="button" value="Click Me" on<wbr>click="PostOrder('http://localhost/example.htm');"></wbr>
</form>
</body>
</html>
相关推荐
### window.XMLHttpRequest详解与AJAX工作原理 #### 引言 在现代Web开发中,**AJAX**(Asynchronous JavaScript and XML)技术是一项至关重要的技术,它允许网页在不重新加载整个页面的情况下从服务器获取数据并...
### window.XMLHttpRequest详解(AJAX工作原理) #### 一、简介 `window.XMLHttpRequest` 是一个内置对象,用于在浏览器端发起异步 HTTP 请求。它主要用于实现 AJAX (Asynchronous JavaScript and XML) 功能,允许...
在本文中,我们将深入探讨XMLHttpRequest的使用方法及其背后的原理。** 首先,XMLHttpRequest对象是JavaScript内置的,用于创建HTTP请求的对象。通过这个对象,开发者可以发起GET、POST、PUT、DELETE等HTTP方法,...
### XMLHTTPRequest对象详解 在现代Web开发中,Ajax(Asynchronous JavaScript and XML)技术的应用非常广泛,它使得网页能够实现局部刷新,提升了用户体验。而这一切的基础便是`XMLHttpRequest`对象,一个用于在...
### AJAX原理与XMLHttpRequest详解 #### 一、引言 AJAX(Asynchronous JavaScript and XML,异步JavaScript和XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。其核心在于使用`XMLHttpRequest`...
### AJAX工作原理详解 #### 一、AJAX概述 AJAX(Asynchronous JavaScript and XML),即异步JavaScript和XML,是一种在Web应用中创建异步数据交换的技术,它允许网页在不重新加载整个页面的情况下更新部分内容。这...
**Ajax基本原理** Ajax,全称为Asynchronous JavaScript + XML,是一种在无需刷新整个网页的情况下,能够更新部分网页内容的技术。最初由Jesse James Garrett提出,它并非一项全新的技术,而是结合了JavaScript、...
### Ajax基本运行原理详解 #### 引言 随着互联网技术的不断发展,用户对于网页应用程序的交互性和用户体验的要求越来越高。传统的浏览器/服务器(B/S)架构虽然解决了早期客户端/服务器(C/S)架构中存在的部署和...
### Ajax底层原理及使用方式详解 #### 一、Ajax简介 Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)是一种用于创建交互式网页应用的技术。它不是一种新的编程语言,而是一种使用现有标准的新方法...
### AJAX原理详解 #### 一、引言 随着互联网技术的发展与用户对交互体验需求的提升,异步请求成为Web开发中的重要组成部分。AJAX(Asynchronous JavaScript and XML)作为一种无需重新加载整个网页即可更新部分...
### AJAX技术原理与使用方法详解 #### 一、引言 AJAX(Asynchronous JavaScript and XML),即异步JavaScript和XML技术,是一种用于创建快速动态网页的技术。它并不是一种单一的技术,而是多种技术的组合使用,包括...
### Ajax实现原理详解 #### 一、Ajax简介 Ajax(Asynchronous JavaScript and XML)是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新,这意味着可以在不重新...
**Ajax通讯原理与XMLHttpRequest详解** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页内容的技术。它通过JavaScript脚本与服务器进行交互,实现了页面的异步更新,...
### XMLHttpRequest与DWR AJAX异步请求详解 #### 一、XMLHttpRequest简介 `XMLHttpRequest`是一种在浏览器端执行异步请求的技术,它允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分页面内容。这...
#### 三、XMLHttpRequest详解 **1. XMLHttpRequest的作用** - **关键组件:** XMLHttpRequest对象是实现Ajax功能的关键组件之一,它允许客户端脚本(通常是JavaScript)向服务器发起HTTP请求并接收响应,而无需...
### JavaScript中的GET与POST请求详解 在Web开发中,客户端与服务器之间的数据交换至关重要。JavaScript提供了多种方式来发送HTTP请求,其中最常用的就是GET和POST请求。这两种请求方式各有特点,适用于不同的场景...
本文主要给大家介绍了关于Ajax原理以及代码封装的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。 示例代码 var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox,...
在深入分析代码之前,我们先简要了解下 AJAX 的工作原理。AJAX 主要有以下几个步骤: 1. **创建 XMLHttpRequest 对象**:这是 AJAX 的核心,用于在客户端和服务器之间传输数据。 2. **定义请求类型和 URL**:设置...