Ajax操作

Ajax操作：本节将给你AJAX操作的具体步骤让你清楚地了解。

本节将给你AJAX操作的具体步骤让你清楚地了解.

AJAX操作的步骤

一个客户端事件发生
创建一个XMLHttpRequest对象
XMLHttpRequest对象配置
XMLHttpRequest对象异步请求到Web服务器.
Web服务器返回的结果包含XML文档.
XMLHttpRequest对象调用callback()函数和处理结果。
HTML DOM更新

让我们逐一采取以下步骤

1. 一个客户端事件发生

一个JavaScript函数被称为事件的结果
例如：validateUserId()是JavaScript函数被映射为一个事件处理程序上输入表单域的onkeyup事件，其ID设置为“用户ID”
<input type="text" size="20" id="userid" name="id" onkeyup="validateUserId();">

2. 创建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;
      }
   }
 }
}

3. 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);
}

4. 使异少请求的Web服务器

源代码是在一块上面的代码。写在蓝色代码是负责使Web服务器的请求。这是所有正在使用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框中mohammad在上述请求的URL，然后设置tovalidate?ID=mohammad

5. Web服务器返回的结果包含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");
   }
}

6. 被称为回调函数processRequest()

配置XMLHttpRequest对象调用processRequest（）函数，当有一个状态变化到XMLHttpRequest对象的readyState。现在，这个函数将收到从服务器的结果，将不所需处理。在下面的例子，它设置一个真或假的变量的消息返回值是从网络服务器上的.

function processRequest() {
   if (req.readyState == 4) {
      if (req.status == 200) {
         var message = ...;
...
}

7. 更新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。在下一章中，我们将看到更详细的XMLHttpRequest对象.