五步使用法——搞定XMLHttpRequest

一、什么是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 对象

<strong><span style="font-size:18px;">xmlhttp=new XMLHttpRequest();</span></strong>

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

<strong><span style="font-size:18px;">xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");</span></strong>

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

2、注册回调对象

<span style="font-size:18px;"><strong>//注册回调方法
xmlhttp.onreadystatechange=callback;</strong></span>

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

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

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

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

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

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

<span style="font-size:18px;"><strong>//设置向服务器端发送的数据，启动和服务器端的交互
xmlhttp.send(null);　
xmlhttp.send("name=" + userName);  //post需要填写提交的数据</strong></span>

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

<pre name="code" class="html"><span style="font-size:18px;"><strong>//判断和服务器端的交互是否完成，还要判断服务器端是否正确返回了数据
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;
}
}
}</strong></span>

三、属性和方法

方法：

属性：

总结

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