AJAX全称为Asynchronous JavaScript And XML直译就是异步的JavaScript和XML(这里我们主要介绍下JavaScript中AJAX的应用) 通常当JavaScript向服务器发送请求获取数据时,服务器会返回数据。在传统没有使用AJAX的网页中,需要刷新页面使其重新加载。而AJAX可以使网页在不重新加载页面的情况下对网页的局部进行更新。(比如,当你要放大地图的时候,你会不断的向服务器请求地图当前位置的详细信息,服务器返回数据给你,这里我们并不需要重新加载整个页面,不然用户体验就太差了。而是局部更新页面。)
由于我不可能在这写一个地图这样复杂的例子,而为了演示AJAX的使用,我借用了秒秒学的一个简单示例:
// 简单的AJAX举例。
// 1: 创建请求变量 var myRequest;
// 浏览器的特征检查。 if (window.XMLHttpRequest) { //若支持,则是火狐、谷歌等浏览器。 myRequest = new XMLHttpRequest(); } else if (window.ActiveXObject) { // 若不支持, 则是IE浏览器。 myRequest = new ActiveXObject("Microsoft.XMLHTTP"); }
// 2: 为请求添加事件处理代码。 myRequest.onreadystatechange = function(){ console.log("匿名函数被调用!"); console.log(myRequest.readyState); if (myRequest.readyState === 4) { var p = document.createElement("p"); var t = document.createTextNode(myRequest.responseText); p.appendChild(t); document.getElementById("mainContent").appendChild(p); } };
2、 为请求添加事件处理代码 创建好XMLHttpRequest对象后,就可以向服务器发送请求了,不过我们首先处理服务器响应的事件。当服务器响应后会触发myRequest对象的onreadystatechange事件。 在onreadystatechange事件中我们看到myRequest调用了readyState属性,readyState有4个值表示目前响应所在的阶段,各数值表示如下: l 1:请求已经建立,但是还没有发送(还没有调用 send())。 l 2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。 l 3:请求在处理中;通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成。 l 4:响应已完成;您可以获取并使用服务器的响应了。 我们一般只关心readyState的值为4的情况,表示响应已完成。