XMLHttpRequest用法介绍

野性酷女 2022-07-17 01:59 294阅读 0赞

传统的Web应用请求服务器返回的一般是是完整的HTML页面，这样往往就需要页面进行刷新操作，不仅耗时而且用户体验度也不好。最典型的代表就是form表单登录操作了。如果登录失败往往是跳转到原网页重新登陆，如果是这种情况话就会造成资源的浪费，因为返回的HTMl网页中大多数元素都是重复的。

正因为这些原因后来才出现了ajax，它是一种交互式的网页开发技术，而XMLHttpRequest是它的核心的内容，它能够为页面中的javascript脚本提供特定的通信方式，从而使页面的javascript脚本和服务器之间形成动态交互的效果，XMLHTTPRequest的最大的优点是页面内的javascript脚本可以不用刷新页面，而直接和服务器发生交互，从而实现页面无刷新的效果。

**1.下面首先来介绍一下XMLHttpRequest的详细属性和方法：**

<table style="font-size:14px; color:rgb(0,0,0); font-family:Arial; line-height:26px"> 
 <tbody> 
 <tr> 
 <td> 方法和属性 </td> 
 <td> 描述 </td> 
 </tr> 
 <tr> 
 <td> Open（String method,String url,Boolean ansynch,String username,String password） </td> 
 <td> 指定和服务器端交互的HTTP方法，URL地址及其他请求信息。 </td> 
 </tr> 
 <tr> 
 <td> 其中method表示HTTP请求方法。支持所有HTTP的方法，一般使用“GET”，“POST”url表示请求的服务器的地址 Asynch表示是否采取异步方式，true表示异步，false表示同步 后两个参数可以不指定，usrename和password分别表示用户名和密码，提供http认证机制需要的用户名和密码 </td> 
 </tr> 
 <tr> 
 <td> Send(content) </td> 
 <td> 向服务器发出请求，如果采用异步方式，该方法会立即返回 </td> 
 </tr> 
 <tr> 
 <td> Content可以不指定或者指定为null表示不发送数据 其内容可以使DOM对象，输入流或是字符串 </td> 
 </tr> 
 </tbody> 
</table>

<table style="font-size:14px; color:rgb(0,0,0); font-family:Arial; line-height:26px"> 
 <tbody> 
 <tr> 
 <td> setRequestHeader(String header,String value) </td> 
 <td> 设置HTTP请求中的指定头部header的值为value。 次方法需在open方法以后调用 </td> 
 </tr> 
 <tr> 
 <td> getAllReponseHeader() </td> 
 <td> 返回包含HTTP的所有响应头包括Content-Length，Date，URI等内容 </td> 
 </tr> 
 <tr> 
 <td> 返回值是一个字符串，包含所有头信息，其中每一个键名和键值用冒号分开，每一组键之间用CR和LF（回车加换行符）来分隔 </td> 
 </tr> 
 <tr> 
 <td> GetResponseHeader(String header) </td> 
 <td> 返回HTTP响应头中指定的键名header对应的值 </td> 
 </tr> 
 <tr> 
 <td> Abort() </td> 
 <td> 停止当前http请求，对应的XMLHttpRequest对象会复位到未初始化的状态 </td> 
 </tr> 
 <tr> 
 <td> responseText </td> 
 <td> 服务器响应的文本内容 </td> 
 </tr> 
 <tr> 
 <td> ResponseXML </td> 
 <td> 服务器响应的XML内容对应的DOM对象 </td> 
 </tr> 
 <tr> 
 <td> Status </td> 
 <td> 服务器返回的http状态码 200表示“成功”，404表示“未找到”。500表示“服务器内容部错误” </td> 
 </tr> 
 <tr> 
 <td> statusText </td> 
 <td> 服务器返回状态码的文本信息 </td> 
 </tr> 
 <tr> 
 <td> readyState </td> 
 <td> 表示XMLHttpRequest对象的状态 0=未初始化。对象已创建，未调用open 1=open方法成功调用以后。Send方法未调用 2=send方法已经调用，尚未开始接受数据 3=正在接受数据。Http响应头信息已经接受，响应数据尚未接受完成。 4=完成。响应数据接受完成。 </td> 
 </tr> 
 <tr> 
 <td> Onreadystatechage </td> 
 <td> 请求状态改变的时间触发器（readyState变化时会调用这个属性上注册的javascript函数） </td> 
 </tr> 
 </tbody> 
</table>

**2.然后介绍一下XMLHttpRequest的使用步骤：**

# 一、初始化XMLHttpRequest对象 #

在使用XMLHttpRequest对象之前需要将XMLHttpRequest对象实例化，因为各个浏览器对这个实例化过程的实现不同，所以针对不同的浏览器实例化XMLHttpRequest对象的方式也不尽相同。

**针对微软IE浏览器：**

Js代码   ![收藏代码][icon_star.png]

1.  **var** xmlHttp = **new** ActiveXObject("Microsoft.XMLHTTP");

**针对其他的浏览器：**

Js代码   ![收藏代码][icon_star.png]

1.  **var** xmlHttp = **new** XMLHttpRequest();

所以，综合了这两种实例化XMLHttpRequest的形式，就可以提取出一个实例化的公共方法，代码如下：

Js代码   ![收藏代码][icon_star.png]

1.  //实例化XMLHttpRequest对象  
2.  **function** createXMLHttpRequest()\{  
3.      **if**(window.XMLHttpRequest)\{  
4.          xmlHttp = **new** XMLHttpRequest();   
5.      \}**else** **if**(window.ActiveXObject)\{  
6.          xmlHttp = **new** ActiveXObject("Microsoft.XMLHTTP");  
7.      \}  
8.  \}

