01ajax详细笔记.docx

01ajax详细笔记.docx

《01ajax详细笔记.docx》由会员分享，可在线阅读，更多相关《01ajax详细笔记.docx（18页珍藏版）》请在冰豆网上搜索。

01ajax详细笔记

【一、什么是Ajax:

】

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

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

Ajax：

一种不用刷新整个页面便可与服务器通讯的办法.

===========================================================================================================================================

【二、不用刷新整个页面便可与服务器通讯的办法：

】

1、Flash

2、Javaapplet

3、框架：

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

4、隐藏的iframe

===========================================================================================================================================

【Ajax名词的由来】

虽然XMLHttpRequest的出现已经有近十个年头，但是Ajax这个概念却是直到2005年2月才被AdaptivePath公司负责用户体验策略的主管JesseJamesGarrett正式提出。

他在2005年2月18日发表了一篇题为《Ajax：

ANewApproachtoWebApplications》（Ajax：

一个Web应用的新途径）的论文，明确地将Ajax定义为AsynchronousJavaScriptandXML，这就是Ajax这个名词的由来。

而Ajax技术应用的先驱和主要推动者则是著名的搜索引擎公司：

Google。

Google在2005年推出的Gmail，充分展示了Ajax的魅力所在，吸引了无数用户。

从此，在全世界范围内逐渐刮起了一阵Ajax的旋风。

在Ajax应用程序中，经常需要设置一些按钮供用户操作，而又不需要页面跳转，所以会使用更简单的、没有默认行为和样式的span标签来替代a标签。

===========================================================================================================================================

【对于get和post请求乱码的问题】

*get方式

*在js中通过encodeURIComponent（）对字符串进行编码

xmlHttp.open（"get","./jsonServlet?

name="+encodeURIComponent（value）+"&time="+newDate（）.getTime（）,true）;

*jsp和servlet中通过手动转码

name=newString（name.getBytes（"ISO-8859-1"）,"utf-8"）;

*post方式

*在js中设置请求头信息

xmlHttp.setRequestHeader（"Content-Type","application/x-www-form-urlencoded;charset=utf-8"）;

*jsp和servlet中设置请求转码

request.setCharacterEncoding（"utf-8"）;

===========================================================================================================================================

【三、Ajax的工作原理：

】

【Ajax的核心是JavaScript对象XmlHttpRequest。

】

该对象在InternetExplorer5中首次引入，它是一种支持异步请求的技术。

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

AJAX采用异步交互过程。

AJAX在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理—等待—处理—等待缺点。

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

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

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

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

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

===========================================================================================================================================

【四、Ajax所包含的技术】

AJAX:

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

1、服务器端语言：

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

Ajax与服务器端语言无关。

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

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

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

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

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

6、使用JavaScript绑定和处理所有数据

===========================================================================================================================================

【五、AJAX的缺陷】

AJAX不是完美的技术。

也存在缺陷：

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

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

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

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

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

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

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

===========================================================================================================================================

【六、XMLHttpRequest对象】

【记住，XMLHttpRequest惟一的目的是让您发送请求和接收响应。

】

XMLHttpRequest最初叫做XMLHTTP，由微软（Microsoft）于1999年在IE5.0中率先推出。

XMLHttpRequest为运行于浏览器中的JavaScript脚本提供了一种在页面内与服务器通信的手段，这样就使得页面内的JavaScript可以在不刷新页面的前提下，向服务器提交数据，及从服务器获取数据。

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

创建XMLHttpRequest对象（由于非标准所以实现方法不统一）

InternetExplorer把XMLHttpRequest实现为一个ActiveX对象

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

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

===========================================================================================================================================

【七、同步和异步:

】

举个例子：

普通B/S模式（同步）AJAX技术（异步）

*同步：

提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事

*异步:

请求通过事件触发->服务器处理（这时浏览器仍然可以作其他事情）->处理完毕

同步是指：

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

异步是指：

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

===========================================================================================================================================

【八、XMLHttpRequest对象方法和属性】

【1、XMLHttpRequest对象方法】

方法描述

abort（）停止当前请求

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

getResponseHeader（"headerLabel"）返回指定首部的串值

open（“method”,”url”）建立对服务器的调用，method参数可以是GET,POST。

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

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

