Ajax数据通信

Ajax数据通信（精选九篇）

Ajax数据通信 篇1

古陶瓷是我国古代文明的瑰宝,也是全人类的宝贵财富,对世界文化和现代文明具有重要影响。古陶瓷样本数据是研究古陶瓷的重要原始资料,在长期的科学研究当中,通过搜集、整理、观测、实验、计算等多种途径产生和积累了大量有重要科研价值的实验数据和资料,但目前由于对这些数据缺乏统一的管理,使得大量的宝贵数据无法得到充分的作用,甚至造成数据的流失。因此,迫切需要一个高效、便捷的数据管理系统完成对古陶瓷样本信息管理。

古陶瓷样本数据库的建立,将有助于系统研究我国古陶瓷的材料来源、窑变机制和着色机理,为古陶瓷的断源、测年断代和鉴别真伪提供可靠的科学依据,也对实现数据资源的充分利用和数据共享提供了平台[1]。

本文结合应用比较广泛的动态网页开发技术ASP.NET作为开发平台,利用SQL Server2005作为后台数据库开发了一套完整的古陶瓷样本数据管理系统,同时针对数据批量操作时,传统网页系统响应慢,用户等待时间长等问题,结合当前比较流行的AJAX技术,实现数据的异步传输,局部刷新等功能,为用户提供了良好的体验[2]。

1 AJAX和ASP.NET AJAX框架研究

1.1 AJAX概述

AJAX是一种创建交互式网页应用的网页开发技术。实际上,AJAX不是一种新技术,它只是各种技术的综合运用,在共同的协作中发挥各自的作用,它包括的技术有:

1) XMLHttpRequest用于实现和服务器端数据的异步通信。

2) DOM进行动态Web内容的显示和客户端的交互。

3) XHTML和CSS用于实现标准化的界面开发。

4) 最后,JavaScript把XHTML和CSS、DOM、XML以及XMLHttpRequest绑定在一起。

其中XMLHttpRequest是最核心的技术,它为客户端脚本提供了一种通讯方式,从而使得客户端脚本能够与服务器直接发生交互,而不需要再一次刷新页面,即可从服务器端获取数据,或者向服务器端提交数据[3]。

AJAX的主要功能在于,将浏览器客户端和服务器端传统型同步交互通信方式改变为异步交互方式,从而丰富了浏览器客户端的功能,解决了浏览器频繁刷新页面等待数据的问题,从而进一步改善了Web应用程序的用户体验。使用AJAX技术,即使不重载和刷新Web页面,用户也可以快速得到Web服务器的数据。

1.2 ASP.NET AJAX框架概述

微软在ASP.NET框架的基础之上,创建了一种被称为“ASP.NET AJAX”的技术,能够实现AJAX的功能,ASP.NET AJAX可以相应地分为服务器端组件和客户端脚本两个部分,框架结构如图1所示。通过这两部分结合可以提供可靠的开发框架,要实现ASP.NET AJAX可以利用服务器端实现方式,也可以直接利用客户端实现方式,或者两者结合。本系统主要是通过服务器端来实现[4]。

ASP.NET AJAX服务器端控件由服务器和客户端代码组成,这些代码集成在一起可生成富客户端行为。ASP.NET AJAX服务器端常用的控件有:

1) ScriptManager控件:控件管理页面中所有的脚本以及页面的局部更新,并生成相关的客户端脚本。

2) UpdatePanel控件:和ScriptManager控件共同提供无刷新web环境。

3) Time控件:定义执行回调的时间区间。可以使用Timer控件来发送整个页面,也可以和UpdatePanel控件一起使用在一个时间区间内执行局部页面刷新。

4) UpdateProgress控件:提供UpdatePanel控件中部分页面更新的状态信息。

5) ScriptManagerProxy控件:功能类似ScriptManager控件,主要用于母版页中,利用 ScriptManagerProxy 控件,可以将脚本和服务添加到其母版页或主机页已包含 ScriptManager 控件的内容页和用户控件。

除了服务器端提供的服务器控件外,还需要ASP.NET AJAX Control Tookit控件包装器,提供了丰富的客户端控件,通过利用这些控件开发中可以很容易地开发出具有AJAX技术的应用程序。

2 系统总体设计

2.1 系统设计目标

古陶瓷样本数据管理系统面向科研项目的实际需要,主要用户包括科研工作者和一般用户,有效地创建一个古陶瓷样本数据管理平台。通过此系统可以达到以下目标:

• 对样本文件和图片的管理。

• 对古陶瓷样本信息管理。

• 古陶瓷样本碎片管理。

• 实验测试数据管理。

• 数据存储安全、可靠。

• 提供数据的导入导出功能。

• 提供简单检索和高级检索。

2.2 古陶瓷样本数据分析

古陶瓷研究主要是利用现代分析技术手段,对我国古代不同历史时期典型窑址下具有代表性的古陶瓷进行选样测试,并对测试数据进行分类建立数据库,同时结合计算机技术对测试数据进一步的分析处理,从而解决古陶瓷的断源断代以及真伪辨别等问题。

目前在古陶瓷研究方面有很多分析技术方法,常用的核分析方法有中子活化分析(NAA)、质子激发X射线荧光分析(PIXE)、X射线荧光分析(XRF)、同步辐射X射线荧光分析(SRXRF)、X射线衍射(XRD)和穆斯堡尔谱效应(Mossbauer)等,其他常用的现代分析技术还有扫描电镜(SEM)、光谱分析、差热分析(DTA)和热重分析(DTG)等[5]。这些分析方法各有特点,适合不同方式的研究需求。

结合以上的分析技术手段,古陶瓷样本数据应包含的数据有:古陶瓷样本信息、图片信息、胎釉中子活化分析数据、胎釉质子激发X射线荧光分析数据、胎釉X射线荧光分析数据、胎釉同步辐射X射线荧光分析、胎釉穆斯堡尔谱分析数据、胎釉扫描电镜数据、胎釉光谱分析数据、胎釉热分析数据、胎釉电子探针数据和胎釉物理性能参数等。数据库的基本数据类型为文本、数字和图像等。

2.3 数据库设计

根据以上系统分析,建立了古陶瓷样本数据库模型,数据库结构及表间关系如图2所示。

3 系统的具体实现

本文利用ASP.NET开发平台,选用C#开发语言,同时结合AJAX开发技术,采用B/S的典型三层架构实现古陶瓷样本数据管理系统,层次清晰,接口明确,层与层之间逻辑是松散耦合的,有利于系统维护和进行二次开发,并且可以根据用户需求调整模块功能[6]。

用户登录后进入管理界面,如图3所示,系统采用母版页技术,保证了系统中各个页面布局的统一。其中左侧是菜单界面,通过菜单链接到各个功能页面中;右侧是母版页,数据处理部分都放在母版页中,同时由于系统中,数据的添加、编辑、删除、查询、数据的分页等各项操作,都只需对当前页面的局部进行更新,为了节约带宽、减少服务器开销、提高页面显示效果,在这些页面中使用了AJAX技术[7]。

在母版页中使用UpdatePanel控件常用的方法有两种:一是将ScriptManager控件加到母版页中,则在内容页面中只需添加UpdatePanel控件即可;二是如果在母版页中没有添加ScriptManager控件,则必须在每个使用UpdatePanel控件的内容页中添加ScriptManager控件,本系统采用第一种方法。

3.1 UpdatePanel控件无刷新样本数据管理

GridView是使用最多的数据绑定控件,经常用来进行增加、删除、修该、查询等数据操作,GridView在执行每次操作后都需要回传服务器,由服务器处理事件来完成这些操作,频繁的操作则大大浪费了服务器的资源,且经常会出现页面闪动甚至白屏的现象。

借助于强大的UpdatePanel控件,在页面中添加一个ScriptManage控件,并设置其允许局部更新,再在页面中添加一个UpdatePanel控件把需要局部更新的页面部分包围起来,此时页面并不代表失去了原有的整页回送能力,在UpdatePanel控件中的控件在默认情况下自动执行异步的回送(也可以通过设置执行整页回送),在UpdatePanel控件外边的控件将可以进行整页的回送,不过,也可以通过设置UpdatePanel控件的AsyncPostBackTrigger触发器,指定到UpdatePanel控件外边的某个控件,使这个控件也具有异步更新的能力[8],同时添加UpdateProgress控件,设置其属性AssociatedUpdatePanelID为UpdatePanel1,为操作提供友好、可视的状态更新信息。

