1.XMLHttpRequest对象
web2.0、Ajax的核心，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。因为它能够：
- 在不重新加载页面的情况下更新网页
- 在页面已加载后从服务器请求数据
- 在页面已加载后从服务器接收数据
- 在后台向服务器发送数据
浏览器支持
所有的现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）都支持XMLHttpRequest对象。该对象在Internet Explorer 5中首次引入，在 IE 5 和 IE 6 中，必须使用特定于 IE 的 ActiveXObject() 构造函数。
W3C标准化
XMLHttpRequest 对象还没有标准化，但是 W3C 已经开始了标准化的工作。
浏览器Ajax交互方式图解
2.属性和方法
属性1：readyState
返回值：返回XMLHttp请求的当前状态
语法：lValue = oXMLHttpRequest.readyState;
实例：
<script language="javascript" type="text/javascript">
var xmlhttp;
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP.4.0");
function send() {
xmlhttp.onreadystatechange = doHttpReadyStateChange;
xmlhttp.open("GET", "http://localhost/sample.xml", true);
xmlhttp.send();
}
function doHttpReadyStateChange() {
if (xmlhttp.readyState == 4)
alert("Done!");
}
</script>5 个状态中每一个都有一个相关联的非正式的名称，下表列出了状态、名称和含义：
| 状态 | 名称 | 描述 |
|---|---|---|
| 0 | Uninitialized | 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置，但是尚未调用open方法，尚未初始化。 |
| 1 | Open | open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。 |
| 2 | Sent | Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。 |
| 3 | Receiving | 数据传输中，所有响应头部都已经接收到。响应体开始接收但未完成。这时通过responseBody和responseText获取部分数据会出现错误。 |
| 4 | Loaded | HTTP 响应已经完全接收，此时可以通过通过responseBody和responseText获取完整的回应数据 。 |
属性2：responseText
返回值：返回目前为止服务器接收到的响应体。
语法：strValue = oXMLHttpRequest.responseText;
实例：使用XMLHttpRequest对象、其responseText属性和HTML元素的innerHTML属性实现的一个搜索功能。
//innerHTML.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Using responseText with innerHTML</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function startRequest(){
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET","innerHTML.xml",true);
xmlHttp.send(null);
}
function handleStateChange(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
document.getElementById("results").innerHTML=xmlHttp.responseText;
}
}
}
</script>
</head>
<body action="#" >
<form>
<input type="button" value="Search for Today's Activities" οnclick="startRequest();"/>
</form>
<div id="results"></div>
</body>
</html>//innerHTML.xml
<?xml version="1.0" encoding="utf-8"?>
<table border="1">
<tbody>
<tr><th>Activity Name</th><th>Location</th><th>Time</th></tr>
<tr><td>Waterskiing</td><td>Dock #1</td><td>9:00 AM</td></tr>
<tr><td>Volleyball</td><td>East Court</td><td>2:00 PM</td></tr>
<tr><td>Hiking</td><td>Trail 3</td><td>3:30 PM</td></tr>
</tbody>
</table>备注：此属性只读，将响应信息作为字符串返回（不包括头部），或者如果还没有接收到数据的话，就是空字符串，数据源为任何文本数据。XMLHttp尝试将响应信息解码为Unicode字符串，XMLHttp默认将响应数据的编码定为UTF-8，如果服务器返回的数据带BOM(byte-order mark)，XMLHttp可以解码任何UCS-2 (big or little endian)或者UCS-4 数据。注意，如果服务器返回的是xml文档，此属性并不处理xml文档中的编码声明，你需要使用responseXML来处理。
属性3：responseBody
返回值：返回的是二进制数据，可以通过Adodb.Stream进行加工控制，数据源可以为任何数据。
语法：strValue = oXMLHttpRequest.responseBody;
实例：暂无
备注：此属性只读，以unsigned array格式直接从服务器返回的未经解析的二进制数据。
属性4：responseXML
属性5：status
返回值：返回当前http状态码。
语法：IValue = oXMLHttpRequest.status;
备注：长整形标准http状态码，定义如下：
100:Continue 101:Switching protocols 200:OK 201:Created 202:Accepted 203:Non-Authoritative Information 204:No Content 205:Reset Content 206:Partial Content 300:Multiple Choices 301:Moved Permanently 302:Found 303:See Other 304:Not Modified
305:Use Proxy 307:Temporary Redirect 400:Bad Request 401:Unauthorized 402:Payment Required 403:Forbidden
404:Not Found 405:Method Not Allowed 406:Not Acceptable 407:Proxy Authentication Required 408:Request Timeout 409:Conflict 410:Gone 411:Length Required 412:Precondition Failed 413:Request Entity Too Large 414:Request-URI Too Long 415:Unsupported Media Type 416:Requested Range Not Suitable 417:Expectation Failed 500:Internal Server Error 501:Not Implemented 502:Bad Gateway 503:Service Unavailable 504:Gateway Timeout 505:HTTP Version Not Supported
属性6：statusText
返回值：返回http状态码对应的文字，如404对应Not Found。
语法：strValue = oXMLHttpRequest.statusText;
属性7：responseStream
返回值： Adodb Stream 形式返回响应信息。
语法：strValue = oXMLHttpRequest.responseStream;
=============================================华丽丽的分割线============================================================
事件句柄：onreadystatechange
每当 readyState 改变时，就会触发 onreadystatechange 事件。
实例：在onreadystatechange事件中，当readystate等于4且状态是200时，表示响应已就绪：
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}=============================================华丽丽的分割线============================================================
方法1：open()
功能：初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
方法2：send()
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();方法3：setRequestHeader()
实例：如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");方法4：abort()
功能：取消当前响应，关闭连接并且结束任何未决的网络活动。这个方法把 XMLHttpRequest 对象重置为 readyState 为 0 的状态，并且取消所有未决的网络活动。例如，如果请求用了太长时间，而且响应不再必要的时候，可以调用这个方法。
语法：oXMLHttpRequest.abort();
方法5：getAllResponseHeaders()
功能：把 HTTP 响应头部作为未解析的字符串返回。
备注：如果 readyState 小于 3，这个方法返回 null。否则，它返回服务器发送的所有 HTTP 响应的头部。头部作为单个的字符串返回，一行一个头部。每行用换行符 "\r\n" 隔开。
方法6：getResonseHeader()
功能：返回指定的 HTTP 响应头部的值。其参数是要返回的 HTTP 响应头部的名称。可以使用任何大小写来制定这个头部名字，和响应头部的比较是不区分大小写的。
备注：该方法的返回值是指定的 HTTP 响应头部的值，如果没有接收到这个头部或者 readyState 小于 3 则为空字符串。如果接收到多个有指定名称的头部，这个头部的值被连接起来并返回，使用逗号和空格分隔开各个头部的值。
=============================================华丽丽的分割线============================================================
3. 创建XMLHttpRequest对象
所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）都内建了XMLHttpRequest对象，值得说明的是，IE把XMLHTTPRequest实现为一个ActiveX对象，其他的浏览器（如Firefox、Safari、Opera）则把它实现为一个本地的javascript对象。下面我们看看怎样创建一个XMLHttpRequeset对象：
#code 1：创建简单的 XMLHttpRequest 对象
xmlhttp = new XMLHttpRequest();#code 2：创建适合于不同浏览器的XMLHttpRequest对象：
<script language="javascript" type="text/javascript">
var xmlhttp;
function createXMLHttpRequest(){
// 判断是否支持ActiveX控件，for IE5/IE6
if(window.ActiveXObject){
// 通过实例化ActiveXObject的一个新实例来创建XMLHTTPRequest对象
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 判断是否把XMLHTTPRequest实现为一个本地javascript对象, for firefox/Safari/Opera
else if(window.XMLHTTPRequest){
// 创建XMLHTTPRequest的一个实例（本地javascript对象）
xmlhttp = new XMLHTTPRequest();
}
}
</script>
异常处理
实际上，各种异常都可能出现，以上代码都没有提供异常处理方法。较好的方法是，当错误发生时，能够及时退出并确保用户知道错误出在哪里。以下代码说明如何创建该对象，以便在出现问题的时候发出 JavaScript 警告。
#code 3：创建有异常处理的XMLHttpRequest对象，目前的主流浏览器中，跑这段代码，总有1种方法能创建该对象成功。
<script language="javascript" type="text/javascript">
var xmlhttp = false; //创建变量xmlhttp赋值false，用于之后判断是否创建XMLHttpRequest对象
try { //尝试创建适用于IE7+、Firefox、Chrome、Safari等主流浏览器的XMLHttpRequest对象
xmlhttp = new XMLHttpRequest();
} catch (trymicrosoft) {
try {//尝试创建适用于较新版本IE的XMLHttpRequest对象
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try{//尝试创建合适老版本IE的XMLDHttpRequest对象
xmlhttp = new ActiveXObject("Microsoft.XMLHttp");
}catch(failed){
xmlhttp = false;
}
}
}
if(!xmlhttp && typeof XMLHttpRequest != 'undefined')
alert("Error initializing XMLHttpRequest!");
</script>
静态与动态
http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/#code6
=============================================华丽丽的分割线============================================================
4.用XMLHttprequest发送请求
1091
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
