JavaScript语言与Ajax应用第09章 Ajax应用.ppt

《JavaScript语言与Ajax应用第09章 Ajax应用.ppt》由会员分享，可在线阅读，更多相关《JavaScript语言与Ajax应用第09章 Ajax应用.ppt（20页珍藏版）》请在三一办公上搜索。

1、JavaScript语言与Ajax应用（第二版）,主编 董宁 陈丹中国水利水电出版社,第9章 Ajax应用,9.1 Ajax简介9.2 Ajax应用分析9.3 Ajax过程解析9.4 Ajax数据格式9.5 创建Ajax应用对象9.6 Ajax异常处理9.7 利用JavaScript库实现Ajax应用,2023年10月5日星期四,JavaScript语言与Ajax应用（第二版）,2,9.1 Ajax简介,Ajxa技术说的是把JavaScript、CSS、DOM和HTML结合起来的一种新的编程思路和方法。我们知道，常规的Web应用在运行时需要经常性的刷新整个页面。用户在页面上做出一项选择或者输入

2、一些数据，浏览器把这些信息发送给服务器，服务器根据用户的操作返回一个新的页面，即使用户只是对服务器做了一次简单的数据访问，服务器也需要返回一个全新的页面。Ajax技术等于是在客户端和服务器端之间加入了一个中间层：JavaScript代码先把请求从客户端发送给中间层，再由这个中间层把请求转发给服务器端，服务器端的响应也是先由这个中间层接收，再由这个中间层把响应的结果转发给客户端的JavaScript代码处理。,2023年10月5日星期四,JavaScript语言与Ajax应用（第二版）,3,9.2 Ajax应用分析,现在很多互联网公司都利用Ajax技术开发出了功能强大的Web应用，其中Googl

3、e公司的Gmail电子邮件应用就出色的示范了Ajax技术的威力。在Gmail应用中，电子邮件草稿在点击保存按钮之后，会被发送给服务器保存起来，而这个过程并不会刷新整个页面，如图所示。,2023年10月5日星期四,JavaScript语言与Ajax应用（第二版）,4,9.3 Ajax过程解析,9.3.1 Ajax的请求/响应过程9.3.2 失败的Ajax请求,2023年10月5日星期四,JavaScript语言与Ajax应用（第二版）,5,9.3.1 Ajax的请求/响应过程,在传统的页面请求过程中，浏览器发出对数据的请求，然后等待服务器发回响应，响应接受完成后浏览器渲染页面。而在页面中使用Aj

4、ax技术后，可以大大减少客户端与服务器端之间的数据传输量，对数据的请求也可以异步发出，在整个Ajax服务器访问过程中，用户不必等待服务器响应和页面刷新，而且服务器响应接收后只需要改变当前文档对象，不需要影响整个页面（包括图片和CSS等资源）。也就是说可以实现访问服务器接受响应并更新页面DOM的内容而无需刷新整个页面。,2023年10月5日星期四,JavaScript语言与Ajax应用（第二版）,6,9.3.2 失败的Ajax请求,Ajax服务器访问相对于传统的非Ajax服务器访问方式来说是一种异步数据访问过程，在异步环境下往往需要考虑更多的异常情况，这些异常情况包括：请求超时会发生什么事？应该

5、等待多长时间？要是服务器响应的数据格式不正确，该如何处理？如果用户同时发出了多个请求该如何处理？这些异常情况都是在开发一个使用Ajax技术的页面时必须处理的问题,2023年10月5日星期四,JavaScript语言与Ajax应用（第二版）,7,9.4 Ajax数据格式,9.4.1 XML9.4.2 JSON,2023年10月5日星期四,JavaScript语言与Ajax应用（第二版）,8,9.4.1 XML,XMLHttpRequest对象最初在设计时就是用来返回XML格式的结果的。它有一个responseXML属性，该属性返回的XML属性会被自动解析成一个可以定位的XMl格式的DOM对象，让