本系统利用UpdatePanel控件实现了无刷新数据管理,如图3所示,从图中进度条中可以清晰看到,用户在执行查询或者分页等操作时,整个页面并没有回送带来页面的闪烁,只有UpdatePanel控件中的内容发生了变化,一切数据的传输都以异步的方式在后台默默进行。

3.2 自动输入完成

自动输入完成是目前网站上一个非常流行的功能,例如在Google搜索、发送邮件时邮箱填写等都会体验到自动输入完成的优越性,当用户在框体中输入一个文字或者字符之后,会弹出一系列由这个文字或者字符开头的关键词,这时用户可以通过鼠标或者键盘的上下键来选择要实现的关键词,选择之后,该关键词将会被加入到框体中,避免了一个一个字的输入[9]。

传统的方法使用ASP.NET和Javascript技术来实现这一功能,但是过程非常烦琐,利用ASP.NET AJAX中的AutoComplete控件能够很好地实现在线搜索动态提示的功能。声明AutoCompleteExtender扩展器控件语法类似如下:

当用户在输入框中每输入完一个关键字后,客户端借助AJAX技术,自动向服务器发送异步通信请求,服务器端通过Web应用程序AjaxServer.asmx根据用户当前输入的关键字,调用方法函数GetPorcelainList,实现在后台数据库中搜索,并将搜索到的数据排序后复制返回给客户端。如图4所示。

另外,ASP.NET AJAX Control Tookit提供了很多功能强大的控件,例如水印提示、智能密码强度提示等控件,增强了用户的体验,也给开发节省了大量的时间。

4 ASP.NET AJAX性能分析

在ASP.NET AJAX的基础上,进一步对AJAX异步数据传输分析测试,利用FireFox浏览器中第三方插件Firebug,通过拦截HTTP数据可以观察客户端与浏览器进行交换的AJAX消息,以无刷新数据管理为例,做了两组测试,测试页每页40个样本数据。测试一:不用Updatepanel控件下系统的请求和响应数据,测试结果如图5(a);测试二:利用UpadatePanel控件下系统的请求和响应数据,测试结果如图5(b);从图5中可以看出,在系统请求操作一致的情况下,第一组的请求和响应消息尺寸远远大于第二组的请求和响应尺寸,特别是Post内容,第一组为34.1KB,第二组仅为2.6KB,差别较大,主要原因就是第二组请求时只是把UpdatePanel控件中的内容发送到服务器端,而第一组则把整个网页部分都发送,同理,在响应正文的尺寸中第一组接收的也是整个网页的大小。由此可见,AJAX的局部刷新功能,使得一部分业务逻辑直接在客户端进行,降低了服务器端的压力,提高了系统的响应时间。

5 结 语

古陶瓷样本数据管理系统的建立,为古陶瓷样本实验数据的管理提供了规范化、流程化的操作,同时也让大量宝贵的数据资源得到有效的保存,为以后的科研工作提供了极大的方便,实现了数据资源的充分利用。

通过AJAX和ASP.NET 2.0无缝结合,减少了用户交互过程中的等待时间,提高了系统的响应速度,同时一些业务逻辑直接由客户端直接处理,减轻了服务器端的开销。ASP.NET AJAX技术在系统中的应用表明,AJAX技术在网页开发中必将得到广泛的应用。

摘要：为了使得大量古陶瓷样本测试数据得到有效的保存,便于以后的科研管理工作,利用ASP.NET建立古陶瓷样本数据管理系统,有效地解决了古陶瓷样本测试数据的存储问题,实现了数据管理的自动化。同时针对传统网页在数据批量操作中出现的系统响应迟缓,界面闪烁甚至白屏等问题,提出了引用AJAX技术以实现异步局部更新功能。性能分析结果表明,AJAX技术有效地减轻了服务器端的压力,从而提高了系统的响应速度,给用户带来了新的体验。

关键词：ASP.NET,AJAX,异步局部更新,古陶瓷样本,管理系统

参考文献

[1]杨云,郭立文.中国古陶瓷器型结构数据库的建立[J].陶瓷学报,2005(1):53-56.

[2]蒋维.基于AJAX的大量数据动态浏览的实现方法研究[J].计算机应用与软件,2010,27(3):144-146.

[3]Jesse James Garrett.AJAX:A New Approach to Web APPlications[M].2008.

[4]陈冠军.完全手册ASP.NET AJAX实用开发详解[M].北京:电子工业出版社,2008.

[5]王彦芳.高档瓷器管理系统和古陶瓷数据库的可视化设计[D].郑州:郑州大学,2006.

[6]张荣,王培俊,曹永彦,等.基于ASP.NET技术的实验中心信息化管理平台的设计[J].计算机技术与发展,2011,21(5):235-237.

[7]仰燕兰,金晓雪.APS.NET AJAX框架研究及其在Web开发中的应用[J].计算机应用与软件,2011,28(6):195-198.

[8]陈郑伟,彭岩,庄力可.基于AJAX的电子政务平台的研究与应用[J].计算机工程与应用,2007,43(5):196-199.

Ajax系列面试题总结 篇2

1、Ajax 是什么? 如何创建一个Ajax？

Ajax并不算是一种新的技术，全称是asychronous javascript and xml，可以说是已有技术的组合，主要用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新，早期的浏览器并不能原生支持ajax，可以使用隐藏帧（iframe）方式变相实现异步效果，后来的浏览器提供了对ajax的原生支持

使用ajax原生方式发送请求主要通过XMLHttpRequest(标准浏览器)、ActiveXObject(IE浏览器)对象实现异步通信效果 基本步骤：

var xhr =null;//创建对象 if(window.XMLHttpRequest){ xhr = new XMLHttpRequest();}else{ xhr = new ActiveXObject(“Microsoft.XMLHTTP”);} xhr.open(“方式”,”地址”,”标志位”);//初始化请求

xhr.setRequestHeader(“”,””);//设置http头信息 xhr.onreadystatechange =function(){}//指定回调函数 xhr.send();//发送请求

js框架（jQuery/EXTJS等）提供的ajax API对原生的ajax进行了封装，熟悉了基础理论，再学习别的框架就会得心应手，好多都是换汤不换药的内容

2、同步和异步的区别? 同步：阻塞的

-张三叫李四去吃饭，李四一直忙得不停，张三一直等着，直到李四忙完两个人一块去吃饭 =浏览器向服务器请求数据，服务器比较忙，浏览器一直等着（页面白屏），直到服务器返回数据，浏览器才能显示页面

异步：非阻塞的

-张三叫李四去吃饭，李四在忙，张三说了一声然后自己就去吃饭了，李四忙完后自己去吃 =浏览器向服务器请求数据，服务器比较忙，浏览器可以自如的干原来的事情（显示页面），服务器返回数据的时候通知浏览器一声，浏览器把返回的数据再渲染到页面，局部更新

3、如何解决跨域问题? 理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域

出于安全考虑，服务器不允许ajax跨域获取数据，但是可以跨域获取文件内容，所以基于这一点，可以动态创建script标签，使用标签的src属性访问js文件的形式获取js脚本，并且这个js脚本中的内容是函数调用，该函数调用的参数是服务器返回的数据，为了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的数据，这就是解决跨域问题的主流解决方案

4、页面编码和被请求的资源编码如果不一致如何处理？

对于ajax请求传递的参数，如果是get请求方式，参数如果传递中文，在有些浏览器会乱码，不同的浏览器对参数编码的处理方式不同，所以对于get请求的参数需要使用

encodeURIComponent函数对参数进行编码处理，后台开发语言都有相应的解码api。对于post请求不需要进行编码

5、简述ajax 的过程。

1.创建XMLHttpRequest对象,也就是创建一个异步调用对象

2.创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息 3.设置响应HTTP请求状态变化的函数 4.发送HTTP请求

