Ajax请求
// 表单提交 post
function submitData(){ var xhr = createXHR(); xhr.onreadystatechange = function(){ if (xhr.readyState == 4){ if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ alert(xhr.responseText); } else { alert("Request was unsuccessful: " + xhr.status); } } }; xhr.open("post", "postexample.php", true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); var form = document.getElementById("user-info");
// send(string) 仅限于post方法
xhr.send(serialize(form)); }
1.创建XMLHttpRequest对象（简称XHR）
// 创建构造函数
function createXHR() { if (typeof XMLHttpRequest != "undefined") { return new XMLHttpRequest(); } else if (typeof ActiveXObject != "undefined") { if (typeof arguments.callee.activeXString != "string") { var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"], i, len; for (var i = 0, len = versions.length; i < len; i++) { try { new ActiveXObject(versions[i]) arguments.callee.activeXString = versions[i] break } catch (ex) { // nothing to do } } } return new ActiveXObject(arguments.callee.activeXString) } else { throw new Error("No XHR object avaiable.") } }
// 创建实例 var xhr = new createXHR()
2.判断response状态
在调用 open()之前指定 onreadystatechange
事件处理程序才能确保跨浏览器兼容性
xhr.onreadystatechange = function() { if (xhr.readystate == 4) { if (xhr.status >= 200 && xhr < 300 || xhr.status == 304) { alert(xhr.responseText) } else { alert("Request wa unsuccessful:" + xhr.status) } } }
XHR 对象的 readyState 属性 ：
0：未初始化。尚未调用 open()方法。
1：启动。已经调用 open()方法，但尚未调用 send()方法。
2：发送。已经调用 send()方法，但尚未接收到响应。
3：接收。已经接收到部分响应数据。
4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了
响应数据：
responseText：作为响应主体被返回的文本。
responseXML：如果响应的内容类型是"text/xml"或"application/xml"，这个属性中将保
存包含着响应数据的 XML DOM 文档。
status：响应的 HTTP 状态。 成功 200
statusText： HTTP 状态的说明。
3.XHR的用法
step1：调用 open（）方法 open（"methods", "url", Boolean）
接受3个参数，请求类型（get/post），请求的URL，是否发送异步请求（true：异步；false: 同步）
xhr.open("get", "example.php", false);
3.1 HTTP头部信息：
Accept：浏览器能够处理的内容类型。
Accept-Charset：浏览器能够显示的字符集。
Accept-Encoding：浏览器能够处理的压缩编码。
Accept-Language：浏览器当前设置的语言。
Connection：浏览器与服务器之间连接的类型。
Cookie：当前页面设置的任何 Cookie。
Host：发出请求的页面所在的域 。
Referer：发出请求的页面的 URI。注意， HTTP 规范将这个头部字段拼写错了，而为保证与规
范一致，也只能将错就错了。（这个英文单词的正确拼法应该是 referrer。）
User-Agent：浏览器的用户代理字符串。
3.2 GET 方法
GET 是最常见的请求类型，最常用于向服务器查询某些信息。必要时，可以将查询字符串参数追加
到 URL 的末尾，以便将信息发送给服务器。对 XHR 而言，位于传入 open()方法的 URL 末尾的查询字
符串必须经过正确的编码才行
查询字符串中每个参数的名称和值都必须使用 encodeURIComponent()进行编码
然后才能放到 URL 的末尾；而且所有名-值对儿都必须由和号（&）分隔
xhr.open("get", "example.php?name1=value1&name2=value2", true);
function addURLParam(url, name, value) { url += (url.indexOf("?") == -1 ? "?" : "&"); url += encodeURIComponent(name) + "=" + encodeURIComponent(value); return url; }
这个 addURLParam()函数接受三个参数：要添加参数的 URL、参数的名称和参数的值。这个函数
首先检查 URL 是否包含问号（以确定是否已经有参数存在）。如果没有，就添加一个问号；否则，就添
加一个和号。然后，将参数名称和值进行编码，再添加到 URL 的末尾。最后返回添加参数之后的 URL
function submitData(){ var xhr = createXHR(); xhr.onreadystatechange = function(){ if (xhr.readyState == 4){ if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ alert(xhr.responseText); } else { alert("Request was unsuccessful: " + xhr.status); } }
xhr.open("get", "example.php?name1=value1&name2=value2", true);
// 设置请求头
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 发送
xhr.send(null); }
3.3 POST 方法
POST 请求应该把数据作为请求的主体提交，主体数据格式不限
xhr.open("post", "example.php", true);
function submitData(){ var xhr = createXHR(); xhr.onreadystatechange = function(){ if (xhr.readyState == 4){ if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ alert(xhr.responseText); } else { alert("Request was unsuccessful: " + xhr.status); } } }; xhr.open("post", "postexample.php", true);
// 设置请求头 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//表单提交 var form = document.getElementById("user-info");
// 发送 xhr.send(serialize(form)); }
step2：设置请求头 setRequestHeader()
参数1： 头部字段名称
参数2：头部字段值
要成功发送请求头部信息，必须在调用 open()方法之后且调用 send()方法之前调用setRequestHeader() 方法
调用 XHR 对象的 getResponseHeader()方法并传入头部字段名称，可以取得相应的响应头部信
息。而调用 getAllResponseHeaders()方法则可以取得一个包含所有头部信息的长字符串
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
step3：调用 send（）方法
补充1：
服务器返回的 MIME 类型是 text/plain，但数据中实际包含的是 XML。根据 MIME 类型，
即使数据是 XML， responseXML 属性中仍然是 null。通过调用 overrideMimeType()方法，可以保
证把响应当作 XML 而非纯文本来处理。
XMLHttpRequest 2级 ，overrideMimeType()方法，用于重写 XHR 响应的 MIME 类型。
var xhr = createXHR(); xhr.open("get", "text.php", true); xhr.overrideMimeType("text/xml"); xhr.send(null);
补充2： 进度事件 ProgressEvents
loadstart：在接收到响应数据的第一个字节时触发。
progress：在接收响应期间持续不断地触发。
error：在请求发生错误时触发。
abort：在因为调用 abort()方法而终止连接时触发。
load：在接收到完整的响应数据时触发。
loadend：在通信完成或者触发 error、 abort 或 load 事件后触发。
每个请求都从触发 loadstart 事件开始，接下来是一或多个 progress 事件，然后触发 error、
abort 或 load 事件中的一个，最后以触发 loadend 事件结束。
支持前 5 个事件的浏览器有 Firefox 3.5+、 Safari 4+、 Chrome、 iOS 版 Safari 和 Android 版 WebKit。
Opera（从第 11 版开始）、 IE 8+只支持 load 事件。目前还没有浏览器支持 loadend 事件。
load 事件
用以替代 readystatechange 事件。响应接收完毕后将触发 load 事件，因此也就没有必
要去检查 readyState 属性了
var xhr = createXHR(); xhr.onload = function(){ if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ alert(xhr.responseText); } else { alert("Request was unsuccessful: " + xhr.status); } }; xhr.open("get", "altevents.php", true); xhr.send(null);
progress 事件
这个事件会在浏览器接收新数据期间周期
性地触发。而 onprogress 事件处理程序会接收到一个 event 对象，其 target 属性是 XHR 对象，但
包含着三个额外的属性： lengthComputable、 position 和 totalSize。其中， lengthComputable
是一个表示进度信息是否可用的布尔值， position 表示已经接收的字节数， totalSize 表示根据
Content-Length 响应头部确定的预期字节数。有了这些信息，我们就可以为用户创建一个进度指示器
了。
为确保正常执行， 必须在调用 open()方法之前添加 onprogress 事件处理程序
var xhr = createXHR(); xhr.onload = function(event){ if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ alert(xhr.responseText); } else { alert("Request was unsuccessful: " + xhr.status); } }; xhr.onprogress = function(event){ var divStatus = document.getElementById("status"); if (event.lengthComputable){ divStatus.innerHTML = "Received " + event.position + " of " + event.totalSize +" bytes"; } }; xhr.open("get", "altevents.php", true); xhr.send(null);
