论文部分内容阅读
摘要:Ajax即异步的JavaScript与XML,它是JavaScript、XML、CSS、DOM等多种已有技术的组合,可以实现客户端的异步请求操作,提供更好的服务响应。为实现网站用户注册功能,介绍了Ajax使用的技术、工作流程、重构及开发过程中的注意问题。
关键词:Ajax;对象;工作流程;重构
中图分类号:TP311文献标识码:A文章编号:1009-3044(2010)20-5517-03
Explatination of Ajax Technology Application
WANG Ai-min
(Department of Computer Engineering, Xinjiang Polytechnical College, Urumqi 830091, China)
Abstract: Ajax means Asynchronous JavaScript and XML. It is the combination of JavaScript 、XML、CSS、DOM and etc. To implement function of user login on Web, the technology 、working flow、recreation and notices in Ajax development are explored.
Key words: Ajax; object; working flow; recreation
Ajax即异步的JavaScript与XML,它是JavaScript、XML、CSS、DOM等多种已有技术的组合,可以实现客户端的异步请求操作,提供更好的服务响应。
在Ajax应用中,页面中用户的操作将通过Ajax引擎与服务器端进行通信,然后将返回结果提交给客户端页面的Ajax引擎,再由Ajax引擎来决定将这些数据插入到页面的指定位置,这样每个用户的行为会变成对Ajax引擎的一次JavaScript调用,实现了不刷新整个页面的情况下对部分数据进行更新,降低了网络流量,减轻了服务器和带宽的负担,节约空间和成本,可以调用XML等外部数据,进一步促进页面显示和数据的分离,它是一种基于标准化的并被广泛支持的技术,不需要下载插件或小程序。
1 Ajax使用的技术
Ajax使用的最核心的技术是XMLHttpRequest,它是一个具有应用程序接口的JavaScript对象,能够使用HTTP协议连接一个服务器,目前许多浏览器都支持它。通过XMLHttpRequest对象,Ajax可以像桌面应用程序一样只同服务器进行数据层面的交换,而不是每次都刷新页面。
JavaScript是一种在Web页面中添加动态脚本代码的解释性程序语言,利用它能执行许多复杂的任务,其核心已经嵌入到目前主流的Web浏览器中,Ajax利用JavaScript将DOM、XHTML、XML及CSS等技术综合起来并控制其行为。
2 Ajax的工作流程
2.1 发送请求
Ajax可以通过XMLHttpRequest对象实现采用异步方式在后台发送请求。通常情况下,Ajax发送请求有两种,一种是发送GET请求,另一种是发送POST请求。但是无论发送哪种请求,都需要经过以下4步骤。
1)初始化XMLHttpRequest对象。为了提高程序的兼容性,需要创建一个跨浏览器的XMLHttpRequest对象,并且判断XMLHttpRequest对象的实例是否成功,如果不成功,则给予提示。
2)为XMLHttpRequest对象指定一个回调函数,对于返回结果进行处理。具体代码如下:
3)创建一个与服务器的连接。在创建时,需要指定发送请求的方式(即GET或POST),以及设置是否采用异步方式发送请求。
4)向服务器发送请求。利用XMLHttpRequest对象的send()方法可以实现向服务器发送请求,该方法需要传递一个参数,如果发送的是GET请求,可以将该参数设置为null;如果发送的是POST请求,可以通过该参数指定要发送的请求参数。
2.2 处理服务器响应
当向服务器发出请求后需要处理服务器响应。条件不同时,服务器对不同的请求有不同的响应结果。XMLHttpRequest对象提供了两个用来访问服务器响应的属性:一个是responseText属性,返回字符串响应;另一个是responseXML属性,返回XML响应。
2.2.1 处理字符串响应
字符串响应通常应用在响应不是特别复杂的情况下。如,将响应显示在提示对话框中,或者响应只是显示成功或失败的字符串。将响应显示到提示对话框中的回调函数的具体代码如下:
Function getResult(){
if(http_request.readyState==4){
if(http_request.states==200)
alert(http_request.responseText);
}else{
alert(”您所请求的页面有错误!”);}}}
如果需要将响应结果显示到页面的指定位置,也可以先在页面的合适位置添加一个
关键词:Ajax;对象;工作流程;重构
中图分类号:TP311文献标识码:A文章编号:1009-3044(2010)20-5517-03
Explatination of Ajax Technology Application
WANG Ai-min
(Department of Computer Engineering, Xinjiang Polytechnical College, Urumqi 830091, China)
Abstract: Ajax means Asynchronous JavaScript and XML. It is the combination of JavaScript 、XML、CSS、DOM and etc. To implement function of user login on Web, the technology 、working flow、recreation and notices in Ajax development are explored.
Key words: Ajax; object; working flow; recreation
Ajax即异步的JavaScript与XML,它是JavaScript、XML、CSS、DOM等多种已有技术的组合,可以实现客户端的异步请求操作,提供更好的服务响应。
在Ajax应用中,页面中用户的操作将通过Ajax引擎与服务器端进行通信,然后将返回结果提交给客户端页面的Ajax引擎,再由Ajax引擎来决定将这些数据插入到页面的指定位置,这样每个用户的行为会变成对Ajax引擎的一次JavaScript调用,实现了不刷新整个页面的情况下对部分数据进行更新,降低了网络流量,减轻了服务器和带宽的负担,节约空间和成本,可以调用XML等外部数据,进一步促进页面显示和数据的分离,它是一种基于标准化的并被广泛支持的技术,不需要下载插件或小程序。
1 Ajax使用的技术
Ajax使用的最核心的技术是XMLHttpRequest,它是一个具有应用程序接口的JavaScript对象,能够使用HTTP协议连接一个服务器,目前许多浏览器都支持它。通过XMLHttpRequest对象,Ajax可以像桌面应用程序一样只同服务器进行数据层面的交换,而不是每次都刷新页面。
JavaScript是一种在Web页面中添加动态脚本代码的解释性程序语言,利用它能执行许多复杂的任务,其核心已经嵌入到目前主流的Web浏览器中,Ajax利用JavaScript将DOM、XHTML、XML及CSS等技术综合起来并控制其行为。
2 Ajax的工作流程
2.1 发送请求
Ajax可以通过XMLHttpRequest对象实现采用异步方式在后台发送请求。通常情况下,Ajax发送请求有两种,一种是发送GET请求,另一种是发送POST请求。但是无论发送哪种请求,都需要经过以下4步骤。
1)初始化XMLHttpRequest对象。为了提高程序的兼容性,需要创建一个跨浏览器的XMLHttpRequest对象,并且判断XMLHttpRequest对象的实例是否成功,如果不成功,则给予提示。
2)为XMLHttpRequest对象指定一个回调函数,对于返回结果进行处理。具体代码如下:
3)创建一个与服务器的连接。在创建时,需要指定发送请求的方式(即GET或POST),以及设置是否采用异步方式发送请求。
4)向服务器发送请求。利用XMLHttpRequest对象的send()方法可以实现向服务器发送请求,该方法需要传递一个参数,如果发送的是GET请求,可以将该参数设置为null;如果发送的是POST请求,可以通过该参数指定要发送的请求参数。
2.2 处理服务器响应
当向服务器发出请求后需要处理服务器响应。条件不同时,服务器对不同的请求有不同的响应结果。XMLHttpRequest对象提供了两个用来访问服务器响应的属性:一个是responseText属性,返回字符串响应;另一个是responseXML属性,返回XML响应。
2.2.1 处理字符串响应
字符串响应通常应用在响应不是特别复杂的情况下。如,将响应显示在提示对话框中,或者响应只是显示成功或失败的字符串。将响应显示到提示对话框中的回调函数的具体代码如下:
Function getResult(){
if(http_request.readyState==4){
if(http_request.states==200)
alert(http_request.responseText);
}else{
alert(”您所请求的页面有错误!”);}}}
如果需要将响应结果显示到页面的指定位置,也可以先在页面的合适位置添加一个
或标记,设置该标记的id属性,如:div_result,然后在回调函数中应用以下代码显示响应结果。
document.getElementById(“div_result”).innerHTML=http_request.responseText;
2.2.2 处理XML响应
如果在服务器端需要生成特别复杂的响应,那么就需要应用XML响应。应用XMLHttpRequest对象的responseXML属性,可以生成一个XML文档,而且当前浏览器已经提供了很好的解析XML文档对象的方法。以下代码可以实现在回调函数中遍历保存留言信息的XML文档并显示在页面中。
你现在好吗?
天天向上
3 Ajax重构
Ajax的实现主要依赖于XMLHttpRequest对象,在调用它进行异步数据传输时,该对象的实例在处理完事件后会被销毁,若不对该对象进行封装处理,在下次需要调用它时则需重新构建,且每次调用都需要写大段代码,使用非常不便。目前很多开源的Ajax框架都提供了对XMLHttpRequest对象的封装方案,但是如果用这些框架需要加载很多额外的资源,这势必会造成服务器资源浪费。而Javascript脚本语言支持OO编码风格,通过它可以将Ajax所必须的功能封装在对象中。实现Ajax重构的步骤如下:
1) 创建一个单独的JS文件,名称为AjaxRequest.js,在该文件中编写重构Ajax所需的代码。
2) 在需要应用Ajax的页面中应用以下的语句及步骤(1)中创建的JS文件。
3) 在应用Ajax的页面中编写错误处理函数、实例化Ajax对象的方法和回调函数。
4) 在页面中添加设置系部的下拉列表和设置班级的下拉列表,并在系部下拉列表的onChange事件中,调用getClass()方法获取系部对应的班级。
5) 编写获取居住地的Servlet实现类AbodeServlet,在该Servlet中的doGet()方法中编写编写代码用于根据传递的action参数执行不同的处理方法。
6) 在AbodeServlet中编写getDepartment()方法。在该方法中,从保存系部信息的Map集合中获取全部的系部信息,并将获取的系部信息连接为一个以逗号分隔的字符串输出到页面上。getDepartment()方法的具体代码略。
7) 在AbodeServlet中编写getclass()方法。在该方法中,从保存系部信息的Map集合中获取全部的班级信息,并将获取的班级信息连接为一个以逗号分隔的字符串输出到页面上。getclass()方法的具体代码略。
8) 为了在页面载入后显示默认的系部,需要在页面的onLoad事件中调用获取系部的方法getDepartment()。具体实现如下:
window.onLoad=function(){
getDepartment();}
4 几个注意问题
4.1 浏览器兼容性问题
Ajax使用了大量的Javascript和Ajax引擎,这些内容需要浏览器提供足够的支持。目前对此提供支持的浏览器有IE5.0及以上版本、Mozilla1.0、NetScape7及以上版本,但是Mozilla提供XMLHttpRequest对象的方式不一样。因此,使用Ajax的程序必须测试针对各个浏览器的兼容性。
4.2 安全问题
安全性是互联网服务日益重要的关注点。Ajax应用主要面临以下安全问题。
1) JavaScript本身的安全性
当在web浏览器中执行JavaScript代码时,用户允许任何编写的代码运行在自己机器上,给网站带来安全隐患。为此,浏览器厂商提出在一个沙箱中执行JavaScript代码。沙箱是一个只能访问很少计算机资源的密闭环境,从而使Ajax应用不能读取或写入本地文件系统。提高了客户端JavaScript的安全性。
2) 数据在网络上传输的安全问题
对于涉密数据信息,在进行HTTP传输时,可以对数据加密。
3) 客户端调用远程服务的安全问题
在Ajax应用中应该将所有的Ajax请求都发送到控制器,由控制器负责检查调用者是否有访问资源的权限,而所有业务逻辑组件都隐藏在控制器之后。
4.3 性能问题
由于Ajax将大量的计算从服务器移到了客户端,浏览器就承受更大的负担。Ajax的核心语言是JavaScript,而JavaScript并不是高性能语言,其对象也不是轻量级的,特别是DOM元素会耗费大量内存,因此需要开发者尽力提高JavaScript代码的性能。以下几种方法可以优化Ajax应用的执行速度:1)优化for 循环;2)尽量使用局部变量,少用全局变量;3)尽量少用eval;4)将DOM节点附加到文档上;5)尽量减少点”.”操作符的使用。
4.4 中文编码问题
Ajax不支持多种字符集,其默认的字符集是UTF-8,所以在应用Ajax技术的程序中应及时进行编码转换。否则程序中的中文字符将变成乱码。一般在以下两种情况下会产生中文乱码。
1) 发送路径的参数中包含中文,在服务器端接收参数值时产生乱码
将数据提交到服务器有两种方法:一种是使用GET方法提交,另一种是使用POST方法提交。对于这两种方法,在服务器端接收参数值时解决中文乱码的方法不同。
当接收使用GET方法提交的数据时,要将编码转换为GBK或GB2312。例如将系部名称的编码转换为GBK的代码如下:
String selDepartment=request.getParameter(“parDepartment”); //获取选择的系部
selDepartment=new String(selDepartment.getBytes(“ISO-8859-1”),”GBK”);
当接收使用POST方法提交的数据时,要将编码转换为UTF-8。例如将用户名的编码转换为UTF-8的代码如下:
String userName= request.getParameter(“ user”);//获取用户名
userName=new String(userName. getBytes(“ISO-8859-1”),”UTF-8”);
2) 返回到responseText或responseXML的值中包含中文时产生乱码
因为Ajax在接收responseText或responseXML的值时是按照UTF-8的编码格式进行解码的,所以如果服务器端传递的数据不是UTF-8格式,在接收responseText或responseXML的值时有可能产生乱码。解决办法是保证从服务器端传递的数据采用UTF-8格式。
5 小结
Ajax技术可以减轻服务器的负担,实现客户端无刷新更新页面,运用了更加先进、更加标准化、更加高效的Web开发技术体系,是一个客户端技术,可以适应任何服务器端技术。Ajax正逐渐进入Web开发主流。
参考文献:
[1] 聂哲,范新灿,张霞.JSP动态Web技术实例教程[M].北京:高等教育出版社,2009.
[2] 王国辉.Java Web 开发实战宝典[M].北京:清华大学出版社,2010.
[3] 阮征,邹晨,鲍利剑.Web 2.0动态网站开发——Ajax技术与应用[M].北京:清华大学出版社,2008.
document.getElementById(“div_result”).innerHTML=http_request.responseText;
2.2.2 处理XML响应
如果在服务器端需要生成特别复杂的响应,那么就需要应用XML响应。应用XMLHttpRequest对象的responseXML属性,可以生成一个XML文档,而且当前浏览器已经提供了很好的解析XML文档对象的方法。以下代码可以实现在回调函数中遍历保存留言信息的XML文档并显示在页面中。
3 Ajax重构
Ajax的实现主要依赖于XMLHttpRequest对象,在调用它进行异步数据传输时,该对象的实例在处理完事件后会被销毁,若不对该对象进行封装处理,在下次需要调用它时则需重新构建,且每次调用都需要写大段代码,使用非常不便。目前很多开源的Ajax框架都提供了对XMLHttpRequest对象的封装方案,但是如果用这些框架需要加载很多额外的资源,这势必会造成服务器资源浪费。而Javascript脚本语言支持OO编码风格,通过它可以将Ajax所必须的功能封装在对象中。实现Ajax重构的步骤如下:
1) 创建一个单独的JS文件,名称为AjaxRequest.js,在该文件中编写重构Ajax所需的代码。
2) 在需要应用Ajax的页面中应用以下的语句及步骤(1)中创建的JS文件。
3) 在应用Ajax的页面中编写错误处理函数、实例化Ajax对象的方法和回调函数。
4) 在页面中添加设置系部的下拉列表和设置班级的下拉列表,并在系部下拉列表的onChange事件中,调用getClass()方法获取系部对应的班级。
5) 编写获取居住地的Servlet实现类AbodeServlet,在该Servlet中的doGet()方法中编写编写代码用于根据传递的action参数执行不同的处理方法。
6) 在AbodeServlet中编写getDepartment()方法。在该方法中,从保存系部信息的Map集合中获取全部的系部信息,并将获取的系部信息连接为一个以逗号分隔的字符串输出到页面上。getDepartment()方法的具体代码略。
7) 在AbodeServlet中编写getclass()方法。在该方法中,从保存系部信息的Map集合中获取全部的班级信息,并将获取的班级信息连接为一个以逗号分隔的字符串输出到页面上。getclass()方法的具体代码略。
8) 为了在页面载入后显示默认的系部,需要在页面的onLoad事件中调用获取系部的方法getDepartment()。具体实现如下:
window.onLoad=function(){
getDepartment();}
4 几个注意问题
4.1 浏览器兼容性问题
Ajax使用了大量的Javascript和Ajax引擎,这些内容需要浏览器提供足够的支持。目前对此提供支持的浏览器有IE5.0及以上版本、Mozilla1.0、NetScape7及以上版本,但是Mozilla提供XMLHttpRequest对象的方式不一样。因此,使用Ajax的程序必须测试针对各个浏览器的兼容性。
4.2 安全问题
安全性是互联网服务日益重要的关注点。Ajax应用主要面临以下安全问题。
1) JavaScript本身的安全性
当在web浏览器中执行JavaScript代码时,用户允许任何编写的代码运行在自己机器上,给网站带来安全隐患。为此,浏览器厂商提出在一个沙箱中执行JavaScript代码。沙箱是一个只能访问很少计算机资源的密闭环境,从而使Ajax应用不能读取或写入本地文件系统。提高了客户端JavaScript的安全性。
2) 数据在网络上传输的安全问题
对于涉密数据信息,在进行HTTP传输时,可以对数据加密。
3) 客户端调用远程服务的安全问题
在Ajax应用中应该将所有的Ajax请求都发送到控制器,由控制器负责检查调用者是否有访问资源的权限,而所有业务逻辑组件都隐藏在控制器之后。
4.3 性能问题
由于Ajax将大量的计算从服务器移到了客户端,浏览器就承受更大的负担。Ajax的核心语言是JavaScript,而JavaScript并不是高性能语言,其对象也不是轻量级的,特别是DOM元素会耗费大量内存,因此需要开发者尽力提高JavaScript代码的性能。以下几种方法可以优化Ajax应用的执行速度:1)优化for 循环;2)尽量使用局部变量,少用全局变量;3)尽量少用eval;4)将DOM节点附加到文档上;5)尽量减少点”.”操作符的使用。
4.4 中文编码问题
Ajax不支持多种字符集,其默认的字符集是UTF-8,所以在应用Ajax技术的程序中应及时进行编码转换。否则程序中的中文字符将变成乱码。一般在以下两种情况下会产生中文乱码。
1) 发送路径的参数中包含中文,在服务器端接收参数值时产生乱码
将数据提交到服务器有两种方法:一种是使用GET方法提交,另一种是使用POST方法提交。对于这两种方法,在服务器端接收参数值时解决中文乱码的方法不同。
当接收使用GET方法提交的数据时,要将编码转换为GBK或GB2312。例如将系部名称的编码转换为GBK的代码如下:
String selDepartment=request.getParameter(“parDepartment”); //获取选择的系部
selDepartment=new String(selDepartment.getBytes(“ISO-8859-1”),”GBK”);
当接收使用POST方法提交的数据时,要将编码转换为UTF-8。例如将用户名的编码转换为UTF-8的代码如下:
String userName= request.getParameter(“ user”);//获取用户名
userName=new String(userName. getBytes(“ISO-8859-1”),”UTF-8”);
2) 返回到responseText或responseXML的值中包含中文时产生乱码
因为Ajax在接收responseText或responseXML的值时是按照UTF-8的编码格式进行解码的,所以如果服务器端传递的数据不是UTF-8格式,在接收responseText或responseXML的值时有可能产生乱码。解决办法是保证从服务器端传递的数据采用UTF-8格式。
5 小结
Ajax技术可以减轻服务器的负担,实现客户端无刷新更新页面,运用了更加先进、更加标准化、更加高效的Web开发技术体系,是一个客户端技术,可以适应任何服务器端技术。Ajax正逐渐进入Web开发主流。
参考文献:
[1] 聂哲,范新灿,张霞.JSP动态Web技术实例教程[M].北京:高等教育出版社,2009.
[2] 王国辉.Java Web 开发实战宝典[M].北京:清华大学出版社,2010.
[3] 阮征,邹晨,鲍利剑.Web 2.0动态网站开发——Ajax技术与应用[M].北京:清华大学出版社,2008.
其他文献
基于工作过程项目课程改革是目前高职院校课程改革的主流趋势,该文主要是针对网络管理员岗位对应的核心课程《网络设备配置与管理》项目课程的开发进行了深入的研究。该文基
研究了花粉中土霉素的提取方法,得出最佳提取方案。以自制抗土霉素抗体建立的间接竞争ELISA法对花粉中土霉素的残留量进行了检测,所建立的间接竞争酶联免疫吸附分析法(ELISA)对土
以实际工程为例,根据塌方情况决定了压力管道古河床段塌方处理方案,采用浇筑C20混凝土封闭、超前大管棚、灌浆、钢拱架支护跟进等方法快速通过塌方段,以做好塌方处理和支护工
自去年9月宣布启动以来,由通用汽车推出的全球最大规模的氢燃料电池车市场测试项目“车行道计划(Project Driveway)”在数月之内,已经收到了超过61000名志愿者的参与申请。
设计了一个基于神经网络的网络入侵检测系统原型,给出了该模型的体系结构和其主要功能模块的实现方法。通过训练实验表明,把神经网络应用于入侵检测是行之有效的。
近日,因涉嫌传销、非法集资、金融诈骗等违法行为,号称“走路就能赚钱”的App趣步被工商部门正式立案调查。 2018年下半年起,一个名为“趣步”的App 突然之间风靡起来,还曾一度登上App市场生活类下载量第一的位置。 从风靡一时到被立案调查,打着区块链概念的趣步缘何被查?“走路就能赚钱”背后,又藏着怎样的陷阱?“走路也能赚钱”背后,是“挖矿”还是“挖坑”? 2018年上线推广的趣步APP,凭
2017年底,我去纽约参加20国集团名人小组会议,也去看望了我的老师保罗·沃尔克。2016年8月,我从国际货币基金组织卸任,一晃眼,已有一年多没有见他了。我请他和他夫人安克
日前,国务院关税税则委员会决定自2018年4月2日起对自美进口的128项产品加征15%或25%的关税。商务部新闻发言人就此发表谈话.希望美方尽快撤销违反世贸组织规则的措施,使中美双方
很多人在汽车购买时都会选择将车辆出险以后的善后工作委托给一家特定的修理厂,这样做的好处是修理厂全权处理车辆的事故维修,对于很多刚买车对车辆保险不甚熟悉的人,可以在车辆
摘要:计算机技术的成熟与发展为外语教学开拓了新的使用空间与表现形式,该文以计算机语料库着手,探讨了语料库用于英语词汇教学的优点及方式,凸显了语料库及其技术的发展运用对英语词汇教学的价值和促进作用。 关键词:语料库;英语词汇;教学 中图分类号:TP751文献标识码:A文章编号:1009-3044(2010)18-5000-02 Corpus-based English Vocabular