Ajax技术解析：打造交互式Web应用

需积分: 12 61 浏览量更新于2024-07-26 收藏 1.93MB PDF 举报

"Ajax开发指南" Ajax，全称Asynchronous JavaScript and XML，是一种创建高效、交互性强的Web应用程序的技术，它结合了HTML、JavaScript、DHTML（Dynamic HTML）和DOM（Document Object Model）来实现页面的异步更新。通过Ajax，开发者能够实现无需整个页面刷新即可与服务器交换数据并更新部分网页内容，极大地提升了用户体验。 JavaScript是Ajax的核心，它负责处理用户的交互、发送和接收数据以及更新页面内容。DHTML和DOM则是构建动态、响应式用户界面的关键。DHTML利用CSS来改变页面样式，而DOM则提供了一个结构化的模型，使得JavaScript能够便捷地操作页面元素。 XMLHttpRequest对象是Ajax的核心组件，它允许JavaScript在后台与服务器进行通信。开发者可以通过这个对象创建HTTP请求，发送数据到服务器，并接收服务器的响应，所有这些过程都是在用户无感知的情况下完成的。然而，尽管名字中有XML，Ajax并不强制使用XML作为数据格式，JSON（JavaScript Object Notation）和其他格式也同样常见。 Ajax并不是一种新技术，而是现有技术的创新组合。在过去的几年里，随着Web应用程序的发展，Ajax的重要性日益凸显。它打破了传统Web应用的限制，用户不再需要等待页面整体加载或刷新，从而提高了工作效率。例如，Google Maps和Gmail等应用就是Ajax技术成功应用的典范，它们提供了类似桌面应用的流畅体验。 Ajax的应用场景广泛，包括但不限于： 1. 表单验证：在用户提交表单之前，JavaScript可以在客户端验证输入，减少无效请求。 2. 实时聊天：用户可以即时发送和接收消息，无需刷新页面。 3. 数据网格：用户可以滚动、排序、过滤数据，而无需重新加载整个表格。 4. 动态导航：页面元素可以根据用户的选择或行为立即更新。然而，尽管Ajax带来了许多优势，但也存在一些挑战，如浏览器兼容性问题、SEO（搜索引擎优化）难题以及可能导致的页面加载不一致性。因此，在开发Ajax应用时，需要考虑如何妥善处理这些问题，以确保应用的稳定性和可用性。本系列的开发指南将深入讲解Ajax的各个方面，从基础概念到实践技巧，帮助开发者理解如何将这些技术有效结合，创建出富有交互性和响应性的现代Web应用程序。通过学习，开发者不仅能掌握Ajax的基本原理，还能了解到如何在实际项目中灵活运用，以提高Web应用的性能和用户体验。

createRequest();

// Do something with the request variable

}

</script>

此代码惟一的问题是推迟了错误通知，这也是多数 Ajax 程序员不采用这一方法的原因。假设一个复杂的

表单有 10 或 15 个字段、选择框等，当用户在第 14 个字段（按照表单顺序从上到下）输入文本时要

激活某些 Ajax 代码。这时候运行 getCustomerInfo() 尝试创建一个 XMLHttpRequest 对象，但（对

于本例来说）失败了。然后向用户显示一条警告，明确地告诉他们不能使用该应用程序。但用户已经花费

了很多时间在表单中输入数据！这是非常令人讨厌的，而讨厌显然不会吸引用户再次访问您的网站。

如果使用静态 JavaScript，用户在点击页面的时候很快就会看到错误信息。这样也很烦人，是不是？可能

令用户错误地认为您的 Web 应用程序不能在他的浏览器上运行。不过，当然要比他们花费了 10 分钟输

入信息之后再显示同样的错误要好。因此，我建议编写静态的代码，让用户尽可能早地发现问题。

用 XMLHttpRequest 发送请求

得到请求对象之后就可以进入请求/响应循环了。记住，XMLHttpRequest 惟一的目的是让您发送请求和接

收响应。其他一切都是 JavaScript、CSS 或页面中其他代码的工作：改变用户界面、切换图像、解释服

务器返回的数据。准备好 XMLHttpRequest 之后，就可以向服务器发送请求了。

欢迎使用沙箱

Ajax 采用一种沙箱安全模型。因此，Ajax 代码（具体来说就是 XMLHttpRequest 对象）只能对所在的

同一个域发送请求。以后的文章中将进一步介绍安全和 Ajax，现在只要知道在本地机器上运行的代码只

能对本地机器上的服务器端脚本发送请求。如果让 Ajax 代码在 www.breakneckpizza.com 上运行，

则必须 www.breakneck.com 中运行的脚本发送请求。

设置服务器 URL

