JavaScript语言与Ajax应用Ajax应用课件

1、 第9章 Ajax应用9.1 Ajax简介9.2 Ajax应用分析9.3 Ajax过程解析9.4 Ajax数据格式9.5 创建Ajax应用对象9.6 Ajax异常处理9.7 利用JavaScript库实现Ajax应用18 八月 2022JavaScript语言与Ajax应用（第二版）1第1页，共19页。9.1 Ajax简介Ajxa技术说的是把JavaScript、CSS、DOM和HTML结合起来的一种新的编程思路和方法。我们知道，常规的Web应用在运行时需要经常性的刷新整个页面。用户在页面上做出一项选择或者输入一些数据，浏览器把这些信息发送给服务器，服务器根据用户的操作返回一个新的页面，即使用

2、户只是对服务器做了一次简单的数据访问，服务器也需要返回一个全新的页面。Ajax技术等于是在客户端和服务器端之间加入了一个中间层：JavaScript代码先把请求从客户端发送给中间层，再由这个中间层把请求转发给服务器端，服务器端的响应也是先由这个中间层接收，再由这个中间层把响应的结果转发给客户端的JavaScript代码处理。18 八月 2022JavaScript语言与Ajax应用（第二版）2第2页，共19页。9.2 Ajax应用分析现在很多互联网公司都利用Ajax技术开发出了功能强大的Web应用，其中Google公司的Gmail电子邮件应用就出色的示范了Ajax技术的威力。在Gmail应用中

3、，电子邮件草稿在点击保存按钮之后，会被发送给服务器保存起来，而这个过程并不会刷新整个页面，如图所示。18 八月 2022JavaScript语言与Ajax应用（第二版）3第3页，共19页。9.3 Ajax过程解析9.3.1 Ajax的请求/响应过程9.3.2 失败的Ajax请求18 八月 2022JavaScript语言与Ajax应用（第二版）4第4页，共19页。9.3.1 Ajax的请求/响应过程在传统的页面请求过程中，浏览器发出对数据的请求，然后等待服务器发回响应，响应接受完成后浏览器渲染页面。而在页面中使用Ajax技术后，可以大大减少客户端与服务器端之间的数据传输量，对数据的请求也可以异

4、步发出，在整个Ajax服务器访问过程中，用户不必等待服务器响应和页面刷新，而且服务器响应接收后只需要改变当前文档对象，不需要影响整个页面（包括图片和CSS等资源）。也就是说可以实现访问服务器接受响应并更新页面DOM的内容而无需刷新整个页面。18 八月 2022JavaScript语言与Ajax应用（第二版）5第5页，共19页。9.3.2 失败的Ajax请求Ajax服务器访问相对于传统的非Ajax服务器访问方式来说是一种异步数据访问过程，在异步环境下往往需要考虑更多的异常情况，这些异常情况包括：请求超时会发生什么事？应该等待多长时间？要是服务器响应的数据格式不正确，该如何处理？如果用户同时发出了

5、多个请求该如何处理？这些异常情况都是在开发一个使用Ajax技术的页面时必须处理的问题18 八月 2022JavaScript语言与Ajax应用（第二版）6第6页，共19页。9.4 Ajax数据格式9.4.1 XML9.4.2 JSON18 八月 2022JavaScript语言与Ajax应用（第二版）7第7页，共19页。9.4.1 XMLXMLHttpRequest对象最初在设计时就是用来返回XML格式的结果的。它有一个responseXML属性，该属性返回的XML属性会被自动解析成一个可以定位的XMl格式的DOM对象，让我们可以通过DOM方法在其中定位节点和获取数据。18 八月 2022Ja

6、vaScript语言与Ajax应用（第二版）8第8页，共19页。9.4.2 JSON如果我们利用字符串格式的服务器响应传输一段JavaScript语言代码，然后用eval()函数执行，代码如下所示：eval(transport.responseText);这样的话我们将可以把服务器响应作为一段插入页面的JavaScript代码来执行了。现在，这种技巧已经演变成为了一种非常优秀的Ajax数据传输方式，那就是JSON（JavaScript Object Notation，JavaScript对象表示法）。JSON格式表示的数据对象实际上就是JavaScript语言中的字面量对象，但是只允许包含以下

