五步使用法——搞定XMLHttpRequest

- 日理万妓 2022-08-08 00:53 204阅读 0赞

# 一、什么是XMLHttpRequest #

**        XMLHttpRequest 对象是AJAX 的 Web 应用程序架构的核心。XMLHttpRequest 对象用于在后台与服务器交换数据。 **

**        当页面全部加载完毕后，客户端通过该对象向服务器请求数据，服务器端接受数据并处理后，向客户端反馈数据。 XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。**

**        XMLHttpRequest 对象是开发者的梦想，因为：  
               在不重新加载页面的情况下更新网页  
               在页面已加载后从服务器请求数据  
               在页面已加载后从服务器接收数据  
               在后台向服务器发送数据**

# 二、如何使用——五步使用法 #

## 1、建立XMLHttpRequest对象    ##

**创建 XMLHttpRequest 对象的语法：**

**现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象**

xmlhttp=new XMLHttpRequest();

**老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：**

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

**不同浏览器中XMLHttpRequest对象建立的方法不同：  
IE7，IE8，FireFox,Mozilla,Safari,Opera中直接new XMLHttprequest()  
IE6，IE5.5，IE5则需要通过用某个正确的ActiveXObject控件的名称通过new ActiveXObject(控件名)的方式**

## 2、注册回调对象 ##

//注册回调方法
 xmlhttp.onreadystatechange=callback;

**        设置回调函数时，不要在函数名后面加括号。加括号表示将回调函数的返回值注册给onreadystatechange属性。正确的方式应该是将回调函数的名字注册给这个属性**

**        实际上每次readyState的值发生变化的时候，回调函数都会被调用，但是一般我们只关心状态4。如果只关心正确的响应数据，只要在执行send方法之前设置回调函数即可。**

## 3、使用open方法设置和服务器交互的基本信息    ##

xmlhttp.open("GET","Ajax?name=" + userName,true );
 //true代表异步，false代表同步
 xmlhttp.open("post", "Ajax", true);
 //post方式交互所需要增加的代码
 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

**使用GET方式，请求数据位于url链接中，后面的send方法的参数直接写null就可以  
使用POST方式时，open方法后面需要先调用setRequestHeader方法，来设置ContentType的值，然后调用send方法，send的参数就是请求的数据**

## 4、设置发送的数据，开始和服务器端交互 ##

//设置向服务器端发送的数据，启动和服务器端的交互
 xmlhttp.send(null);　
 xmlhttp.send("name=" + userName); //post需要填写提交的数据

## 5、在回调函数中判断交互是否结束，相应是否正确，并根据需要获取服务器端返回的数据，更新页面内容    ##

<pre name="code" class="html">//判断和服务器端的交互是否完成，还要判断服务器端是否正确返回了数据
 if(xmlhttp.readyState == 4){　　　//状态＝4响应数据接收成功
 if(xmlhttp.status==200){
 //表示服务器的响应代码是200，正确的返回了数据
 //纯文本数据的接受方法
 var message=xmlhttp.responseText;
 //XML数据对应的DOM对象的接受方法
 //使用的前提是，服务器需要设置content-type为text/xml
 //记忆向div标签中填充文本内容的方法
 var div=document.getElementById("message");
 div.innerHTML=message;
 }
 }
 }

# 三、属性和方法 #

## **方法：** ##

![Center][]

## **属性：** ##

![Center 1][]

![Center 2][]

![Center 3][]

#     #

# 总结 #

**        AJAX无非就是新思想（异步）旧技术（B/S）。而XMLHttpRequest就是AJAX的核心，负责进行异步数据检索，通过它，在不重载页面的情况与Web服务器交换数据，以达到更好的用户体验。**

[Center]: /images/20220805/7f6e798c5026430aa17dce2dbc463408.png
[Center 1]: /images/20220805/e1b1df95a0df4e01a7ecf04e826267d9.png
[Center 2]: /images/20220805/708732e46cc94a78b58a41e76297075e.png
[Center 3]: /images/20220805/a826ce56a5644b7296bed675cfc1309a.png