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

《JavaScript语言与Ajax应用第09章 Ajax应用课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

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

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

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

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

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

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

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

8、能，以便在实际项目中使用。05十月2021JavaScript语言与Ajax应用（第二版）109.6Ajax异常处理9.6.1访问超时9.6.2HTTP状态代码9.6.3多从请求9.6.4意外