ajax论文.docx - 冰点文库

资源描述

ajax论文.docx

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

ajax论文.docx

ajax论文

Aptana简介1

Aptana插件在ecpise中安装1

Aptana插件在MyEcpise中安装1

javaScript基础知识2

浏览器的对象树---BOM2

浏览器的对象含义2

window对象常用方法3

Form表单对象3

javaScript定义函数的三种方式4

DOM4

DOM的结构5

节点及其类型5

Node接口的特性和方法6

AJAX7

同步交互和异步交互7

什么是Ajax7

Ajax的工作原理8

AJAX包含的技术9

AJAX的缺陷9

XMLHttpRequest对象9

XMLHttpRequest对象初始化10

XMLHttpRequest对象方法10

XMLHttpRequest对象属性11

发送请求--方法和属性介绍11

接收--方法和属性介绍12

AJAX开发框架13

A初始化XMLHttpRequest对象13

B、指定响应处理函数14

C、发出HTTP请求14

D、处理服务器返回的信息15

数据格式提要16

XML16

JSON16

Aptana简介

Aptana是一个非常强大,开源,专注于JavaScript的Ajax开发IDE它的特性包括

1、JavaScript,JavaScript函数,HTML,CSS语言的CodeAssist功能

2、Outliner（大纲）：

显示JavaScript,HTML和CSS的代码结构

3、支持JavaScript，HTML，CSS代码提示，包括JavaScript自定函数

4、代码语法错误提示。

5、支持AptanaUI自定义和扩展。

6、调试JavaScript

7、支持流行AJAX框架的CodeAssist功能:

JQueryextjsdwr

Aptana插件在ecpise中安装

eclipse插件引入方法

1、在eclipse的plugins文件夹的同级目录新建文件夹，命名为plugInsNew（自

定义）;

2、打开plugInsNew，在其中新建一个你插件容易记的文件夹，比如：

aptana_update_024747（自定义）

3、打开aptana_update_024747在其中新建一个eclipse（名字固定）文件夹；

4、打开eclipse文件夹，将你的features和plugins文件夹放入；

5、在plugInsNew同级目录新建links文件夹（如有可省）；

6、在links文件夹里新建文件（名字自定义,后缀名是.link）

如：

aptana_update_024747.link文件，并将插件路径引入：

如

path=E:

\\eclipse\\pluginsNew\\aptana_update_024747

重新启动eclipse即可！

这样引入插件的好处是可以方便的识别，加入或删除你所需要的插件！

Aptana插件在MyEcpise中安装

myeclipse插件引入方法

1、在D盘新建文件夹pluginsNew（自定义）

2、打开pluginsNew，在其中新建一个你插件容易记的文件夹，比如：

aptana_update_024747

3、打开aptana_update_024747在其中新建一个eclipse文件夹；

4、打开eclipse文件夹，将你的features和plugins文件夹放入；

5、找到myecplise的安装目录D:

\ProgramFiles\MyEclipse

6.5\eclipse\links下的links文件夹

6、在links文件夹里新建文件如：

aptana_update_024747.link文件，并将

插件路径引入：

如

path=D:

\\pluginsNew\\aptana_update_024747

重新启动myeclipse即可！

javaScript基础知识

links链接对象

浏览器对象，包含了正在使用的Navigator的版本信息。

反映了当前使用的浏览器的资料。

JavaScript客户端运行时刻引擎自动创建navigator对象。

Window对象：

表示的是浏览器窗口，最顶层的对象,window的属性对应于整个窗口。

Document对象：

文档对象是JavaScript 中window 和frames对象的一个属性,是显示于窗口或框架内的一个文档。

用最容易理解的话说，每一个HTML 文件占用一个 window 对象，包括定义框架的网页（“框架网页”）

Location对象：

地址对象它描述的是某一个窗口对象所打开的地址。

*window.location=“链接地址”;

History对象：

历史对象包含了用户已浏览的 URL 的信息，是指历史对象指浏览器的浏览历史。

*back（）后退，跟按下“后退”键是等效的。

*forward（）前进，跟按下“前进”键是等效的。

Links对象：

是一个数组，包含了文档中所有连接标记（包含 href 属性的标记和标记段里的标记），按照在文档中的次序，从 0 开始给每个连接标记定义了一个下标。

Archors对象：

是一个数组，包含了文档中所有锚标记（包含 name 属性的标记），按照在文档中的次序，从 0 开始给每个锚标记定义了一个下标。

Forms对象：

是一个数组，包含了文档中所有的表单（）。

要引用单个表单，可以用 document.forms[x]，但是一般来说，人们都会这样做：

在标记中加上“name=”...“”属性，那么直接用“document.<表单名>”就可以引用了。

Images对象：

图片对象 document.images[] 是一个数组，包含了文档中所

有的图片（）。

●每个对象有它自己的属性、方法和事件。

●对象的属性是反映该对象某些特定的性质的。

●函数名（传递给函数的参数1，传递给函数的参数2，….）

●变量=函数名（传递给函数的参数1，传递给函数的参数2，….）