5.获取异步调用返回的数据

6.使用JavaScript和DOM实现局部刷新

6、阐述一下异步加载。

1.异步加载的方案： 动态插入 script 标签 2.通过 ajax 去获取 js 代码，然后通过 eval 执行 3.script 标签上添加 defer 或者 async 属性 4.创建并插入 iframe，让它异步执行 js

7、请解释一下 JavaScript 的同源策略。

同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。所谓同源指的是：协议，域名，端口相同，同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档的属性。

8、GET和POST的区别，何时使用POST？

GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符，有的浏览器是8000个字符

POST：一般用于修改服务器上的资源，对所发送的信息没有限制

在以下情况中，请使用 POST 请求：

1.无法使用缓存文件（更新服务器上的文件或数据库）2.向服务器发送大量数据（POST 没有数据量限制）

3.发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

9、ajax 是什么?ajax 的交互模型?同步和异步的区别?如何解决跨域问题? 1.通过异步模式，提升了用户体验

2.优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用 3.Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。

10、Ajax的最大的特点是什么。

Ajax可以实现异步通信效果，实现页面局部刷新，带来更好的用户体验；按需获取数据，节约带宽资源；

11、ajax的缺点

1、ajax不支持浏览器back按钮。

2、安全问题 AJAX暴露了与服务器交互的细节。

3、对搜索引擎的支持比较弱。

4、破坏了程序的异常机制。

12、ajax请求的时候get 和post方式的区别

get一般用来进行查询操作，url地址有长度限制，请求的参数都暴露在url地址当中，如果传递中文参数，需要自己进行编码操作，安全性较低。

post请求方式主要用来提交数据，没有数据长度的限制，提交的数据内容存在于http请求体中，数据不会暴漏在url地址中。

13、解释jsonp的原理，以及为什么不是真正的ajax

Jsonp并不是一种数据格式，而json是一种数据格式，jsonp是用来解决跨域获取数据的一种解决方案，具体是通过动态创建script标签，然后通过标签的src属性获取js文件中的js脚本，该脚本的内容是一个函数调用，参数就是服务器返回的数据，为了处理这些返回的数据，需要事先在页面定义好回调函数，本质上使用的并不是ajax技术

14、什么是Ajax和JSON，它们的优缺点。

Ajax是全称是asynchronous JavaScript andXML，即异步JavaScript和xml，用于在Web页面中实现异步数据交互，实现页面局部刷新。

优点：可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量，避免用户不断刷新或者跳转页面，提高用户体验

缺点：对搜索引擎不友好；要实现ajax下的前后退功能成本较大；可能造成请求数的增加跨域问题限制；

JSON是一种轻量级的数据交换格式，ECMA的一个子集

优点：轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）

15、http常见的状态码有那些？分别代表是什么意思？

200资源（网页等）被永久转移到其它URL 404内部服务器错误

16、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

分为4个步骤：

1.当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL，浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器获得请求对应的 IP 地址。

2.浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。

3.一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确的响应。

4.此时，Web 服务器提供资源服务，客户端开始下载资源。

17、ajax请求的时候get 和post方式的区别

get一般用来进行查询操作，url地址有长度限制，请求的参数都暴露在url地址当中，如果传递中文参数，需要自己进行编码操作，安全性较低。

post请求方式主要用来提交数据，没有数据长度的限制，提交的数据内容存在于http请求体中，数据不会暴漏在url地址中。

18、ajax请求时，如何解释json数据

Ajax数据通信 篇3

传统的基于B/S (Browser/Server) 模式的Web应用广泛采用的是同步交互方式，当网络负载较大而接入带宽较窄时，就会出现响应时间过长，浏览器长时处于等待状态的现象，甚至有可能由于响应超时而造成浏览器的崩溃。针对以上问题，Adaptive Path公司的Jesse James Garrett于2005年2月提出了AJAX的概念。在AJAX的帮助下，传统Web应用中的请求/响应模式发生了改变，开发人员可以利用这一技术实现与服务器端的异步交互，只有页面的一部分会被刷新，从而大大提高了Web应用程序的执行效率。AJAX技术最大的特点就是它的异步交互，而如今只有少数的J2EE框架对异步通信模式提供直接可用的支持，如何克服这个问题就显得尤为重要。通常的做法就是使用独立的servlet类来处理全部的异步请求，但是这种方式的不足在于AJAX请求不能方便地利用框架的特性。本文基于AJAX异步通信技术，研究了针对J2EE框架如何进行高效的数据交互。因此对AJAX异步通信原理进行了深入研究，并对AJAX异步通信技术在J2EE框架中如何进行数据交互给出了解决方案。

1、AJAX异步通信模式

AJAX异步通信模式的机制是在客户端和服务器之间添加了-个中间层--AJAX引擎，使用户操作与服务器响应异步化，这样还可以把以前的一些服务器负担的工作转交给客户端，利用客户端闲置的处理能力来处理，减轻服务器和宽带的负担，从而消除了传统Web应用中响应慢的缺点。AJAX引擎其实就是一个嵌入在所有现代web浏览器内部的、被称为XMLHTTPRequest (XHR) 的软件库。作为Ajax的核心，

XHR对象设计为允许从服务器异步地获取任意的数据。结构分析如图1所示。

在会话刚开始的时候，浏览器装载的不是一个页面，而是一个用JavaScript编写的AJAX引擎。这个引擎代表用户与服务器进行通信，并更新用户所看到的界面。整个通信过程是在后台异步进行的，并不打断用户当前的操作。由于AJAX只与服务器端进行数据层面的交换，而-些页面显示、校验数据等功能则交给AJAX引擎自己来做。AJAX将一些服务器端的工作转移到客户端，充分利用了客户端闲置的处理能力，从而减轻了服务器的负担，加快了浏览器的响应速度，缩短了用户等待时间。浏览器端和服务器端交互模式如图2所示。

在异步提交模式下，用户只将部分的数据传输到服务器端进行处理，并将处理好的数据重新在页面显示，由于整个页面没有被刷新，所以在页面也就没有了白页时间（在同步提交，由于用户要等待服务器重新传输过来的整个页面，会出现一段时间页面上什么都没有的状态），用户在这部分数据传输的情况下仍然可以在页面上进行查看和各种操作。

2、传统的J2EE MVC模型分析

传统的J2EE MVC开发模型中，终端用户发出的所有请求都会通过控制器类（通常是一个servlet）选择路由，该控制器类决定该请求的业务对象。用户请求的数据以及对应的业务对象被认为是该框架的模型部件。在业务对象处理用户请求之后，控制器会把结果转发给框架的视图部件。框架的视图部件表示逻辑，把用户请求的结果展示或者传递给终端用户。图3显示了传统的J2EE MVC框架的概念视图。

3、AJAX在J2EE开发中的数据交换设计方案

AJAX引擎XMLHTTPRequest发出请求的时候，使用了一个XML格式的文件名作为请求的地址。这实际上是指定了服务器端的一个静态文件作为目标，在很大程度上限制了服务器端所能提供的内容的灵活性，这是因为AJAX中不包括服务器端技术。而J2EE正是在服务器端提供了可用于开发大型、多层次以及分布式的企业级应用的支持。从根本上说，AJAX引擎发出请求的目的是为了从服务器端的到一个以XML格式为内容的响应，而对服务器端响应内容的产生方式并不敏感。

将AJAX技术整合到J2EE框架中，原J2EE MVC开发模型需要做些调整，即用户的操作通过AJAX引擎来与MVC控制器交互，服务端返回的数据再通过AJAX监听模型给出更新通知，并把结果给J2EE MVC模型中的表现层，原有J2EE MVC的操作没有变化，只是中间多了一个代理，那就是用户的操作先经过AJAX引擎，再与J2EE MVC交互。因此，在Web数据模块的设计与实现中，为了能使AJAX引擎能够在服务器端得到J2EE相关技术的强大支持，可以利用这个特点在服务器端使用J2EE应用服务器，关键是利用Web容器中J2EE MVC的控制器类（通常是一个servlet），来处理AJAX因引擎发出的请求。它的任务包括:接收AJAX引擎发出的请求；解析请求中的参数；组织XML格式的响应内容；向客户端浏览器发出响应。系统结构转变如图4所示。

