本篇文章给大家分享的是有关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有哪些操作步骤,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。