[Mozilla]AJAX快速入门

什么是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 olderhttpRequest = new ActiveXObject(“Microsoft.XMLHTTP”);}

注意：出于演示目的，上面创建XMLHTTP实例是简化了的代码。关于更加真实的例子，请参阅本文的第三步。

接下来，当接收到服务器端响应时，需要告诉HTTP请求对象使用JavaScript函数来处理响应。将XMLHttpRequest对象的onreadystatechange属性设置为该函数的名称，当请求的状态变化时，该函数会被调用。

httpRequest.onreadystatechange = nameOfTheFunction;

注意：该函数名没有传递参数的括号和参数，这表示只是分配了一个函数的引用，而不是真正调用该函数。当然，也可以动态定义一个匿名函数，这样可以实时地处理响应。

httpRequest.onreadystatechange = };

在处理完服务器端的响应之后，我们就可以调用XMLHttpRequest对象的open()和send()方法向服务器端发送请求了。

httpRequest.open(‘GET’, ‘http://www.example.org/some.file’, true);httpRequest.send(null);

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的值列表如下：

接下来需要检查HTTP服务器端响应的状态代码，W3C网站 列出了所有的状态代码。下面的例子中，通过是否为200 OK的状态码来判断AJAX调用是否是成功的。

if (httpRequest.status === 200) {// perfect!} else {}

在检查了请求的状态和响应的状态码后，就可以接收服务器端发送的数据并处理。有两种选项访问这些数据：

httpRequest.responseText – 将服务器端响应作为文本字符串返回httpRequest.responseXML – 将响应作为一个XMLDocument对象返回，该对象可以使用JavaScript DOM函数进行遍历。

注意，上述步骤只有异步请求（open()方法的第三个参数设置为true）时才是有效的。如果使用同步请求的话，是不需要指定函数的。在调用send()方法后就可以访问到服务器端返回的数据，因为脚本会停止并等待服务器端的响应。

第三步：一个简单的例子

下面来做一个简单的HTTP请求。JavaScript将请求一个包含“I’m a test.”文本的“test.html”HTML文档，然后使用alert()方法打印test.html文件的内容。

=”cursor: pointer; text-decoration: underline”> Make a request=”text/javascript”>(httpRequest; document.getElementById(“ajaxButton”).onclick = function() { makeRequest(‘test.html’); }; {if (window.XMLHttpRequest) { // Mozilla, Safari, …httpRequest = new XMLHttpRequest();} {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(); } {if (httpRequest.readyState === 4) {if (httpRequest.status === 200) {alert(httpRequest.responseText);} else {alert(‘There was a problem with the request.’);}} }})();</script>

在这个例子中：

注意：如果你发送一个请求后返回的是一段XML代码，而不是一个静态的XML文件的话，在Internet Explorer中必须设置一些响应头。如果没有设置响应头“Content-Type: application/xml”的话，当试图访问XML元素时IE将抛出一个”Object Expected”的JavaScript错误。

注意：如果没有设置头“Cache-Control: no-cache”的话，浏览器将缓存响应并不会重新提交请求。可以添加像时间戳或一个随机数的不同GET请求参数（参考 ）。

注意：如果httpRequest变量是全局的，makeRequest()方法因为冲突可能会被重写。将httpRequest变量定义在一个闭包中的话，可以避免AJAX函数的冲突。

辽远或偏僻的地方，而会常常想起这一次的旅行，想起那座山，那个城，那些人……