该方案是通过使用AJAX引擎调用Hibernate关于数据库的操作，即把取出的数据通过AJAX技术存入xml文档或文本，当下次再做同样的动作时就无需和服务器再进行一次交互了，而是直接读取服务器保存在客户端xml文档的相关内容，这样就大大缓解了服务器端的访问压力、节省网络带宽，同时也把客户端闲置的能力利用起来了，这样它的运行效率也就得到了提升。

4、结束语

通过对AJAX异步通信的工作模式以及J2EE MVC开发模型的研究，整合AJAX技术与J2EE框架，使应用程序在数据交换方面服务器效率得到提高。该模式的优点是在多人同时访问时效率很高，同时也是使用户得到了全新的体验。

参考文献

[1] (美) John Carnell, Rob Harrop, Kunal Mitta著, Struts与Ajax高级程序设计, 人民邮电出版社, 2008.2

[2]席晓峰, 吕良双, 使用J2EE框架技术构建可重用的web应用, 计算机工程与应用, 2007.12

Ajax标签导航实例详解 篇4

也不是我们推荐的，可以不用嵌套层的地方，我们尽量不要去过多的嵌套层，减少嵌套会让我们的浏览器解析起来会更容易，速度更快。

所我们使用WEB标准开发页面，绝对不是单纯的把以前的table换成DIV就OK了。而采用标准制作页面，也不意味着我们就不使用table。只要把握我刚才说的原则，使用合理的标签显示相应特征的数据。其实我们的table标签是一个很好的用来显示二维数据的标签，而table标签也确实是设计出来用来显示数据的，而不是用来布局的，只是我们当时的设计师们都用table标签来布局了。

Ajax安全威胁及成因 篇5

关键词：Web2.0,Ajax,威胁,成因,对策

1 引言

网络信息化不断发展的今天, 越来越多的单位建立了自己的网站信息平台, 而网站建立后随着浏览器端和服务器端信息交换的数量和频率的增多, 其速度的问题逐渐成为一个瓶颈。有鉴于此, 技术人员提出了一种解决办法, 即Ajax技术, 有效缓解了这一问题, 给了用户更好的类似桌面应用程序般的网络交互体验。与此同时, 该技术也是把双刃剑, A引入了新的问题, 带来了很多安全隐患。

2 Ajax技术原理

2.1 Ajax定义

Ajax全称为“Asynchronous JavaScript and XML” (异步JavaScript和XML) , 是一种创建交互式网页应用的网页开发技术。严格意义上说, Ajax并不是一门新技术, 而是在原有技术和机制的一个有机结合。它主要由以下由下列几种技术组合而成:使用XHTML+CSS来表示信息;使用JavaScript操作DOM (Document Object Model) 进行动态显示及交互;使用 XML 和 XSLT 进行数据交换及相关操作;使用 XMLHttpRequest对象与Web服务器进行异步数据交换; 使用 JavaScript 将所有的东西绑定在一起。

2.2 Ajax原理

如图1所示为传统Web访问模式与Ajax访问模式比较图, 相比而言, AJAX 在浏览器与服务器之间引入一个中间媒介——Ajax引擎 , 从而消除了网络交互过程中的处理-等待-处理-等待的缺点。Ajax技术的核心是借助JavaScript的XML HttpRequest对象“即时”完成信息的交互, 区别于传统访问模式的网页表单整体提交返回方式。

从方法论上来说, 这一技术和计算机硬件上为解决存储器的速度瓶颈问题而提出分级缓存和指令预取机制有异曲同工之妙, 它实际上是在服务器和客户端之间提供一个缓冲器, 充分利用浏览器端表单中已有的信息提前在服务器端开始获取数据, 然后根据不断丰富的信息不断筛选和完善。这种异步传输的机制回避了网页的整体刷新, 把它分到不同时段, 充分利用了输入信息时的网络闲置时间, 有效的减少了用户提交表单后的等待时间。

2.3 Ajax的优势

Ajax总体来说其优势概括起来说就是让网络操作给用户以桌面式体验, 具体体现在:页面无刷新, 在页面内与服务器通信, 给用户的体验非常好;使用异步方式与服务器通信, 不需要打断用户的操作, 具有更加迅速的响应能力;由于客户端Ajax引擎的存在, 可以利用客户端闲置的能力来处理部分事务, 减轻服务器和带宽的负担。同时由于Ajax的原则是“按需取数据”, 可以最大程度的减少冗余请求和响应对服务器造成的负担。

3 Ajax技术安全威胁

3.1 Ajax安全综述

Ajax技术的引入不仅难以避免一些已知的安全弱点, 同时也带来了不少新的安全威胁, 它给网站数据建立了一个直接通道, 这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。Ajax的逻辑可以对客户端的安全扫描技术隐藏起来, 允许黑客从远端服务器上建立新的攻击。

3.2 Ajax面临的威胁

3.2.1 序列化类问题

(1) 畸形JavaScript对象序列

由于JavaScript对象既包含数据也包含方法, 故对其不当使用将产生可以被恶意的注入代码利用的安全漏洞。JavaScript有很多不同的内置对象, 也允许用户自己创建对象。可以用new object () 或者自己编辑代码来创建新的对象。如果攻击者发送嵌入了脚本的恶意“主题”, 那么读者就将成为跨站点脚本攻击的受害者。

(2) JavaScript数组中毒

JS数组是另一个比较普遍的序列化对象。人们可以很容易地跨平台移植它, 并且它在使用不同语言的结构中也很有效。感染一个JS数组可以扰乱整个DOM环境。黑客们可以在浏览器中使用简单的跨站点脚本攻击JS数组。

3.2.2 注入类问题

(1) DOM中脚本注入

一旦浏览器收到序列化的对象数据流, 开发者会发出某种调用来访问DOM。这种调用的目的是将新内容“重写”或者“重填”入DOM中, 可以调用eval () 这个定制功能, 也可以使用document.write () 。如果这些调用是在不受信任信息流上进行的, 浏览器就有可能由于DOM的操作漏洞而受攻击。攻击者可以用很多document.* () 调用来向DOM环境中注入XSS。

(2) JSON注入

JavaScript对象符号 (JSON) 是少量数据交换格式, JSON序列在Web2.0应用中是个非常有效的交换机制。开发者频繁使用Ajax和JSON, 获取并传送必要的信息给DOM。如果DOM和可执行程序被注入了, XSS目录也会被注入。这是使终端用户感染恶意内容的另一种方法。

(3) 修改的XML数据流

Ajax调用接受来自多个地址的XML。这些XML块来自运行在SOAP, REST或者XML-RPC的网络服务。这些网络服务是由从第三方的代理桥那里接收过来的。如果这些第三方XML数据流被攻击者修改过, 那么攻击者就可能向其中注入恶意内容。

浏览器从它自带的XML解析器接收该数据流。该解析器容易受不同的XML炸弹的攻击。人们也可以在该数据流中注入脚本, 这样就可以导致跨站点脚本攻击 (XSS) 。浏览器接收未经认证的XML数据流的话, 这就会危及终端客户端的安全。

(4) RSS和Atom注入

联合的反馈、RSS以及Atom, 是最普遍的一种将站点更新信息传到网络上的方法。许多新闻, 博客, 门户站点等等, 都在网络上共享多个反馈。反馈是标准的XML文档, 并且可以被任何程序接收。Web2.0应用使用窗口小部件或者浏览器内部元件整合了联合反馈。这些组件调用Ajax来访问反馈。 这些反馈可以被终端用户方便地选择。一旦用户选择了它们, 这些反馈就会被解析并注入到DOM中。那么如果这个反馈在注入之前没有被适当地认证过, 就会出现一些安全问题。人们可以往浏览器中注入恶意链接或者JavaScript代码。注入之后, 就会出现问题, 最终结果是XSS和对话被黑客拦截。

(5) 单击炸弹

