ajax教程.docx

ajax教程.docx

《ajax教程.docx》由会员分享，可在线阅读，更多相关《ajax教程.docx（16页珍藏版）》请在冰点文库上搜索。

ajax教程

Ajax教程

作者：

金云龙。

如要转发，请注明出处:

1.同步交互和异步交互

●同步交互

⏹客户端向服务器端发送请求——>等待服务器端处理——>处理完毕返回，这个期间客户端不能做任何其他事情。

⏹发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。

⏹举例：

文件上传

●异步交互

⏹客户端向服务器端发送请求——>等待服务器端处理——>处理完毕返回，这个期间客户端可以做其他事情。

⏹发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。

⏹举例：

文件上传

2.Ajax的定义

●Ajax被认为是（AsynchronousJavaScriptandXML的缩写）。

●允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax。

3.Ajax现今经典案例

●AJAX案例之googlesuggest

●AJAX案例之GoogleMaps

4.Ajax模型与传统web模型的区别

●Ajax模型

●传统web模型

5.实现异步交互的技术

●Flash

●Javaapplet

●框架：

如果使用一组框架构造了一个网页，可以只更新其中一个框架，而不必惊动整个页面

●隐藏的iframe

●XMLHttpRequest：

该对象是对JavaScript的一个扩展，可使网页与服务器进行通信。

是创建Ajax应用的最佳选择。

实际上通常把Ajax当成XMLHttpRequest对象的代名词。

6.Ajax的工作原理

●Ajax的核心是JavaScript对象XmlHttpRequest。

●XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

●用户的浏览器在执行任务时即装载了AJAX引擎。

AJAX引擎用JavaScript语言编写，通常藏在一个隐藏的框架中。

它负责编译用户界面及与服务器之间的交互。

●AJAX引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。

现在，可以用Javascript调用AJAX引擎来代替产生一个HTTP的用户动作，内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行。

7.Ajax包含的技术

AJAX:

（AsynchronousJavaScriptandXML）并不是一项新技术,其实是多种技术的综合，包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest。

●服务器端语言：

服务器需要具备向浏览器发送特定信息的能力。

Ajax与服务器端语言无关。

●XML（eXtensibleMarkupLanguage，可扩展标记语言）是一种描述数据的格式。

AJAX程序需要某种格式化的格式来在服务器和客户端之间传递信息，XML是其中的一种选择。

●XHTML（eXtendedHypertextMarkupLanguage,使用扩展超媒体标记语言）和CSS（CascadingStyleSheet,级联样式单）标准化呈现。

●DOM（DocumentObjectModel,文档对象模型）实现动态显示和交互。

●使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取。

●使用JavaScript绑定和处理所有数据。

8.Ajax的优点与缺点

●优点：

⏹最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。

⏹使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。

⏹可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。

并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。

⏹基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

●缺点：

⏹AJAX大量使用了Javascript和AJAX引擎，而这个取决于浏览器的支持。

IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla虽然也支持AJAX，但是提供XMLHttpRequest的方式不一样。

所以，使用AJAX的程序必须测试针对各个浏览器的兼容性。

⏹AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。

这个就需要在明显位置提醒用户“数据已更新”。

⏹对流媒体的支持没有FLASH、JavaApplet好。

⏹对搜索引擎的支持比较弱。

⏹一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax。

9.XMLHttpRequest对象

XMLHttpRequest是XMLHTTP组件的对象，通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。

●XMLHttpRequest最早是在IE5中以ActiveX组件的形式实现的。

非W3C标准！

●由于非标准所以实现方法不统一

⏹InternetExplorer把XMLHttpRequest实现为一个ActiveX对象。

⏹其他浏览器（Firefox、Safari、Opera…）把它实现为一个本地的JavaScript对象。

⏹XMLHttpRequest在不同浏览器上的实现是兼容的，所以可以用同样的方式访问XMLHttpRequest实例的属性和方法，而不论这个实例创建的方法是什么。

●创建XMLHttpRequest对象

●XMLHttpRequest对象的方法

方法

描述

abort（）

停止当前请求

getAllResponseHeaders（）

把http请求的所有响应首部作为键/值对返回

getResponseHeader（"headerLabel"）

返回指定首部的串值

open（“method”,”url”）

建立对服务器的调用，method参数可以是GET,POST。

url参数可以是相对URL或绝对URL。

这个方法还包括3个可选参数。

send（content）

向服务器发送请求

setRequestHeader（"label","value"）

把指定首部设置为所提供的值。

在设置任何首部之前必须先调用open（）

●XMLHttpRequest对象的属性

10.Ajax的实现步骤

10.1.创建XMLHttpRequest对象

参看上面的示例！

10.2.服务器端向客户端响应（注册监听）

●XMLHttpRequest对象的onreadystatechange属性

⏹该事件处理函数由服务器触发，而不是用户。

⏹在Ajax执行过程中，服务器会通知客户端当前的通信状态。

这依靠更新XMLHttpRequest对象的readyState来实现。

改变readyState属性是服务器对客户端连接操作的一种方式。

⏹每次readyState属性的改变都会触发readystatechange事件。

●XMLHttpRequest对象的readyState属性

⏹readyState属性表示Ajax请求的当前状态。

⏹它的值用数字代表。

◆0代表未初始化。

还没有调用open方法

◆1代表正在加载。

open方法已被调用，但send方法还没有被调用

◆2代表已加载完毕。

send已被调用。

请求已经开始

◆3代表交互中。

服务器正在发送响应

◆4代表完成。

响应发送完毕

⏹每次readyState值的改变，都会触发readystatechange事件。

如果把onreadystatechange事件处理函数赋给一个函数，那么每次readyState值的改变都会引发该函数的执行。