7、几种类型：字符串、数值、数组和其他字面量对象，并且键和字符串类型的值都必须用双引号括起来。18 八月 2022JavaScript语言与Ajax应用（第二版）9第9页，共19页。9.5 创建Ajax应用对象在前面几节中已经初步建立了应用Ajax技术访问服务器获取数据的页面，但是页面中的JavaScript代码并没有组织的很好，尤其是在实现Ajax技术的时候很繁琐，而且代码也不具备可重用性。本节的目的就是要建立一个对象，封装实现Ajax页面所需的全部功能，以便在实际项目中使用。18 八月 2022JavaScript语言与Ajax应用（第二版）10第10页，共19页。 9.6 Ajax异常处理9

8、.6.1 访问超时9.6.2 HTTP状态代码9.6.3 多从请求9.6.4 意外数据18 八月 2022JavaScript语言与Ajax应用（第二版）11第11页，共19页。9.6.1 访问超时在Ajax服务器请求发送出去之后，发出请求的页面会一直等待服务器响应，直到服务器关闭连接。如果遇到一些特殊情况，比如服务器繁忙无法及时响应、Internet连接不通畅或服务器关闭等，用户就会觉得等待时间太长，从而开始怀疑是否页面本身有错误。为了应对这一情况，比较成熟的做法是让页面等待一段时间后让调用超时，并处理超时错误。18 八月 2022JavaScript语言与Ajax应用（第二版）12第12页

9、，共19页。9.6.2 HTTP状态代码Web服务器在接收到任何一种访问请求时都会返回一个响应。在响应里面会包含一个状态代码，代码表示了一些与服务器响应相关的信息。一个正确的服务器响应往往会包含的状态代码为200。在200区间内的状态代码都表示成功。300区间内的代码表示服务器重定向。400区间是请求错误，这也是我们在浏览器中常见的400错误，可能是请求没有正确发送，也有可能是页面不存在。最后500区间表示服务器本身出错。对于Ajax请求来说，只有得到200区间内的相应代码才能说是正确的服务器响应。18 八月 2022JavaScript语言与Ajax应用（第二版）13第13页，共19页。9.

10、6.3 多从请求所谓多重请求，指的是一个页面在发出一个Ajax请求后在服务器没有发回响应前又向该服务器发出一个同样的Ajax请求。在Ajax网站应用中，多重请求会经常发生，所以我们在编写Ajax页面时必须考虑到多重请求的情况。18 八月 2022JavaScript语言与Ajax应用（第二版）14第14页，共19页。9.6.4 意外数据对于使用了Ajax技术的页面来说，还有一个需要注意的问题，也就是对服务器发回的响应的数据格式的检查。服务器返回的数据不一定总是正确的。如果打算以特定的格式返回数据，比如XML或JSON，应该在服务器端设置一种特殊的数据，让它在结果里能返回某种错误代码。然后让客户

11、端在处理服务器发回的结果之前，先检查错误代码，如果服务器返回的不是想要的内容，客户端也要能处理这种异常情况。18 八月 2022JavaScript语言与Ajax应用（第二版）15第15页，共19页。9.7 利用JavaScript库实现Ajax应用9.7.1 jQuery9.7.2 ExtJS18 八月 2022JavaScript语言与Ajax应用（第二版）16第16页，共19页。9.7.1 jQueryjQuery库是围绕DOM操作来设计的，它在处理Ajax的方式上也是如此。首先在jQuery库中提供了一个最便捷的Ajax调用函数，也就是load()函数，该函数可以用在利用jQuery库

12、获取的DOM对象上，比如：$(#content).load(a.htm);上述代码首先通过$函数获取页面中ID为content的元素，然后它向指定的URL发出Ajax请求，并用相应的结果替换掉content元素中的内容。18 八月 2022JavaScript语言与Ajax应用（第二版）17第17页，共19页。9.7.2 ExtJSExtJS是一个非常优秀的JavaScript库，可以用来开发富有华丽外观的富客户端应用，能使Web应用更加具有活力。ExtJS库的设计目的与jQuery库不一样，它更注重于为页面提供各种外观组件而不是简化JavaScript编码，所以ExtJS库并没有向jQuery库那样提供很多用于简化Ajax应用的对象，而是提供了一个功能完整的全局函数Ext.Ajax.request()就像jQuery库中提供的ajax()函数一样，该函数通过指定的输入参数可以实现任何类型的Ajax请求发送和解析任何类型的服务器响应数据。18 八月 2022JavaScript语言与Ajax应用（第二版）18第18页，共19页。 本章小结本章主要说明了什么是Ajax，并且比较了它和传统页面调用的差异。介绍了Ajax中使用的各种数据交换格式，以及它们各自适合的场景。本章还逐步讲解了如何自己设计一个Ajax对象，并且演示了如何为各种意外情