Web2.0应用可能不会很简单地就被黑客攻下, 但他们可以对它进行基于事件的注入。人们可以将带有"onclick"字样的恶意链接用JavaScript注入。这样, 浏览器就带着个随时等待终端用户右键点击来触发的炸弹。一旦用户点击了链接或按钮, 能够启动炸弹的那个事件被启动了, 那么攻击就成功了。此类攻击会导致对话被恶意代码拦截。

3.2.3 跨域类问题

(1) 跨域访问和回调

Ajax不能从浏览器跨域访问。一些网站服务为对象序列提供回调功能, 这个回调对使用浏览器内认证的开发者来说是个额外负担。如果输入的对象数据流未经浏览器认证那么终端客户端就会成为跨域攻击的目标。不管是有意还是无意的, 跨域服务可以向浏览器中注入恶意内容。该跨域调用在当前DOM环境中运行, 于是导致当前对话也易受攻击。在实现应用之前, 人们需要仔细检查整个跨域功能。

(2) XSRF

跨域伪造请求 (XSRF) 是个老牌的攻击向量了, 它迫使浏览器向不同的域发出HTTP GET或者POST请求;这些请求可以跨域在运行的应用逻辑中启动某种事件。它可能请求修改密码或者电子邮件地址等。浏览器调用它后, 它重放cookie并获得身份认证。这就是该请求的关键部分。如果应用只根据cookie来判识身份, 那就会被攻击。

(3) 基于Flash的跨域访问

黑客们可以使用Flash插件的Ajax接口, 从而用浏览器中的JavaScritps发出GET和POST请求, 可能允许跨域访问。

4 威胁形成原因

4.1 数据序列化

浏览器可以调用Ajax来实施数据序列化。它可以获取JS array, Objects, Feeds, XML文件, HTML 块以及JSON。如果这些序列块中的某一个被解析并修改了, 黑客们就可以强迫浏览器执行恶意脚本。不受信任信息与数据序列化的结合, 对终端用户的安全是致命的。

4.2 动态脚本构成和执行

Ajax会建立一个后端通道, 从服务器获取数据, 然后将它传送给DOM。实现这一点的必要条件就是动态地执行JavaScripts, 以便随时更新DOM或者浏览器页面缓存的状态。Ajax通过调用定制的功能或者eval () 功能。未经认证的内容或者使用不安全的调用, 轻则导致会话内容泄露, 重则迫使浏览器执行恶意内容等各种后果。

4.3 多重分散的终端点以及隐藏调用

Web2.0应用与Web1.0的主要区别就是信息访问机制的区别。比起它的前身Web1.0, Web2.0应用有数个Ajax终点。潜在的Ajax调用分散于整个浏览器页面, 并且能够被各个事件分别调用。开发者恨难应付Ajax调用的这种分散性, 并且由于这些调用是隐藏的, 不那么明显, 它还可能导致代码不规范。

4.4 认证混乱

输入和输出内容认证是应用的重要因素之一。Web2.0应用使用桥, mashups, 还有反馈等等。很多情况下, 它假定“另一方” (读取服务器端或者客户端代码) 已经实现了认证, 这种混乱就导致了双方都没有实现适当的认证控制。

4.5 不受信任的信息来源

Web2.0应用从很多不受信任的来源比如反馈, 博客, 搜索结果中获得信息。这些内容在提供给终端浏览器之前从来没有被认证, 这就有可能引发跨站点攻击。黑客还有可能在浏览器中加载JavaScript, 以便迫使浏览器发出跨域的调用并打开安全漏洞。那样的话, 这些致命的漏洞就能被病毒和蠕虫利用。

5 应对策略

Ajax的实质其实是在用户“感觉不出来”的情况下访问了web应用程序, 再把返回的结果交给用户, 同时用户可以去做其他的事情, 不用等待结果。既然Ajax可以访问, 恶意用户当然也可以自己去访问, 所以我们应该把处理Ajax请求的web应用程序像其他页面一样做好相应的防范措施, 就可以有效的避免安全问题。 正如OpenAjax联盟主席Boloker所说, Ajax的安全问题实际上就是Web的安全问题。这个话题不仅仅包含Web技术已经存在多年的跨站点脚本攻击问题, 而是当你做内容聚合的时候的整个安全概念。因而Ajax 安全性经验法则要求:身份验证请求页上检查;为SQL 注入检查;JavaScript 注入检查;保留商务逻辑在服务器上;不要假设每个请求是真正的;确认检查数据;审查请求的数据而且确定它是正确的。

参考文献

[1] (美) 麦赫马夫著.Ajax设计模式[M].杨仁和, 译.北京:电子工业出版社, 出版时间.

[2]李骏, 陈恭亮.Ajax对Web应用程序安全的影响[J].信息安全与通信保密, 2007 (3) :35-37.

Ajax发展之我见 篇6

Ajax的概念最早是由Jess James Garrett提出,认为是Asynchronous JavaScript and XML(异步JavaScript和XML)的缩写。更深层次的理解是:Ajax是一种结合了PHP、XML以及JavaScript等编程技术用于创建交互式网页应用的Web开发技术。

传统的Web应用采用同步的交互方式,浏览器负责初始化、发送请求,并等待、处理服务器返回的响应,如图1所示。浏览器在等待服务器返回的过程中,不能进行其他操作,而屏幕上往往一片空白(白屏现象),等得到服务器数据响应后再进行处理。这是一种不连贯的用户体验。如果交互的数据不多,而且服务器处理的速度够快,响应时间足够短,那么这种交互没什么太大的问题,但是一旦交互数据比较大,而服务器处理的业务又多的话,那么服务器反馈回来的信息则比较慢,客户端用户等待的时间则相对较长,而此期间,用户面对的是白屏。如果时间太长(超过4秒),用户可能没有耐心再等下去,如果经过较长的时间等待的结果却是超时,用户的失望的心理可想而知。

与传统的Web应用模式不同的是,Ajax Web应用模式在客户端与Web服务器间增加了Ajax引擎,客户端与Ajax引擎交互,而Ajax引擎再通过HTTP协议与Web服务器端交互,如图2所示。Ajax引擎采用JavaScript编写,通常隐藏在一个隐藏框架中,负责编译用户界面与服务器之间的交互,允许用户与应用软件之间的交互过程异步,独立用户与Web服务器间的交流。在异步交互模式下,客户端在等待响应的过程中可以做一些不需要服务器端协作的操作,提供更好的用户体验。

2 Ajax技术的优点

Ajax技术既然这么流行,那么它到底有什么样优点呢?关于优点,大家的看法倒是比较一致,主要优点如下:

1)页面无刷新更新,在页面内与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力,给用户的体验非常好。当读取大量数据时,不会出现“白屏”现象,当页面有更新时,不需要重新加载该页面,只需要更新需要更新的部分,采用异步交互模式,当用户在等待服务器响应的过程中,用户可以在原有的页面上继续操作。

2)减轻服务器的负担。一方面,Ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,从而减少对服务器的负担,另一方面,Ajax把原本一些服务器负担的工作转嫁给客户端,充分利用客户端闲置能力来处理相关工作。

3)降低带宽和成本。由于客户端向服务器的冗余请求少了,两者之间的数据传输也就少了,这无疑提高了带宽的利用率,对于客户和服务商来说是个双赢的结果。

4)基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。核心的技术是JavaScript、XMLHttpRequest、DOM和XML四种标准化的并被广泛使用了的流行技术。

3 Ajax技术带来的主要问题

Ajax技术集合了如上所述的优点,那么它又有哪些缺点或者说争议呢?就目前来说,主要表现在以下几个方面:

1)少了后退按钮。对于用户来说,首次浏览Ajax网页感受最深的可能少了back按钮。这是Ajax所带来的一个比较严重的问题,因为用户往往是希望能够通过后退来取消前一次操作的,这是一个习惯问题。我们如何来顺应用户这个习惯呢(因为很多情况下这个按钮很好用,我们不能强迫用户改掉这个习惯)?Gmail为我们提供了一个解决模式:采用的一个比较笨但是有效的办法,即用户单击后退按钮访问历史记录时,通过创建或使用一个隐藏的IFRAME来重现页面上的变更。但是,虽然说这个问题是可以这样解决的,但是它所带来的开发成本是非常高的,和ajax框架所要求的快速开发是相背离的。这是Ajax所带来的一个不大不小的问题。相信不久的将来,我们的一定能想出一个更好的方法来解决这个问题。虽然如此,针对传统的web应用模式,ajax技术却仍然有着其不可替代的优势,但是Ajax技术并不是十全十美的,我们应该仅在适当的地方使用Ajax技术,发挥Ajax技术的优势,而不是滥用Ajax技术。我们绝没有必要在任何情况下都使用Ajax技术。

