很多人做了较久的web研发，但对ajax的基本原理都不甚了解，主要原因可能是很多流行框架都封装的很好，如jquery等。 但我们还是需要知道其最基本的原理是什么，才能在工作中用到恰到好处。

//ajax 对象的创建

var xmlhttp;

if (window.XMLHttpRequest) {

// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

} else {

// code for IE6, IE5

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

}

//ajax 请求服务端页面(post方式)

xmlHttp.open("POST", "user_validate.php", true);

var data =  'username=admin1';

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");

xmlHttp.onreadystatechange = processRequest;//回调函数

xmlHttp.send(data);

function processRequest(){

if(xmlHttp.readyState == 4) {

if(xmlHttp.status == 200) {

var rs = xmlHttp.responseText;

//code ....

}

}

}

XmlHttp对象参考：

属性：

onreadystatechange* 指定当readyState属性改变时的事件处理句柄。

readyState 返回当前请求的状态，只读

responseBody 将回应信息正文以unsigned byte数组形式返回，只读

responseStream 以Ado Stream对象的形式返回响应信息，只读

responseText 将响应信息作为字符串返回，只读

responseXML 将响应信息格式化为Xml Document对象并返回，只读

status 返回当前请求的http状态码，只读

statusText 返回当前请求的响应行状态，只读

* 表示此属性是W3C文档对象模型的扩展.

方法：

abort 取消当前请求

getAllResponseHeaders 获取响应的所有http头

getResponseHeader 从响应信息中获取指定的http头

open 创建一个新的http请求，并指定此请求的方法、URL以及验证信息(用户名/密码)

send 发送请求到http服务器并接收回应

setRequestHeader 单独指定请求的某个http头

onreadystatechange事件是在readyState属性发生改变时触发的，

readyState的值表示了当前请求的状态，在事件处理程序中可以根据这个值来进行不同的处理。

readyState有五种可取值0：尚未初始化，1：正在加载，2：加载完毕，3：正在处理；4：处理完毕。一旦readyState属性的值变成了4，就可以从服务器返回的响应数据进行访问了。

本文固定链接: http://www.webzhishi.com/ajax_basic/ | web知识网