论文部分内容阅读
【摘 要】本文使用JavaScript提供的XMLHttpRequest实现了自动补全表单字段的程序，简化表单输入的复杂性。进一步说明如何利用Ajax构建更为动态和响应更灵敏的Web应用程序。
【关键词】xml文档；XMLHttpReques ；自动补全
随着web的发展，新型的web应用程序很快流行，这些web站点的共同特色是具有快速的高响应的用户界面，出色的交互和更好的用户体验，这就是Ajax的新技术。当客户端向服务器发送请求信息时，可以利用Ajax技术自动刷新来自服务器的信息，为页面上的对象构建很酷的预览效果，以及构建一个Ajax应用程序，能够像桌面应用程序那样自动补全表单字段，简化表单输入。
1. AJAX技术组成
Ajax本身并不是一个新的技术，它是由几种长期存在的web技术组合而成，如图1-1所示。
它使用HTML和CSS控制页面结构和表示方式， DOM显示和操纵页面；使用浏览器的XMLHttpRequest对象在客户机和服务器之间传输数据，使用XML作为在客户机和服务器之间传输的数据格式；使用JAVASCRIPT动态显示所有内容并且提供交互功能。
Ajax的核心是JavaScript对象XMLHttpRequest。该对象是一种支持异步请求的技术。使JavaScript向服务器提出请求并处理响应，而不阻塞用户。
Ajax应用程序在用户和服务器之间建立一个中介，如果用户的操作并不要求向服务器发出请求，那么Ajax引擎会进行响应。如果用户操作需要服务器调用，Ajax引擎将异步执行它，因此Ajax不需要等待服务器的响应，Ajax技术使用户在操作用户界面时，不需要等待服务器而暂停。
2. AJAX优点及运行环境
Ajax最大的有优点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。 另外，使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。其次可以把以前一些服务器负担的工作转移到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，Ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
AJAX的后台运行根据所用语言不同而有差异，如果是 .net ，用 IIS 就行， 如果用 java，用 tomcat ，在页面里面写客户端脚本，调用服务器端的程序，然后把结果输出到页面。
3.用AJAX技术简化表单输入的方法
自动补全表单字段是帮助网站访问的一种非常好的方法，可以降低在字段输入数据的复杂性，帮助用户填写具有大量选项的表单，从而帮助网站访问者节省自身时间和精力，还有助于想站点提供有效的数据。
在使用网站搜索的时候，当看似普通的搜索字段在进行输入时，会显示一个弹出列表，其中显示搜索结果。随着输入的进行，列表中的搜索结果会被不断的过滤。使用Ajax技术来实现它将非常方便。如图所示3-1自动补全输入的字段。
3.1分析实现自动补全表单
在页面中，当用户在表单中想查询某个字段时，随着文字的输入，文本框下方会显示于文字输入匹配的越来越短的列表名。当输入的字段放入文本框后，列表也随之消失。
以高校名称为例，首先需要一个xml文档用于存储大学校名数据信息，该文档存放在服务器上，然后，在表单输入时需由XMLHTTPRequest对象获取和显示来自服务器的数据。从服务器获得数据时，需要找到所需的信息，并且确保它采用的格式是Ajax应用程序可以使用的。为此需要检查信息。因为数据是结构良好的xml文档，脚本可以在xml文档树中移动，寻找并且提取所需的数据，然后将数据存储在变量中。如果需要，脚本还可以对数据进行重新格式化以备后期使用。
3.2建立服务器上xml文档数据源
在使用Ajax时，最主要的就是用JavaScript取各种XML文件（包括CSS和ATOM提要）。XML数据源可分为三类：XML纯文本文档、关系型数据库及其它各种应用数据，这三种数据源各有优缺点。Xml纯文本文档最大的优点在于直接方便的读取，或者以样式信息在浏览器中显示，或者通过DOM编程与其它应用程序相连。关系型数据库的有点在于通过数据库系统对数据进行管理，再利用服务端应用（如asp.net，servlet）等进行动态存取。比较适合基于三层模式的系统开发。在自动补全表单字段输入中，为了直接方便读取，将建立xml纯文本文档数据数据源。如图3-2所示部分xml文檔代码。
3.3用JavaScript处理服务器请求
（1）在Ajax工作时，要读取的文件必须驻留在服务器上，Ajax调用的时，数据源有可能被缓存。即看似程序与服务器通信并获取新数据，实际只是查看以前读取的数据，可以通过setRequestHeader（）方法添加以下请求首部迫使服务器提供最新数据：
xht.setRequestHeader（“If-Modified-Since”，”wed，15 jan 2013 01：00：00 GMT”）；
xht.setRequestHeader（“Cache-Control”，”no-cache”）；
xht.setRequestHeader（“Cache-Control”，”must-revalidate”）；
xht.setRequestHeader（“Cache-Control”，”no-store”）；
xht.setRequestHeader（“Pragma”，”no-cache”）；
xht.setRequestHeader（“Expires”，”0”）； （2）使用XMLHttpRequest方法获取数据源信息。
function init（）{
if （window.XLHttpRequest）{
xht= new XHMLHttpRequest（）；
}
else{
if （window.ActiveXObject）{
try{
xht=new ActiveXObjct（"Microsoft.XMLHTTP"）；
}
catch（e）{}
}
}
（3）高校名称基本不会变化，在读取XML文件时，可以只读取一次，对数据进行初始化，该文件在这次会话结束之前一直有效。以下为部分代码
if（xht.responseXML）{
var school=xht.responseXML，getElementsByTagName（"item"）；
for （var i=0；i<=school.length；i++）{
schoolArr[i]=school[i].getElementsByTagName（"label"）[0].firstChlid；
}
}
3.4用html+css處理表单字段及页面样式
HTML与XML的设计不同，XML是用来存储数据的，重在数据本身。而HTML是用来定义数据的，重在数据的显示模式。在Web标准中，HTML/XHTML负责页面结构，CSS负责样式表现，JavaScript负责动态行为。在使用时根据个人风格和事物本身进行设计，这里就不在赘述。
4.总结
Ajax技术能够构建更为动态和响应更灵敏的Web应用程序。该方法的关键在于对浏览器端的JavaScript、DHTML和与服务器异步通信的组合。通过自动补全表单字段的应用程序，希望读者对Ajax核心的关键技术能进一步的了解。
参考文献：
[1] Tom Negrino著.Javascript基础教程（第8版）[M].人民邮电出版社，2012年4月.
[2] 张亚飞著. JavaScript权威指南[M].清华大学出版.2011年9月
【关键词】xml文档；XMLHttpReques ；自动补全
随着web的发展，新型的web应用程序很快流行，这些web站点的共同特色是具有快速的高响应的用户界面，出色的交互和更好的用户体验，这就是Ajax的新技术。当客户端向服务器发送请求信息时，可以利用Ajax技术自动刷新来自服务器的信息，为页面上的对象构建很酷的预览效果，以及构建一个Ajax应用程序，能够像桌面应用程序那样自动补全表单字段，简化表单输入。
1. AJAX技术组成
Ajax本身并不是一个新的技术，它是由几种长期存在的web技术组合而成，如图1-1所示。
它使用HTML和CSS控制页面结构和表示方式， DOM显示和操纵页面；使用浏览器的XMLHttpRequest对象在客户机和服务器之间传输数据，使用XML作为在客户机和服务器之间传输的数据格式；使用JAVASCRIPT动态显示所有内容并且提供交互功能。
Ajax的核心是JavaScript对象XMLHttpRequest。该对象是一种支持异步请求的技术。使JavaScript向服务器提出请求并处理响应，而不阻塞用户。
Ajax应用程序在用户和服务器之间建立一个中介，如果用户的操作并不要求向服务器发出请求，那么Ajax引擎会进行响应。如果用户操作需要服务器调用，Ajax引擎将异步执行它，因此Ajax不需要等待服务器的响应，Ajax技术使用户在操作用户界面时，不需要等待服务器而暂停。
2. AJAX优点及运行环境
Ajax最大的有优点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。 另外，使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。其次可以把以前一些服务器负担的工作转移到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，Ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
AJAX的后台运行根据所用语言不同而有差异，如果是 .net ，用 IIS 就行， 如果用 java，用 tomcat ，在页面里面写客户端脚本，调用服务器端的程序，然后把结果输出到页面。
3.用AJAX技术简化表单输入的方法
自动补全表单字段是帮助网站访问的一种非常好的方法，可以降低在字段输入数据的复杂性，帮助用户填写具有大量选项的表单，从而帮助网站访问者节省自身时间和精力，还有助于想站点提供有效的数据。
在使用网站搜索的时候，当看似普通的搜索字段在进行输入时，会显示一个弹出列表，其中显示搜索结果。随着输入的进行，列表中的搜索结果会被不断的过滤。使用Ajax技术来实现它将非常方便。如图所示3-1自动补全输入的字段。
3.1分析实现自动补全表单
在页面中，当用户在表单中想查询某个字段时，随着文字的输入，文本框下方会显示于文字输入匹配的越来越短的列表名。当输入的字段放入文本框后，列表也随之消失。
以高校名称为例，首先需要一个xml文档用于存储大学校名数据信息，该文档存放在服务器上，然后，在表单输入时需由XMLHTTPRequest对象获取和显示来自服务器的数据。从服务器获得数据时，需要找到所需的信息，并且确保它采用的格式是Ajax应用程序可以使用的。为此需要检查信息。因为数据是结构良好的xml文档，脚本可以在xml文档树中移动，寻找并且提取所需的数据，然后将数据存储在变量中。如果需要，脚本还可以对数据进行重新格式化以备后期使用。
3.2建立服务器上xml文档数据源
在使用Ajax时，最主要的就是用JavaScript取各种XML文件（包括CSS和ATOM提要）。XML数据源可分为三类：XML纯文本文档、关系型数据库及其它各种应用数据，这三种数据源各有优缺点。Xml纯文本文档最大的优点在于直接方便的读取，或者以样式信息在浏览器中显示，或者通过DOM编程与其它应用程序相连。关系型数据库的有点在于通过数据库系统对数据进行管理，再利用服务端应用（如asp.net，servlet）等进行动态存取。比较适合基于三层模式的系统开发。在自动补全表单字段输入中，为了直接方便读取，将建立xml纯文本文档数据数据源。如图3-2所示部分xml文檔代码。
3.3用JavaScript处理服务器请求
（1）在Ajax工作时，要读取的文件必须驻留在服务器上，Ajax调用的时，数据源有可能被缓存。即看似程序与服务器通信并获取新数据，实际只是查看以前读取的数据，可以通过setRequestHeader（）方法添加以下请求首部迫使服务器提供最新数据：
xht.setRequestHeader（“If-Modified-Since”，”wed，15 jan 2013 01：00：00 GMT”）；
xht.setRequestHeader（“Cache-Control”，”no-cache”）；
xht.setRequestHeader（“Cache-Control”，”must-revalidate”）；
xht.setRequestHeader（“Cache-Control”，”no-store”）；
xht.setRequestHeader（“Pragma”，”no-cache”）；
xht.setRequestHeader（“Expires”，”0”）； （2）使用XMLHttpRequest方法获取数据源信息。
function init（）{
if （window.XLHttpRequest）{
xht= new XHMLHttpRequest（）；
}
else{
if （window.ActiveXObject）{
try{
xht=new ActiveXObjct（"Microsoft.XMLHTTP"）；
}
catch（e）{}
}
}
（3）高校名称基本不会变化，在读取XML文件时，可以只读取一次，对数据进行初始化，该文件在这次会话结束之前一直有效。以下为部分代码
if（xht.responseXML）{
var school=xht.responseXML，getElementsByTagName（"item"）；
for （var i=0；i<=school.length；i++）{
schoolArr[i]=school[i].getElementsByTagName（"label"）[0].firstChlid；
}
}
3.4用html+css處理表单字段及页面样式
HTML与XML的设计不同，XML是用来存储数据的，重在数据本身。而HTML是用来定义数据的，重在数据的显示模式。在Web标准中，HTML/XHTML负责页面结构，CSS负责样式表现，JavaScript负责动态行为。在使用时根据个人风格和事物本身进行设计，这里就不在赘述。
4.总结
Ajax技术能够构建更为动态和响应更灵敏的Web应用程序。该方法的关键在于对浏览器端的JavaScript、DHTML和与服务器异步通信的组合。通过自动补全表单字段的应用程序，希望读者对Ajax核心的关键技术能进一步的了解。
参考文献：
[1] Tom Negrino著.Javascript基础教程（第8版）[M].人民邮电出版社，2012年4月.
[2] 张亚飞著. JavaScript权威指南[M].清华大学出版.2011年9月