●对于有返回值的函数调用，也可以在程序中直接使用返回的结果，例如：

alert（"sum=“+square（2,3））;

●不指定任何函数值的函数，返回undefined。

●构造函数方法newFunction（）;

//构造函数方式定义javascript函数注意Function中的F大写

varadd=newFunction（'a','b','returna+b;'）;

接受任意多个字符串参数，最后一个参数是函数体。

如果只传一个字符串，则其就是函数体。

●函数直接量定义函数

//使用函数直接量的方式定义函数

varresult=function（a,b）{returna+b;}

函数直接量是一个表达式，它可以定义匿名函数

DOM

●DOM：

DOM是DocumentObjectModel文档对象模型的缩写。

根据W3CDOM规范,DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件

DOM是针对xml（html）的基于树的API。

DOM树:

节点（node）的层次。

DOM把一个文档表示为一棵家谱树（父，子，兄弟）

DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面

DOM的结构

节点及其类型

●节点

*由结构图中我们可以看到，整个文档就是一个文档节点。

节点树的概念从图中一目了然，最上面的就是“树根”了。

节点之间有父子关系，祖先与子孙关系，兄妹关系。

这些关系从图中也很好看出来，直接连线的就是父子关系了。

指向在childNodes列表中的第一个节点

lastChild

Node

指向在childNodes列表中的最后一个节点

指向前一个兄弟节点；如果这个节点就是第一个兄弟节

点，那么该值为null

nextSibling

Node

指向后一个兄弟节点；如果这个节点就是最后一个兄弟节

点，那么该值为null

hasChildNodes（）

Boolean

当childNodes包含一个或多个节点时，返回真

attributes

NamedNodeMap

包含了代表一个元素的特性的Attr对象；仅用于Element

节点

appendChild（node）

Node

将node添加到childNodes的末尾

将childNodes中的oldnode替换成newnode

insertBefore

（newnode,refnode）

Node

在childNodes中的refnode之前插入newnode

AJAX

同步交互和异步交互

举个例子：

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

*同步：

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

*异步:

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

同步是指：

发送方发出数据后，等接收方发回响应以后才发下一个

数据包的通讯方式。

异步是指：

发送方发出数据后，不等接收方发回响应，接着发送下

个数据包的通讯方式

易懂的理解:

异步传输:

你传输吧，我去做我的事了，传输完了告诉我一声

同步传输:

你现在传输，我要亲眼看你传输完成，才去做别的事

什么是Ajax

●Ajax的技术的产生

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

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

AJAX案例之一

AJAX案例之二

●Ajax：

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

图1Web的传统模型。

客户端向服务器发送一个请求，服务器返回整个页面，如此反复

图2在Ajax模型中，数据在客户端与服务器之间独立传输。

服务器不再返回整个页面

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

•Flash

•Javaapplet

•框架：

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

•隐藏的iframe

•XMLHttpRequest：

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

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

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

Ajax的工作原理

Ajax的核心是JavaScript对象XmlHttpRequest。

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

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

AJAX采用异步交互过程。

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

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

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

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

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

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

使用AJAX，可以为JSP、开发人员、终端用户带来可见的便捷：

AJAX包含的技术

AJAX:

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

服务器端语言：

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

Ajax与服务器端语言无关。

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

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

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

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

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

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

AJAX的缺陷

AJAX不是完美的技术。

也存在缺陷：

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

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

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

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

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

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

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

XMLHttpRequest对象

●XMLHttpRequest对象

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

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

非W3C标准.

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

•InternetExplorer把XMLHttpRequest实现为一个ActiveX对象

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

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

XMLHttpRequest对象初始化

functioncreateXmlHttpRequest（）{

varxmlHttp;

try{//Firefox,Opera8.0+,Safari

xmlHttp=newXMLHttpRequest（）;

}catch（e）{

try{//InternetExplorer

xmlHttp=newActiveXObject（"Msxml2.XMLHTTP"）;

}catch（e）{

try{

xmlHttp=newActiveXObject（"Microsoft.XMLHTTP"）;

getAllResponseHeaders（）

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

getResponseHeader（"headerLabel"）

返回指定首部的串值

open（“method”,”url”）

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

setRequestHeader（"label","value"）

利用XMLHttpRequest实例与服务器进行通信包含以下3个关键部分：

•onreadystatechange事件处理函数

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

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

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

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

open（method,url,asynch）

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

⏹method：

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

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

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

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

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

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

var url = "GetAndPostExample?

timeStamp=" + new Date（）.getTime（）;

⏹

⏹url：

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

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

⏹asynch：

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

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

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

send（data）：

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

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

⏹data：

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

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

request.send（null）;

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

⏹完整的Ajax的GET请求示例：

setRequestHeader（header,value）

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

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

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

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

⏹参数header：

首部的名字;参数value：

首部的值。

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

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

⏹完整的Ajax的POST请求示例：

接收--方法和属性介绍

用XMLHttpRequest的方法可向服务器发送请求。

在Ajax处理过程中，XMLHttpRequest的如下属性可被服务器更改：

ready

展开阅读全文