6、我们可以通过DOM方法在其中定位节点和获取数据。,2023年10月5日星期四,JavaScript语言与Ajax应用（第二版）,9,9.4.2 JSON,如果我们利用字符串格式的服务器响应传输一段JavaScript语言代码，然后用eval()函数执行，代码如下所示：eval(transport.responseText);这样的话我们将可以把服务器响应作为一段插入页面的JavaScript代码来执行了。现在，这种技巧已经演变成为了一种非常优秀的Ajax数据传输方式，那就是JSON（JavaScript Object Notation，JavaScript对象表示法）。JSON格式表示的数据对

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

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

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

10、cript语言与Ajax应用（第二版）,14,9.6.3 多从请求,所谓多重请求，指的是一个页面在发出一个Ajax请求后在服务器没有发回响应前又向该服务器发出一个同样的Ajax请求。在Ajax网站应用中，多重请求会经常发生，所以我们在编写Ajax页面时必须考虑到多重请求的情况。,2023年10月5日星期四,JavaScript语言与Ajax应用（第二版）,15,9.6.4 意外数据,对于使用了Ajax技术的页面来说，还有一个需要注意的问题，也就是对服务器发回的响应的数据格式的检查。服务器返回的数据不一定总是正确的。如果打算以特定的格式返回数据，比如XML或JSON，应该在服务器端设置一种特殊的

11、数据，让它在结果里能返回某种错误代码。然后让客户端在处理服务器发回的结果之前，先检查错误代码，如果服务器返回的不是想要的内容，客户端也要能处理这种异常情况。,2023年10月5日星期四,JavaScript语言与Ajax应用（第二版）,16,9.7 利用JavaScript库实现Ajax应用,9.7.1 jQuery9.7.2 ExtJS,2023年10月5日星期四,JavaScript语言与Ajax应用（第二版）,17,9.7.1 jQuery,jQuery库是围绕DOM操作来设计的，它在处理Ajax的方式上也是如此。首先在jQuery库中提供了一个最便捷的Ajax调用函数，也就是load(

12、)函数，该函数可以用在利用jQuery库获取的DOM对象上，比如：$(#content).load(a.htm);上述代码首先通过$函数获取页面中ID为content的元素，然后它向指定的URL发出Ajax请求，并用相应的结果替换掉content元素中的内容。,2023年10月5日星期四,JavaScript语言与Ajax应用（第二版）,18,9.7.2 ExtJS,ExtJS是一个非常优秀的JavaScript库，可以用来开发富有华丽外观的富客户端应用，能使Web应用更加具有活力。ExtJS库的设计目的与jQuery库不一样，它更注重于为页面提供各种外观组件而不是简化JavaScript编码

13、，所以ExtJS库并没有向jQuery库那样提供很多用于简化Ajax应用的对象，而是提供了一个功能完整的全局函数Ext.Ajax.request()就像jQuery库中提供的ajax()函数一样，该函数通过指定的输入参数可以实现任何类型的Ajax请求发送和解析任何类型的服务器响应数据。,2023年10月5日星期四,JavaScript语言与Ajax应用（第二版）,19,本章小结,本章主要说明了什么是Ajax，并且比较了它和传统页面调用的差异。介绍了Ajax中使用的各种数据交换格式，以及它们各自适合的场景。本章还逐步讲解了如何自己设计一个Ajax对象，并且演示了如何为各种意外情况规划和扩展Ajax对象。最后重点讲解了两个典型的JavaScript库jQuery与ExtJS在Ajax技术应用上提供的便捷方法。在对jQuery与ExtJS库实现Ajax应用的举例说明中只涉及到了常用的一些函数与对象。如果需要全面了解jQuery与ExtJS库实现Ajax应用的话，还需要查询相关的API文档。,2023年10月5日星期四,JavaScript语言与Ajax应用（第二版）,20,