欢迎光临
我们一直在努力

Ajax操作

Ajax操作

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

AJAX操作的步骤

  1. 一个客户端事件发生
  2. 创建一个XMLHttpRequest对象
  3. XMLHttpRequest对象配置
  4. XMLHttpRequest对象异步请求到Web服务器.
  5. Web服务器返回的结果包含XML文档.
  6. XMLHttpRequest对象调用callback()函数和处理结果。
  7. 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对象.

未经允许不得转载:后端教程 » Ajax操作