-
AJAX 应用
2019-01-18 08:46:24 -
jquery中ajax应用中的通用ajax()函数
2017-08-30 08:13:46全栈工程师开发手册 (作者:栾鹏) jquery系列教程6-AJAX全解 jquery中ajax应用——通用ajax函数jquery提供了比get和post更加通用的ajax()代码如下:$.ajax(options) $.ajax({ type:"POST", //方式 url:"test全栈工程师开发手册 (作者:栾鹏)
jquery中ajax应用——通用ajax函数
jquery提供了比get和post更加通用的ajax()
代码如下:
$.ajax(options) $.ajax({ type:"POST", //方式 url:"test.jsp", //地址 dataType:"JSON", //数据类型 xml(xml文档),html(html代码),script(js代码),json(json数据),jsonp(jsonp格式数据),text(纯文本) beforeSend:function(XMLHttpRequest){ //发送前函数, 这里可以修改XMLHttpRequest,例如添加HTTP头 }, complete:function(XMLHttpRequest,textStatus){ //请求完成函数,请求成功或失败均调用此函数 }, sucess:function(data,textStatus){ //请求成功,成功返回, //data有可能是xmlDoc,jsonObj,html,text等等 }, error:function(XMLHttpRequest,textStatus,errorThrown){ //请求失败函数 }, global:true //是否触发全局ajax事件,默认为true。全局函数开启,任何jquery类能调用后面的ajax全局函数 });
全局ajax函数
任何jquery对象都可以调用全局ajax函数
代码如下:$("#loading").ajaxStart(function(){}); //ajaxStart请求开,ajaxStop请求结束 ajaxComplete请求完成 ajaxError请求错误 ajaxSend发送请求前 ajaxSucess请求成功
-
Ajax应用场景-Ajax适合的应用场合
2008-12-07 13:49:00Ajax应用场景-Ajax适合的应用场合Ajax不是万能的,在适合的场合使用Ajax,才能充分发挥它的长处,改善系统性能和用户体验,绝不可以为了技术而滥用。Ajax的特点在于异步交互,动态更新web页面,因此它的适用范围是...Ajax应用场景-Ajax适合的应用场合
Ajax不是万能的,在适合的场合使用Ajax,才能充分发挥它的长处,改善系统性能和用户体验,绝不可以为了技术而滥用。Ajax的特点在于异步交互,动态更新web页面,因此它的适用范围是交互较多,频繁读取数据的web应用。现在来看几个Ajax的应用实例,读者可以了解如何使用Ajax技术改进现有的web应用系统。
场景1. 用Ajax进行数据验证
在填写表单内容时,需要保证数据的唯一性(例如新用户注册填写的用户名),因此必须对用户输入的内容进行数据验证。
数据验证通常有两种方式:
一种是直接填写,然后提交表单,这种方式需要将这个页面提交到服务器端进行验证,整个过程不仅时间长而且造成了服务器不必要的负担;
第二种方式是改进了的验证过程,用户可以通过点击相应的验证按钮,打开新窗口查看验证结果,但是这样需要新开一个浏览器窗口或者对话框,还需要专门编写验证的页面,比较耗费系统资源。
而使用Ajax技术,可以由XMLHttpRequest对象发出验证请求,根据返回的HTTP响应判断验证是否成功,整个过程不需要弹出新窗口,也不需要将整个页面提交到服务器,快速而又不加重服务器负担。
场景2.按需取数据
分类树或者树形结构在web应用系统中使用得非常广泛,例如部门结构,文档得分类结构常常使用树形空间呈现。
以前每次对分类树得操作都会引起页面重载,为了避免这种情况出现,一般不采用每次调用后台得方式,而是一次性将分类结果中得数据一次性读取出来并写入数组,然后根据用户的操作,用JavaScript来控制节点的呈现,这样虽然解决了操作响应速度,不重复载入页面以及避免向服务器频繁发送请求的问题,但是如果用户不对分类进行操作或者只对分类树中的一部分数据进行操作的话(这种情况很普遍的),那么读取的数据中就会有相当大的冗余,浪费了用户的资源。特别是在分类结构复杂,数据庞大的情况下,这种弊端就更加明显了。
现在应用Ajax改进分类树的实现机制。在初始化页面时,只获取第一级子分类的数据并且显示;当用户点开一级分类的第一节点时,页面会通过Ajax向服务器请求当前分类所属的二级子分类的所有数据;如果再请求已经呈现的二级分类的某一节点时,再次向服务器请求当前分类所属的三级子分类的所有数据,以此类推。页面会根据用户的操作向服务器请求它所需要的数据,这样就不会存在数据的冗余,减少了数据下载总量。同时,更新页面时不需要重载所有内容,只更新需要更新的那部分内容即可,相对于以前后台处理并且重载的方式,大大缩短了用户的等待时间。
场景3.自动更新页面
在web应用中有很多数据的变化时十分迅速的,例如最新的热点新闻,天气预报以及聊天室内容等。在Ajax出现之前,用户为了即使了解相应的内容必须不断刷新页面,查看是否有新的内容变化,或者页面本身实现定时刷新的功能(大多数聊天室页面就是这样做的)。
有可能会发生这种情况;有一段时间网页的内容没有发生任何变化,但是用户并不知道,仍然不断的刷新页面;或者用户失去了耐心,放弃了刷新页面,却很有可能在此有新的消息出现,这样就错过了第一时间得到消息的机会。
应用Ajax可以改善这种这种情况,页面加载以后,会通过Ajax引擎在后台进行定时的轮询,向服务器发送请求,查看是否有最新的消息。如果有则将新的数据(而不是所有数据)下载并且在页面上进行动态的更新,通过一定的方式通知用户(实现这样的功能正是JavaScript的强项)。
这样即避免了用户不断手工刷新页面的不便,也不会因为重复刷新页面造成资源浪费。
既然你己经对Ajax产生了兴趣,还要知道重要的一点,即什么时候应该使用Ajax技术,而什么时候不该用。首先,不要害怕在应用中尝试新的方法。我们相信.几乎每个web应用都能从Ajax技术中获益,只不过不要矫杠过正,过于离谱就行了。从验证开始就很合适,但是不要限制你的主动性。你当然可以使用Ajax提交数据,但也许不能把它作为提交数据的主要方法。
其次,惟一会影响你应用Ajax的就是浏览器问题。如果大量用户(或者特别重要的用户)还在使用比较旧的浏览器,如IE 5 , Safari 1.2或Mozilla 1.0之前的版本,Ajax技术就不能奏效。如果这是一些很重要的用户,你就要使用针对目标用户的跨浏览器的方法,而放弃Ajax,或者开发一个可以妥善降级的网站。浏览器支持可能不是一个重要因素,因为netscape Navigaxar 4在市场上的份额很小。不过,还是应该查看Web日志,看看你的应用适用什么技术。
如前所述,验证和表单填写就非常适合采用Ajax实现。还可以使用DOM的“拖”技术建立真正动态的网站,如google的个性化主页.
可以看到,Ajax为Web应用开发提供了新的机会。你不会再因为以往的专用技术或技术折中方案而受到妨碍。利用Ajax,胖客户与瘦客户之间的界限不再分明,真正的赢家则是你的用户。 -
Struts AJAX应用
2012-01-15 03:04:24====================================================== ...我们的第一个struts ajax应用 观察下下面的图3和图4。第一眼看上去,它们和前面的例子没有说明区别。它们的不同之处在于,页面载入后(图3
======================================================
注:本文源代码点此下载
======================================================我们的第一个struts ajax应用
观察下下面的图3和图4。第一眼看上去,它们和前面的例子没有说明区别。它们的不同之处在于,页面载入后(图3)然后文本框中的值改变了,窗体自动提交而不显示空白的,然后在图4中显示结果。普通的提交按钮仍然在,你也可以选择使用它。
图 3. 页面载入后的ajax例子
图 4. ajax调用后的ajax例子
添加ajax是出奇的容易。服务器端的代码和前面的例子是一样的: 一个struts的actionform来后去数据,一个struts的action来执行需要的任务(例如,存储数据库)然后转发到适当的jsp页面来显示结果。
继续
如果你希望就此停止阅读(跳过这个例子的工作说明),但是这里的是和你需要转换你的struts应用到一个struts-ajax应用同样的风格:
1. 在你的web页面中引入一个ajax.js (该文件是struts-ajax.zip 例文件中的一部分)。ajax.js 包含了所有需要发送和接收ajax调用的javascript方法。
2. 确保你希望在ajax调用中更新的web页面的部分包含在标签中,并且给每个标签一个id。
3. 当一些事件触发的时候就更新页面(例如,文本框的the onchange()方法),调用retrieveurl()方法,通过url传递到需要执行服务器端处理的struts action。
4. 为了页面的显示/更新,最简单的方法是struts action转发回同样的页面。在本例中,showgreen/showblue 文本框中的onchange()方法来触发ajax调用。
javascript方法retrieveurl()调用服务器的struts(通过url),获取jsp响应,然后更新显示页面中的 标签中的部分。就是这么简单!
ajax解决方案的细节
我们将例子变为ajax-struts应用的时候,需要三个变化:
1. 增加一个javascript方法来完成到服务器的“背后的”ajax调用。
2. 增加javascript代码来接收服务器的响应并更新页面。
3. 在jsp页面增加标签标签,这个标签中内容将在ajax调用中更新。
我们将详细的说明上面的每一步。
发送ajax请求到服务器
有两个方法(在下面列出)用于发送请求到服务器。
· retrieveurl()方法获得服务器的url和struts form。url用于使用ajax,form的值用于传递到服务器。
· getformasstring()方法用于将retrieveurl()中form命名的值组装成查询字符串,并发送到服务器。
使用方法很简单,使用onclick()/onchange()事件来触发retrieveurl()更新显示。
在这两个方法中有一些有趣的东西。
在retrieveurl()方法中,req.onreadystatechange = processstatechange (注意,没有括号)这一行来告诉浏览器在服务器响应到达的时候调用processstatechange()方法(该方法将在后面介绍)。retrieveurl()方法中(现在已经是ajax的标准了)同样决定是使用ie浏览器(activex)还是使用netscape/mozilla (xmlhttprequest) 来实现跨浏览器兼容。
getformasstring()方法将html form转换成字符串连接在url后面(这样就允许我们发送http get请求)。这个字符串是经过转换的(比如,空格转换成%20等),并且是一个struts能将其组装成actionform的格式(并不需要struts清楚的明白这个是来之ajax的请求)。注意,在本例中我们使用http get,使用http post的方法也是类似的。
function retrieveurl(url,nameofformtopost) {
//将url转换成字符串
url=url+getformasstring(nameofformtopost);
//调用ajax
if (window.xmlhttprequest) {
// 非ie浏览器
req = new xmlhttprequest();
req.onreadystatechange = processstatechange;
try {
req.open("get", url, true);
} catch (e) {
alert("server communication problem\n"+e);
}
req.send(null);
} else if (window.activexobject) {
// ie
req = new activexobject("microsoft.xmlhttp");
if (req) {
req.onreadystatechange=processstatechange;
req.open("get", url, true);
req.send();
}
}
}
getformasstring() 是一个“私有” 方法,在retrieveurl()中使用。
function getformasstring(formname){
//设置返回字符串
returnstring ="";
//取得表单的值
formelements=document.forms[formname].elements;
//循环数组,组装url
//像'/strutsaction.do&name=value'这样的格式
for(var i=formelements.length-1;i>=0; --i ){
//转化每一个值
returnstring+="&"
+escape(formelements[i].name)+"="
+escape(formelements[i].value);
}
//返回字符串
return returnstring;
}
根据ajax的响应更新web页面
到现在为止,我们学习过了使用javascript来完成ajax调用(前面列出),struts action,actionform以及jsp(基本没有变化,只是增加了标签)。为了完善我们对struts-ajax项目的了解,我们需要了解三个用于根据服务器返回的结果而更新页面的javascript方法。
· processstatechange(): 该方法在ajax调用前设定。它在服务器响应到达后由xmlhttprequest/microsoft.xmlhttp 对象调用。
·splittextintospan(): 根据响应,循环取出数组中的元素组装成newcontent。
·replaceexistingwithnewhtml(): 根据span元素数组,循环搜索,将里面的元素调换掉页面中和它的'somename'相同的中的内容。注意,我们使用的是req.responsetext 方法来获得返回的内容(它允许我们操作任何文本的响应)。与此相对于的是req.responsexml (它的作用更大,但是要求服务器返回是xhtml或者xml)。
function processstatechange() {
if (req.readystate == 4) { // 完成
if (req.status == 200) { // 响应正常
//将响应的文本分割成span元素
spanelements =
splittextintospan(req.responsetext);
//使用这些span元素更新页面
replaceexistingwithnewhtml(spanelements);
} else {
alert("problem with server response:\n "
+ req.statustext);
}
}
}
replaceexistingwithnewhtml() 是为processstatechange()使用的“私有”方法。
function replaceexistingwithnewhtml
(newtextelements){
//循环newtextelements
for(var i=newtextelements.length-1;i>=0;--i){
//判断是否以 if(newtextelements[i].
indexof("-1){
//获得span的名字- 设置在第一和第二个引号之间
//确认span元素是以下的格式
//newcontent
startnamepos=newtextelements[i].
indexof('"')+1;
endnamepos=newtextelements[i].
indexof('"',startnamepos);
name=newtextelements[i].
substring(startnamepos,endnamepos);
//获得内容-在第一个>标记后的所有内容
startcontentpos=newtextelements[i].
indexof('>')+1;
content=newtextelements[i].
substring(startcontentpos);
//现在更新现有的document中的元素,
// 确保文档存在该元素
if(document.getelementbyid(name)){
document.getelementbyid(name).
innerhtml = content;
}
}
}
splittextintospan() 是为processstatechange() 使用的“私有”方法。
function splittextintospan(texttosplit){
//分割文档
returnelements=texttosplit.
split("")
//处理每个元素
for(var i=returnelements.length-1;i>=0;--i){
//删除掉第一个span后面的元素
spanpos = returnelements[i].
indexof("
//如果找到匹配的,获得span前的内容
if(spanpos>0){
substring=returnelements[i].
substring(spanpos);
returnelements[i]=substring;
}
}
return returnelements;
}
新的控制流
添加以下的javascript代码到我们的应用中,以下的步骤将在服务器和浏览器中执行。
1. 如同一个普通struts应用装载页面。
2. 用户改变文本框的值,触发一个onchange() 事件,调用retrieveurl() 方法。
3. 该javascript方法通过发送struts明白的表单变量(后台)请求到服务器的struts action。
4. 该javascript方法同样设定了第二个javascript方法的名字,此方法将到服务器响应完毕后调用。本例子中,设定为processstatechange() 方法。
5. 如我们所预期的,服务器响应完毕,调用processstatechange() 方法。
6. javascript在(新的)服务器响应中循环取出所有元素。将页面上存在与获得元素名字相同的 中的元素替换掉。
在你的应用中设计ajax
以上描述的javascript方法能在大多数的应用中使用,包括比我们的例子复杂得多的。但是,在使用之前,你需要注意以下几点:
· 避免复制代码,最好在初始化请求(如,显示完整的页面)和ajax(更新部分页面)请求中使用相同的struts action和jsp。
·在公共的action(控制器)中,决定jsp页面(所有的jsp页面或者其中的一部分)中的一个区域需要传送到浏览器。通过在web服务器的session或者actionform中设定标记来让jsp页面知道哪些部分需要提交。
· 在jsp中,使用struts 或者jstl标签来决定提交的html区域。
使用ajax的本例子,可以在以下下载: struts-ajax.zip
结语
ajax技术允许我们在创建和使用web应用的时候完全的改变。本文介绍了一个简单的技术,在现有的struts应用中增
======================================================
在最后,我邀请大家参加新浪APP,就是新浪免费送大家的一个空间,支持PHP+MySql,免费二级域名,免费域名绑定 这个是我邀请的地址,您通过这个链接注册即为我的好友,并获赠云豆500个,价值5元哦!短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了,每天挂广告赚50+元哦,呵呵,饭钱不愁了,\(^o^)/ -
AJAX_一个ajax应用实例
2011-01-02 13:58:00<br />AJAX_一个ajax应用实例 程序功能: testAjax.html中有两个文本框,姓名文本框内容由自己填充,另一个则由getAjax()函数自动获取time.php中的值 testAjax.html代码如下: ... -
Ajax应用场景-Ajax适合的应用场合
2015-10-18 20:19:11Ajax不是万能的,在适合的场合使用Ajax,才能...现在来看几个Ajax的应用实例,读者可以了解如何使用Ajax技术改进现有的web应用系统。 场景1. 用Ajax进行数据验证 在填写表单内容时,需要保证数据的唯一性(例如 -
JSON和Ajax应用
2019-12-15 11:26:15JSON和AJAX 回顾 1、MVC设计模式 2、三层架构 3、分页实现 今日内容 1、JSON解析 2、什么是Ajax 3、Ajax工作原理 4、Ajax的使用 5、Ajax的综合练习 教学目标 1、掌握JSON解析 2、熟悉什么是Ajax 3、掌握Ajax工作... -
jQuery ajax应用
2013-10-12 14:37:44Ajax的优势: 1,宗旨:按需请求数据 减轻服务器的带宽, 2,无刷新请求,提高web性能,例如表单验证: 1,jQuery的ajax操作 jQuery封装ajax操作,通常有这几种方式: jQuery.ajax() $.get() $.post() ... -
ajax应用的基本流程
2011-08-02 10:29:39ajax应用的基本流程 1、从web表单中获取需要的数据 2 、建立到服务器的url 3 、打开到服务器的连接 4、 设置服务器在完成后要运行的函数 5 、发送请求 -
jquery中ajax应用——load()函数
2017-08-30 08:07:17jquery系列教程6-AJAX全解 jquery中ajax应用之load()函数$(selector).load(URL,data,callback)函数通常来获取服务器的静态文件,URL中可以添加选择器进行筛选。代码如下:$("#div1").load("data/demo_test.html #p1"... -
ASP.NET中的AJAX应用开发总结
2009-12-07 09:52:0011月21日晚7点应邀在武汉大学信息学院做了一场关于ASP.NET下AJAX开发的报告,以我自己经历讲述了一些特殊应用在过去到现在实现手段的变化,本来想回家之后做个总结的,...AJAX介绍其实AJAX应用的核心就是XMLHttpRequ -
利用 Selenium 测试 Ajax 应用程序
2011-06-02 10:24:00Asynchronous JavaScript and XML (Ajax) 是一种用于创建交互式 web 应用程序的 web 开发技术。Ajax 应用程序的一个特征是,不会导致一次重新加载整个页面。相反,浏览器将具有一个对服务器的异步调用以获得数据,... -
jquery中ajax应用——get()和post()
2017-08-30 08:10:30jquery系列教程6-AJAX全解 jquery中ajax应用——get()和post()get和post发送数据的方式不同,但是在jquery的ajax中这种区别对用户不可见。get传输的数据大小有限制,get请求的数据会被浏览器缓存,两种方式在服务器... -
如何开发安全的AJAX应用
2009-10-27 10:03:00如何开发安全的AJAX应用 AJAX技术已经是现在最流行的Web应用开发技术了,但是与此同时,Web应用也成了这个IT架构中安全最薄弱,最容易受到攻击的部分,AJAX应用相比较与传统的Web应用,大大增加了客户端与服务器... -
Ajax 和 XML: 借鉴最优秀的 Ajax 应用程序
2007-08-04 01:14:00Ajax 和 XML: 借鉴最优秀的 Ajax 应用程序 通过最优秀的 Web 2.0 应用程序学习改进用户体验 -
AJAX应用之setRequestHeader位置
2008-07-14 13:52:00AJAX应用之setRequestHeader位置Ajax这玩意越用出现的情况越多,除了本身的一些限制,还有一些就是与众多浏览器的实现策略有关了。平时为了调试方便都是在ff下使用,现在就有这么一个问题,在ajax.open用post方式时... -
ASP.NET中的AJAX应用开发详解
2011-04-22 16:01:00【IT168 技术文档】其实AJAX应用的核心就是XMLHttpRequest,通过现象看本质,即使使用微软的AJAX服务器控件最终也是需要这些的,只不过使用微软AJAX服务器控件开发AJAX应用时我们不需要关心JS脚本的实现,只需关心... -
AJAX应用的演示和源码
2007-12-02 15:14:0070个流行的AJAX应用的演示和源码下载:摘自网络摘自:http://blog.donews.com/dodo/archive/2006/08/16/1003231.aspx70个流行的AJAX应用的演示和源码下载 Ajallerix : AJAX, simple, fast Web image gallery demo ;... -
[Ruby on Rails实战圣经]Ajax 应用程式
2016-06-02 10:56:49Ajax 应用程式 It's not a bug - it's an undocumented feature. - Unknown Ajax是Asynchronous JavaScript and XML的缩写,是一种不需要重新整理页面,透过JavaScript来与伺服器交换资料、更新网页内容... -
ajax应用一例
2006-03-09 21:37:00//ajax应用一例var xmlHttp = false;try { xmlHttp = new XMLHttpRequest();} catch (trymicrosoft) { try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { xmlHttp -
Liferay中ajax应用用户session超时
2011-02-12 16:27:00基于Liferay Portal开发ajax应用时,如果长时间操作一个应用会发生用户登录超时的情况,在单应用的情况下,客户端每次提交请求时,服务端都会根据sessionid更新客户端用户的session状态。 但是... -
jQuery实现Ajax应用
2016-05-11 09:53:27首先理解一下什么是Ajax,全称是Asynchronous Javascript And XML(异步JavaScript和XML)是一种交互式网页应用的网页开发技术。 用通俗的话说,就是当需要数据处理或更新的时候,不采用整个网页页面重载的方法,而是... -
集成 Flex 与 Ajax 应用程序
2008-07-30 09:34:00传统的 Ajax 开发依旧是实现富 Internet 应用程序(RIA)的最主要方法。但是,Adobe® Flex 的流行度不容忽视。本文将介绍 Adobe Flex Ajax Bridge (FABridge),这是让您可以采用轻松而一致的方法集成 Ajax 与 Flex ... -
Ajax应用的五个步骤
2010-02-26 16:55:00//Ajax应用的五个步骤//1.创建XMLHttpRequest对象var xmlHttp=createXMLHttpRequest();function createXMLHttpRequest(){ var xmlHttp; if(Window.XMLHttpRequest) { //IE6以上版本和其他浏览器内置... -
优化ajax应用执行速度
2016-07-20 23:02:01ajax将大量的计算从服务器端转到了客户端,加大了原本只负责显示的浏览器的负担,而ajax主要的实现...下面是三种对ajax优化应用的方法: 1.优化for循环; 2.将DOM节点附加到文档上; 3.尽量少点“ . ”号操作符的使用。 -
在 Ajax 应用程序上使用 Nagios
2008-09-17 15:41:00在我的一篇有关 Ajax 安全工具(参见 参考资料)的文章中,我推荐了一些增强应用程序的工具,包括 Firefox 工具和插件,用来提高和解决 Ajax 应用程序内部的安全问题。在另一篇有关 “加速 Ajax 应用程序的同时避开 ... -
javascript——ajax应用
2013-12-04 21:26:38AJAX 指异步JavaScript及XML(Asynchronous JavaScript And XML)。Ajax的核心是JavaScript对象XmlHttpRequest。XmlHttpRequest使开发者可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。 创建... -
使用GWT开发AJAX应用程序
2007-02-17 01:17:00使用GWT开发AJAX应用程序一、 引言 如果你是一个Java软件和Ajax开发者,那么,Google Web Toolkit(GWT)应该已经引起你的关注。 Google公司已经于2006年5月在Apache许可协议下发布了这种免费的开发工具包。GWT的... -
ajax(五) Ajax应用:加入购物车
2016-01-13 16:12:45ajax的加入购物车功能应用 页面:index.jsp ; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here $(function(){ var isHasCart = "${sessionScope.sc==nu