2)安全问题。Ajax技术带来了舒适的用户体验,但这是以Web网站增加额外的B/S交互接口和浏览器频繁提交HTTP请求来实现的。安全界有句话叫“安全程度与开放服务的数量呈反比”,同理,额外的交互接口也加重了安全检查的负担,而且增大了出现隐患的可能性。同时,由于Ajax的性质,客户端浏览器会较传统Web更加频繁地向服务器发起请求。对于某些使用定时轮询机制的Ajax框架更是如此。一旦被恶意攻击的人利用,即使只是一些短链接,服务器也会面临巨大的访问压力。在这种情况下,Ajax网站会比传统Web网站更难以抵御这种基于页面的DDoS。

另外,Ajax技术由于频繁地采取了异步交互技术,在Ajax蠕虫病毒和个人隐私的窃取方面也存在着一定的比没有使用Ajax技术的网站多的安全隐患。

关于ajax技术的安全问题,目前网络中关于AJAX和及其安全和风险的讨伐声浪不绝于耳,然而这种新技术却已经被铺天盖地应用在各种web应用中,事情为什么会这样呢?原因是:互联网上的大多数站点原本就不安全的,虽然Ajax技术不能使web站点更安全,但正如ajax技术不是一门真正的新技术一样,所有关于Ajax技术的安全性的问题由来已久,这些安全问题不是因为Ajax技术的出现而出现,也不会随着Ajax技术的消失而消失。我们要做的不是在一旁冷嘲热讽,而是投身于这场革命热潮中,并尽量减少我们犯错误的可能性。

3)对搜索引擎的支持比较弱。搜索引擎不支持JavaScript,而Ajax正是通过使用JavaScript发挥作用。搜索引擎无法获得通过JavaScript调用服务器的数据内容,搜索引擎无法识别由AJAX生成的网页内容。因此,在网站搜索引擎优化日益受到重视的今天,应用AJAX技术设计网站时要充分考虑到搜索引擎优化的需要。

虽然目前的搜索引擎还不能支持ajax技术,但是我们可以一方面采取某些技术使得我们所使用的ajax技术能够被搜索引擎搜索到,另一方面,随着Ajax技术的流行度越来越广,越来越多的网站采用了Ajax技术,这就使得搜索引擎本身必须的在技术上加以革新以适应新的局面,你能想象当一个非常流行的技术被一个搜索引擎支持而别的搜索引擎不能支持的情况吗?抑或一个很好的网站甚至是一个非法网站采用的Ajax技术,我们使用所有的搜索引擎都找不到它的尴尬局面吗?

4)一些手持设备(如手机、PDA等)现在还不能很好的支持Ajax,比如说我们在手机的浏览器上打开采用Ajax技术的网站时,它目前是不支持的。这个问题事实上是因为这种手持设备上网技术发展比较晚造成的,它们差不多和Ajax技术一起出现的,当然这样的问题我们可以抛给这些设备的开发商,但仍然需要我们研究人员去探索、解决,不过是时间问题而已。

就目前来说,针对Ajax的批评主要是上述前三点,尤其是后第二点和第三点,然而经过我们的仔细分析,我们发现,问题的根结缺却不在Ajax技术的本身。既然如此,我们还有必要对Ajax技术冷嘲热讽吗?

4 结论

现在,Ajax技术还算是一个新兴事物,应该说,拿Ajax技术开发,本身技术上已经不是什么问题,主要问题在于Ajax技术还不普及。然而事实上,当Ajax这个名词还没有出现在中国的时候,一些欧美公司就已经应用了这项技术。我们本身就已经落后别人,可事到如今,却仍然有许多人抓住那么一点点小辫子在叫嚣着,是因为Ajax技术不好掌握,远没有Asp,Php,Jsp方便还是因为别的原因呢?无论如何,我都始终认为Ajax技术的应用,必将会有一个飞速的发展。

参考文献

[1]Hoffman B,Sullivan B.AJAX安全技术[M].北京:电子工业出版社,2009.

[2]夏晓云,吴为波.AJAX技术的搜索引擎优化问题研究[J].江西理工大学学报,2008,29(5).

[3]叶新伟.PHP+AJAX Web2.0编程技术与项目大全[M].北京:电子工业出版社,2008.

[4]何毅.搜索引擎检索技术及其优化策略叨[J].现代情报,2008,(5):171-173.

基于Ajax的Web开发应用 篇7

在传统Web应用中，客户端与服务器通讯主要采用同步交互方式。这种方式受到网络传输带宽和客户端表现技术等因素的限制，使得Web应用在实际使用中的表现并不尽如人意。这与基于C/S模式的软件系统相比，主要存在系统响应速度慢、交互能力差、操作界面简单等不足。在软件使用越来越人性化的今天，这些不足逐渐成为Web应用发展的瓶颈。随着以Ajax技术为代表的Web2.0技术的兴起，传统Web应用的不足得到了极大的改善。Ajax是一种综合性的客户端技术，它在增强客户端表现能力的同时，可以实现客户端与服务器的异步数据通讯，把用户与系统的交互程度由页面分解到数据层面，在提高Web系统性能的同时，大大改善用户体验。

2. Ajax技术简介

Ajax (Asynchronous Javascript And XML) 本身并不是全新的技术，而是指一种集成的方法，一种新的设计理念。使用几种现有技术：包括XML、Http、Request、Javascript、DOM、XHTML、CSS。Ajax是Web2.0的代表技术之一，本质上是一种(RIARich Interplication)技术。RIA是指具有高度互动性和丰富用户体验的网络应用程序，它既具有消息确认、无刷新页面下提供的快捷界面响应、拖放式操作等桌面应用程序的特点，同时又具有部署简单、跨平台等Web应用程序的特点。A-jax技供了客户端与服务器异步通信的能力，使用户从请求—响应—再请求的循环脱出来，同时降低了网络传输的数据量，提高了客户端的响应速度，极大地提高了用户使用体验，使得Web应用可以接近甚至达到“桌面应用”的效果。随着A-jax技术的快速发展，Ajax开发工具也层出不穷，Ajax框架使得Ajax在Web应用开发变得更加合理和快速，功能也更加强大，解决Ajax技术所存在的缺陷。现在网上流行几种开源的AJAX框架，比如：JQuery、Prototype、Dojo、DWR等，有些框架基于浏览器端，有些基于服务器端。有些专门为特定语言设计，另外一些则与语言无关。其中绝大多数都有开源实现，但也有少数是专用的。

3. Ajax的应用实例

下面以利用Ajax技术实现淡入淡出窗口为例来说明，在本文的例子中采用Jquery框架来实现，因此在网页中首先应引入Jquery的JS文件。

3.1 在网页制作出模拟窗口

在Web开发中, 要在网页中显示出一个和桌面应用中相类似的窗口, 可以通过div标签来实现。

为了让窗口在关闭的过程中能淡入淡出，我们可以采用如下两种方法来实现。

方法2，利用jquery的hide方法winNode.hide ("slow") ;

方法3，利用jquery的fadeOut方法winNode.fadeOut ("slow") ;

通过对div标签的CSS样式的控制来实现窗口的大小、颜色等样式的显示。下面是实现过程中的代码：

3.2 控制窗口的淡入淡出

在Web网页中，我们可以采用如下代码来实现窗口的控制。

4. 结语

随着Ajax技术的使用，用户可以创建接近桌面程序的应用，可以使得客户端得到丰富的Ajax体验及交换操作，而用户不会感觉到有网页提交或刷新的过程，页面也不需要被重新加载，应用的数据交换都被隐藏。目前Ajax已经成为了Web应用的主流开发技术，大量的业界巨头已经采纳并且在大力推动这个技术的发展。

