AJAX精讲-优快云博客

Ajax代表异步JavaScript和XML。简言之，它是使用的XMLHttpRequest对象与服务器端脚本沟通。它可以发送以及接收多种格式，包括JSON的，XML，HTML，甚至文本文件中的信息。然而，AJAX的最吸引人的特点是“异步”的性质，这意味着它可以做这一切，无需刷新页面。这使您可以更新部分基于用户事件的页面。

问题的两个特点是，你可以：

无需重新加载页面到服务器的请求
接收和处理来自服务器的数据

第1步 - 如何做一个HTTP请求

为了使一个HTTP请求到服务器，使用JavaScript，你需要提供此功能的类的一个实例。这样一类最初是在Internet Explorer作为一个ActiveX对象，XMLHTTP。后来Mozilla，Safari和其他浏览器之后，实施了一个 XMLHttpRequest 类，它支持微软的ActiveX对象的方法和属性。

因此，为了创建一个跨浏览器所需要的类的实例（对象），你能做到以下几点：

var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 8 and older
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

注：为了便于说明，上面的代码是有点简化的版本，可用于创建XMLHTTP类实例。对于一个更加现实生活中的例子，见本条第3步。

接下来，你需要决定你想要做什么后，您会收到服务器的响应您的请求。在这个阶段，你只需要告诉HTTP请求对象用哪一个JavaScript函数处理处理响应。这是通过这样的onreadystatechange对象的属性设置的JavaScript函数的名称，请求的状态变化时，应称为：

httpRequest.onreadystatechange = nameOfTheFunction;

请注意，有函数名后没有括号，并没有参数传递，因为你只是指定一个函数的引用，而不是实际调用它。此外，而不是给一个函数的名称，你可以使用飞（称为“匿名函数”）的职能界定上的JavaScript技术和定义的行动，这样会马上处理响应，

httpRequest.onreadystatechange = function(){
// process the server response
};

下一步，宣布后，你会发生什么事情只要你收到响应，你需要实际提出要求。你需要调用 的open（） 和 send（）方法 的HTTP请求类的方法，像这样的：

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

呼叫的第一个参数的open（）是HTTP请求方式- GET，POST，HEAD或任何其他方法，你要使用的是由您的服务器支持。保持资本为HTTP标准的方法，否则某些浏览器（如Firefox）可能无法处理请求。对于可能的HTTP请求方法的更多信息，您可以检查的W3C规范。
第二个参数是你请求的页面的URL。作为一项安全功能，你不能调用第三方域名的页面。务必使用您的所有网页上的准确的域名，或当你调用 open（），你会得到一个“权限被拒绝”错误。一个常见的陷阱正在访问您的网站domain.tld，但试图调用的页面是www.domain.tld。如果你真的需要发送一个请求到另一个域，请参阅HTTP的访问控制。
可选的第三个参数设置请求是否为异步的。如果为TRUE（默认），JavaScript函数将继续执行，而尚未到达服务器的响应。这是一个在AJAX。

参数的send（）方法可以是任何你想要的数据发送到服务器，如果POST -ING请求。应发送表单数据的格式，该服务器可以很容易地解析。这可能是作为查询字符串，如：

"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"

或在其他几种格式，包括JSON，SOAP等

请注意，如果您要发表的数据，你可能要设置MIME类型的请求。例如，使用下面的行之前调用send（）方法发送的表单数据作为查询字符串：

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

第2步 - 处理服务器的响应

请记住，当你发送请求，你提供的是专门用来处理响应的JavaScript函数的名称。

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站点上列出了所有可能的代码。在下面的例子中，我们通过检查一个成功或不成功的AJAX调用 200 OK 响应代码区分。

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
}

后，现在你已经检查的请求和响应的HTTP状态代码的状态，它是给你与服务器已发送到你的数据做任何你想要的。你有两个选择访问数据：

httpRequest.responseText -作为一个文本字符串返回服务器的响应
httpRequest.responseXML -返回作为响应的XMLDocument对象可以使用JavaScript DOM函数遍历

