菜鸟学AJAX笔记(一)
1、Ajax运行核心XMLHttpRequest
Ajax 基本上就是把 JavaScript 技术和 XMLHttpRequest
对象放在 Web 表单和服务器之间。当用户填写表单时,数据发送给一些 JavaScript 代码而不是 直接发送给服务器。相反,JavaScript 代码捕获表单数据并向服务器发送请求。同时用户屏幕上的表单也不会闪烁、消失或延迟。换句话说,JavaScript 代码在幕后发送请求,用户甚至不知道请求的发出。更好的是,请求是异步发送的,就是说 JavaScript 代码(和用户)不用等待服务器的响应。因此用户可以继续输入数据、滚动屏幕和使用应用程序。
然后,服务器将数据返回 JavaScript 代码(仍然在 Web 表单中),后者决定如何处理这些数据。它可以迅速更新表单数据,让人感觉应用程序是立即完成的,表单没有提交或刷新而用户得到了新数据。JavaScript 代码甚至可以对收到的数据执行某种计算,再发送另一个请求,完全不需要用户干预!这就是 XMLHttpRequest
的强大之处。它可以根据需要自行与服务器进行交互,用户甚至可以完全不知道幕后发生的一切。结果就是类似于桌面应用程序的动态、快速响应、高交互性的体验,但是背后又拥有互联网的全部强大力量。
2、获取 Request 对象
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
@end @*/
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}
这段代码的核心分为三步:
- 建立一个变量
xmlHttp
来引用即将创建的XMLHttpRequest
对象。 - 尝试在 Microsoft 浏览器中创建该对象:
- 尝试使用
Msxml2.XMLHTTP
对象创建它。 - 如果失败,再尝试
Microsoft.XMLHTTP
对象。
- 尝试使用
- 如果仍然没有建立
xmlHttp
,则以非 Microsoft 的方式创建该对象。
最后,xmlHttp
应该引用一个有效的 XMLHttpRequest
对象,无论运行什么样的浏览器。
3、Ajax 的请求/响应
1)发出请求
有了一个 XMLHttpRequest
对象,接下来就是在所有 Ajax 应用程序中基本都雷同的流程:
- 从 Web 表单中获取需要的数据。
- 建立要连接的 URL。
- 打开到服务器的连接。
- 设置服务器在完成后要运行的函数。
- 发送请求。
// 从表单中获取state和city的值
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
if ((city == null) || (city == "")) return;
if ((state == null) || (state == "")) return;
// 创建目标URL
var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);
// 打开一个服务器连接
xmlHttp.open("GET", url, true);
// 设定服务器响应后要执行的方法
xmlHttp.onreadystatechange = updatePage;
// 发送请求
xmlHttp.send(null);
}
开始的代码使用基本 JavaScript 代码获取几个表单字段的值。然后设置一个 PHP 脚本作为链接的目标。要注意脚本 URL 的指定方式,city 和 state(来自表单)使用简单的 GET 参数附加在 URL 之后。
然后打开一个连接,其中指定了连接方法(GET)和要连接的 URL。最后一个参数如果设为 true
,那么将请求一个异步连接(这就是 Ajax 的由来)。如果使用 false
,那么代码发出请求后将等待服务器返回的响应。如果设为 true
,当服务器在后台处理请求的时候用户仍然可以使用表单(甚至调用其他 JavaScript 方法)。
xmlHttp
的 onreadystatechange
属性可以告诉服务器在运行完成 后(可能要用五分钟或者五个小时)做什么。因为代码没有等待服务器,必须让服务器知道怎么做以便您能作出响应。在这个示例中,如果服务器处理完了请求,一个特殊的名为 updatePage()
的方法将被触发。
最后,使用值 null
调用 send()
。因为已经在请求 URL 中添加了要发送给服务器的数据(city 和 state),所以请求中不需要发送任何数据。这样就发出了请求,服务器按照您的要求工作。
2)、处理响应
function updatePage() {
//如果是就绪状态,则使用服务器返回的值设置另一个表单字段的值
if (xmlHttp.readyState == 4) {
//服务器将把响应填充到 xmlHttp.responseText 属性中
var response = xmlHttp.responseText;
document.getElementById("zipCode").value = response;
}
}
利用该方法就可以做到动态返回服务器端的值!