# 二、指定响应处理函数 #

接下来就要指定当服务器返回信息时客户端的处理方式。只需将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性即可，比如：

Js代码   ![收藏代码][icon_star.png]

1.  xmlHttp.onreadystatechange = callBack;

需要说明的是，这个函数名称不加括号，不带参数；也可以使用JavaScript即时定义函数的方式定义响应函数，比如：

Js代码   ![收藏代码][icon_star.png]

1.  xmlHttp.onreadystatechange = **function**()\{  
2.           // Do something...  
3.  \}

# 三、发送HTTP请求 #

指定响应处理函数后，就可以向服务器发出HTTP请求了。这需要调用XMLHttpRequest对象的open()和send()方法。

Js代码   ![收藏代码][icon_star.png]

1.  xmlHttp.open("get/Post","URL",**true**/**false**);  
2.  xmlHttp.send(**null**);

##       3.1 open()方法详解  ##

Js代码   ![收藏代码][icon_star.png]

1.  //XMLHttpRequest对象的open()方法原型  
2.  **void** open(string method, string URL , **boolean** asynch, string username, string password);

open()方法表示会建立对服务器的调用，这是初始化一个请求的纯脚本方法。

它有2个必要的参数，还有3个可选的参数。**method**表示向服务器发送信息的方式，可以为Get或Post；**URL**表示所调用的服务器资源的URL；**asynch**是一个布尔值，指示这个调用时异步还是同步，默认为true；**username**和**password**允许我们指定一个特定的用户名和口令。 一般使用时只取前三个参数即可。

##       3.2 send()方法详解 ##

Js代码   ![收藏代码][icon_star.png]

1.  //XMLHttpRequest对象的send()方法原型  
2.  **void** send(content);

send()方法具体向服务器发送请求。如果请求声明为异步的，这个方法就会立即返回，否则它会等待，知道接收到响应为止。参数**content**是可选的，可以是一个DOM对象的实例、一个输入流或一个串。传入的内容会作为请求体的一部分发送。

# 四、处理服务器返回的信息 #

在第二部中我们为XMLHttpRequest指定了响应处理函数，响应处理函数检查XMLHttpRequest对象的readyState属性值的变化，如果readyState值为4时，代表服务器已经传回所有信息，可以开始处理信息并更新页面内容了。

Js代码   ![收藏代码][icon_star.png]

1.  **function** callBack()\{  
2.          **if**(xmlHttp.readyState==4)\{  
3.      **if**(xmlHttp.status==200)\{  
4.              //do something with xmlHttp.responseText;  
5.              xmlHttp.responseText;  
6.      \}     
7.          \}  
8.  \}

##       4.1 readyState属性详解 ##

**readyState**属性用来表示请求的状态，有5个可取值，分别是：

“0”：表示未初始化，即对象已经建立，但是尚未初始化(尚未调用open()方法)；

“1”：表示正在加载，此时对象已建立，尚未调用send()方法；

“2”：表示请求已发送，即send()方法已调用；

“3”：表示请求处理中；

“4”：表示请求已完成，即数据接收完毕。

##       4.2 status、statusText属性详解 ##

**status**：返回当前请求的HTTP状态码(只读)；

**statusText**：返回当前请求的响应行状态(只读)。

##       4.3 responseText、responseXML属性详解 ##

**responseText**属性表示服务器的文本响应，其处理结果以字符串形式返回。

**responseXML**属性表示服务器响应，其结果将格式化为XML Document对象。

上述四个步骤，就是XMLHttpRequest对象在Ajax程序中的**运行周期**，即初始化、指定响应函数、发送请求、处理响应。

下面是本示例的**完整代码**：

Js代码   ![收藏代码][icon_star.png]

1.  **var** xmlHttp;  
2.    
3.  **function** AjaxFunction()\{  
4.          createXMLHttpRequest();  
5.          **if**(xmlHttp!=**null**)\{  
6.      xmlHttp.onreadystatechange = callBack;  
7.      xmlHttp.open("get/Post","URL",**true**/**false**);  
8.      xmlHttp.send(**null**);  
9.          \}     
10. \}     
11.   
12. //实例化XMLHttpRequest对象  
13. **function** createXMLHttpRequest()\{  
14.         **if**(window.XMLHttpRequest)\{  
15.     xmlHttp = **new** XMLHttpRequest();   
16.         \}**else** **if**(window.ActiveXObject)\{  
17.     xmlHttp = **new** ActiveXObject("Microsoft.XMLHTTP");  
18.         \}  
19. \}  
20.   
21. //指定响应函数  
22. **function** callBack()\{  
23.         **if**(xmlHttp.readyState==4)\{  
24.                 **if**(xmlHttp.status==200)\{  
25.             //do something with xmlHttp.responseText;  
26.             xmlHttp.responseText;  
27.                 \}     
28.         \}  
29. \}

有些人可能会有疑问，为什么不用JQuery中的ajaxt方法呢？

这是因为JQuery中的ajax方法需要Jquery文件的依赖，如果是想要依靠原生的js不想导入JQuery文件的情况下是不能使用的，针对于这些场景所以XMLHttpRequest还是相当受欢迎的。

如果还是不清楚的可以参考一下这几篇博客：[点击打开链接][Link 1]  [点击打开链接][Link 2]  写的相当的不错哦。

**如博客内容有问题或有疑义，请及时提出，不甚感谢。本人QQ：208017534**

[icon_star.png]: /images/20220717/74fef517d5c84ddbbad83711d50c3a37.png
[Link 1]: http://xusweeter.iteye.com/blog/747099
[Link 2]: http://blog.csdn.net/laner0515/article/details/7784075