首先要确定连接的服务器的 URL。这并不是 Ajax 的特殊要求，但仍然是建立连接所必需的，显然现在

您应该知道如何构造 URL 了。多数应用程序中都会结合一些静态数据和用户处理的表单中的数据来构造

该 URL。比如，清单 7 中的 JavaScript 代码获取电话号码字段的值并用其构造 URL。

清单 7. 建立请求 URL

回页首

还要注意，当用户输入电话号码或者改变电话号码时，将触发清单 8 所示的 getCustomerInfo() 方法。

该方法取得电话号码并构造存储在 url 变量中的 URL 字符串。记住，由于 Ajax 代码是沙箱型的，因

而只能连接到同一个域，实际上 URL 中不需要域名。该例中的脚本名为

/cgi-local/lookupCustomer.php 。最后，电话号码作为 GET 参数附加到该脚本中："phone=" +

escape(phone)。

如果以前没用见过 escape() 方法，它用于转义不能用明文正确发送的任何字符。比如，电话号码中的空

格将被转换成字符 %20，从而能够在 URL 中传递这些字符。

可以根据需要添加任意多个参数。比如，如果需要增加另一个参数，只需要将其附加到 URL 中并用 “与”

（&）字符分开 [第一个参数用问号（?）和脚本名分开]。

打开请求

有了要连接的 URL 后就可以配置请求了。可以用

XMLHttpRequest 对象的 open() 方法来完成。该方法有

五个参数：

 request-type：发送请求的类型。典型的值是

GET 或 POST，但也可以发送 HEAD 请求。

 url：要连接的 URL。

 asynch：如果希望使用异步连接则为 true，否

则为 false。该参数是可选的，默认为 true。

 username：如果需要身份验证，则可以在此指定用户名。该可选参数没有默认值。

 password：如果需要身份验证，则可以在此指定口令。该可选参数没有默认值。

通常使用其中的前三个参数。事实上，即使需要异步连接，也应该指定第三个参数为 “true”。这是默认值，

但坚持明确指定请求是异步的还是同步的更容易理解。

将这些结合起来，通常会得到清单 9 所示的一行代码。

清单 9. 打开请求

function getCustomerInfo() {

var phone = document.getElementById("phone").value;

var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);

request.open("GET", url, true);

}

一旦设置好了 URL，其他就简单了。多数请求使用 GET 就够了（后面的文章中将看到需要使用 POST 的

情况），再加上 URL，这就是使用 open() 方法需要的全部内容了。

挑战异步性

本系列的后面一篇文章中，我将用很多时间编写和使用异步代码，但是您应该明白为什么 open() 的最后

一个参数这么重要。在一般的请求/响应模型中，比如 Web 1.0，客户机（浏览器或者本地机器上运行的

代码）向服务器发出请求。该请求是同步的，换句话说，客户机等待服务器的响应。当客户机等待的时候，

至少会用某种形式通知您在等待：

 沙漏（特别是 Windows 上）。

open() 是打开吗？

Internet 开发人员对 open() 方法到底做

什么没有达成一致。但它实际上并

不是

打

开一个请求。如果监控 XHTML/Ajax 页面

及其连接脚本之间的网络和数据传递，当调

用 open() 方法时将看不到任何通信。不清

楚为何选用了这个名字，但显然不是一个好

的选择。

 旋转的皮球（通常在 Mac 机器上）。

 应用程序基本上冻结了，然后过一段时间光标变化了。

这正是 Web 应用程序让人感到笨拙或缓慢的原因 —— 缺乏真正的交互性。按下按钮时，应用程序实际

上变得不能使用，直到刚刚触发的请求得到响应。如果请求需要大量服务器处理，那么等待的时间可能很

长（至少在这个多处理器、DSL 没有等待的世界中是如此）。

而异步请求

不

等待服务器响应。发送请求后应用程序继续运行。用户仍然可以在 Web 表单中输入数据，

甚至离开表单。没有旋转的皮球或者沙漏，应用程序也没有明显的冻结。服务器悄悄地响应请求，完成后

告诉原来的请求者工作已经结束（具体的办法很快就会看到）。结果是，应用程序感觉

不

那么迟钝或者缓

慢，而是响应迅速、交互性强，感觉快多了。这仅仅是 Web 2.0 的一部分，但它是很重要的一部分。所

有老套的 GUI 组件和 Web 设计范型都不能克服缓慢、同步的请求/响应模型。

发送请求

一旦用 open() 配置好之后，就可以发送请求了。幸运的是，发送请求的方法的名称要比 open() 适当，

它就是 send()。

send() 只有一个参数，就是要发送的内容。但是在考虑这个方法之前，回想一下前面已经通过 URL 本

身发送过数据了：

var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);

