AJAX 操作步骤
AJAX 操作步骤
本章给出了Ajax操作的清晰步骤。
Ajax操作的步骤
触发客户端事件。
创建XMLHttpRequest对象。
配置XMLHttpRequest对象。
XMLHttpRequest对象对服务器发出异步请求。
网络服务器返回包含XML文档的结果。
XMLHttpRequest对象调用回调()函数并处理结果。
HTML DOM更新。
让我们逐一采取这些步骤。
触发客户端事件。
一个JavaScript函数被称为事件的结果。
示例: validateuserid() JavaScript函数作为事件处理程序映射到输入表单的onkeyup事件,id设置为"userid";
<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对象。
在此步骤中,我们将编写一个由客户端事件触发的函数,并将注册一个回调函数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); }
XMLHttpRequest对象对服务器发出异步请求。
上面的代码负责向网络服务器提出请求,这都是使用XMLHttpRequest对象ajaxRequest完成的。
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); }
假设您在用户id框中输入zara ,然后在上述请求中, URL设置为;validate?id=Zara。
网络服务器返回包含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("true"); } else { response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); response.getWriter().write("false"); } }
XMLHttpRequest对象调用回调()函数并处理结果。
当状态更改为XMLHttpRequest对象的readyState 时, XMLHttpRequest对象被配置为调用processRequest()函数。现在,这个函数将从服务器接收结果,并将进行必要的处理。如下面的示例中一样,它根据网络服务器的返回值设置true或false的变量消息。
function processRequest() { if (req.readyState == 4) { if (req.status == 200) { var message = ...; ... }
HTML DOM更新。
这是最后一步,在此步骤中,将更新html页面。它以下面的方式处理:
JavaScript在使用DOM API的页面中获取对任何元素的引用。
调用方法更新。
document.getElementById("userIdMessage"), // where "userIdMessage" is the ID attribute // of an element appearing in the HTML document
可以使用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); // 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完成交互性比较强的功能了。