请注意，上面的步骤是唯一有效的，如果你使用一个异步请求（第三个参数的open（）设置为真）。如果您使用一个同步的请求，你不需要指定一个函数，你可以访问服务器数据返回后调用send（）方法，因为该脚本将停止，并等待服务器的应答。

第3步 - 一个简单的例子

让我们把它一起做一个简单的HTTP请求。我们的JavaScript请求一个HTML文件， test.html的 ，其中包含的文字，“我是一个测试。” 然后，我们会 提醒（）的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.');
}
}
}
} //missing closing bracket added by bwalton 5/11/11.
)();
</script>

在这个例子：

用户点击链接“请求”在浏览器中;
事件处理程序调用的makeRequest（）函数参数-名称test.html的一个HTML文件在同一目录;
该请求，然后（onreadystatechange的）通过执行到alertContents（） ;
alertContents（）检查，如果收到响应，它是一个确定，然后提醒（） S的test.html的文件的内容。

注：如果你发送一个请求，将返回的XML，而不是一个静态XML文件的一段代码，你必须设置一些响应头，如果您的网页在Internet Explorer中的工作，除了给Mozilla。如果你不设置头的Content-Type：application / xml进行，IE浏览器将抛出一个JavaScript错误，“对象预期”后，您尝试访问一个XML元素的行。

注2：如果你不设置头缓存控制：无缓存 “挑战”，浏览器会缓存响应，并永远不会重新提交请求，使得调试您还可以追加始终-diferent aditional如时间戳或随机数GET参数（见绕过缓存）

注3：如果全球使用的HttpRequest的变量，竞争功能调用makeRequest（）可能会互相覆盖，导致比赛条件。声明局部变量的 HttpRequest 包含AJAX功能的封闭，防止竞争条件。

注4：在一个通信错误（如Web服务器下去）的情况下，异常将被抛出在onreadystatechange的方法，当试图访问的状态字段。确保你换你，如果......那么语句在一个try ... catch。（参见：错误238559 ）。

function alertContents(httpRequest) {
try {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
alert(httpRequest.responseText);
} else {
alert('There was a problem with the request.');
}
}
}
catch( e ) {
alert('Caught Exception: ' + e.description);
}
}

第4步 - 与XML响应工作

在前面的例子中，HTTP请求的响应，收到后我们使用的请求对象的responseText属性，其中包含的test.html文件的内容。现在让我们来试试responseXML属性。

首先，让我们创建一个有效的XML文档，我们将稍后要求。该文件（test.xml）包含以下内容：

<?xml version="1.0" ?>
<root>
I'm a test.
</root>

在脚本中，我们只需要更改请求行：

...
onclick="makeRequest('test.xml')">
...

然后在 alertContents（） ，我们需要更换线路 警报（httpRequest.responseText） ;

var xmldoc = httpRequest.responseXML;
var root_node = xmldoc.getElementsByTagName('root').item(0);
alert(root_node.firstChild.data);

这段代码 的 XMLDocument 对象所给予 的responseXML 和使用DOM方法来访问XML文档中包含的数据。

第5步 - 与数据工作

最后，让我们的一些数据发送到服务器并接收响应。这次会要求我们的JavaScript动态页面，test.php的，这将需要我们的数据发送和返回“计算机”字符串- “您好，用户数据]！” -我们将提醒（）。

首先，我们将添加一个文本框，我们的HTML使用户可以输入自己的名字：

<label>Your name:
<input type="text" id="ajaxTextbox" />
</label>
<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
Make a request
</span>

我们也将我们的事件处理程序添加一行，得到用户的数据从文本框和它发送到的makeRequest（）函数，随着我们的服务器端脚本的URL：

document.getElementById("ajaxButton").onclick = function() {
var userName = document.getElementById("ajaxTextbox").value;
makeRequest('test.php',userName);
};

我们需要修改makeRequest（）来接受用户的数据和它传递到服务器。我们将改变请求方法为 POST ，包括我们的数据作为参数调用httpRequest.send（） ：

function makeRequest(url, userName) {
...
httpRequest.onreadystatechange = alertContents;
httpRequest.open('POST', url);
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
httpRequest.send('userName=' + encodeURIComponent(userName));
}