论文部分内容阅读
[摘 要] Ajax是Web2.0的核心之一,它采用异步模式,可以开发出基于浏览器的具有高用户交互性的web应用,改变了传统Web应用的交互模式,从而可以构建出更为动态、响应更灵敏和用户体验更好的Web应用程序。
[关键词] Ajax JavaScript DHtml Web2.0
一、Ajax技术简介
AJAX,"Asynchronous JavaScript And XML"的缩写,可翻译为异步JavaScript及XML技术。其核心是一个寄宿在浏览器中名为XMLHTTPRequest的类。通过此类,可以做到无需提交表单就可以实现与服务器的连接;无需刷新整个页面,就可以动态更新页面中一部分的内容。XMLHTTPRequest通常使用XML作为数据交换的载体,但也可使用其他的载体,如纯文本。简单来说,就是通过XMLHTTPRequest发送信息给服务器,异步接收服务器处理并返回信息,然后通过JavaScript动态更新页面的部分内容。
二、Ajax原理及其技术构成
Ajax这个概念的最早提出者Jesse James Garrett认为,Ajax并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用,它包括:
使用XHTML和CSS标准化呈现;
使用DOM实现动态显示和交互;
使用XML和XSLT进行数据交换与处理;
使用XMLHttpRequest进行异步数据读取;
最后用JavaScript绑定和处理所有数据;
Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求.
虽然Garrent列出了7条Ajax的构成技术,但我们常用到的ajax核心只有JavaScript、XMLHTTPRequest和DOM,如果所用数据格式为XML的话,还可以再加上XML这一项(Ajax从服务器端返回的数据可以是XML格式,也可以是文本等其他格式)。在旧的交互方式中,由用户触发一个HTTP请求到服务器,服务器对其进行处理后再返回一个新的HTHL页到客户端,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。
而使用Ajax后用户从感觉上几乎所有的操作都会很快响应没有页面重载(白屏)的等待。
下面简单介绍一个这几种技术
1.JavaScript
JavaScript是一在浏览器中大量使用的编程语言,一种由Netscape的LiveScript发展而来的脚本语言,它提高与Java的兼容性。JavaScript采用HTML页作为其接口。使得网页和用户之间实现了一种实时性的、动态的、交互性的关系,使网页包含更多活跃的元素和更加精彩的内容。Javascript短小精悍,又是在客户机上执行的,大大提高了网页的浏览速度和交互能力。同时它又是专门为制作Web网页而量身定做的一种简单的编程语言。
2.XMLHTTPRequest
Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。这样就可以向再发桌面应用程序只同服务器进行数据层面的交换,而不用每次都刷新界面也不用每次将数据处理的工作提交给服务器来做,这样即减轻了服务器的负担又加快了响应速度、缩短了用户等候时间。
3.DOM
文档对象模型(Document Object Model),是用于HTML和XML文档的API。DOM提供了文档的结构化表现,允许你修改文档的内容和视觉表现。本质上,它把网页和脚本或编程语言连接了起来。
DOM用来表示浏览器上的整个文档对象及其层次结构(例如,document 就代表“文件本身“这个对像,table对象则代表HTML的表格对象等等)。DOM中的所有节点可以使用JavaScript脚本使用。DOM模型使得页面层次结构能够动态的变化。
4.可扩展的标记语言(Extensible Markup Language)具有一种开放的、可扩展的、可自描述的语言结构,它已经成为网上数据和文档传输的标准。它是用来描述数据结构的一种语言,就正如他的名字一样。他使对某些结构化数据的定义更加容易,并且可以通过他和其他应用程序交换数据。
三、通常的ajax过程
通常的页面AJAX的过程如下:
1.初始化页面
2.对页面操作,触发元素的事件处理函数
3.元素的事件处理函数调用AJAX事件处理函数,同时传给AJAX事件处理函数必要的发给服务器端的参数数据
4.AJAX事件处理函数创建XMLHttpRequest对象,发送http请求,接收请求,必要时将控制权交由回调函数
5.请求处理函数:判断http请求
6.业务处理函数,更新到视图
在这个过程中,可以看出其核心是事件处理函数,其典型过程如下:
1.初始化XMLHttpRequest对象
2.指定回调函数,即设定XMLHttpRequest对象的onreadystatechange属性
3.创建http请求,即调用XMLHttpRequest对象的open()方法
4.设置http请求头,即调用XMLHttpRequest对象的setResourceHeader方法
5.发送http请求,即调用XMLHttpRequest对象的send()方法
当open()的asynchoronize参数设定为true(也就是默认值)时,当readystate的值发生改变时,就会将控制转交给回调函数处理。
回调函数可以分为请求处理函数和业务处理函数。前者判断http请求头,并做必要的异常处理;后者分析并加工相应的数据,根据既定业务需求更新页面内容。
但是我们在实际的应用中,根据实际情况,实现ajax并不一定需要通过XMLHttpRequest发送请求来进行页面的局部刷新,根据实际情况,采用其他的方法,灵活使用Ajax的其他组成技术,同样也能实现页面的局部刷新,也使代码更加的灵活。下面就是一个仅使用dom,javascript结合服务器端的servlet实现模仿google自动补全ajax效果的例子。
四、通过Ajax实现仿google的自动补全
Google的自动补全过程,是在页面上产生一个div区域,当文本框无任何输入时,这个div区域是隐藏的,输入字符后,触发javascript事件,从服务器端获得搜索关键词的数据,展开div区域进行自动补全。在这里例子中,由javascript代替XMLHttpRequest向服务器端发送请求,用一个页面产生的xml数据代替了google服务器端返回的关键词数据,实现了类似google自动补全的效果。
1)服务器端代码
服务器端是一个servlet,在servlet的doGet()方法里定义了一个request对象,并将视图层中得到的数据保存到request对象中。里面的doPost()方法直接调用doGet()方法。
通过servlet返回的视图层代码,这段代码是写在一个jsp页面上,模拟了Google从服务器端搜索关键词的结果。因为JSP返回的是xml数据,所以contentType是text/xml。
2)JSP页面代码
在页面代码中,没有包含javascript语句,javascript语句单独写在了一个js文件当中,在输入框上直接链接到了js文件。当执行时,在输入框中输入部分内容,出现一个div部分,显示服务器端返回的数据,实现自动补全。Div部分在js文件中定义。
在写ajax的代码时要认识到的是,ajax的页面部分刷新,在实际的执行中,并不是通过html代码或者服务器端代码实现,而是由javascript来实现的。因此要使用ajax,必须对javascript有足够的了解。
3)Javascript代码
接下来的,是不使用XMLHttpRequest来实现ajax最关键的部分,由javascript语句来访问服务器端,并获得服务器端返回的数据。在这个例子中,javascript语句定义了页面自动补全何时出现,各种事件效果。同时通过javascript语句直接调用了servlet。在下面的代码中,注释部分对javascript语句有比较详细的解释,可以看到,javascript语句是如何实现页面效果的变化,如何被页面事件调用还有如何代替XMLHttpRequest向服务器端发出请求的。
结束语
由上可见,AJAX并不复杂,远比想像中要简单得多。在能够更加自由的写出ajax后,就会发现,我们运用ajax的中心,不是XMLHttpRequest,而是javascript,灵活的,更加有想象力的运用javascript,能使我们的代码更加自由,使我们能做出更加生动的web效果。
参 考 文 献
[1] [美]麦克劳夫林.Head Rush Ajax-深入浅出Ajax 东南大学出版社,2006.5.
[2] 李刚.基于J2EE的Ajax宝典.电子工业出版社.2007.5■
[关键词] Ajax JavaScript DHtml Web2.0
一、Ajax技术简介
AJAX,"Asynchronous JavaScript And XML"的缩写,可翻译为异步JavaScript及XML技术。其核心是一个寄宿在浏览器中名为XMLHTTPRequest的类。通过此类,可以做到无需提交表单就可以实现与服务器的连接;无需刷新整个页面,就可以动态更新页面中一部分的内容。XMLHTTPRequest通常使用XML作为数据交换的载体,但也可使用其他的载体,如纯文本。简单来说,就是通过XMLHTTPRequest发送信息给服务器,异步接收服务器处理并返回信息,然后通过JavaScript动态更新页面的部分内容。
二、Ajax原理及其技术构成
Ajax这个概念的最早提出者Jesse James Garrett认为,Ajax并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用,它包括:
使用XHTML和CSS标准化呈现;
使用DOM实现动态显示和交互;
使用XML和XSLT进行数据交换与处理;
使用XMLHttpRequest进行异步数据读取;
最后用JavaScript绑定和处理所有数据;
Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求.
虽然Garrent列出了7条Ajax的构成技术,但我们常用到的ajax核心只有JavaScript、XMLHTTPRequest和DOM,如果所用数据格式为XML的话,还可以再加上XML这一项(Ajax从服务器端返回的数据可以是XML格式,也可以是文本等其他格式)。在旧的交互方式中,由用户触发一个HTTP请求到服务器,服务器对其进行处理后再返回一个新的HTHL页到客户端,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。
而使用Ajax后用户从感觉上几乎所有的操作都会很快响应没有页面重载(白屏)的等待。
下面简单介绍一个这几种技术
1.JavaScript
JavaScript是一在浏览器中大量使用的编程语言,一种由Netscape的LiveScript发展而来的脚本语言,它提高与Java的兼容性。JavaScript采用HTML页作为其接口。使得网页和用户之间实现了一种实时性的、动态的、交互性的关系,使网页包含更多活跃的元素和更加精彩的内容。Javascript短小精悍,又是在客户机上执行的,大大提高了网页的浏览速度和交互能力。同时它又是专门为制作Web网页而量身定做的一种简单的编程语言。
2.XMLHTTPRequest
Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。这样就可以向再发桌面应用程序只同服务器进行数据层面的交换,而不用每次都刷新界面也不用每次将数据处理的工作提交给服务器来做,这样即减轻了服务器的负担又加快了响应速度、缩短了用户等候时间。
3.DOM
文档对象模型(Document Object Model),是用于HTML和XML文档的API。DOM提供了文档的结构化表现,允许你修改文档的内容和视觉表现。本质上,它把网页和脚本或编程语言连接了起来。
DOM用来表示浏览器上的整个文档对象及其层次结构(例如,document 就代表“文件本身“这个对像,table对象则代表HTML的表格对象等等)。DOM中的所有节点可以使用JavaScript脚本使用。DOM模型使得页面层次结构能够动态的变化。
4.可扩展的标记语言(Extensible Markup Language)具有一种开放的、可扩展的、可自描述的语言结构,它已经成为网上数据和文档传输的标准。它是用来描述数据结构的一种语言,就正如他的名字一样。他使对某些结构化数据的定义更加容易,并且可以通过他和其他应用程序交换数据。
三、通常的ajax过程
通常的页面AJAX的过程如下:
1.初始化页面
2.对页面操作,触发元素的事件处理函数
3.元素的事件处理函数调用AJAX事件处理函数,同时传给AJAX事件处理函数必要的发给服务器端的参数数据
4.AJAX事件处理函数创建XMLHttpRequest对象,发送http请求,接收请求,必要时将控制权交由回调函数
5.请求处理函数:判断http请求
6.业务处理函数,更新到视图
在这个过程中,可以看出其核心是事件处理函数,其典型过程如下:
1.初始化XMLHttpRequest对象
2.指定回调函数,即设定XMLHttpRequest对象的onreadystatechange属性
3.创建http请求,即调用XMLHttpRequest对象的open()方法
4.设置http请求头,即调用XMLHttpRequest对象的setResourceHeader方法
5.发送http请求,即调用XMLHttpRequest对象的send()方法
当open()的asynchoronize参数设定为true(也就是默认值)时,当readystate的值发生改变时,就会将控制转交给回调函数处理。
回调函数可以分为请求处理函数和业务处理函数。前者判断http请求头,并做必要的异常处理;后者分析并加工相应的数据,根据既定业务需求更新页面内容。
但是我们在实际的应用中,根据实际情况,实现ajax并不一定需要通过XMLHttpRequest发送请求来进行页面的局部刷新,根据实际情况,采用其他的方法,灵活使用Ajax的其他组成技术,同样也能实现页面的局部刷新,也使代码更加的灵活。下面就是一个仅使用dom,javascript结合服务器端的servlet实现模仿google自动补全ajax效果的例子。
四、通过Ajax实现仿google的自动补全
Google的自动补全过程,是在页面上产生一个div区域,当文本框无任何输入时,这个div区域是隐藏的,输入字符后,触发javascript事件,从服务器端获得搜索关键词的数据,展开div区域进行自动补全。在这里例子中,由javascript代替XMLHttpRequest向服务器端发送请求,用一个页面产生的xml数据代替了google服务器端返回的关键词数据,实现了类似google自动补全的效果。
1)服务器端代码
服务器端是一个servlet,在servlet的doGet()方法里定义了一个request对象,并将视图层中得到的数据保存到request对象中。里面的doPost()方法直接调用doGet()方法。
通过servlet返回的视图层代码,这段代码是写在一个jsp页面上,模拟了Google从服务器端搜索关键词的结果。因为JSP返回的是xml数据,所以contentType是text/xml。
2)JSP页面代码
在页面代码中,没有包含javascript语句,javascript语句单独写在了一个js文件当中,在输入框上直接链接到了js文件。当执行时,在输入框中输入部分内容,出现一个div部分,显示服务器端返回的数据,实现自动补全。Div部分在js文件中定义。
在写ajax的代码时要认识到的是,ajax的页面部分刷新,在实际的执行中,并不是通过html代码或者服务器端代码实现,而是由javascript来实现的。因此要使用ajax,必须对javascript有足够的了解。
3)Javascript代码
接下来的,是不使用XMLHttpRequest来实现ajax最关键的部分,由javascript语句来访问服务器端,并获得服务器端返回的数据。在这个例子中,javascript语句定义了页面自动补全何时出现,各种事件效果。同时通过javascript语句直接调用了servlet。在下面的代码中,注释部分对javascript语句有比较详细的解释,可以看到,javascript语句是如何实现页面效果的变化,如何被页面事件调用还有如何代替XMLHttpRequest向服务器端发出请求的。
结束语
由上可见,AJAX并不复杂,远比想像中要简单得多。在能够更加自由的写出ajax后,就会发现,我们运用ajax的中心,不是XMLHttpRequest,而是javascript,灵活的,更加有想象力的运用javascript,能使我们的代码更加自由,使我们能做出更加生动的web效果。
参 考 文 献
[1] [美]麦克劳夫林.Head Rush Ajax-深入浅出Ajax 东南大学出版社,2006.5.
[2] 李刚.基于J2EE的Ajax宝典.电子工业出版社.2007.5■