⏹readyState值的变化会因浏览器的不同而有所差异。

但是，当请求结束的时候，每个浏览器都会把readyState的值统一设为4。

●XMLHttpRequest对象的status属性

⏹服务器发送的每一个响应也都带有首部信息。

三位数的状态码是服务器发送的响应中最重要的首部信息，并且属于超文本传输协议中的一部分。

⏹常用状态码及其含义：

◆404没找到页面（notfound）

◆403禁止访问（forbidden）

◆500内部服务器出错（internalserviceerror）

◆200一切正常（ok）

◆304没有被修改（notmodified）（服务器返回304状态，表示源文件没有被修改）

⏹在XMLHttpRequest对象中，服务器发送的状态码都保存在status属性里。

通过把这个值和200或304比较，可以确保服务器是否已发送了一个成功的响应。

10.3.建立客户端与服务器端的通信连接

●XMLHttpRequest对象的open（method,url,asynch）方法

⏹XMLHttpRequest对象的open方法允许程序员用一个Ajax调用向服务器发送请求。

⏹method：

请求类型，类似“GET”或”POST”的字符串。

若只想从服务器检索一个文件，而不需要发送任何数据，使用GET（可以在GET请求里通过附加在URL上的查询字符串来发送数据，不过数据大小限制为2000个字符）。

若需要向服务器发送数据，用POST。

⏹url：

路径字符串，指向你所请求的服务器上的那个文件。

可以是绝对路径或相对路径。

⏹asynch：

表示请求是否要异步传输，默认值为true（异步）。

指定true，在读取后面的脚本之前，不需要等待服务器的相应。

指定false，当脚本处理过程经过这点时，会停下来，一直等到Ajax请求执行完毕再继续执行。

●如果请求方式是”POST”方式的话，需要再open（）方法后，调用setRequestHeader（header,value）方法

⏹当浏览器向服务器请求页面时，它会伴随这个请求发送一组首部信息。

这些首部信息是一系列描述请求的元数据（metadata）。

首部信息用来声明一个请求是GET还是POST。

⏹Ajax请求中，发送首部信息的工作可以由setRequestHeader完成。

⏹参数header：

首部的名字;参数value：

首部的值。

⏹如果用POST请求向服务器发送数据，需要将“Content-type”的首部设置为“application/x-www-form-urlencoded”.它会告知服务器正在发送数据，并且数据已经符合URL编码了。

⏹该方法必须在open（）之后才能调用。

10.4.客户端向服务器端发送请求

●XMLHttpRequest对象的send（data）方法

⏹如果请求方式是”GET”方式的话，send（）方法发送请求数据，服务器端接受不到参数。

⏹如果请求方式是”POST”方式的话，send（）方法发送请求数据，服务器端可以接受参数。

10.5.GET请求方式的Ajax应用

10.6.POST请求方式的Ajax应用

11.Ajax的数据格式

11.1.HTML

●XMLHttpRequest对象的responseText属性

⏹responseText属性包含了从服务器发送的数据。

它是一个HTML,XML或普通文本，这取决于服务器发送的内容。

⏹当readyState属性值变成4时,responseText属性才可用，表明Ajax请求已经结束。

●优点：

⏹从服务器端发送的HTML代码在浏览器端不需要用JavaScript进行解析。

⏹HTML的可读性好。

⏹HTML代码块与innerHTML属性搭配，效率高。

●缺点：

⏹若需要通过AJAX更新一篇文档的多个部分，HTML不合适（拆串）。

⏹innerHTML并非DOM标准。

11.2.XML

●XMLHttpRequest对象的responseXML属性

⏹只用服务器发送了带有正确首部信息的数据时，responseXML属性才是可用的。

MIME类型必须为text/xml。

●优点：

⏹XML是一种通用的数据格式。

⏹不必把数据强加到已定义好的格式中，而是要为数据自定义合适的标记。

⏹利用DOM可以完全掌控文档。

●缺点：

⏹如果文档来自于服务器，就必须得保证文档含有正确的首部信息。

若文档类型不正确，那么responseXML的值将是空的。

⏹当浏览器接收到长的XML文件后，DOM解析可能会很复杂。

11.3.JSON

●JSON数据格式

⏹JSON（JavaScriptObjectNotation）一种简单的数据格式，比xml更轻巧。

JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。

⏹JSON的规则很简单：

对象是一个无序的“‘名称/值’对”集合。

一个对象以“{”（左括号）开始，“}”（右括号）结束。

每个“名称”后跟一个“:

”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔。

⏹规则如下:

1.映射用冒号（“：

”）表示。

名称:

值。

2.并列的数据之间用逗号（“，”）分隔。

3.映射的集合（对象）用大括号（“{}”）表示。

4.并列数据的集合（数组）用方括号（“[]”）表示。

5.元素值可具有的类型：

string,number,object,array,true,false,null。

●解析JSON

⏹JSON只是一种文本字符串。

它被存储在responseText属性中

⏹为了读取存储在responseText属性中的JSON数据，需要根据JavaScript的eval语句。

⏹函数eval会把一个字符串当作它的参数。

然后这个字符串会被当作JavaScript代码来执行。

因为JSON的字符串就是由JavaScript代码构成的，所以它本身是可执行的。

12.json-lib

●JSON-lib是一个java类库

⏹转换javabeans,maps,collections,javaarrays和XML成为json格式数据

⏹转换json格式数据成为javabeans对象

●需要jar包

⏹jakartacommons-lang2.5

⏹jakartacommons-beanutils1.8.0

⏹jakartacommons-collections3.2.1

⏹jakartacommons-logging1.1.1

⏹ezmorph1.0.6