参考文献

[1][美]阿斯利森, 舒塔著.金灵等译.Ajax基础教程[M].北京:人民邮电出版社, 2006.

AJAX在网络课件中的应用 篇8

随着计算机网络和多媒体技术的不断发展, 越来越多的网络课件采用B/S模式的架构, 这种课件确实起到了推进教学改革的作用, 甚至可以说给传统的教学思想带来了一场革命。但传统的B/S架构都是以同步页面刷新作为基础的, 无法实现更好的用户体验。AJAX[1]技术的出现, 揭开了无刷新更新页面时代的序幕, 应用AJAX不仅能向服务器发送并取回必需的数据而且可以在客户端采用JavaScript处理来自服务器的响应。由于服务器与浏览器之间的交换数据大量减少, 所以可以实现响应更快的应用。现以XMLHttpRequest, JavaScript, DOM和XML[2]为技术核心, 创建异步交互[3]功能的Web应用。

1 AJAX技术介绍

异步JavaScript和XML (Asynchronous JavaScript and XML, AJAX) 是一种创建交互式Web应用程序的Web开发技术。AJAX不是指一种单一的技术, 而是有机地利用一系列相关的技术, 如使用XHTML+CSS来表示信息; 使用JavaScript操作DOM (Document Object Model) 进行动态显示及交互;使用XML和XSLT进行数据交换及相关操作;使用XMLHttpRequest对象与Web服务器进行异步数据交换; 使用JavaScript将以上所有的东西绑定在一起。

AJAX的核心是JavaScript对象XMLHttpRequest。该对象是一种支持异步请求的技术, 可以使用JavaScript向服务器提出请求并处理响应, 而不阻塞用户[4,5]。这样既减轻了服务器的负担, 又加快了响应速度, 缩短了用户的等待时间。

2 AJAX工作原理

传统Web应用采用同步交互过程, 在这种交互方式中, 由用户触发一个HTTP请求到服务器, 服务器对其进行处理后再返回一个新的HTML页面到客户端, 每当服务器处理客户端提交的请求时, 客户端都只能空闲等待, 哪怕只是一次很小的交互, 只需从服务器端得到很简单的一个数据, 都要返回一个完整的HTML页面, 而用户每次都要浪费时间和带宽去重新读取整个页面。传统Web应用模型如图1所示, 其糟糕的用户体验越来越不能适应用户的需要。现在, 越来越多的程序设计人员都采用AJAX来减少用户的等待时间。

与传统的Web应用不同, AJAX采用异步交互方式。AJAX的工作原理相当于在客户端和服务器之间加入一个中间层, 即AJAX引擎[6], 使客户端与服务器的交互异步化, 所以用户不用打开空白窗口等待服务器的响应, 而可以继续进行客户端的其他工作。服务器响应完毕之后, 将结果提交给AJAX引擎, AJAX引擎使用HTML和CSS技术展示给用户。客户端与服务器的这种异步通信, 使用户感觉不到客户端与服务器的通信, 使得Web程序看起来是即时响应的。引入AJAX后, 并不是所有的用户请求都提交给服务器, 像—些数据验证和数据处理等都交给AJAX引擎自己来做, 只有确定需要从服务器读取新数据时再由AJAX引擎代为向服务器提交请求。AJAX Web应用模型[7]如图2所示。

使用AJAX的目的是通过在后台与服务器实现少量的数据交换, 从而使前端Web页面感觉起来更具响应性。因此, 每当用户做出一个改变时, 不必重载整个Web页面。其最终目的是进一步提高Web页面的交互性、响应速度及可用性。

3 AJAX的优势

AJAX中Web应用模式的优势有如下几个方面:

(1) 所采用技术相对稳定。AJAX采用的都是现有相对成熟的技术, 可以快捷地将AJAX的设计模式应用到已有的实际项目当中, 而无需改变现有Web的内容;

(2) 更好的用户体验。无刷新更新页面[8], 减少用户实际和心理等待的时间;

(3) 减轻服务器的负担。AJAX的策略是“按需取数据[9]”, 所以应最大可能地减少冗余请求和响应对服务器造成的负担;

(4) 节约资源。可以把以前一些服务器负担的工作转嫁到客户端, 利于客户端闲置的处理能力来处理、减轻服务器和带宽的负担, 节约空间和带宽的租用成本;

(5) 基于公开标准。基于被各大浏览器和平台都支持的技术, 并不需要新的插件和第三方程序;

(6) 能与Flex和Flash等技术很好的集成;

(7) 进一步促进了页面表示和数据的分离[10]。有利于分工合作, 减少非技术人员对页面修改造成的Web应用程序错误, 提高效率, 以便更加适用于现在的发布系统。

4 AJAX在网络课件开发中的应用实例

在网络课件开发中, 采用AJAX技术进行Web开发。下面说明采用AJAX解决的典型工作任务。

4.1 注册表单验证

在以往的网络课件应用中, 一般情况下使用客户端JavaScript做初步验证, 用户提交表单后在服务器端做进一步验证。如果用户输入的内容错误, 会返回注册页面, 提示用户修改, 这样就会给用户带来不便。如果用户名已被他人注册, 注册用户只能等到提交注册信息后, 才能接收到系统反馈的信息, 这样就可能浪费了用户的宝贵时间。还有一种改进了的验证过程, 即用户可以通过点击相应的验证按钮, 打开新窗口查看验证结果, 但是这样需要新开一个浏览器窗口或者对话框, 还需要专门编写验证的页面, 比较耗费系统资源。

使用AJAX技术后, 很多原来必须提交到服务器才能验证的内容, 可以在不刷新页面的情况下直接验证。用户输入用户名后, 当输入文本框失去焦点时, 使用XMLHttpRequest对象将用户输入的信息发送给服务器。服务器判断是否存在同名用户, 验证完毕后将信息反馈给客户端, 由客户端显示验证结果。整个过程无需将整个页面提交到服务器, 也无需弹出新窗口, 所以不仅可以快速而且也不会加重服务器的负担。

4.2 局部更新页面信息

在网络课件中希望程序能够自动刷新, 定时向服务器请求数据, 根据系统的需要一定时间取一次数据。要实现这一功能最简单的方法是选择定时器, 定时对网页进行刷新。但是当整个页面需要更改的数据不多, 只是局部更改数据时, 还选择使用定时器, 由于页面的重载, 将会大大降低系统的效率。

因此, 引入AJAX的局部刷新功能, 如果在页面中只有某个数据表的数据在一定时间频率下自动刷新时, 则在这里利用XMLHTTP的异步调用, 在JavaScript代码中创建一个XMLHttpRequest对象, 然后通过这个对象和服务器建立请求, 并接收服务器返回的数据。

4.3 级联菜单

在传统的菜单设计中, 为了避免每次对菜单的操作引起重载页面, 不采用每次调用后台的方式, 而是一次性将级联菜单的数据全部读取出来并写入数组;然后根据用户的操作, 用JavaScript来控制它的子集项目的呈现, 这样虽然解决了操作响应速度, 不重载页面以及避免向服务器频繁发送请求的问题, 但是如果用户不对菜单进行操作或只对菜单中一部分进行操作的话, 那读取的数据中一部分会成为冗余数据而浪费用户的资源, 特别是在菜单结构复杂, 数据量大的情况下 (比如菜单有很多级、每一级菜单又有上百个项目) , 这种弊端就更为突出。现在应用AJAX后, 在初始化页面时只读出它的第一级所有数据并显示, 在用户操作一级菜单中的一项时, 会通过AJAX向后台请求当前一级所属的二级子菜单的所有数据, 如果再继续请求已经呈现二级菜单中的一项时, 再向后面请求所操作二级菜单项对应所有三级菜单的所有数据, 以此类推。这样, 用什么就取什么、用多少就取多少, 就不会有数据的冗余和浪费, 减少了数据下载总量, 而且更新页面时不用重载全部内容, 只更新需要更新的部分就行。相对于后台处理并重载的方式缩短了用户的等待时间, 也把对资源的浪费降到最低。

5 结 语

