📜  AJAX-动作

📅  最后修改于: 2020-10-28 04:35:16             🧑  作者: Mango


本章为您清晰介绍了AJAX操作的确切步骤。

AJAX操作步骤

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

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

发生客户事件

  • 事件的结果称为JavaScript函数。

  • 示例-validateUserId() JavaScript函数作为事件处理程序映射到ID设置为“ userid”的输入表单字段上的onkeyup事件

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

向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框中输入Zara,然后在上述请求中,URL设置为“ validate?id = Zara”。

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");
   }
}

调用回调函数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"), 
// where "userIdMessage" is the ID attribute 
// of an element appearing in the HTML document
  • 现在可以使用JavaScript修改元素的属性。修改元素的样式属性;或添加,删除或修改子元素。这是一个例子-




   

如果您已了解上述七个步骤,那么您几乎可以使用AJAX了。在下一章中,我们将更详细地介绍XMLHttpRequest对象。