ajax请求的五个步骤

Z, ZLW 324

ajax请求的五个步骤是:1、创建XMLHttpRequest对象;2、配置XMLHttpRequest 对象;3、发出异步请求;4、返回包​​含 XML 文档的结果;5、调用processRequest() 函数。最后就可以更新您的HTML页面了。

1、创建XMLHttpRequest对象

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

2、配置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);
}

3、发出异步请求

上面的代码中提供了源代码。用粗体字编写的代码负责向Web服务器发出请求。这一切都是使用 XMLHttpRequest 对象ajaxRequest完成的。

假设你在userid框中输入了Zara,那么在上面的请求中,URL设置为“validate?id = Zara”。

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、返回包​​含 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("<valid>true</valid>");
   } else {
      response.setContentType("text/xml");
      response.setHeader("Cache-Control", "no-cache");
      response.getWriter().write("<valid>false</valid>");
   }
}

5、调用processRequest() 函数

XMLHttpRequest 对象被配置为在XMLHttpRequest对象的readyState发生状态更改时调用 processRequest() 函数。现在此函数将从服务器接收结果并进行所需的处理。如下例所示,它根据来自 Web 服务器的返回值将变量消息设置为 true 或 false。

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

最后别忘了更新您的 HTML 页面,可以使用:

  • JavaScript 使用 DOM API 获取对页面中任何元素的引用。
  • 获得对元素的引用的推荐方法是调用。

拓展阅读

4种常用的Ajax请求方式

$.ajax()返回其创建的 XMLHttpRequest 对象

$.ajax() 只有一个参数:参数key/value对象,包含各配置及回调函数信息。如果你指定了dataType选项,那么需要保证服务器返回正确的MIME信息,(如 xml 返回 “text/xml”)。

通过远程 HTTP GET 请求载入信息

相比于复杂的$.ajax而言,GET请求功能则显得更加简单,请求成功时可调用回调函数。当然如果需要在出错时执行函数,那么还请使用$.ajax。

通过远程 HTTP POST 请求载入信息

POST请求功能也相对比较简单,请求成功时可调用回调函数。如果需要在出错时执行函数,那么请使用$.ajax请求。

通过 HTTP GET 请求载入 JSON 数据

回复

我来回复
  • 暂无回复内容

站长微信
站长微信
电话联系

400-800-1024

工作日9:30-21:00在线

分享本页
返回顶部