AJAX在J2EE中数据交互的应用研究

合集下载

jquery $.ajax 同步调用实现原理

jquery $.ajax 同步调用实现原理jQuery .ajax 同步调用实现原理在前端开发中，经常会涉及到使用Ajax进行异步请求。

而jQuery库中的.ajax()方法是非常常用的一种实现方式。

.ajax()方法使用起来非常方便，可以对数据进行异步请求，并且可以设置回调函数来处理返回的数据。

但是有时候我们需要在请求完成之前进行一些操作，此时可以使用同步调用的方式来实现。

本文将详细介绍使用jQuery .ajax()方法进行同步请求的实现原理。

1. .ajax()方法简介.ajax()是jQuery库中用于发送HTTP请求的核心方法。

它是一个异步方法，可以向服务器发送GET、POST等请求，并处理服务器返回的数据。

.ajax()方法使用一个包含键值对的配置对象作为参数，可以设置请求的地址、请求方式、请求参数、回调函数等。

当请求完成时，可以在回调函数中处理返回的数据。

2. 异步请求与同步请求的区别在讲解实现原理之前，我们先来了解一下异步请求和同步请求的区别：- 异步请求：是指在发送请求的同时，主线程不会阻塞，而是继续执行后续的代码。

当请求完成后，会通过回调函数来处理返回的数据。

异步请求一般使用于需要较长时间才能返回结果的场景，如网络请求、文件上传等。

- 同步请求：是指在发送请求的同时，主线程会一直等待请求的响应结果，而不会继续执行后续的代码。

只有在请求完成后，才会继续执行下面的代码。

同步请求一般使用于需要立即获取结果的场景，如表单提交、页面加载等。

在默认情况下，.ajax()方法是异步请求的，即发送请求后会继续执行后续的代码。

而实现同步请求则需要额外的设置。

3. 同步请求的设置要实现同步请求，可以通过设置.ajax()方法的async选项为false来实现。

async的默认值为true，表示异步请求，当设置为false时表示同步请求。

示例代码：javascript.ajax({url: 'example',async: false,其他配置项...success: function(data) {处理返回的数据}});4. 同步请求的实现原理实现同步请求的关键在于事先知道请求需要的时间，以便正确地进行阻塞。

AJAX在MVC模式中的应用

了用户的浏览体验。 � � � � � � � � 及事件都以对象来展现，比如就代表页 � � � � � � � � � � � � � � � � � � � � � （ 4）通过 XM L （E M L ）， A JAX（ A XM L ）是基于 J J S S J S T 可以规范的定义结构化数据，是网上传输的数据和文档符合统一的标准。用 XM L 表述的数据和文档，可以很容易的让所有程序共享。的工作原理 A JAX 的工作原理如图 1 所示。它相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器，像—些验证和处理等都脚本和 XM L 封装数
引擎处理，只有确定需要从服务器读
到客户端，利用客户端闲置的处理能力来处理，减
取新数据时，才能再由 � AJA 引擎代为向服务器轻服务器和带宽的负担，从而达到节约 J P 的空［2 ］提交请求。这样就把一些服务器负担的工作转嫁间及带宽租用成本的目的。
图1
未使用和使用的
应用比较
� � � � M 层无法实现主动向层发出数据更新 � 架构事件，所以一般常见的成熟 M C 框架中都将经典 � M � � � C 结构源于，它包括模型、视图 M C 理论稍作修改：由M 层处理完业务后通
的核心技术及其工作原理
面对象本身。
据的服务器和客户端的异步交互技术。使用脚本，客户端浏览器中的 H TM L 代码可以对其来源网站发出调用并获得 XM L 文档，这些文档可以被脚本用来修改或添加客户端浏览器页面中的 D OM 对象模型，实现在无刷新（页面重载）的情况下动态更新页面的目的。

什么是Ajax

什么是Ajax
什么是Ajax
Ajax的全称是Asynchronous JavaScript and XML AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。

