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

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异常一般web应用程序知道必须在运行时定期刷新整个页面。用户在页面上做出选择或输入数据后，浏览器将此信息发送到服务器，服务器根据用户的操作返回新页面。即使用户只需访问服务器的简单数据，服务器也必须返回到全新的页面。(David aser、Northern Exposure(美国电视)、North

2、ern Exposure(服务器)Ajax技术相当于在客户端和服务器端之间添加中间层。JavaScript代码首先将请求从客户端发送到中间层，然后从该中间层将请求转发到服务器端。服务器端响应也首先在此中间层接收，然后在此中间层将响应结果传递给客户端的JavaScript代码。2020年7月17日星期五，JavaScript语言和Ajax应用程序(第2版)、3、9.2 Ajax应用程序分析，以及目前许多internet公司都在使用Ajax技术开发功能强大的web应用程序。在Gmail应用程序中，单击“保存”按钮将电子邮件草稿发送到服务器并保存，此过程不会刷新整个页面，如图所示，2020年7月17

3、日星期五，JavaScript语言和Ajax应用程序(第2版)，4，9.3 Ajax流程分析，9.3.1 Ajax请求/响应流程9.3.2失败Ajax请求9.3.1 Ajax的请求/响应流程。在现有页面请求过程中，浏览器对数据发出请求，然后等待服务器返回响应，接受完成后，浏览器呈现页面。在页面上使用Ajax技术可以显着降低客户端和服务器端数据吞吐量，异步执行对数据的请求，在Ajax服务器访问期间，用户无需等待服务器响应和页面刷新，在收到服务器响应后，只需更改当前文档对象。不必影响整个页面，包括图片或CSS等资源。这意味着访问服务器可以接受响应并更新页面DOM的内容，而无需刷新整个页面。2020

4、年7月17日星期五，JavaScript语言和Ajax应用程序版本、6，9.3.2故障Ajax请求、Ajax服务器访问是异步数据访问过程，与传统的郑智薰Ajax服务器访问方法相比，在异步环境中需要考虑更多异常，需要等待多长时间？如果服务器以错误的数据格式响应，该怎么办？如果用户同时运行多个请求，该怎么办？这些例外都是开发使用Ajax技术的页面时需要处理的问题。2020年7月17日星期五，JavaScript语言和Ajax应用程序(第二版)，7，9.4 Ajax数据格式，9.4.1 XML 9.4.它包含responseXML属性。此属性自动解析为XMl格式的DOM对象，从中可以找到返回的XML

5、属性，以便通过DOM方法查找节点和获取数据。2020年7月17日星期五，使用JavaScript语言和Ajax应用程序(第二版)、9、9.4.2 JSON、字符串形式的服务器响应发送JavaScript语言代码，然后使用eval()函数将服务器响应作为插入到页面中的JavaScript代码现在，此技术已发展为一种称为JavaScript对象注释(JavaScript Object Notation，JavaScript对象表示)的非常优秀的Ajax数据传输方法。以JSON格式表示的数据对象实际上是JavaScript语言中的文字对象，但仅允许字符串、数字、数组和其他文字对象类型。键和字符串类型

6、值必须用双引号括起来。2020年7月17日星期五，您创建了JavaScript语言和Ajax应用程序(第2版)、10、9.5 Ajax应用程序对象。上一节预置了使用Ajax技术访问服务器以获取数据的页面，但是页面的JavaScript代码配置得不好。本节的目的是创建封装实现Ajax页面所需的所有功能的对象，以便在实际项目中使用。2020年7月17日星期五，JavaScript语言和Ajax应用程序(第2版)，11，9.6 Ajax异常处理，9.6.1访问超时9.6.2 HTTP状态代码9.6.3或更高版本9.6.1访问超时，发送Ajax服务器请求后，请求的页面将等待服务器响应，直到服务器关闭连

7、接。如果服务器忙，无法及时响应，internet连接不顺畅，服务器停机等特殊情况发生，用户开始怀疑页面本身是否存在错误，因为等待时间太长。要处理此问题，请等待一段时间，然后允许调用超时，处理超时错误更成熟。2020年7月17日星期五，JavaScript语言和Ajax应用程序(第二版)，13，9.6.2 HTTP状态代码，web服务器在收到所有访问请求时返回响应。响应包含指示与服务器响应相关的某些信息的状态代码。正确的服务器响应通常包含状态代码200。200段内的状态代码都表示成功。300间隔内的代码表示服务器重定向。400段是请求错误。这是浏览器中常见的400错误。请求可能未正确发送，或者页

8、面可能不存在。最后500个区段表示伺服器本身有错误。对于Ajax请求，必须在200间隔内获取相应的代码，才能称为正确的服务器响应。2020年7月17日星期五，JavaScript语言和Ajax应用程序(第2版)，14，9.6.3或更高版本，多请求是指在发出Ajax请求后，服务器没有发送响应，然后将同一Ajax发送给服务器的页面。Ajax web应用程序经常发出多个请求，因此在构建Ajax页面时必须考虑多个请求。2020年7月17日星期五，JavaScript语言和Ajax应用程序(第二版)，15，9.6.4意外数据，对使用Ajax技术的页面需要注意的问题，即服务器发送的响应的数据类型检查。服务

9、器返回的数据并不总是正确的。如果要以特定格式(如XML或JSON)返回数据，则必须在服务器端设置特殊数据，以便在结果中返回特定的错误代码。然后，客户端在处理服务器发送的结果之前检查错误代码，如果服务器未返回预期的内容，则允许客户端处理异常。2020年7月17日星期五，JavaScript语言和Ajax应用程序(第二版)，使用16，9.7 JavaScript库的Ajax应用程序，9.7.1 jquery 9.7.2 ext Ajax首先，提供jQuery库中最方便的Ajax调用函数之一的load()函数。此函数是使用jQuery库获取的DOM对象，例如$(#content)。load(a .

10、htm)；上面的代码首先通过$函数从页面中获取ID为content的元素，然后对指定的URL发出Ajax请求，并用适当的结果替换content元素的内容。2020年7月17日星期五，JavaScript语言和Ajax应用程序(第二版)，18，9.7.2 ExtJS和ExtJS是出色的JavaScript库，可用于开发外观华丽的丰富客户端应用程序。与jQuery库不同，ExtJS库侧重于为页面提供各种外观组件，而不是简化JavaScript编码，因此ExtJS库不提供大量对象来简化Ajax应用程序(如JQuery库)，而是功能完整的全局函数Ext。Ajax.request(，2020年7月17日星期五，JavaScript语言和Ajax应用程序(第二版)，第19章，本章摘要，本章主要介绍什么是Ajax，并将它与现有页面调用进行比较)。介绍了Ajax中使用的各种数据交换格式及其场景。本章还逐步介绍如何直接设计Ajax对象，以及如何针对各种意外情况规划和扩展Ajax对象。最后，重点介绍两种常见的JavaScript库