//ajax配置步骤
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
???var xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); ?//IE 5/6中定义方法
???var xmlHttpRequest = new XMLHttpRequest(); ?//其他浏览器定义方法
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
???XMLHttpRequest.open(method,URL,flag,name,password)
???????method：该参数用于指定HTTP的请求方法，一共有get、post、head、put、delete五种方法，常用的方法为get和post。
???????URL：该参数用于指定HTTP请求的URL地址，可以是绝对URL，也可以是相对URL。
???????flag：该参数为可选参数，参数值为布尔型。该参数用于指定是否使用异步方式。true表示异步方式、false表示同步方式，默认为true。
???????name：该参数为可选参数，用于输入用户名。如果服务器需要验证，则必须使用该参数。
???????password：该参数为可选参数，用于输入密码。如果服务器需要验证，则必须使用该参数。通常可以使用以下代码来访问一个网站文件的内容。
???????xmlHttpRequest.open("get","http://www.aspxfans.com/BookSupport/JavaScript/ajax.htm",true);
(3)设置响应HTTP请求状态变化的函数.
???????⑴未初始化状态。在创建完XMLHttpRequest对象时，该对象处于未初始化状态，此时XMLHttpRequest对象的readyState属性值为0。
???????⑵初始化状态。在创建完XMLHttpRequest对象后使用open()方法创建了HTTP请求时，该对象处于初始化状态。此时XMLHttpRequest对象的readyState属性值为1。
???????⑶发送数据状态。在初始化XMLHttpRequest对象后，使用send()方法发送数据时，该对象处于发送数据状态，此时XMLHttpRequest对象的readyState属性值为2。
???????⑷接收数据状态。Web服务器接收完数据并进行处理完毕之后，向客户端传送返回的结果。此时，XMLHttpRequest对象处于接收数据状态，XMLHttpRequest对象的readyState属性值为3。
???????⑸完成状态。XMLHttpRequest对象接收数据完毕后，进入完成状态，此时XMLHttpRequest对象的readyState属性值为4。此时接收完毕后的数据存入在客户端计算机的内存中，可以使用responseText属性或responseXml属性来获取数据。
???判断http请求状态个返回状态为4和200的时候，表示请求成功。
(4)发送HTTP请求.
???XMLHttpRequest.send(data)
(5)获取异步调用返回的数据.
---------
ajax实例
<html>
<head>
???<title>AJAX实例</title>
???<script language="javascript" type="text/javascript">
???????var xmlHttpRequest; ?//定义一个变量用于存放XMLHttpRequest对象
???????function createXMLHttpRequest() { //定义一个用于创建XMLHttpRequest对象的函数
???????????if (window.ActiveXObject) {
???????????????xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");//IE 5、6浏览器的创建方式
???????????} else if (windew.XMLHttpRequest) {
???????????????xmlHttpRequest = new XMLHttpRequest();//其他浏览器中的创建方式
???????????}
???????}
???????function httpStateChange() { //响应HTTP请求状态变化的函数
???????????//判断异步调用是否完成
???????????if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {//判断异步调用是否成功,如果成功开始局部更新数据
???????????????var node = document.getElementById("myDIv");
???????????????//更新数据
???????????????node.firstChild.nodeValue = xmlHttpRequest.responseText;
???????????} else {
???????????????alert("异步调用出错/n返回的HTTP状态码为:" + xmlHttpRequest.status + "/n返回的HTTP状态信息为:" + xmlHttpRequest.statusText);//如果异步调用未成功,弹出警告框,并显示出错信息
???????????}
???????}
???????function getData(name, value) { //异步调用服务器段数据(回调函数)
???????????createXMLHttpRequest(); //创建XMLHttpRequest对象
???????????if (xmlHttpRequest != null) {
???????????????xmlHttpRequest.open("get", "ajax.text", true)//创建HTTP请求
???????????????xmlHttpRequest.onreadystatechange = httpStateChange; //设置HTTP请求状态变化的函数
???????????????xmlHttpRequest.send(null);//发送请求
???????????}
???????}
???</script>
</head>
???<body>
???????<div id="myDiv">原数据</div>
???????<input type="button" value="更新数据" onclick="getData()">
???</body>
</html>
---如何封装一个ajax函数
本技术借鉴博文（http://www.cnblogs.com/zhiqiangzhang37/archive/2013/10/02/3349647.html）
/* 封装ajax函数
* @param {string}opt.type http连接的方式，包括POST和GET两种方式，默认使用GET
* @param {string}opt.url 发送请求的url
* @param {boolean}opt.async 是否为异步请求，true为异步的，false为同步的
* @param {object}opt.data 发送的参数，格式为对象类型
* @param {function}opt.success ajax发送并接收成功调用的回调函数
*/
function ajax(opt) {
??? opt = opt || {};
var type = opt.type || ‘GET‘;
??? type = type.toUpperCase() || ‘GET‘;
??? var url = opt.url || ‘‘;
??? var async = opt.async || true;
??? var data = opt.data || null;
??? var success = opt.success || function () {};
??? var xmlHttp = null;
??? if (XMLHttpRequest) {
??????? xmlHttp = new XMLHttpRequest();
??? }
??? else {
??????? xmlHttp = new ActiveXObject(‘Microsoft.XMLHTTP‘);
??? }
??? var params = [];
??? for (var key in data){
??????? params.push(key + ‘=‘ + data[key]);
??? }
??? var dataStr = params.join(‘&‘);
??? if (type === ‘POST‘) {
??????? xmlHttp.open(type, url, async);
??????? xmlHttp.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded;charset=utf-8‘);
??????? xmlHttp.send(dataStr);
??? }
??? else {
??????? xmlHttp.open(type, url + ‘?‘ + dataStr, async);
??????? xmlHttp.send(null);
??? }
??? xmlHttp.onreadystatechange = function () {
??????? if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
??????????? success(xmlHttp.responseText);
??????? }
??? };
}
希望大家共同学习，多提宝贵意见
ajax学习
原文地址：http://www.cnblogs.com/zhangyaohui/p/7536038.html