AJAX作为一种新一代的网络页面开发架构, 使开发具有丰富人机交互功能的页面成为可能。AJAX可以提供良好的用户体验, 提供高度交互的Web应用, 大大降低数据的通信量。网络课件开发与AJAX技术相结合, 各取所长, 既丰富了课件的制作方法, 又提高了课件的灵活性和通用性。但是AJAX作为一种新生事物, 并不是完全成熟的技术, 也有他的不足之处, 比如:可能破坏浏览器后退按钮的正常行为, 带来客户端压力过大等问题。因此在网络课件开发过程中, 应该根据实际需要, 合理利用AJAX技术。

摘要：应用AJAX技术可以创建动态效果丰富, 响应迅速的网络课件, 使其在数量众多的课件中, 得到更多的关注。在开发网络课件的现有方法中, 一般采用同步页面刷新, 它无法实现更好的用户体验。应用AJAX技术, 无需刷新更新页面, 就能创建用户体验良好, 浏览器和服务器之间异步通信的网络课件。通过分析AJAX的工作原理, 重点给出了用AJAX解决的典型工作任务。

关键词：AJAX,JavaScript,课件,异步交互

参考文献

[1][美]阿斯利森, 舒塔.AJAX基础教程[M].北京:人民邮电出版社, 2006.

[2][英]克拉恩, 帕斯卡雷洛, 杰姆斯.AJAX实战[M].北京:人民邮电出版社, 2006.

[3]王沛, 冯曼飞.征服AJAX——Web 2.0开发技术详解[M].北京:人民邮电出版社, 2006.

[4]柯自聪.AJAX开发精要——概念、案例与框架[M].北京:电子工业出版社, 2006.

[5]麦赫马夫.Ajax Design Patterns (影印版) [M].福建:东南大学出版社, 2006.

[6]张志洁.基于AJAX技术的网络教学资源库的应用研究[J].科技信息, 2009 (1) :503-504.

[7]张亚娟, 邹瑜.Web中AJAX的应用研究[J].软件导刊, 2008 (11) :108-109.

[8]陈骏, 谭庆平, 谭雄.ASP.NET AJAX在博客网站中的应用[J].微计算机信息, 2008, 24 (3) :56-58.

[9]赵定远.基于AJAX的异步Web开发模式[J].现代电子技术, 2008, 31 (10) :79-81.

基于Ajax技术的企业网站建设 篇9

1 Ajax的技术介绍

Ajax Web应用采用异步交互模式, 在用户与服务器之间引入了一个中间媒介———Ajax引擎, 消除了传统模式中的“提交—等待—重新显示”缺点。Ajax技术的核心是Java Script对象Xml HttpRe-quest。该对象在Internet Explorer5中首次引入, 它是一种支持异步请求的技术。

简而言之, Xml-HttpRequest使您可以使用Java Script向服务器提出请求并处理响应, 而不阻塞用户。当用户提出http请求时, 并不是所有的用户请求都提交给服务器。数据的验证和处理由Ajax来代理, 只有确实需要从服务器读取新数据时, 才由客户端通过Java Script, 调用Ajax引擎, 向服务器端发出HTTP请求, 但它并不等待请求的响应, 用户可以继续浏览或交互。当服务端的数据以XML形式返回时, Ajax引擎接收数据, 并指定Java Script函数来完成相应的处理或页面的更新, 而不是刷新整个页面, 从而实现用户操作与服务器响应的异步化。借助于Ajax, 可以在用户单击按钮时, 使用Java Script和DHTML立即更新UI, 并向服务器发出异步请求, 以执行更新或查询数据库。当请求返回时, 就可以使用Java Script和CSS来相应地更新UI, 而不是刷新整个页面。最重要的是, 用户甚至不知道浏览器正在与服务器通信, Web站点看起来是即时响应的。

2 企业网站的关键技术

鉴于中小型企业的实力以及对建站成本的考虑, 这个网站使用PHP作为开发语言, 同时为了方便以后修改界面, 还将使用Smarty模板引擎分离代码和用户界面。PHP是一种HTML内嵌式的语言, 是一种在服务器端执行的嵌入HTML文档的脚本语言, 它大量地借用C和Perl语言的语法, 并结合Web开发的特性, 使Web开发者能够快速地写出动态页面。PHP是将程序嵌入到HTML文档中去执行, 执行效率比完全生成HTML标记的CGI要高许多;与同样是嵌入HTML文档的脚本语言ASP相比, PHP是完全免费的开源产品, 而且可以运行在多种操作系统上。PHP在服务器端执行, 充分利用了服务器的性能;PHP执行引擎还会将用户经常访问的PHP程序驻留在内存中, 其他用户再一次访问这个程序时就不需要重新编译程序了, 只要直接执行内存中的代码就可以了, 这也是PHP高效率的体现之一。PHP具有非常强大的功能, 所有的CGI或者ASP的功能PHP都能实现, 而且支持几乎所有流行的数据库以及操作系统。Smarty是一个使用PHP写出来的PHP模板解析类, 是目前业界最著名的PHP模板引擎之一。

它分离了逻辑代码和外在的内容, 提供了一种易于管理和使用的方法, 用来将原本与HTML代码混杂在一起PHP代码逻辑分离。目的就是要使用PHP程序员同美工分离, 改变程序的逻辑内容不会影响到美工的页面设计, 美工重新修改页面不会影响到程序的程序逻辑。

3 Ajax具体实现

3.1 用户注册的实时验证

为了实现Ajax, 在客户端HTML页面必须写入Java Script代码作为连接客户端和服务器端的纽带。

由于各个浏览器对Xml HttpRequest的支持不一样, 这里使用了Java Script框架j Query, 通过j Query可以写出兼容各种浏览器的Ajax代码。S│.post () 是j Query的一个Ajax方法, S│.post的第一个参数指定了服务器端的处理页面, 后面大括号中是需要传递的参数, 可以跟一个或多个参数;function (data.textSta-tus) 是一个返回函数, 当Ajax在服务器端处理完成之后, 使用这个函数接收服务器端返回的数据。j Query的append方法将对现有的页面中插入一段代码。在服务器端需要把处理结果返回给客户端显示, 具体代码如下:

页面在接受到客户端Ajax传递来的用户名之后就查询数据库, 判断用户名是否存在, 并且根据情况生成一段HTML代码, 最后使用echo返回给客户端页面。这一过程实现了用户注册时的动态验证, 当用户的鼠标焦点离开用户名文本框之后, 程序将触发Ajax, 在页面没有刷新的情况下, 文本框后面会显示出一个提示框, 提示改用户名是否合法。

3.2 后台的无刷新删除图片

在后台修改图片组的时候, 不可能每删除一张图片都要重新刷新页面, 这样的话每刷新一次就要完整地重新查询一次数据库, 不仅影响用户体验, 而且还占用服务器资源, 消耗服务器带宽。在这里我们同样使用Ajax无刷新的删除图片, 静态页面的js代码如下:

当单击每张图片旁边的删除就会触发de-l OnePic函数, 同时传递了2个参数给这个函数, 分别是图片名, 图片扩展名;此时使用j Query的S│.post方法定义后台的处理页面为picture.php, 还使用j Query获取了图片组的id, 把act、picname、ext、prid四个值传递给后台的picture.php。下面是picture.php的处理代码:

在这段代码之前是接收js传递来的值, 根据传值删除图片, 图片删除之后, 程序对这个图片组中的图片进行重新整理, 并且生成一段HTML代码, 在程序处理完之后还更新了数据库。在最后使用echo函数把重新生成的HTML代码传回前台页面。前台页面通过j Query的.html方法直接把后台传回的HTML代码替换原来的HTML。

4 结语

但正如任何事物一样, Ajax也不是一种必须和万能的技术, 它有适合自身应用的场合, 并与现有的动态页面技术互补融合, 在未来的软件技术发展中, 相信Ajax将担负起更多的责任, 在Web应用的舞台上发挥重要的作用。

参考文献

[1]王前震, 蔡瑞英.利用AjaxWeb实现实时监控系统软件设计的改进[J].计算机应用与软件, 2009, 26 (10) .