首页 > js教程 > 正文

Ajax如何使用?Ajax的操作步骤

原创 2018-11-08 14:46:26 0 336
赞助会员专享特权
Ajax如何使用?本篇文章就给大家介绍Ajax操作,让大家了解Ajax的操作步骤。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

首先我们来总结一下Ajax的操作步骤,然后在详细介绍一下每步具体是如何操作的。

1、调用客户端事件

2、创建XMLHttpRequest对象

3、配置XMLHttpRequest对象。

4、XMLHttpRequest对象向Web服务器发出异步请求。

5、Web服务器返回包含XML文档的结果。

6、XMLHttpRequest对象调用callback()函数并处理结果。

7、更新HTML DOM。

下面我们来一步步实现这些步骤实现Ajax的操作。

调用客户端事件

JavaScript函数作为事件的结果被调用。

示例 :

<input type =“text”size =“20”id =“userid”name =“id”onkeyup =“validateUserId();”>

说明:

JavaScript函数validateUserId()作为事件处理程序映射到输入表单字段上的onkeyup事件,其id设置为“userid”。

创建XMLHttpRequest对象

var ajaxRequest;  // 使Ajax成为可能的变量!
function ajaxFunction() {
   try {
      // Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
   } catch (e) {
   
      // Internet Explorer浏览器
      try {
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
      
         try {
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {
      
            alert("Your browser broke!");
            return false;
         }
      }
   }}

配置XMLHttpRequest对象

在这一步中,我们将编写一个将由客户端事件触发的函数,并将注册一个回调函数processRequest()。

function validateUserId() {
   ajaxFunction();
   
   // 这里的processRequest()是回调函数。
   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();
   
   // 这里的processRequest()是回调函数。
   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”。

Webserver返回包含XML文档的结果

可以使用任何语言实现服务器端脚本,但其逻辑应如下所示。

1、从客户端获取请求。

2、解析客户端的输入。

3、需要处理。

4、将输出发送到客户端。

如果我们假设你要编写一个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>");
   }
}

回调函数调用processRequest()

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

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

更新HTML DOM

这是最后一步,在此步骤中,HTML页面将会更新。它会以下列方式来发生:

1、JavaScript使用DOM API获取对页面中任何元素的引用。

2、获取元素来引用的推荐方法是调用。

document.getElementById("userIdMessage"),

3、现在可以使用JavaScript来修改元素的属性、 修改元素的样式属性、 或添加,删除或修改子元素。

举一个例子:

js代码:

   <!--
   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 (userMessageElement.childNodes[0]) {
         userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
      } else {
         userMessageElement.appendChild(messageBody);
      }
   }
   -->

html代码:

<div id = "userIdMessage"><div>

如果已经理解了上面提到的七个步骤,那么你几乎已经完成了Ajax的操作了。大家可以自己动手试试,加深理解,希望能对大家的学习有所帮助,相关视频教程推荐:Ajax教程JavaScript教程

以上就是Ajax如何使用?Ajax的操作步骤的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:Ajax
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • 关于ajax操作数据库后的数据处理有关问题
  • 关于ajax操作数据库后的数据处理问题
  • jQuery基于ajax操作json数据简单示例
  • 如何利用PHP+MySql+Ajax操作实现年月日联动功能
  • Ajax如何使用?Ajax的操作步骤
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关视频教程

  • Ajax基础教程 Ajax基础教程
  • AJAX入门教程 AJAX入门教程
  • 布尔教育燕十八Ajax彻底研究视频教程 布尔教育燕十八Ajax彻底研究视频教程
  • php中级教程之ajax技术 php中级教程之ajax技术
  • 相关视频章节