Ajax如何使用？Ajax的设置步骤

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

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”。

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如何运用？Ajax的设置步骤