这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的`网页(不使用 AJAX)如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

直白地说，就是没用AJAX的网页，你点一个按钮就要刷新一下页面，尽管新页面上只有一行字和当前页面不一样，但你还是要无聊地等待页面刷新。

用了AJAX之后，你点击，然后页面上的一行字就变化了，页面本身不用刷。

AJAX只是一种技术，不是某种具体的东西。

不同的浏览器有自己实现AJAX的组件。

Ajax是多种技术的组合，包括我们的JavaScript 异步数据获取技术，就是XMLHttpRequest
以及xml以及Dom还有表现技术XHTML 和CSS
Ajax的核心是XMLHttpRequest 是支持异步请求的技术，可以发送请求给服务器，并且不阻塞用户
在IE浏览器中首次引用，使我们的网络应用更加强大。

其实XMLHttpRequest是JavaScript的一种语法子集，是它的一套API，支持发送GET和POST请求。

该API是Ajax开发的核心，也是现在web技术的核心之一。

通过这些技术，我们无序重新加载网页就可以发送和取回数据，
完成交互.
下载全文。

struts2+json+jquery实现ajax登录和注册功能

在上一篇博文中已经学习了如何整合mybatis和spring，实现持久层的CRUD操作、业务层的事务管理和spring的IoC。

现在我们这个demo的基础上，继续整合struts2，并利用json插件和jquery实现ajax，完成后系统将实现登录与注册的简单功能。

浏览器端如何简单、高效地与服务器端进行数据交互是web开发者最为关心的内容。

在客户端构造intput表单数据或者拼凑URL参数名称/参数值，然后在服务器端笨拙地用request.getParameter(“参数名称”)获取参数显然已经过时了，在struts2中，只要在action 里定义了input表单名称/URL参数名称对应的String类型属性，并设置getter和setter 方法，struts2在调用action的时候就可以根据参数值自动帮你设置好action中对应的属性值供你使用，这极大地方便了开发者。

但是json更为强大——它可以根据浏览器端上传的符合格式的数据设置action中对象的值，也就是说，struts2自动封装的数据只有一层，而json是无限层。

json给页面参数的传递带来极大的方便，结合jquery来使用，可以轻易地做到页面局部刷新、页面无跳转进行友好的系统异常提示等，其中后者是我觉得最有必要做到的一点，在action中定义一个message变量，把action方法执行的结果或者系统异常信息放到里面以json的方式返回给客户端，客户端根据这个变量的结果来进行下一步的操作或者提示系统异常信息，非常地好用。

json由javascript中的对象和数组构成，基本形式是{key:value}，key为属性名称，value 为属性值，value可以为数字、字符串、数组、对象，value可以为数组和对象是json可以封装无限层数据的关键所在。

至于如何建构和解析json不是本篇博文的详细表述范围，请参考其他资料。

现在就让我们利用struts2作为MVC框架，整合json插件，在浏览器端使用jquery解析和系列化json数据，由此制作一个具有登陆/注册功能的小demo。

struts2实现ajax交互

课程目标
了解Struts2中ajax的响应方式(响应text文本、响应json集合) 掌握Struts2和ajax交互的代码规范 Sturts2响应json的代码规范和配置规范
1 / 16
上一课内容回顾
1， 2， 3，
2 / 16
Ajax交互过程回顾
Ajax的原理，简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用 javascript来操作DOM而更新页面。
4 / 16
JavaScript方法举例
var xmlhttp; 参考 function loadXMLDoc(url){ xmlhttp = new XMLHttpRequest(); if(xmlhttp!=null){ xmlhttp.onreadystatechange=state_Change; xmlhttp.open("GET",url,true); xmlhttp.send(null); }else{ alert("Your browser does not support XMLHTTP."); } } function state_Change(){ if (xmlhttp.readyState==4) {// 4 = "loaded" if (xmlhttp.status==200) {// 200 = OK document.getElementById("msg").innerHTML=xmlhttp.responseText; }else{ alert(“Problem retrieving XML data”); JSP页面部分 }}}
Struts2与Ajax交互的步骤

前端和后台接口理解

J2EE下传递数据的方式1.采用JSON数据交换—后台传到前台（用到了SpringMVC框架）如果采用JSON形式来传送数据，一个办法就是利用AJAX和JS/JQUERY的方法去传递。

可以把请求的数据封装到data里面，请求转接到另外一个地方的时候，我们就可以对请求的数据操作了。

比如：前台请求SQL数据到页面进行展示页面加载，响应事件$(function(){var GetGroupsAndCars = function() {$.ajax({url:"/webcar/GetGroups",type:"get",dataType:"json",success:function(data) {groupStore = data.carGroupList;userGroupId = data.groupId;},error:function() {showalert("获取信息失败");}});});对应的请求到了：@RequestMapping({ "/GetGroups" })@ResponseBodypublic GroupsAndCarsResult getGroupsAndCars(HttpServletRequest request) throws Exception{int groupId = erGroup(request);List<CarGroup> carGroupList = this.carInforService.getCarGroupsWithGroupId(groupId);GroupsAndCarsResult result = new GroupsAndCarsResult();result.setCarGroupList(carGroupList);result.setGroupId(groupId);return result;}返回的结果明显是GroupsAndCarsResultde类对象数据，里面包含有成员数据private List<CarGroup> carGroupList;private int groupId;通过SpringMVC的@ResponseBody功能可以直接把类对象打包成JSON数据。

AJAX实验报告

《Ajax课程》实验报告班级：信管B1201学号：学生姓名：实验地点：日期：2015-3-12实验项目(一)：XMLHttpRequest对象实验1.实验内容1．验证课本P181状态栏跑马灯效果。

【将运行结果截图】2．简单Java Applets程序的编写。

【将运行结果截图】3．验证课本P167横幅广告特效。

【将运行结果截图】4．验证附加练习水中倒影特效。

【将运行结果截图】2.实验目的1．掌握JavaScript的特效设置。

2．掌握Java Applets在网页中的应用。

3．掌握内置对象和浏览器对象使用方法。

3.实验要求1．通过对JavaScript基本语句的了解能够实现一些特效效果。

2．通过对Java Applets小程序的掌握能够实现广告横幅效果的实现。

3．通过对Java Applets小程序的掌握能够实现水中倒影效果的实现。

4.程序清单跑马灯效果 <html><body onload="javascript:Scroll()"><script language="JavaScript">today=new Date();var day,date;if( today.getDay()==0)day="星期日";if( today.getDay()==1)day="星期一";if( today.getDay()==2)day="星期二";if( today.getDay()==3)day="星期三";if( today.getDay()==4)day="星期四";if( today.getDay()==5)day="星期五";if( today.getDay()==6)day="星期六";date="今天是"+(today.getYear())+"年"+(today.getMonth()+1)+"月"+today.getDate()+"日"+day+""; document.write(date);var info="欢迎光临我的网站！"; var interval = 1222;sin = 0; function Scroll() { len = info.length; window.status =info.substring(0, sin+1); sin++; if (sin >= len) sin = 0; window.setTimeout("Scroll();", interval); } </script></body></html>Java Applets程序<HTML> <HEAD> <TITLE>动态显示按鈕</TITLE> </HEAD><BODY BACKGROUND="images/bear_3.jpg"><APPLET CODE="fphover.class" CODEBASE="applet/" WIDTH="170" HEIGHT="24"><PARAM NAME="text" VALUE="趴趴熊官方站 (英文版)"> <PARAM NAME="url" VALUETYPE="ref" VALUE="http://www.ingram.co.jp/inter/suama/suama.html"><PARAM NAME="font" VALUE="Helvetica"><PARAM NAME="fontstyle" VALUE="regular"><PARAM NAME="fontsize" VALUE="16"><PARAM NAME="color" VALUE="#FFFF00"><PARAM NAME="textcolor" VALUE="#FF0000"><PARAM NAME="hovercolor" VALUE="#00FF00"><PARAM NAME="effect" VALUE="reverseGlow"></APPLET> </BODY></HTML>横幅广告和水中倒影<div align=center><applet code="fprotate.class" codebase="applet/" width=462 height=60><param name=image1 valuetype=ref value="images/advert_1.gif"><param name=image1 valuetype=ref value="images/advert_1.gif"><param name=image2 valuetype=ref value="images/advert_2.gif"><param name=image3 valuetype=ref value="images/advert_3.gif"><param name=image4 valuetype=ref value="images/advert_4.gif"><param name=image5 valuetype=ref value="images/advert_5.gif"><param name=image6 valuetype=ref value="images/advert_6.gif"><param name=time value=2><param name=url valuetype=ref value=""> <param name=rotatoreffect value=boxin></applet></div><div align=center><applet archive="AnLake.jar" code="AnLake.class" width=280 height=380><param name=credits value="Applet by Fabio Ciucci ()"><param name=regcode value="NO"><param name=reglink value="NO"><param name=regnewframe value="YES"><param name=regframename value="_blank"><param name=statusmsg value="AnLake applet"><param name=res value="1"><param name=image value="a.jpg" ><param name=wavspeed value="30"><param name=perspective value="10"><param name=farwaving value="300"><param name=wind value="10"><param name=windvarval value="5"><param name=windvarmin value="5"><param name=windvarmax value="15"><param name=halfreflect value="NO"><param name=overimgX value="140"><param name=overimgY value="250"><param name=textscroll value="no"><param name=texttype value="zooming"><param name=textvspace value="0"><param name=textminfont value="8"><param name=textmaxfont value="172"><param name=textoffset value="240"><param name=textspeed value="2"><param name=textfont value="Helvetica"><param name=textbold value="NO"><param name=textitalic value="NO"><param name=textsize value="24"><param name=textshadow value="YES"><param name=TextColR value="255"><param name=TextColG value="255"><param name=TextColB value="155"><param name=TextSColR value="20"><param name=TextSColG value="20"><param name=TextSColB value="50"><param name=TextJumpAmp value="0"><param name=TextJumpSpd value="0"><param name=TextSineAmp value="0"><param name=TextSineSpd value="0"><param name=TextSineAngle value="0"><param name=memdelay value="1000"><param name=priority value="3"> <param name=MinSYNC value="10">Sorry, your browser doesn't support Java. </applet></div>5.实验结果运行结果如下：跑马灯效果图：Java Applets程序横幅广告和水中倒影6.实验总结通过这次试验，掌握JavaScript的特效设置，掌握Java Applets 在网页中的应用，掌握内置对象和浏览器对象使用方法。

ajax技术原理

ajax技术原理Ajax是一种用于创建交互式Web应用程序的技术，它可以让Web页面可以在不刷新整个页面的情况下向服务器发送请求并获取数据，然后在页面中动态地显示它们。

Ajax技术是基于多种技术的复杂集成，它涉及到浏览器端JavaScript、DOM、XMLHttpRequest对象、服务器端脚本等多个方面。

本文将针对Ajax技术的原理、工作流程、技术架构等方面进行详细的介绍。

一、Ajax技术的原理Ajax全称为Asynchronous JavaScript and XML，它最初是由Jesse James Garrett提出的一种Web开发技术，Ajax技术的核心思想是使用JavaScript和XMLHttpRequest对象来与服务器异步通信，从而实现页面的更新，而不需要刷新整个页面。

在使用Ajax技术前，Web应用程序需要刷新整个页面，同时每次页面刷新会向服务器发送一次请求，导致页面响应延迟，影响用户体验。

而使用Ajax技术后，浏览器可以只更新部分页面，不需要刷新整个页面，同时可以多次向服务器请求数据。

Ajax技术的原理是基于JavaScript语言，通过JavaScript语法实现浏览器与服务器之间的异步通信。

在Web页面中，我们可以通过JavaScript创建一个XMLHttpRequest对象，然后使用该对象向服务器发送请求并获取数据。

发送的请求类型可以是各种不同的请求类型，比如GET、POST、PUT、DELETE等。

服务器接收到请求后，会对请求进行处理，并将响应数据返回给浏览器。

浏览器接收到响应数据后，就可以将其显示到页面中，完成页面的更新，而不需要刷新整个页面。

二、Ajax技术的工作流程Ajax技术的工作流程是由浏览器端和服务器端两部分组成。

浏览器端负责通过JavaScript创建XMLHttpRequest 对象，然后向服务器发送HTTP请求。

在服务器端，接收到HTTP请求后，服务器会根据请求类型进行相应的处理，然后将处理结果返回给浏览器。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

ＨＵｅ．ｕＺＨ０Ｕｎ．ＬＺｈｎｈａ．ＢｉＥＮＧｅ．ａＷｎｈｏ
（．ＳｈｏｆｎｏｍａｉｎＴｃｎｌｇｏｔｅｎＹａｇｚｉｅｓｔ，Ｗｕｉ２１ｃｏｌｆｒｔｅｈｏｏｙＳｕｈｒｎｔｅｖｒｉｏＩｏＵｎｙｘ１１，Ｃｈｎ；２４２ｉａ
ＡＡＪｘ在ＪＥ２Ｅ中数据交互的应用研究
胡振华周斌冷文浩，，
１０２（．江南大学信息工程学院，江苏无锡２４２；２１１１２．中国船舶科学研究中心，江苏无锡２４８）
摘要：目前ＡＡ已经成为了Ｗｅ应用的主流开发技术，Ｊｘｂ大量的业界巨头已经采纳并且在大力推动这个技术的发展。虽然它只是几项已有技术的组合，却打破了使用页面重载技术的常规组合，实现无需刷新整个页面就可以动态更新页面中一但部分的文本内容。在介绍ＡＪｘ技术和ＪＥＡ２Ｅ框架的基础上，重点讲述了ＡＡＪｘ技术在ＪＥ２Ｅ框架的ＭＶＣ模型中的数据交互方面的应用，加入ＡＡＪｘ技术后使传统的基于ＪＥ２Ｅ框架开发的企业级Ｗｅ应用程序的运行效果更接近于桌面应用９１２
第１期２
ＮＯ．２１
计算机工程与设计
ＣｏｕｅｎｉｅｒｇａｄＤｅｉｎｍｐｔｒＥｇｎｅｉｎｓｇｎ
２０年６０８月
Ｊｅ２０ｕｎ０８
２ＣｉａｈｐＳｉｔｃｅｅｃｅｔｒＷｕｉ０２Ｃｉ）．ｈｎｉｃｎｉｓａｈＣｎｅＳｅｆＲｉｒ，ｘ１８，ｈａ２４ｎ
ＡｂｔａｔＣｕｒｎｌｅＡＪｓｒｃ：ｒｅｔｔＡＸａｌａｙｂｃｍｅｔｅｍｏｔｓｅｉｌｅｅｏｍｅｔｅｈｉｕｆｂａｐｉａｉｎｐｏｒｍ．Ａｅｔｅｌｙｈｈｓａｒｄｅｏｓｓｎａｖｌｐｎｃｎｑｅｏｗｅｐｌｔｒｇａｅｈｅｔｄｔｃｏｒｇａａｄ
ｔｈｏｏｙｗｉｐａｉｉＪＥｅａｅｅｎｌｇｔｅｈｓＥｉｔｍｃｈｍｓ２ｎｈｆｎｒＭＶＣｍｏｅａｏｔａｔａｔｅｓｅｔｐｌａｏａｒｔｄｄｌｂｕｄｔｉｅｃｉｐｃａｐｉｔｎｉｎｒｅ．Ａ￣ｒｏｎｄｈＪａｎｒｖａｃｉｓａｅｊｉｅｅＡｔＡＸ
ｔｃｏｏ，ｗｈｃｎｂｅｅｔｄｔｎａｐｉａｉｎｐｏｅｕｅＳｒｎｉｇｅｅｔａｅｎＪＥＥｆａｗｏｋｄｖｌｐｅｔｒｒｓｂａｐｉｅｈｌｇｎｙｉｈｅａｌｓｈａｉｏｐｌｔｒｃｄｒ ’ ｕｎｎｆｃｓｄｏ２ｍｅｒｅｅｏｎｅｐｉｅｗｅｐｌｔｒｉｃｏｂｒ — ｃｔｎｐｏｅｕｅｔｅｔｐｒａｈｔｅｔｂｅｏｐｌａｉｎｐｏｅｕｅａｉｒｃｄｇａｌａｐｏｃｌｔｐａｐｉｔｏｒｃｄｒ．ｏｒｏｒｙｈａｃＫｅｒｓＡＪｃｏｏ；ＪＥａｗｏｋＭＶＣｍｏｅ；ｄｔｔｒｃｉｎｗｅｐｌａｉｎｐｏｅｕｅｙｗｏｄ：ＸＡｔｈｌｇｅｎｙ２Ｅｆｍｅｒ；ｒｄｌａａｉｅａｔ；ｎｏｂａｐｉｔｒｃｄｃｏｒ
ｏｉｔｈｓｌａｙａｏｔｄａｄｐｓｅｉｔｈｉａｄｖｌｐｎｒｎｌｆＴｇａｓａｒｄｄｐｅｕｈｄｈｓｅｎｃｌｅｅｏｍｅｔｔｇｙＩｎａｅｎｔｃｓｏ．Ａｌｏｇｅｕｔｅｏｉｔｎｏｖｒｌｘｓｎｔｕｈｉｂｓｔｍｂａｉｆｅｅａｅｉｉｇｈｔｊｃｈｎｏｓｔ
ｔｃｏｏｉｓｉｂｅｋｔｅｃｎｅｔｏａｏｉａｉｎｏｕｉｇｐｇｖｒｏｄｄｔｃｉｕ，ｗｈｃｌｂｏｓｌｙａｃｕｄｔａｔｅｈｌｇｅ，ｔｒａｏｖｎｉｎｌｍｂｎｔｆｓｎａｅｏｅｌａｅｈｑｅｎｈｃｏｅｎｉｈｗｉｅｐｓｉｅｏｄｎｍｉｐａｅｐｒｌｂｔｓｏａｅｃｎｅｔｎｔｏｒｎｖｔｅｅｉａｅＴｅｆｕｄｔｎｏｃｎｑｅｏＡＸｄＪＥａｗｏｋｉｉｔｄｃｄｔｅＡＪＸｆｐｇｏｔｎ，ｏｏａｅｔｎｒｐｇ．ｈｏｎａｉｆｅｈｉｕｆｔｅｈｔｅｏｔＡＪｎａ２Ｅｆｍｅｒｒｕｅ，ｈＡｒｓｎｏ
关键词：Ｊｘ技术；ＪＥＡＡ２Ｅ框架；ＭＶＣ模型；数据交互；Ｗｅ应用程序ｂ
中图法分类号：ＰｌＴ３１
文献标识码：Ａ
文章编号：００７２（０８１—１２０１０ —０４２０）２３０ —４
ＡｐｌａｉｎｏＡＸ２ｂｕａａｉｔｒｃｉｎｐｉｔｏｆｃＡＪｉＪＥＥａｏｔｔｅａｔｎｄｎｏ