AJAX - action（操作）_AJAX 菜鸟教程

本章将为您清楚地介绍 AJAX - action（操作）的确切步骤。

AJAX 操作步骤

发生客户端事件。
将创建一个 XMLHttpRequest 对象。
已配置 XMLHttpRequest 对象。
XMLHttpRequest 对象向 Web 服务器发出异步请求。
Web 服务器返回包含 XML 文档的结果。
XMLHttpRequest 对象调用 callback（）函数并处理结果。
HTML DOM 已更新。

让我们一一采取这些步骤。

发生客户端事件

JavaScript 函数作为事件的结果被调用。
示例 − validateUserId（） JavaScript 函数作为事件处理程序映射到 id 设置为 “userid” 的输入表单字段上的 onkeyup 事件
<input type = “text” size = “20” id = “userid” name = “id” onkeyup = “validateUserId（）;”>.

创建 XMLHttpRequest 对象

var ajaxRequest; 	// The variable that makes Ajax possible!
function ajaxFunction() {
	 	try {
	 	 	 // Opera 8.0+, Firefox, Safari
	 	 	 ajaxRequest = new XMLHttpRequest();
	 	} catch (e) {
	 	 	 // Internet Explorer Browsers
	 	 	 try {
	 	 	 	 	ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
	 	 	 } catch (e) {
	 	 	 	 	try {
	 	 	 	 	 	 ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
	 	 	 	 	} catch (e) {
	 	 	 	 	 	 // Something went wrong
	 	 	 	 	 	 alert("Your browser broke!");
	 	 	 	 	 	 return false;
	 	 	 	 	}
	 	 	 }
	 	}
}

已配置 XMLHttpRequest 对象

在此步骤中，我们将编写一个将由 client 事件触发的函数，并将注册一个回调函数 processRequest（）。

function validateUserId() {
	 	ajaxFunction();
	 	
	 	// Here processRequest() is the callback function.
	 	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 服务器发出异步请求

源代码在上面的代码中可用。以粗体字体编写的代码负责向 Web 服务器发出请求。这一切都是使用 XMLHttpRequest 对象 ajaxRequest 完成的。

function validateUserId() {
	 	ajaxFunction();
	 	
	 	// Here processRequest() is the callback function.
	 	ajaxRequest.onreadystatechange = processRequest;
	 	
	 	<b>if (!target) target = document.getElementById("userid");
	 	var url = "validate?id = " + escape(target.value);
	 	
	 	ajaxRequest.open("GET", url, true);
	 	ajaxRequest.send(null);</b>
}

假设您在 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 对象配置为在 XMLHttpRequest 对象的 readyState 发生状态更改时调用 processRequest（）函数。现在，此函数将从服务器接收结果，并执行所需的处理。如以下示例所示，它根据 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 现在可用于修改元素的属性;修改元素的 Style 属性;或者添加、删除或修改子元素。下面是一个示例 -

<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);
	 	 		
	 	 	 // if the messageBody element has been created simple	
	 	 	 // replace it otherwise append the new element
	 	 	 if (userMessageElement.childNodes[0]) {
	 	 	 	 	userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
	 	 	 } else {
	 	 	 	 	userMessageElement.appendChild(messageBody);
	 	 	 }
	 	}
	 	-->
</script>
<body>
	 	<div id = "userIdMessage"><div>
</body>

如果你已经理解了上述七个步骤，那么你几乎完成了 AJAX。在下一章中，我们将更详细地了解 XMLHttpRequest 对象。

<< AJAX - 技术 AJAX - XMLHttpRequest >>