标签：
一．XMLHttpRequest
Ajax 技术核心是XMLHttpRequest 对象(简称XHR)，这是由微软首先引入的一个特性，其他浏览器提供商后来都提供了相同的实现。在XHR 出现之前，Ajax 式的通信必须借助一
些hack 手段来实现，大多数是使用隐藏的框架或内嵌框架。XHR 的出现，提供了向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器获取更多的信息，这就意味着，用户只要触发某一事件，在不刷新网页的情况下，更新服务器最新的数据。虽然Ajax 中的x 代表的是XML，但Ajax 通信和数据格式无关，也就是说这种技术不一定使用XML。
function createXHR() { var xmlhttp=null; if(window.ActiveXObject){ // IE的情况 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }else{ // 非IE的情况 xmlhttp=new XMLHttpRequest(); } return xmlhttp } var xhr = new createXHR();
在使用XHR 对象时，先必须调用open()方法，它接受三个参数：要发送的请求类型(get、post)、请求的URL 和表示是否异步。
xhr.open(‘get‘, url, false);
open()方法并不会真正发送请求，而只是启动一个请求以备发送。通过send()方法进行发送请求，send()方法接受一个参数，作为请求主体发送的数据。如果不需要则，必须填null。执行send()方法之后，请求就会发送到服务器上。
xhr.send(null);
当请求发送到服务器端，收到响应后，响应的数据会自动填充XHR 对象的属性。那么一共有四个属性：
1、属性名说明:responseText 作为响应主体被返回的文本
2、responseXML:如果响应主体内容类型是"text/xml"或"application/xml"，则返回包含响应数据的XML DOM 文档
3、status:响应的HTTP 状态
4、statusText:HTTP 状态的说明
接受响应之后，第一步检查status 属性，以确定响应已经成功返回。一般而已HTTP 状态代码为200 作为成功的标志。除了成功的状态代码，还有一些别的：
1、200 OK 服务器成功返回了页面
2、400 Bad Request 语法错误导致服务器不识别
3、401 Unauthorized 请求需要用户认证
4、404 Not found 指定的URL 在服务器上找不到
5、500 Internal Server Error 服务器遇到意外错误，无法完成请求
6、503 ServiceUnavailable 由于服务器过载或维护导致无法完成请求
addEvent(document, ‘click‘, function () { var xhr = new createXHR(); xhr.open(‘get‘, ‘demo.php?rand=‘ + Math.random(), false); //设置了同步 xhr.send(null); if (xhr.status == 200) { //如果返回成功了 alert(xhr.responseText); //调出服务器返回的数据 } else { alert(‘数据返回失败！状态代码：‘ + xhr.status + ‘状态信息：‘ + xhr.statusText); } });
使用异步调用的时候，需要触发readystatechange 事件，然后检测readyState 属性即可。这个属性有五个值：
1、0 未初始化尚未调用open()方法
2、1 启动已经调用open()方法，但尚未调用send()方法
3、2 发送已经调用send()方法，但尚未接受响应
4、3 接受已经接受到部分响应数据
5、4 完成已经接受到全部响应数据，而且可以使用
二．GET与 POST
在提供服务器请求的过程中，有两种方式，分别是：GET 和POST。在Ajax 使用的过
程中，GET 的使用频率要比POST 高。
三、封装Ajax
function ajax(obj) { var xhr = new createXHR(); obj.url = obj.url + ‘?rand=‘ + Math.random(); obj.data = params(obj.data); if (obj.method === ‘get‘) obj.url = obj.url.indexOf(‘?‘) == -1 ? obj.url + ‘?‘ + obj.data : obj.url + ‘&‘ + obj.data; if (obj.async === true) { xhr.onreadystatechange = function () { if (xhr.readyState == 4) callback(); }; } xhr.open(obj.method, obj.url, obj.async); if (obj.method === ‘post‘) { xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded‘); xhr.send(obj.data); } else { xhr.send(null); } if (obj.async === false) { callback(); } function callback () { if (xhr.status == 200) { obj.success(xhr.responseText); //回调 } else { alert(‘数据返回失败！状态代码：‘ + xhr.status + ‘， 状态信息：‘ + xhr.statusText); } } }
标签：
原文地址：http://www.cnblogs.com/huangyy/p/4581384.html
