XMLHttpRequest对象的常用属性

╰半夏微凉° 2022-05-12 00:28 162阅读 0赞

XMLHttpRequest对象提供了一些常用属性，通过这些属性可以获取服务器的响应状态及响应内容等，下面将对XMLHttpRequest对象的常用属性进行介绍。

** **

**一 指定状态改变时所触发的事件处理器的属性**

XMLHttpRequest对象提供了用于指定状态改变时所触发的事件处理器的属性onreadystatechange。

在Ajax中，每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数。

例如，指定状态改变时触发JavaScript函数getResult()的代码如下：

http\_request.onreadystatechange = getResult;

在指定所触发的事件处理器时，所调用的JavaScript函数不能添加小括号及指定参数名。不过这里可以使用匿名函数。

例如，要调用带参数的函数getResult()，可以使用下面的代码：

http\_request.onreadystatechange = function()

getResult("添加的参数");                     //调用带参数的函数

\};                                                               //通过匿名函数指定要带参数的函数

** **

**二 获取请求状态的属性**

XMLHttpRequest对象提供了用于获取请求状态的属性readyState，该属性共包括5个属性值。

在实际应用中，该属性经常用于判断请求状态，当请求状态等于4，也就是为完成时，再判断请求是否成功，如果成功将开始处理返回结果。

** **

**三 获取服务器的字符串响应的属性**

XMLHttpRequest对象提供了用于获取服务器响应的属性responseText，表示为字符串。

例如，获取服务器返回的字符串响应，并赋值给变量h可以使用下面的代码：

var h=http\_request. responseText;

在上面的代码中，http\_request为XMLHttpRequest对象。

** **

**四 获取服务器的XML响应的属性**

XMLHttpRequest对象提供了用于获取服务器响应的属性responseXML，表示为XML。

这个对象可以解析为一个DOM对象。

例如，获取服务器返回的XML响应，并赋值给变量xmldoc可以使用下面的代码：

var xmldoc = http\_request.responseXML;

在上面的代码中，http\_request为XMLHttpRequest对象。

** **

**五 返回服务器的HTTP状态码的属性**

XMLHttpRequest对象提供了用于返回服务器的HTTP状态码的属性status。

该属性的语法格式如下：

http\_request.status

http\_request：XMLHttpRequest对象。

返回值：长整型的数值，代表服务器的HTTP状态码。常用的状态码下表所示。

<table style="border-collapse:collapse;border:1px solid #bbbbbb;width:480px;"> 
 <tbody> 
 <tr> 
 <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:119px;" align="left">值</td> 
 <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:360px;" align="left">意义</td> 
 </tr> 
 <tr> 
 <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:119px;" align="left">100</td> 
 <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:360px;" align="left">继续发送请求</td> 
 </tr> 
 <tr> 
 <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:119px;" align="left">200</td> 
 <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:360px;" align="left">请求已成功</td> 
 </tr> 
 <tr> 
 <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:119px;" align="left">202</td> 
 <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:360px;" align="left">请求被接受，但尚未成功</td> 
 </tr> 
 <tr> 
 <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:119px;" align="left">400</td> 
 <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:360px;" align="left">错误的请求</td> 
 </tr> 
 <tr> 
 <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:119px;" align="left">404</td> 
 <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:360px;" align="left">文件未找到</td> 
 </tr> 
 <tr> 
 <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:119px;" align="left">408</td> 
 <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:360px;" align="left">请求超时</td> 
 </tr> 
 <tr> 
 <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:119px;" align="left">500</td> 
 <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:360px;" align="left">内部服务器错误</td> 
 </tr> 
 <tr> 
 <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:119px;" align="left">501</td> 
 <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:360px;" align="left">服务器不支持当前请求所需要的某个功能</td> 
 </tr> 
 </tbody> 
</table>

status属性只能在send()方法返回成功时才有效。

该属性常用于当请求状态为完成时，判断当前的服务器状态是否成功。

例如，当请求完成时，判断请求是否成功的代码如下：

if (http_request.readyState == 4)      //当请求状态为完成时
    {                    
        if (http_request.status == 200)     //请求成功，开始处理返回结果
        {         
            alert("请求成功！");
        } 
        else                 //请求未成功
        {                                      
            alert("请求未成功！");
        }
    }