var xhr = new XMLHttpRequest ();
//创建XMLHttpRequest 对象
//参数：无
//返回值：XMLHttpRequest 对象
function createXHR () {
var XHR = [ //兼容不同浏览器和版本得创建函数数组
function () { return new XMLHttpRequest () },
function () { return new ActiveXObject ("Msxml2.XMLHTTP") },
function () { return new ActiveXObject ("Msxml3.XMLHTTP") },
function () { return new ActiveXObject ("Microsoft.XMLHTTP") }
];
var xhr = null;
//尝试调用函数，如果成功则返回XMLHttpRequest对象，否则继续尝试
for (var i = 0; i < XHR.length; i ++) {
try {
xhr = XHR[i]();
} catch(e) {
continue //如果发生异常，则继续下一个函数调用
}
break; //如果成功，则中止循环
}
return xhr; //返回对象实例
}
在上面代码中，首先定义一个数组，收集各种创建 XMLHttpRequest 对象的函数。第 1 个函数是标准用法，其他函数主要针对 IE 浏览器的不同版本尝试创建 ActiveX 对象。然后设置变量 xhr 为 null，表示为空对象。接着遍历工厂内所有函数并尝试执行它们，为了避免发生异常，把所有调用函数放在 try 中执行，如果发生错误，则在 catch 中捕获异常并执行 continue 命令，返回继续执行，避免抛出异常。如果创建成功，则中止循环，返回 XMLHttpRequest 对象。
xhr.open(method, url, async, username, password);
其中 xhr 表示 XMLHttpRequest 对象，open() 方法包含 5 个参数，说明如下：xhr.send(body);
参数 body 表示将通过该请求发送的数据，如果不传递信息，可以设置为 null 或者省略。
var xhr = creatXHR(); //实例化XMLHttpRequest 对象
xhr.open ("GET", "server.txt", false"); //建立连接
xhr.send(null); //发送请求
console.log(xhr.responseText); //接收数据
在服务器端（server.txt）中输入下面的字符串。
Hello World //服务器端脚本在浏览器控制台会显示“Hello World”的提示信息。该字符串是从服务器端响应的字符串。
<input name="submit" type="button" id="submit" value="向服务器发出请求" />
<script>
window.onload = function () { //页面初始化
var b = document.getElementsByTagName("input")[0];
b.onclick = function () {
var url = "server.php?callback=functionName"； //设置查询字符串
var xhr = createXHR(); //实例化XMLHttpRequest 对象
xhr.open("GET", url, false); //建立连接，要求同步响应
xhr.send(null); //发送请求
console.log(xhr.responseText); //接收数据
}
}
</script>
在服务器端文件（server.php）中输入下面的代码，获取查询字符串中 callback 的参数值，并把该值响应给客户端。
<?php
echo $_GET["callback"];
?>
在浏览器中预览页面，当单击提交按钮时，在控制台显示传递的参数值。?作为前缀附加在 URL 的末尾，发送数据是以连字符&连接的一个或多个名值对。
send("name1=value1&name2=value2...");
window.onload = function () { //页面初始化
var b = document.getElementsByTagName("input")[0];
b.onclick = function () {
var url = "server.php"; //设置请求的地址
var xhr = createXHR(); //实例化XMLHttpRequest 对象
xhr.open("POST", url, false); //建立连接，要求同步响应
xhr.setRequestHeader ('Content-type', 'application/x-www-form-urlencoded'); //设置为表单方式提交
xhr.send("callback=functionName"); //发送请求
console.log(xhr.responseText); //接收数据
}
}
在 open() 方法中，设置第一个参数为 POST，然后使用 setRequestHeader() 方法设置请求消息的内容类型为“application/x-www-form-urlencoded”，它表示传递的是表单值，一般使用 POST 发送请求时都必须设置该选项，否则服务器无法识别传递过来的数据。
<?php
echo $_POST["callback"];
?>
{ user : "css8", pass : "123456", email : "css8@123.cn" }
将 JSON 数据转换为串行格式化显示如下。
'user="css8" & pass="123456" & email="css8@123.cn"'
[{name : "user", value : "css8"} , {name : "pass", value : "123456"), {name : "email", value : "css8@123.cn"}]
将上面数据转换为串行格式显示如下。'user="css8" & pass="123456" & email="css8@123.cn"'
//把JSON数据转换为串行字符串
//参数：data表示数组或对象类型的数据
//返回值：串行字符串
function JSONtoString (data) {
var a = []; //临时数组
if (data.constructor == Array) { //处理数组
for (var i = 0; i < data.length; i ++) {
a.push(data[i].name + "=" + encodeURIComponent(data[i].value));
}
} else { //处理对象
for (var i in data) {
a.push(i + "=" + encodeURIComponent(data[i]));
}
}
return a.join("&"); //把数组转换为串行字符串，并返回
}
| 返回值 | 说明 |
|---|---|
| 0 | 未初始化。表示对象已经建立，但是尚未初始化，尚未调用 open() 方法 |
| 1 | 初始化。表示对象已经建立，尚未调用 send() 方法 |
| 2 | 发送数据。表示 send() 方法已经调用，但是当前的状态及 HTTP 头未知 |
| 3 | 数据传送中。已经接收部分数据，因为响应及 HTTP 头不安全，这时通过 responseBody 和 responseText 获取部分数据会出现错误 |
| 4 | 完成。数据接收完毕，此时可以通过 responseBody 和 responseText 获取完整的响应数据 |
window.onload = function () { //页面初始化
var b = document.getElementsByTagName("input")[0];
b.onclick = function () {
var url = "server.php"; //设置请求的地址
var xhr = createXHR(); //实例化XMLHttpRequest对象
xhr.open("POST", url, true); //建立间接，要求异步响应
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); //设置为表单方式提交
xhr.onreadystatechange = function () { //绑定响应状态事件监听函数
if (xhr.readyState == 4) { //监听readyState状态
if (xhr.status == 200 || xhr.status == 0) { //监听HTTP状态码
console.log(xhr.responseText); //接收数据
}
}
}
xhr.send("callback=functionName"); //发送请求
}
}
xhr.onreadystatechange = function () {}; //清理事件响应函数
xhr.abort(); //中止请求
| 响应信息 | 说明 |
|---|---|
| responseBody | 将响应信息正文以 Unsigned Byte 数组形式返回 |
| responseStream | 以 ADO Stream 对象的形式返回响应信息 |
| responseText | 将响应信息作为字符串返回 |
| responseXML | 将响应信息格式化为 XML 文档格式返回 |
<?xml version="1.0" encoding="utf-8"?> <the>XML 数据</the>然后，在客户端进行如下请求。
<input name="submit" type="button" id="submit" value="向服务器发出请求" />
<script>
window.onload = function () { //页面初始化
var b = document.getElementsByTagName("input")[0];
b.onclick = function () {
var xhr = createXHR(); //实例化XMLHttpRequest对象
xhr.open("GET", "server.xml", true); //建立连接，要求异步响应
xhr.onreadystatechange = function () { //绑定响应状态事件监听函数
if (xhr.readyState == 4) { //监听readyState状态
if (xhr.state == 200 || xhr.status == 0) { //监听HTTP状态码
var info = xhr.responseXML;
console.log(info.getElementsByTagName("the")[0].firstChild.data); //返回元信息字符串“XML 数据”
}
}
}
xhr.send(); //发送请求
}
}
</script>
在上面代码中，使用 XML DOM 的 getElementsByTagName() 方法获取 the 节点，然后再定位第一个 the 节点的子节点内容。此时如果继续使用 responseText 属性来读取数据，则会返回 XML 源代码字符串。
<?php
header('Content-Type: text/html;');
echo '<?xml version="1.0" encoding="utf-8"?><the>XML 数据</the>'; //输出XML
?>
<table border="1" width="100%">
<tr><td>RegExp.exec()</td><td>通用的匹配模式</td></tr>
<tr><td>RegExp.test()</td><td>检测一个字符串是否匹配某个模式</td></tr>
</table>
然后在客户端可以这样接收响应信息。
<input name="submit" type="button" id="submit" value="向服务器发出请求" />
<script>
window.onload = function () { //页面初始化
var b = document.getElementsByTagName("input")[0];
b.onclick = function () {
var xhr = createXHR(); //实例化XMLHttpRequest对象
xhr.open("GET", "server.xml", true); //建立连接，要求异步响应
xhr.onreadystatechange = function () { //绑定响应状态事件监听函数
if (xhr.readyState == 4) { //监听readyState状态
if (xhr.state == 200 || xhr.status == 0) { //监听HTTP状态码
var o = document.getElementById("grid");
o.innerHTML = xhr.responseText; //直接插入到页面中
}
}
}
xhr.send(); //发送请求
}
}
</script>
function () {
var d = new Date();
return d.toString();
}
然后在客户端执行下面的请求。
<input name="submit" type="button" id="submit" value="向服务器发出请求" />
<script>
window.onload = function () { //页面初始化
var b = document.getElementsByTagName("input")[0];
b.onclick = function () {
var xhr = createXHR(); //实例化XMLHttpRequest对象
xhr.open("GET", "server.xml", true); //建立连接，要求异步响应
xhr.onreadystatechange = function () { //绑定响应状态事件监听函数
if (xhr.readyState == 4) { //监听readyState状态
if (xhr.state == 200 || xhr.status == 0) { //监听HTTP状态码
var info = xhr.responseText;
var o = eval("(" + info + ")" + "()"); //用eval()把字符串转换为脚本
console.log(o); //返回客户端当前信息
}
}
}
xhr.send(); //发送请求
}
}
</script>
使用 eval() 方法时，在字符串前后附加两个小括号：一个是包含函数结构体的，一个是表示调用函数的。不建议直接使用 JavaScript 代码作为响应格式，因为它不能传递更丰富的信息，同时 JavaScript 脚本极易引发安全隐患。
{ user : "css8", pass : "123456", email : "css8@123.cn" }
然后在客户端执行下面的请求。把返回 JSON 字符串转换为对象，然后读取属性值。
<input name="submit" type="button" id="submit" value="向服务器发出请求" />
<script>
window.onload = function () { //页面初始化
var b = document.getElementsByTagName("input")[0];
b.onclick = function () {
var xhr = createXHR(); //实例化XMLHttpRequest对象
xhr.open("GET", "server.xml", true); //建立连接，要求异步响应
xhr.onreadystatechange = function () { //绑定响应状态事件监听函数
if (xhr.readyState == 4) { //监听readyState状态
if (xhr.state == 200 || xhr.status == 0) { //监听HTTP状态码
var info = xhr.responseText;
var o = eval("(" + info + ")"); //调用eval()把字符串转换为本地脚本
console.log(info); //显示JSON对象字符串
console.log(o.user); //读取对象属性值，返回字符串“css8”
}
}
}
xhr.send(); //发送请求
}
}
</script>
eval() 方法在解析 JSON 字符串时存在安全隐患。如果 JSON 字符串中包含恶意代码，在调用回调函数时可能会被执行。解决方法：先对 JSON 字符串进行过滤，屏蔽掉敏感或恶意代码。不过，确信所响应的 JSON 字符串是安全的，没有被人恶意攻击，那么可以使用 eval() 方法解析 JSON 字符串。
var xhr = createXHR(); //实例化XMLHttpRequest对象
xhr.open("GET", "server.txt", true); //建立连接，要求异步响应
xhr.nreadystatechange = function () { //绑定响应状态事件监听函数
if (xhr.readyState == 4) { //监听readyState函数
if (xhr.status == 200 || xhr.status == 0) { //监听HTTP状态码
var info = xhr.responseText;
if (info == "true") console.log("文本信息传输完整"); //检测信息是否完整
else console.log("文本信息可能存在丢失");
}
}
}
xhr.send(); //发送请求
var xhr = createXHR();
var url = "server.txt";
xhr.open("GET", url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.getAllResponseHeaders());
}
}
xhr.send(null);
如果要获取指定的某个头部消息，可以使用 getResponseHeader() 方法，参数为获取头部的名称。例如，获取 Content-Type 头部的值，可以这样设计。
console.log(xhr.getResponseHeader("Content-Type"));
除了可以获取这些头部消息外，还可以使用 setResponseHeader() 方法在发送请求中设置各种头部消息。用法如下：
xhr.setResponseHeader("Header-name", "value");
其中 Header-name 表示头部消息的名称，value 表示消息的具体值。例如，使用 POST 方法传递表单数据，可以设置如下头部消息。
xhr.setResponseHeader("Content-Type", "application/x-www-form-urlencoded");
本文链接：http://task.lmcjl.com/news/13554.html