什么是 Ajax?
Ajax 的意思就是异步的 JavaScript 和 XML。简而言之,它是使用 XMLHttpRequest 对象与服务器端通信的脚本语言。它可以发送及接收各种格式的信息,包括 JSON、XML、HTML 和文本文件。
Ajax 最为吸引人的就是它的“异步”特性,这意味着 Ajax 可以无需刷新页面而与服务器端进行通信。允许你根据用户事件来更新部分页面内容。
可以考虑的两个特性:
-
向服务器端发送请求,而不用重新加载页面。
-
从服务器端接收数据并处理。
第一步:如何发送一个 HTTP 请求
需要通过 XMLHttpRequest 实现使用 JavaScript 向服务器端发送一个 HTTP 请求。而 Internet Explorer(IE)中引入一个名为 XMLHTTP 的ActiveX对象实现与 XMLHttpRequest 相同的功能,Mozilla、Safari 和其他浏览器则使用 XMLHttpRequest。
如果要兼容各个浏览器的话,可以这样来做:
var httpRequest;
if (window.XMLHttpRequest) {
// Mozilla, Safari, IE7+ ...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// IE 6 and older
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
接下来,当接收到服务器端响应时,需要告诉 HTTP 请求对象使用 JavaScript 函数来处理响应。将 XMLHttpRequest 对象的 onreadystatechange 属性设置为该函数的名称,当请求的状态变化时,该函数会被调用。
httpRequest.onreadystatechange = nameOfTheFunction;
注意:该函数名没有传递参数的括号和参数,这表示只是分配了一个函数的引用,而不是真正调用该函数。当然,也可以动态定义一个匿名函数,这样可以实时地处理响应。
httpRequest.onreadystatechange = function () {
// process the server response};
在处理完服务器端的响应之后,我们就可以调用 XMLHttpRequest 对象的 open() 和 send() 方法向服务器端发送请求了。
httpRequest.open("GET", "http://www.example.org/some.file", true);
httpRequest.send(null);
-
open() 方法的第一个参数:HTTP 请求方法 – GET、POST、HEAD 及任何服务器端支持的方法。根据 HTTP 标准保持大写,否则一些浏览器(例如火狐)可能无法处理请求。关于 HTTP 请求方法的更多信息,你可以查看W3C 规范
-
open() 方法的第二个参数:请求的 URL。出于安全考虑,不能调用第三方域的页面内容。当调用 open() 方法时,一定确认使用相同域名内的页面,否则会得到“permission denied”的错误提示。常见的错误是使用 domain.tld 访问网站,却使用 www.domain.tld 来请求页面。如果真的需要发送一个请求到另一个域的话,可以查看 HTTP 访问控制
-
open() 方法的第三个参数:可选,是否是异步请求。如果是 true(默认值),表示是异步请求。
send() 方法的参数表示当请求为 POST 时,向服务器端发送请求的数据内容。如果发送的是表单数据格式的话,服务器端可以向字符串一样地解析。
"name=value&anothername=" + encodeURIComponent(myVar) + "&so=on";
向服务器端发送的数据格式也可以是 JSON、SOAP 等格式。
注意:如果使用 POST 方式发送数据的话,在调用 send() 方法前,需要设置请求的 MIME 类型。
httpRequest.setRequestHeader(
"Content-Type",
"application/x-www-form-urlencoded"
);
第二步:处理服务器端的响应
当发送请求时,已经定义了一个函数来处理响应。
httpRequest.onreadystatechange = nameOfTheFunction;
这个函数可以做什么呢?首先,该函数需要检查请求的状态。如果状态值为 4 的话,这表示接收到完成的服务器端响应,可以继续处理。
if (httpRequest.readyState === 4) {
// everything is good, the response is received
} else {
// still not ready
}
readyState 的值列表如下:
-
0 – 未初始化
-
1 – 正在加载
-
2 – 加载完毕
-
3 – 交互中
-
4 – 完成
接下来需要检查 HTTP 服务器端响应的状态代码,W3C 网站 列出了所有的状态代码。下面的例子中,通过是否为 200 OK 的状态码来判断 Ajax 调用是否是成功的。
if (httpRequest.status === 200) {
// perfect!
} else {
// there was a problem with the request,
// for example the response may contain a 404 (Not Found)
// or 500 (Internal Server Error) response code
}
在检查了请求的状态和响应的状态码后,就可以接收服务器端发送的数据并处理。有两种选项访问这些数据:
-
httpRequest.responseText:将服务器端响应作为文本字符串返回
-
httpRequest.responseXML:将响应作为一个 XMLDocument 对象返回,该对象可以使用 JavaScript DOM 函数进行遍历。
注意,上述步骤只有异步请求(open() 方法的第三个参数设置为 true)时才是有效的。如果使用同步请求的话,是不需要指定函数的。在调用 send() 方法后就可以访问到服务器端返回的数据,因为脚本会停止并等待服务器端的响应。
第三步:一个简单的例子
下面来做一个简单的 HTTP 请求。JavaScript 将请求一个包含“I’m a test.”文本的“test.html”HTML 文档,然后使用alert() 方法打印 test.html 文件的内容。
<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
Make a request
</span>
<script type="text/javascript">
(function () {
var httpRequest;
document.getElementById("ajaxButton").onclick = function () {
makeRequest("test.html");
};
function makeRequest(url) {
if (window.XMLHttpRequest) {
// Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// IE
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!httpRequest) {
alert("Giving up :( Cannot create an XMLHTTP instance");
return false;
}
httpRequest.onreadystatechange = alertContents;
httpRequest.open("GET", url);
httpRequest.send();
}
function alertContents() {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
alert(httpRequest.responseText);
} else {
alert("There was a problem with the request.");
}
}
}
})();
</script>
在这个例子中:
-
在浏览器中用户单击“Make a request”链接;
-
事件处理器调用 makeRequest() 方法,通过向该函数传递的参数,请求一个处在同一目录中的“test.html”HTML 文件;
-
请求后,(onreadystatechange)执行 alertContents() 方法;
-
alertContents() 方法用于检查如果正确地接收到响应,利用 alert() 方法打印“test.html”文件包含的内容。
第四步:使用 XML 进行响应
在前面的例子中,当接收到响应后使用 XMLHttpRequest 对象的 responseText 属性访问“test.html”文件包含的内容。现在尝试一下 responseXML 属性。
首先,创建一个用于请求的名为“test.xml”的有效 XML 文档,代码如下:
<?xml version="1.0" ?>
<root>
I'm a test.
</root>
在脚本中,只需要修改请求行:
onclick="makeRequest('test.xml')"
然后在 alertContents() 方法中,需要使用如下代码替换 alert(httpRequest.responseText); 这一行代码:
var xmldoc = httpRequest.responseXML;
var root_node = xmldoc.getElementsByTagName("root").item(0);
alert(root_node.firstChild.data);
这段代码需要由 responseXML 给予的 XMLDocument 对象,然后使用 DOM 方法来访问 XML 文档中的数据。
第五步:处理数据
最后,向服务器端发送一些数据并接收响应。这次 JavaScript 脚本请求一个动态页面“test.php”,该页面将根据发送的数据返回一个“computedString”-“Hello, [user data]!”,并使用 alert() 方法进行打印。