同步和异步，在现实生活中，同步的意思为多件事一起做，而异步为一件件来，也就是不同步。但是在 JS 中同步和异步的概念和现实生活中恰恰是相反的，同步的意思为事情一件件来，先干完一件事再干另一件事，而异步则为多个事情可以一起做，而 AJAX 天生就是用来做异步操作的，如果 AJAX 工作在同步的方式下，也就是事情得一件一件来，当发出一个请求后，因为网速有点慢，这个请求在1分钟后才得到响应，那么在这个请求结束之前，页面中所有的按钮、链接、文字等全都跟死了一样，就完全没法操作了。而如果是异步的话，就没问题了，比如你发微博，发出去之后因为网速慢没有更新过来，那么在他更新之前，还可以做其他操作。
AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML），XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true，所以 AJAX 一般都为异步传输。对于 Web 开发者来说，发送异步请求是一个巨大的进步，很多在服务器执行的任务都相当费时，在 AJAX 出现之前，这可能会引起应用程序挂起或者停止。
而通过 AJAX，JS 无需等待服务器的响应，而是在等待服务器响应时执行其他脚步，当响应就绪后对响应进行处理。
当使用异步时，也就是 async = true 时，必需规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：
oAjax.onreadystatechange = function (){
if(oAjax.readyState == && oAjax.status == ){
alert(oAjax.responseText);
}
}
oAjax.open('GET', 'ajax/demo.txt?t=' + Math.random(), true);
oAjax.send();
如需使用 async=false，请将 open() 方法中的第三个参数改为 false 。
不推荐使用同步传输，但是对于一些小型的请求，也是可以的。
这里需要注意，JS 会等到服务器响应就绪才继续执行，如果服务器繁忙或缓慢，应用程序会挂起或停止。
当使用 async = false 时，可以不用编写 onreadystatechange 函数，把代码放到 send() 语句后面即可：
oAjax.open('GET', 'ajax/demo.txt', false);
oAjax.send();
document.getElementById('div').innerHTML = oAjax.responseText;
6、服务器响应
XMLHttpRequest 对象的 responseText 或 responseXML 属性用于获得来自服务器的响应，也就是获取从服务器返回的信息。
如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，就使用 responseXML 属性。
如果来自服务器的响应并非 XML，就使用 responseText 属性，该属性返回字符串形式的响应，因此可以直接使用：
document.getElementById('div1').innerHTML = oAjax.responseText;
这里说到 XML ，我们就不得不提一下 AJAX 数据，也就是数据类型，数据类型可以分为很多种，比如中文、英文、数字等，我们经常使用的 JSON，他就是一种轻量级的数据交换格式。XML 相对来说那就是一个古老的存在，基本上都是在一些老式的程序中使用，都会从 XML 中读取数据，现在可以说是要被淘汰了，现在的程序几乎都是使用 JSON，因为同等数据量的情况下，XML 要比 JSON 大很多，这样会浪费带宽，浪费服务器资源，所以在使用 AJAX 获取从服务器返回的信息时，一般都使用 responseText 这个属性。
7、请求状态监控
XMLHttpRequest 对象的 readyState 属性返回请求的当前状态。当请求被发送到服务器时，我们需要执行一些基于响应的任务，每当 readyState 改变时，就会触发 onreadystatechange 事件，readyState 属性存有 XMLHttpRequest 的状态信息。
XMLHttpRequest 对象的三个重要的属性：
onreadystatechange：存储函数(或函数名)，每当 readyState 属性改变时，就会调用该函数。
readyState：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0：请求未初始化。还没有调用 open() 方法。
1：服务器连接已建立，也就是载入。已调用 open() 方法，正在发送请求。
2：请求已接收，载入完成。open() 方法完成，已收到全部响应内容。
3：请求处理中，也叫解析。正在解析响应内容。
4： 请求已完成，且响应已就绪。响应内容解析完成，可以在客户端调用了。
status：请求结果，也就是 HTTP 状态码。200：OK。404：未找到页面。
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
oAjax.onreadystatechange = function (){
if(oAjax.readyState == && oAjax.status == ){
alert(oAjax.responseText);
}
}
这里要注意： onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。
如果网站中存在多个 AJAX 任务，那么就可以使用回调函数，回调函数是一种以参数形式传递给另一个函数的函数，应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-">
<title>AJAX 实例</title>
<script>
var oAjax;
function ajax(url, fnSucc){
oAjax = new XMLHttpRequest();
oAjax.onreadystatechange = fnSucc;
oAjax.open("GET", url, true);
oAjax.send();
}
function myFunction(){
ajax('ajax/demo.txt?t=' + Math.random(), function (){
if(oAjax.readyState == && oAjax.status == ){
alert(oAjax.responseText);
}
});
}
</script>
</head>
<body>
<button type="button" onclick="myFunction()">读取</button>
</body>
</html>
8、AJAX 原理
相关文章
精彩导读
热门资讯
关注我们
