AJAX

 

1.什么是AJAX？

 Asynchronous Javascript And XML：异步的JS和XML，由Google2002年在GoogleSuggest应用提出，目标实现客户端和服务器“同时”运行——异步的HTTP请求和响应，客户端不会经常出现“一片惨白”，提高浏览体验。

 

AJAX涉及到的技术：HTML、CSS、JS、DOM、XML、JSON等，属于前端范畴，是纯客户端技术。

AJAX实现的效果：

  (1)客户端和服务器异步运行

  (2)客户端页面的局部刷新

  (3)动态页面的静态化

AJAX底层工作原理：

  

 

 

2.XMLHttpRequest的常用成员——重点

 XHR对象的作用：发起异步的HTTP请求消息，并接收服务器返回的响应消息。

常用成员属性：
status：0	保存着服务器返回的响应消息的状态码
statusText：''	保存着服务器返回的响应消息的原因短句
responseText：''	保存着响应消息的主体——看做一段String
responseXML：null	保存着响应消息的主体——看做一个XMLDOM对象
timeout：0	设置XHR发起请求消息后，等待服务器给出响应消息的持续时间
readyState：0 只读的，其值是随着请求/响应的进程而自动改变的——用于描述当前请求/响应进行到哪一步了	0 - UNSENT 请求消息尚未发送 1 - OPENED XHR已创建请求消息，打开针对服务器的连接 2 - HEADERS_RECEIVED XHR对象已经接收到响应消息的头部 3 - LOADING XHR正在加载响应主体数据 4 - DONE XHR对象已经接收完毕响应消息
常用成员事件：
onreadystatechange：fn	当XHR的readyState值发生改变，触发此句柄
ontimeout：fn	当XHR的请求超时，触发此句柄
onerror：fn	当XHR发生请求/响应错误，触发此句柄
常用的成员方法：
getAllResponseHeaders()	获取响应消息中所有的头部
getResponseHeader(headerName)	获取响应消息中指定的头部
open(METHOD, URI, isAysnc)	创建一个HTTP请求消息，打开一个针对服务器的连接
send( null/'k1=v1&k2=v2&...' )	发送HTTP请求消息
setRequestHeader(name, value)	在请求消息发送之前，设置一个请求消息头部

 

 

3.使用AJAX的步骤

  (1)创建XHR对象

var xhr = null;

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}else{

xhr = new ActiveXObject('Microsoft.XMLHTTP');

}

  (2)绑定onreadystatechange事件监听函数

xhr.onreadystatechange = function(){

}

  (3)创建请求消息，建立到服务器的连接

xhr.open('GET/POST', 'xx.php', true);

  (4)发送请求消息

xhr.send( null/data );

Eclipse系列软件通用快捷键：

Ctrl+D 删除光标所在行

Ctrl+Alt+↓ 复制光标所在行

Alt+↑/↓ 快速移动当前行

 

优悦集团（深圳）有限公司

悦享科技  乐享生活

微信：YOJOYGROUP

微博: http://weibo.com/YOJOYGROUP

官网：http://www.yojoygroup.com/

联系&投稿：service@yojoygroup.com