1. 创建 XMLHttpRequest 对象的一个实例

var xmlHttp;
function createXMLHttpRequest() {//检查是否支持 ActiveXObject 控件（IE浏览器）if(window.ActiveXObject) {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");} else if(window.XMLHttpRequest) {xmlHttp = new XMLHttpRequest(); }
}

2. 方法和属性

2.1 常用的方法有 open( ) 和 send( ) 。

void open(string method, string url, boolean async, string username, string password) 建立对服务器的调用。

method: GET、POST或PUT。
url：相对url或绝对url。
async：可选，默认值为true，表示异步请求；false表示同步。

void send(context)：具体向服务器发出请求。如果请求声明为异步，这个方法就会立即返回，否则它会等待直到接收到响应为止。

可选参数可以是 DOM 对象的实例、输入流、或者串。若请求类型为 GET 时，参数使用 null；若为 POST 时，参数内容将作为请求体的一部分发送。

void setRequestHeader(string header, string value)：为请求中一个给定的首部设置值。这个方法必须在 open() 之后才能调用。

header：要设置的首部。
value：在首部中放置的值。

void abort()：停止请求。

string getAllResponseHeaders()：返回一个串，其中包含HTTP请求的所有响应首部，首部包括Content-length、Data和URL。

string getResponseHeaders(string header)：与上面的 getAllResponseHeaders( ) 对应。

header表示你希望得到的指定首部值，并且把这个值作为串返回。

2.2 标准 XMLHttpRequest 属性

属性	描述
onreadystatechange	每个状态改变时都会触发这个事件处理器，值可以为回调函数的指针
readyState	请求的状态。有5个可取值。（在下方有说明）
responseText	服务器的响应，表示一个串
responseXML	服务器的响应，表示为XML。这个对象可解析为一个 DOM 对象
status	服务器的 HTTP 状态码（200对应 OK，404对应 Not Found …）
statusText	HTTP 状态码的相应文本（OK 或 Not Found …）

readyState 请求状态的5个值：

0：未初始化
1：正在加载
2：已加载
3：交互中
4：完成

3. Ajax 交互示例

Created with Raphaël 2.1.0 用户界面用户界面 ajax引擎（XmlHttpRequest） ajax引擎（XmlHttpRequest） Web服务器 Web服务器 js创建XHR对象实例调用请求（open+send）服务器响应，并触发回调函数根据readyState和status返回数据

请求返回到浏览器时的首部设置：

Content-Type：text/html
Cache-Control：no-cache

4. GET 与 POST

GET 请求通过向 url 传递参数，浏览器和服务器会限制其长度。
POST 则不会限制发送给服务器的数据量大小。一般来讲，

使用 GET 方法从服务器获取数据。
使用 POST 方法改变服务器上的状态。

使用 POST 时，需要设置 XMLHttpRequest 对象的 Content-Type 首部：

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

5. 简单请求

5.1 回调

onreadystatechange 属性存储了回调函数的指针。当 XMLHttpRequest 对象的内部状态发生改变时，就会调用这个回调函数。当进行了异步调用，请求就会发出，脚本立即处理执行。一旦发出了请求，对象的 readyState 属性会经过几个变化，一般处理的是服务器响应结束时的状态。
回调函数 callback 方法：

xmlHttp.onreadystatechange = callback; //函数指针
function callback() {if(xmlHttp.readyState == 4) {if(xmlHttp.Status == 200) {//可以简单的设置div的文本等等}       }
}

5.2 简单请求的示例

//javascript
var xmlHttp;function createXMLHttpRequest() {//检查是否支持 ActiveXObject 控件（IE浏览器）if(window.ActiveXObject) {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");} else if(window.XMLHttpRequest) {xmlHttp = new XMLHttpRequest(); }
}function startRequest() {createXMLHttpRequest();xmlHttp.onreadystatechange = handleStateChange;xmlHttp.open("GET", "simpleResponse.xml", true);xmlHttp.send(null);
}function handleStateChange() {if(xmlHttp.readyState == 4) {if(xmlHttp.status == 200) {alert("The server replied with: " + xmlHttp.responseText);//显示 simpleResponse.xml 里的文本}}
}

<!--html-->
<form action="#"><input type="button" value="Start Basic Asynchronous Request" onclick="startRequest();" />
</form>

注：以上摘自《Ajax基础教程》

Ajax基础教程【2】使用XMLHttpRequest对象相关推荐

Ajax基础教程电子版
Ajax基础教程电子版添加时间:2006-4-26 19:32:07 软件图片: 授权形式:免费适用平台:Win98/WinMe/WinNT/Win2000/WinXP 软件语言:简体中文下载次 ...
[转]AJAX基础教程
AJAX基础教程这篇文章将带您浏览整个AJAX的基本概貌,并展示两个简单的例子让您轻松上路. 什么是 AJAX? AJAX (异步 JavaScript 和 XML) 是个新产生的术语,专为描述Ja ...
迅速成为炙手可热的新一代程序员看《Ajax基础教程》
Ajax基础教程 Foundations of Ajax | Ryan Asleson著金灵译人民邮电出版社 | 7-115-14481-8/TP·5211 | 2006-02-16 | ...
javascript基础教程_JavaScript基础教程（九）对象、类的定义与使用
对象.类的定义与使用对象与类是面向对象程序设计语言教学过程中不可避免需要讲解的内容之一.很多人将两者混为一谈,简单认为对象就是类,类就是对象.实际上深入分析的话,对象与类的区别还是较为明显的.本文主 ...
java ajax教程_Jquery ajax基础教程
jQuery的Ajax带来了无需刷新的web页面革命.这里就详细介绍一下jQuery所涉及到的Ajax操作.(无需特殊说明,均需要有服务器配置,这里本人用的是Tomcat 7) 1.基于请求加载文件数 ...
《Ajax基础教程》读书笔记
嗯,昨天看那个方案要学习这个,就准备刷这部书,争取国庆节把它刷完,嗯,但是还有一部分jQuery没有看完,想来时间是够用,加油吧生活,高兴是Y君私信我了,但是很没落的话,嗯,想起她写给我的句子:在高楼 ...
python基础教程：对可变对象和不可变对象的详解
数据类型分为可变.不可变.可变对象表示可以原处修改该数据对象,不可变对象表示必须创建新对象来保存修改后的数据. 在基础数据类型中: 数值.字符串.元组.frozenset是不可变对象列表.set.d ...
AJAX基础教程zz
这篇文章将带您浏览整个AJAX的基本概貌,并展示两个简单的例子让您轻松上路. 什么是 AJAX? AJAX (异步 JavaScript 和 XML) 是个新产生的术语,专为描述JavaScrip ...
python基础教程： __del__() 清空对象
python垃圾回收机制:当一个对象的引用被完全清空之后,就会调用__del__()方法来清空这个对象当对象的引用没有被完全清空时,代码如下: class C():def __init__(self ...

Ajax基础教程【2】使用XMLHttpRequest对象