AJAX—XMLHttpRequest对象

使用XHR发起HTTP请求的步骤

  //1 创建xhr对象

<span style="white-space:pre">	</span>var xhr = null;

<span style="white-space:pre">	</span>if(window.XMLHttpRequest){//其它浏览器

<span style="white-space:pre">		</span>xhr = new XMLHttpRequest();

<span style="white-space:pre">	</span>}else {                          //解决老IE兼容问题

   <span style="white-space:pre">		</span>xhr = new ActiveXObject('Microsoft.XMLHttp');

<span style="white-space:pre">	</span>}

  //2 监听xhr的状态改变事件

<span style="white-space:pre">	</span>xhr.onreadystatechange = function(){

<span style="white-space:pre">		</span>if(xhr.readyState===4){//响应消息接收完成

<span style="white-space:pre">		</span>if(xhr.status===200){//响应完成且成功

<span style="white-space:pre">		</span>}else{//响应完成但有问题
<span style="white-space:pre">	</span>

<span style="white-space:pre">			</span>}

<span style="white-space:pre">	</span>

<span style="white-space:pre">		</span>}

<span style="white-space:pre">	</span>}

  //3 连接到服务器

<span style="white-space:pre">	</span>xhr.open('GET', 'x.php', true);//参数为(“请求方式”，“请求文件地址”，“是否是异步请求”)
	<span style="white-space:pre">	</span>		<span style="white-space:pre">	</span>//GET请求时，请求内容放在地址后，“？K=V”

  //4 发送请求消息

<span style="white-space:pre">	</span>xhr.send( null / 'k=v&k=v' );
 

 

(1)AJAX概述    AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

   实现原理：在客户端浏览网页内容的同时，服务器在提供最新的内容，局部更新在页面中

——无提交无刷新的页面内容局部更新技术。

   AJAX应用涉及到的技术：HTML、CSS、JS、DOM、XML、HTTP协议等

——纯前端技术，需要与Web服务器交互。

 

(2)AJAX应用的核心JS对象：

——XMLHttpRequest：向Web服务器发起HTTP请求，并接收响应消息。

 

 

 XMLHttpRequest对象成员

readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
	0：UNSENT			请求消息未初始化
	1：OPENED			XHR已经打开到服务器的链接(xhr.open()已启动)
	2：HEADERS_RECEIVED			请求已经发送完成，开始接受响应消息头部
	3：LOADING			解析，加载响应消息主体
	4：DONE			响应消息接受完成
status:	响应状态码readyState变为2才有值--200表示响应成功
statusText	原因断句，readyState变为2才有值
response	响应数据
responseType	响应数据的类型                //默认值是空字符串
responseText	字符串形式的响应数据
responseXML	XML形式的响应数据
responseURL	返回响应的经过序列化的URL
timeout:0	用于规定超时时间，（与ontimeout事件一起使用）
XHR对象的核心成员事件
onreadystatechange		当xhr.readyState属性值发生改变
XHR对象的成员方法
getAllResponseHeaders()
getResponseHeader()			读取响应头部
setRequestHeader()			设置请求头部
Open()			打开到服务器的链接
send()			发送请求消息