第09章 Ajax应用.pptVIP

JavaScript语言与Ajax应用 * JavaScript语言与Ajax应用 * 9.1 Ajax简介 9.2 Ajax应用分析 9.3 Ajax过程解析 9.4 Ajax数据格式 9.5 创建Ajax应用对象 9.6 Ajax异常处理 9.7 利用JavaScript库实现Ajax应用 第9章 Ajax应用 * JavaScript语言与Ajax应用 * 9.1 Ajax简介 Ajxa技术说的是把JavaScript、CSS、DOM和HTML结合起来的一种新的编程思路和方法。 我们知道，常规的Web应用在运行时需要经常性的刷新整个页面。用户在页面上做出一项选择或者输入一些数据，浏览器把这些信息发送给服务器，服务器根据用户的操作返回一个新的页面，即使用户只是对服务器做了一次简单的数据访问，服务器也需要返回一个全新的页面。 Ajax技术等于是在客户端和服务器端之间加入了一个中间层：JavaScript代码先把请求从客户端发送给中间层，再由这个中间层把请求转发给服务器端，服务器端的响应也是先由这个中间层接收，再由这个中间层把响应的结果转发给客户端的JavaScript代码处理。 * JavaScript语言与Ajax应用 * 9.2 Ajax应用分析 现在很多互联网公司都利用Ajax技术开发出了功能强大的Web应用，其中Google公司的Gmail电子邮件应用就出色的示范了Ajax技术的威力。在Gmail应用中，电子邮件草稿在点击保存按钮之后，会被发送给服务器保存起来，而这个过程并不会刷新整个页面，如图所示。 * JavaScript语言与Ajax应用 * 9.3 Ajax过程解析 9.3.1 Ajax的请求/响应过程 9.3.2 失败的Ajax请求 * JavaScript语言与Ajax应用 * 9.3.1 Ajax的请求/响应过程 在传统的页面请求过程中，浏览器发出对数据的请求，然后等待服务器发回响应，响应接受完成后浏览器渲染页面。 而在页面中使用Ajax技术后，可以大大减少客户端与服务器端之间的数据传输量，对数据的请求也可以异步发出，在整个Ajax服务器访问过程中，用户不必等待服务器响应和页面刷新，而且服务器响应接收后只需要改变当前文档对象，不需要影响整个页面（包括图片和CSS等资源）。 也就是说可以实现访问服务器接受响应并更新页面DOM的内容而无需刷新整个页面。 * JavaScript语言与Ajax应用 * 9.3.2 失败的Ajax请求 Ajax服务器访问相对于传统的非Ajax服务器访问方式来说是一种异步数据访问过程，在异步环境下往往需要考虑更多的异常情况，这些异常情况包括： 请求超时会发生什么事？应该等待多长时间？ 要是服务器响应的数据格式不正确，该如何处理？ 如果用户同时发出了多个请求该如何处理？ 这些异常情况都是在开发一个使用Ajax技术的页面时必须处理的问题 * JavaScript语言与Ajax应用 * 9.4 Ajax数据格式 9.4.1 XML 9.4.2 JSON * JavaScript语言与Ajax应用 * 9.4.1 XML XMLHttpRequest对象最初在设计时就是用来返回XML格式的结果的。 它有一个responseXML属性，该属性返回的XML属性会被自动解析成一个可以定位的XMl格式的DOM对象，让我们可以通过DOM方法在其中定位节点和获取数据。 * JavaScript语言与Ajax应用 * 9.4.2 JSON 如果我们利用字符串格式的服务器响应传输一段JavaScript语言代码，然后用eval()函数执行，代码如下所示： eval(transport.responseText); 这样的话我们将可以把服务器响应作为一段插入页面的JavaScript代码来执行了。现在，这种技巧已经演变成为了一种非常优秀的Ajax数据传输方式，那就是JSON（JavaScript Object Notation，JavaScript对象表示法）。 JSON格式表示的数据对象实际上就是JavaScript语言中的字面量对象，但是只允许包含以下几种类型：字符串、数值、数组和其他字面量对象，并且键和字符串类型的值都必须用双引号括起来。 * JavaScript语言与Ajax应用 * 9.5 创建Ajax应用对象 在前面几节中已经初步建立了应用Ajax技术访问服务器获取数据的页面，但是页面中的JavaScript代码并没有组织的很好，尤其是在实现Ajax技术的时候很繁琐，而且代码也不具备可重用性。 本节的目的就是要建立一个对象，封装实现Ajax页面所需的全部功能，以便在实际项目