AJAX 动作
本章让你清楚地了解 AJAX 操作的具体步骤。
AJAX操作步骤
- 发生客户端事件。
- 创建一个 XMLHttpRequest 对象。
- XMLHttpRequest 对象已配置。
- XMLHttpRequest 对象向 Web 服务器发出异步请求。
- Web 服务器返回包含 XML 文档的结果。
- XMLHttpRequest 对象调用 callback() 函数并处理结果。
- HTML DOM 已更新。
让我们一步一步地采取这些步骤。
发生客户端事件
-
JavaScript 函数作为事件的结果被调用。
-
例子： 验证用户 ID() JavaScript 函数作为事件处理程序映射到 onkeyup id 设置为的输入表单字段上的事件 "userid"
-
<输入类型 = “文本” 大小 = “20” id = “用户 ID” 名称 = “id” onkeyup = “validateUserId();”>。
XMLHttpRequest 对象已创建
var ajaxRequest; // 使 Ajax 成为可能的变量！
function ajaxFunction() {
try {
// Opera 8.0+、火狐、Safari
ajaxRequest = new XMLHttpRequest();
} catch (e) {
// Internet Explorer 浏览器
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
// 出问题了
alert("Your browser broke!");
return false;
}
}
}
}
XMLHttpRequest 对象已配置
在这一步中，我们将编写一个由客户端事件触发的函数，并注册一个回调函数 processRequest()。
function validateUserId() {
ajaxFunction();
// 这里 processRequest() 是回调函数。
ajaxRequest.onreadystatechange = processRequest;
if (!target) target = document.getElementById("userid");
var url = "validate?id=" + escape(target.value);
ajaxRequest.open("GET", url, true);
ajaxRequest.send(null);
}
向 Web 服务器发出异步请求
上面的代码中提供了源代码。用粗体字编写的代码负责向网络服务器发出请求。这一切都是使用 XMLHttpRequest 对象完成的 ajax请求 .
function validateUserId() {
ajaxFunction();
// 这里 processRequest() 是回调函数。
ajaxRequest.onreadystatechange = processRequest;
if (!target) target = document.getElementById("userid");
var url = "validate?id = " + escape(target.value);
ajaxRequest.open("GET", url, true);
ajaxRequest.send(null);
}
假设你在userid框中输入了Zara，那么在上面的请求中，URL设置为“validate?id = Zara”。
Webserver 返回包含 XML 文档的结果
你可以用任何语言实现你的服务器端脚本，但是它的逻辑应该如下。
- 从客户端获取请求。
- 解析来自客户端的输入。
- 进行必要的处理。
- 将输出发送到客户端。
如果我们假设你要编写一个 servlet，那么这里是一段代码。
public void doGet(HttpServletRequest request,
HttpServletResponse response) throws IOException, ServletException {
String targetId = request.getParameter("id");
if ((targetId != null) && !accounts.containsKey(targetId.trim())) {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<valid>true</valid>");
} else {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<valid>false</valid>");
}
}
回调函数 processRequest() 被调用
XMLHttpRequest 对象被配置为在状态发生变化时调用 processRequest() 函数 就绪状态 of the XMLHttpRequest 目的。现在此函数将从服务器接收结果并进行所需的处理。如下例所示，它根据来自 Web 服务器的返回值将变量消息设置为 true 或 false。
function processRequest() {
if (req.readyState == 4) {
if (req.status == 200) {
var message = ...;
...
}
HTML DOM 已更新
这是最后一步，在这一步中，你的 HTML 页面将被更新。它发生在以下方式：
- JavaScript 使用 DOM API 获取对页面中任何元素的引用。
- 获得对元素的引用的推荐方法是调用。
document.getElementById("userIdMessage"),
// 其中“userIdMessage”是 ID 属性
// 出现在 HTML 文档中的元素
-
JavaScript 现在可以用来修改元素的属性；修改元素的样式属性；或添加、删除或修改子元素。这是一个例子：
<script type = "text/javascript">
<!--
function setMessageUsingDOM(message) {
var userMessageElement = document.getElementById("userIdMessage");
var messageText;
if (message == "false") {
userMessageElement.style.color = "red";
messageText = "Invalid User Id";
} else {
userMessageElement.style.color = "green";
messageText = "Valid User Id";
}
var messageBody = document.createTextNode(messageText);
// 如果 messageBody 元素是简单创建的
// 替换它，否则追加新元素
if (userMessageElement.childNodes[0]) {
userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
} else {
userMessageElement.appendChild(messageBody);
}
}
-->
</script>
<body>
<div id = "userIdMessage"><div>
</body>
如果你已经理解了上面提到的七个步骤，那么你就差不多完成了 AJAX。在下一章，我们将看到 XMLHttpRequest 对象更详细。