send（content）向服务器发送请求

setRequestHeader（"label","value"）把指定首部设置为所提供的值。

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

------------------------------------------------------------------------------------------------------------------------------------------

【2、XMLHttpRequest对象属性】

属性描述

onreadtstatechange状态改变的事件触发器

readyState对象状态（integer）

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

它的值用数字代表。

0代表未初始化。

还没有调用open方法

1代表正在加载。

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

2代表已加载完毕。

send已被调用。

请求已经开始

3代表交互中。

服务器正在发送响应

4代表完成。

响应发送完毕

responseText服务器进程返回数据的文本版本

responseXML服务器进程返回数据的兼容DOM的XML文档对象

status服务器返回的状态码

404没找到页面（notfound）

403禁止访问（forbidden）

500内部服务器出错（internalserviceerror）

200一切正常（ok）

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

statusText服务器返回的状态文本信息

===========================================================================================================================================

【九、XMLHttpRequest对象方法和属性详细介绍】

1、【方法：

open（method,url,asynch）】

open（method,url,asynch）

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

method：

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

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

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

，在某些情况下，有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个URL。

如果对每个请求的响应不同，这就会带来不好的结果。

把当前时间戳追加到URL的最后，就能确保URL的惟一性，从而避免浏览器缓存结果。

url：

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

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

asynch：

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

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

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

------------------------------------------------------------------------------------------------------------------------------------------

2、【方法：

send（data）：

】

open方法定义了Ajax请求的一些细节。

send方法可为已经待命的请求发送指令

data：

将要传递给服务器的字符串。

若选用的是GET请求，则不会发送任何数据，给send方法传递null即可：

request.send（null）;

当向send（）方法提供参数时，要确保open（）中指定的方法是POST，如果没有数据作为请求体的一部分发送，则使用null.

这时资料则以查询字符串的形式列出，作为send的参数，

例如：

xmlHttp.send（"name=value&anothername=othervalue&so=on"）;

------------------------------------------------------------------------------------------------------------------------------------------

3、【方法:

setRequestHeader（header,value）】

setRequestHeader（header,value）

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

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

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

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

参数header：

首部的名字;参数value：

首部的值。

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

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

------------------------------------------------------------------------------------------------------------------------------------------

4、【属性:

onreadystatechange:

】

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

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

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

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

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

指定当服务器返回信息时客户端的处理方式。

只要将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性就可以了.

比如：

XMLHttpReq.onreadystatechange=processResponse;

注意:

这个函数名称不加括号，不指定参数。

也可以用Javascript函数直接量方式定义响应函数。

比如：

XMLHttpReq.onreadystatechange=function（）{};

------------------------------------------------------------------------------------------------------------------------------------------

5、【属性:

readyState】

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

它的值用数字代表。

0代表未初始化。

还没有调用open方法

1代表正在加载。

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

2代表已加载完毕。

send已被调用。

请求已经开始

3代表交互中。

服务器正在发送响应

4代表完成。

响应发送完毕

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

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

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

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

------------------------------------------------------------------------------------------------------------------------------------------

6、【属性:

status】

status

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

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

常用状态码及其含义：

404没找到页面（notfound）

403禁止访问（forbidden）

500内部服务器出错（internalserviceerror）

200一切正常（ok）

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

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

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

------------------------------------------------------------------------------------------------------------------------------------------

7、【属性:

responseText】

responseText

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

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

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

responseText：

将传回的信息当字符串使用；

------------------------------------------------------------------------------------------------------------------------------------------

8、【属性:

responseXML】

responseXML

如果服务器返回的是XML，那么数据将储存在responseXML属性中。

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

MIME类型必须为text/xml

*【一定要切记，当响应数据为xml文件时，需要设置响应的头信息】

*【response.setContentType（"text/xml;charset=utf-8"）;】

responseXML：

将传回的信息当XML文档使用，可以用DOM处理。

------------------------------------------------------------------------------------------------------------------------------------------

【十、AJAX开发框架流程】

AJAX实质上也是遵循Request/Server模式，所以这个框架基本的流程是：

对象初始化

发送请求

服务器接收

服务器返回

客户端接收

修改客户端页面内容。

只不过这个过程是