虽然可以使用 send() 发送数据，但也能通过 URL 本身发送数据。事实上，GET 请求（在典型的 Ajax 应

用中大约占 80%）中，用 URL 发送数据要容易得多。如果需要发送安全信息或 XML，可能要考虑使用

send() 发送内容（本系列的后续文章中将讨论安全数据和 XML 消息）。如果不需要通过 send() 传递数

据，则只要传递 null 作为该方法的参数即可。因此您会发现在本文中的例子中只需要这样发送请求（参

见清单 10）。

清单 10. 发送请求

function getCustomerInfo() {

var phone = document.getElementById("phone").value;

var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);

request.open("GET", url, true);

request.send(null);

}

指定回调方法

现在我们所做的只有很少一点是新的、革命性的或异步的。必须承认，open() 方法中 “true” 这个小小

的关键字建立了异步请求。但是除此之外，这些代码与用 Java servlet 及 JSP、PHP 或 Perl 编程没有

什么两样。那么 Ajax 和 Web 2.0 最大的秘密是什么呢？秘密就在于 XMLHttpRequest 的一个简单属

性 onreadystatechange。

首先一定要理解这些代码中的流程（如果需要请回顾清单 10）。建立其请求然后发出请求。此外，因为

是异步请求，所以 JavaScript 方法（例子中的 getCustomerInfo()）不会等待服务器。因此代码将继

续执行，就是说，将退出该方法而把控制返回给表单。用户可以继续输入信息，应用程序不会等待服务器。

这就提出了一个有趣的问题：服务器完成了请求之后会发生什么？答案是什么也不发生，至少对现在的代

码而言如此！显然这样不行，因此服务器在完成通过 XMLHttpRequest 发送给它的请求处理之后需要某种

指示说明怎么做。

现在 onreadystatechange 属性该登场了。该属性允许

指定一个

回调函数

。回调允许服务器（猜得到吗？）

反向

调用

Web 页面中的代码。它也给了服务器一定程度的控

制权，当服务器完成请求之后，会查看 XMLHttpRequest

对象，特别是 onreadystatechange 属性。然后调用该

属性指定的任何方法。之所以称为回调是因为服务器向网

页发起调用，无论网页本身在做什么。比方说，可能在用

户坐在椅子上手没有碰键盘的时候调用该方法，但是也可能在用户输入、移动鼠标、滚动屏幕或者点击按

钮时调用该方法。它并不关心用户在做什么。

这就是称之为异步的原因：用户在一层上操作表单，而在另一层上服务器响应请求并触发

onreadystatechange 属性指定的回调方法。因此需要像清单 11 一样在代码中指定该方法。

清单 11. 设置回调方法

function getCustomerInfo() {

var phone = document.getElementById("phone").value;

var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);

request.open("GET", url, true);

request.onreadystatechange = updatePage;

request.send(null);

}

需要特别注意的是该属性在代码中设置的

位置

—— 它是在调用 send()

之前

设置的。发送请求之前必

须设置该属性，这样服务器在回答完成请求之后才能查看该属性。现在剩下的就只有编写 updatePage()

方法了，这是本文最后一节要讨论的重点。

处理服务器响应

发送请求，用户高兴地使用 Web 表单（同时服务器在处理请求），而现在服务器完成了请求处理。服务

器查看 onreadystatechange 属性确定要调用的方法。除此以外，可以将您的应用程序看作其他应用程序

一样，无论是否异步。换句话说，不一定要采取特殊的动作编写响应服务器的方法，只需要改变表单，让

在 JavaScript 中引用函数

JavaScript 是一种弱类型的语言，可以用

变量引用任何东西。因此如果声明了一个函

数 updatePage()，JavaScript 也将该函

数名看作是一个变量。换句话说，可用变量

名 updatePage 在代码中引用函数。

回页首

剩余114页未读，继续阅读

ghf851208

粉丝: 0
资源: 1

Ajax技术解析：打造交互式Web应用

ajax 开发指南（推荐新手下载）

AJAX开发简略(PDF)

AJAX开发简略指南

在电子商务网站开发中，如何确保用户通过Ajax提交表单时服务器端的安全性和数据完整性？请提供示例代码。

在Django项目中，如何利用django_include_by_ajax-0.4.0库实现页面组件的动态包含？请结合示例代码说明。

如何在电子商务网站开发中，通过Ajax提交表单时确保服务器端的安全性和数据完整性？

javascript权威指南mobi

基于ssm框架的旅游指南系统的设计与实现

在嵌入式设备上使用Rompager和Advanced Web Server开发Web页面时，如何进行高效的数据交互和性能优化？

如何利用SSM框架结合Vue技术开发一个用户管理模块，并确保前后端分离？请提供基本的开发流程和关键代码。

最新资源