基于Ajax编程技术第四章Ajax技术.pptVIP

Ajax编程技术第四章 Ajax技术 4.1 XMLHttpRequest对象 本章主要介绍技术是XMLHttpRequest对象，因为Ajax应用程序的中心就是它。同时，对于许多数网页开发的实际问题中，它也是最广泛适用的解决方案。 我们还将介绍该对象的GET和POST方法的使用。同时探讨用户使用此对象常见的错误，例如当试图让页面在所有服务器上都能运行时遇到的一些问题。 最后还介绍一种Ajax技术的替代方案及其示例。 4.1 XMLHttpRequest对象 XMLHttpRequest对象最初是作为IE5中的一个ActiveX控件出现的，随后Mozilla 1.0、Netscape7、Safari1.2和Opera7.60都将它纳入自身。 XMLHttpRequest对象在IE浏览器和非IE浏览器中实现方法不同。 XMLHttpRequest对象的作用在于，允许用脚本程序通过HTTP连接到服务器，而不比通过HTTP请求响应模型与服务器通信。 4.2 创建XMLHttpRequest对象 创建XMLHttpRequest对象 在IE7、Firefox、safari和Opera中创建该对象的JavaScript代码为： var xmlRequet = new XMLHttpRequest(); 在IE5/6中代码为： var xmlRequest = new ActiveXObject(“Microsoft.XMLHTTP”); 注意，JavaScript区分大小写，如果大小写不正确，什么东西都创建不出来。 使用XMLHttpRequest对象的方式有两种，同步和异步。 4.2 创建XMLHttpRequest对象 同步使用XMLHttpRequest对象 按照下面模式，可以同步地XMLHttpRequest对象： 创建对象； 创建请求； 发送请求。 这种模式与传统模式没有区别，用处不大，真正强大的地方在于异步地使用它。 4.2 创建XMLHttpRequest对象 异步使用XMLHttpRequest对象 异步使用XMLHttpRequest对象时，必须使用onreadystatechange事件调用该对象。在触发该事件后，必须在应用程序采取行动之前检查readyState属性的内容，因此使用模式应该是： 创建该对象； 设置readystatechange事件触发一个指定的函数； 检查readyState属性，看数据是否准备就绪。 如果没有准备好，隔一段时间再次检查。因为数据没有下载完时，我们无法使用它的属性和方法。 如果已经准备好，就继续往下执行； 打开请求； 发送请求。 readystatechange事件的整个操作都是在后台执行，这样就能够异步使用XMLHttpRequest对象。 4.2 创建XMLHttpRequest对象 readyState属性 readyState属性指出了XMLHttpRequest对象在发送/接收数据过程中所处的几个状态。XMLHttpRequest对象会经历5种不同的状态。 0：未初始化。对象已经创建，但还未初始化，即还没调用open方法； 1：已打开。对象已经创建并初始化，但还未调用send方法； 2：已发送。已经调用send 方法，但该对象正在等待状态码和头的返回； 3：正在接收。已经接收了部分数据，但还不能使用该对象的属性和方法，因为状态和响应头不完整； 4：已加载。所有数据接收完毕 4.2 创建XMLHttpRequest对象 XMLHttpRequest对象的属性和方法 4.2 创建XMLHttpRequest对象 4.2 创建XMLHttpRequest对象 使用XMLHttpRequest对象示例 此示例使用此对象网页的实现动态显示。页面上有几个链接，分别点击，可以显示不同的文字或图片，或者清除显示的文字或图片。下面是程序： 4.2 创建XMLHttpRequest对象 4.2 创建XMLHttpRequest对象 4.2 创建XMLHttpRequest对象 4.2 创建XMLHttpRequest对象 程序运行：运行初始状态入图1，点击链接后见图2： 4.3 常见错误 编程常见错误 企图通过双击网页文件运行它； XMLHttpRequest大小写不正确； 多写了对圆括号： 正确：xHRObject.onreadystatechange =getData; 错误：xHRObject.onreadystatechange =getData(); 必须弄清楚，在JavaScript中： 函数名后如果有圆括号，意思就是将函数的返回值赋给等号左边的变量； 没有圆括号，是将函数本身赋给等号前的变量。 4.3 常见错误