开发学院,分享开发教程和最新动态

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完成交互性比较强的功能了。