#什么是 XMLHttpRequest 对象？
XMLHttpRequest 对象用于在后台与服务器交换数据，能够：
所有现代的浏览器都支持 XMLHttpRequest 对象。
#创建 XMLHttpRequest 对象
所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。
通过一行简单的 JavaScript 代码，我们就可以创建 XMLHttpRequest 对象。
创建 XMLHttpRequest 对象的语法：
xmlhttp = new XMLHttpRequest();
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
#XMLHttpRequest对象有多个属性和方法，还有一个事件句柄。
XMLHttpRequest
对象属性和方法
属性
说明
readyState
HTTP 请求的状态。当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。
取值
描述
0
描述一种"未初始化"状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化。
1
描述一种"发送"状态；此时，代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。
2
描述一种"发送"状态；此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。
3
描述一种"正在接收"状态；此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。
4
描述一种"已加载"状态；此时，响应已经被完全接收。
responseText
从服务器接收到的数据（不包括头部）（解析为一个字符串）。
responseXML
从服务器接收到的数据（不包括头部）（解析为 XML 并作为 Document 对象返回）。
status
由服务器返回的 HTTP 状态代码。如 200 表示成功，404 表示 "Not Found" 错误。
statusText
这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。也就是说，当状态为 200 的时候它是 "OK"，当状态为 404 的时候它是 "Not Found"。
事件句柄
onreadystatechange
每次 readyState 属性改变的时候调用的事件句柄函数。
方法
abort()
取消当前响应，关闭连接并且结束任何未完成的网络活动。
getAllResponseHeaders()
把 HTTP 响应头部（所有头部）作为一个字符串返回。
getResponseHeader()
返回指定的 HTTP 响应头部的值，其参数是要返回的 HTTP 响应头部的名称。可以使用任何大小写来制定这个头部名字，和响应头部的比较是不区分大小写的。
open()
初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。
open(method,url,async,username,password)
- method 参数是用于请求的 HTTP 方法。值包括 GET、POST 、HEAD、PUT、DELETE。
- url 参数是请求的主体。大多数浏览器实施了一个同源安全策略，并且要求这个 URL 与包含脚本的文本具有相同的主机名和端口。
- async 参数指示请求使用应该异步地执行。如果这个参数是 false，请求是同步的，后续对 send() 的调用将阻塞，直到响应完全接收。如果这个参数是 true 或省略，请求是异步的，且通常需要一个 onreadystatechange 事件句柄。
- username 和 password 参数是可选的，为 url 所需的授权提供认证资格。如果指定了，它们会覆盖 url 自己指定的任何资格。
send()
发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。
send(body)
- 如果通过调用 open() 指定的 HTTP 方法是 POST 或 PUT，body 参数指定了请求体，作为一个字符串或者Document 对象。
- 如果请求体不是必须的话，这个参数就为 null。对于任何其他方法，这个参数是不可用的，应该为 null（有些实现不允许省略该参数）。
在XHR 2之中，send方法可以发送许多类型的数据。
setRequestHeader()
向一个打开但未发送的请求设置或添加一个 HTTP 请求。
setRequestHeader(name,value)
XMLHttpRequest对象用于从JavaScript发出HTTP请求
典型用法：
// 新建一个XMLHttpRequest实例对象
var xhr = new XMLHttpRequest();
// 指定通信过程中状态改变时的回调函数
xhr.onreadystatechange = function() {
// 通信成功时，状态值为4
var completed = 4;
if (xhr.readyState === completed) {
if (xhr.status === 200) {
// 处理服务器发送过来的数据
} else {
// 处理错误
}
}
};
// open方式用于指定HTTP动词、请求的网址、是否异步
xhr.open('GET','__MODULE__/Xhr/index',true);
// 发送HTTP请求
xhr.send(null)
在ThinkPHP框架下的示例：
IndexController.class.PHP
<?PHP
namespace Home\Controller;
use Think\Controller;
class IndexController extends Controller {
public function index() {
$this - >display();
}
}
View/Index/index.html
<!DOCTYPE html>
<html>
<head>
<title>Xml_HTTP_Request</title>
<Meta http-equiv="Content-Type" content="text/html;charset=utf8" />
</head>
<body>
Xml_HTTP_Request测试页面
</body>
</html>
<script>
// 新建一个XMLHttpRequest实例对象
var xhr = new XMLHttpRequest();
// 指定通信过程中状态改变时的回调函数
xhr.onreadystatechange = function() {
var completed = 4; // 通信成功时，状态值为4
if (xhr.readyState === completed) {
// 处理服务器发送过来的数据
if (xhr.status === 200) {
alert(xhr.responseText);
}
// 处理错误
else {
alert(xhr.statusText);
}
}
};
// open方式用于指定HTTP动词、请求的网址、是否异步
xhr.open('GET',true);
// 发送HTTP请求
xhr.send(null);
</script>
数据流：
数据流方式就是在建立的连接断开之前，也就是 readystate 状态为 3 的时候接受数据。麻烦的事情也在这里，因为数据正在传输，你拿到的 xhr.response 可能就是半截数据，所以呢，最好定义一个数据传输的协议，比如前2个字节表示字符串的长度，然后你只获取这个长度的内容，接着改变游标的位置。
假如数据格式为： data splitChar（data为数据内容；splitChar为数据结束标志，长度为1）。
那么传输的数据内容为 data splitChar data splitChar data splitChar...
var dataStream = function(type,url) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
// 状态为 3，数据接收中
if (xhr.readyState == 3) {
var i,l,s;
s = xhr.response; //读取数据
l = s.length; //获取数据长度
//从游标位置开始获取数据，并分割数据
s = s.slice(p,l - 1).split(splitChar);
//循环并操作数据
for (i in s) if (s[i]) deal(s[i]);
//更新游标位置
p = l;
}
// 状态为 4，数据传输完毕，重新连接
if (xhr.readyState == 4) {
xhr.onreadystatechange = null;
dataStream(type,url);
}
};
xhr.open(type,true);
xhr.send();
};这个代码写的是存在问题的，当 readystate 为 3 的时候可以获取数据，但是这时获取的数据可能只是整体数据的一部分，那后半截就拿不到了。但 readystate 在数据传输完毕之前是不会改变的，也就是说并不会继续接受剩下的数据。我们可以定时去监听readystate。这样的处理不算复杂，但是低版本IE不允许在readystate为3的时候读取数据，所以我们必须利用iframe照样可以异步获取数据，对于低版本IE可以使用iframe来接受数据流。
if (isIE) {
var dataStream = function(url) {
var ifr = document.createElement("iframe"),doc,timer;
ifr.src = url;
document.body.appendChild(ifr);
doc = ifr.contentwindow.document;
timer = setInterval(function() {
if (ifr.readyState == "interactive") {
// 处理数据，同上
}
// 重新建立链接
if (ifr.readyState == "complete") {
clearInterval(timer);
dataStream(url);
}
},16);
};
};定时去监听iframe的readystate的变化，从而获取数据流。不过还是存在问题。数据流实现“服务器推”数据的原理是就是文档(数据)还没有加载完，浏览器去服务器拿数据完成文档(数据)加载，我们就是利用这点，给浏览器塞点东西过去。
所以上述利用iframe的方式获取数据，会使浏览器一直处于加载状态，title上的那个圈圈一直在转动，鼠标的状态也是loading，这看着是相当不爽的。幸好，IE提供了HTMLFile对象，这个对象就相当于一个内存中的Document对象，它会解析文档。所以我们创建一个HTMLFile对象，在里面放置一个IFRAME来连接服务器。这样，各种浏览器就都支持了。
if (isIE) {
var dataStream = function(url) {
var doc = new ActiveXObject("HTMLFile"),ifr = doc.createElement("iframe"),timer,d;
doc.write("<body/>");
ifr.src = url;
doc.body.appendChild(ifr);
d = ifr.contentwindow.document;
timer = setInterval(function() {
if (d.readyState == "interactive") {
// 处理数据，同上
}
// 重新建立链接
if (d.readyState == "complete") {
clearInterval(timer);
dataStream(url);
}
},16);
};
};
#FormData类型可以用于构造表单数据
构造方法：
new FormData(optional HTMLFormelement form)
参数：可选，是一个表单元素，可以包含任何形式的表单控件
- void append(DOMString name,Blob value,optional DOMString filename)
- void append(DOMString name,DOMString value)
参数：
示例：
var formData = new FormData();
formData.append('username','张三');
formData.append('email','zhangsan@example.com');
formData.append('birthDate',1940);
xhr.send(formData);
上面这段代码和下面这段的效果是一样的：
<html> <head></head> <body> <form id="registration" name="registration" action="/register"> <input type="text" name="username" value="张三" /> <input type="email" name="email" value="zhangsan@example.com" /> <input type="number" name="birthDate" value="1940" /> <input type="submit" onclick="return sendForm(this.form);" /> </form> </body> </html>
FormData对象还可以对现有的表单添加数据
function sendForm(form) {
var formData = new FormData(form);
formData.append('csrf','e69a18d7db1286040586e6da1950128');
var xhr = new XMLHttpRequest();
xhr.open('POST',form.action,true);
xhr.onload = function(e) {
//...
};
xhr.send(formData);
return false;
}
var form = document.querySelector('#registration');
sendForm(form);
FormData对象也能模拟File控件，进行文件上传
var oMyForm = new FormData();
oMyForm.append("username","Groucho");
oMyForm.append("accountnum",123456);
// fileInputElement中已经包含了用户所选择的文件
oMyForm.append("userfile",fileInputElement.files[0]);
var oFileBody = "<a id="a "><b id="b ">hey!</b></a>"; // Blob对象包含的文件内容
var oBlob = new Blob([oFileBody],{
type: "text/xml"
});
oMyForm.append("webmasterfile",oBlob);
var oReq = new XMLHttpRequest();
oReq.open("POST","http://foo.com/submitform.PHP");
oReq.send(oMyForm);
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
