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 的每个变化。