作为J2EE开发人员,我们经常关注“后端机制(backend mechanics)”。我们通常会忘记J2EE成功之处在于WEB应用程序方面。许多原因使得人们喜欢利用WEB开发应用程序,但主要原因还是因为其易于部署的特点,允许站点以尽可能底的成本拥有上百万的用户。我们在后端投入太多的精力,使得我们在WEB用户界面对用户的相应灵敏方面投入不足。
本文介绍一种方法,Ajax,使用它可以构建更加更为动态和响应更加灵敏的Web应用程序。该方法的关键在于对浏览器端的JavaScript、DHTML和与服务器异步通讯的组合。Ajax用来描述一组技术,它使浏览器可以为用户提供更为自然的浏览体验。在Ajax之前,Web站点强制用户进入提交/等待/重新显示范例。用户的动作总是与服务器的“思考时间”同步。Ajax提供了与服务器异步通讯的能力,从而使用户从请求/响应的循环中解脱出来。借助Ajax,用户可以在单击按钮时,使用JavaScript和DHTML立即更新UI,并向服务器发出异步请求,以执行查询或更新数据库。当请求返回时,可以利用JavaScript和CSS来相应的更新UI而不是刷新整个页面。
定义Ajax,Ajax不是一种新技术,而是几种蓬勃发展的几种强大技术以新的方式组合而成,Ajax包括:基于XHTML和CSS标准的表示;使用Document Object Model进行动态的显示和交互;使用XML Request与服务器进行异步通讯;使用JavaScript绑定一切。
Ajax的工作原理,Ajax的核心是JavaScript和XMLHttpRequest。该对象在Internet Explorer5中首次引入,它是一种支持异步请求的技术。简单的说:XmlHttpRequest使你可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。在创建Web站点时,在客户端执行屏幕更新为用户提供了很大的灵活性能。下面是使用Ajax完成的功能:1、动态更新购物车的物品总数,无需用户单击Update并等待服务器发送整个页面。2、提升站点的性能,这是通过减少从服务器下载的数据量来实现的。例如:当更新购物车一个物品的数量时,会重新载入整个页面,这必须下载32K的数据,而使用Ajax计算新的总量,服务器只需要返回新的总量值,因此所需要的带宽仅仅为原来的百分之一。3、消除了用户每次输入时的页面刷新。例如,在Ajax中,如果用户在分页列表上单击Next,则服务器数据只刷新列表而不是整个页面。
从Ajax的序列的起点开始,创建和分派来自浏览器的XMLHttpRequest。但不同的浏览器创建XMLHttpRequest的方法各不相同。下列JavaScript的代码,可以检测出浏览器要使用的正确方法,并返回一个可以使用的XMLHttpRequest。
<script language="JavaScript">
<!--
//定义xmlHttp全局对象
var xmlHttp = null;
//根据不同浏览器创建方法的不同进行区分,确定xmlHttp对象的顺利创建
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new window.ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttp = new window.XMLHttpRequest();
}
}
//定义一个函数,可以让JS脚本可以去动态的访问后台的代码
function queryMess(){
//定义一个要查询所需要的参数
var jrnl_id = document.getElementById("jrnl_id").value;
if(jrnl_id==""){
return ;
}
//定义JS脚本要访问的地址,从访问的地址获取数据来源
var url = "../jsp/gywork/getInfo.jsp?user_id="+jrnl_id;
//调用创建xmlHttp对象的函数,来创建一个对象
this.createXMLHttpRequest();
//事先给xmlHttp对象获取数据返回后一个处理数据的函数,即:回调函数
//xmlHttp.onreadystatechange属性,是xmlHttp对象的状态改变所触发事件的事件处理程序
xmlHttp.onreadystatechange = dealDate;
//调用xmlHttp对象去访问地址,或后台内容获取数据
xmlHttp.open("GET",url,true);
//xmlHttp.send(null);用来发送信息参数,是对于发送方法为post,若发送请求的方法为get
//则发送的内容为null,xmlHttp.open("POST","login",true);发送请求的地址信息方式为
//XMLHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send(null);
}
//定义一个回调函数,用作xmlHttp对象获取数据后进行处理的操作
function dealDate(){
/*xmlHttp.readyState属性,是xmlHttp对象的对象状态值,0表示未初始化,1表示正在加载,
2表示加载完毕,3表示开始进行交互,4表示整个处理完成
*/
if(xmlHttp.readyState == 4){
/*xmlHttp.status从服务器返回的数字代码,404表示未找到,200表示就绪,不管是否获取
到数据,200表示已经顺利完成访问服务器后,顺利返回未发生异常
*/
if(xmlHttp.status == 200){
/*数据返回后可以使用xmlHttp.responseText属性获取数据,但是xmlHttp.responseText
返回的是一个字符串,对于比较复杂的数据结构可以利用xmlHttp.responseXML属性来进行
处理数据,如果返回值是一条记录,则可以处理数据的XML样式为:
<?xml version="1.0" encoding="gb2312" ?>
<result>根节点
<username>sa</username>子节点
<userid>23</username>子节点
</result>
可以根据节电名称来获取节点值,例如:*/
var responseXML = xmlHttp.reponseXML;
var username = responseXML.getElementsByTagName("username")[0].firstChild.nodeValue;
var userid = responseXML.getElementByTagName("userid")[0].firstChild.nodeValue;
/*
若返回值为一组数据,则可以处理数据的XML样式为:
<? xml version="1.0" encoding="gb2312" ?>
<result>根节点
<users>子节点
<name>sa</name>
<id>12</id>
</users>
<users>
<name>ss</name>
<id>22</id>
</users>
</result>对XML进行解析来获取数据
*/
var responseXML = xmlHttp.reponseXML;
//获取根节点,获取根节点的节点名称:var domName = responseXML.documentElement.tagName;
var xmldom = responseXML.documentElement;
var len = xmldom.childNodes.length;
for(var i=0;i<len;i++){
var child = xmldom.childNodes.item(i);//根据根节点的长度,遍历创建子节点对象child
for(var j=0;j<child.childNodes.length;j++){ //相当于users节点
var node = child.childNodes.item(j);
document.writeln(node.tagName+"||"+node.text);
}
}
/*
打印结果为:
sa || 12
ss || 22
*/
}
}else{
alert("获取数据发生错误!");
}
}
//-->
</script>
页面所请求得Jsp页面源代码如下,其中包括如何处理运算后得到的结果集:
<%@ page contentType="text/html;charset=gb2312" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.Map" %>
<%@ page import="com.yc.ycportal.blockimp.service.CommonService" %>
<%@ page import="com.yc.ycportal.util.GetRaq"%>
<%
response.setContentType("text/xml");
String userId = request.getParameter("userId");
String organ = new GetRaq(session).getParamid();
//Create the response XML
if (userId != null && !"".equals(userId.trim())) {
List gyList = CommonService.getInstance().getDynamicTable("select * from dic_counter where counter_id='" + userId + "' and organ_id='"+organ+"'");
if (gyList != null && gyList.size() == 1) {
Map gyMap = (Map) gyList.get(0);
String gyName = (String) gyMap.get("COUNTER_NAME");//柜员姓名
String organId = (String) gyMap.get("ORGAN_ID");//柜员所属行号
List organList = CommonService.getInstance().getDynamicTable("select * from dic_organ where organ_id='31" + organId + "'");
if( organList != null && organList.size() == 1) {
Map organMap = (Map) organList.get(0);
String organName = (String) organMap.get("ORGAN_NAME");//获取柜员所属行名
//组织需要返回的xml
StringBuffer xml = new StringBuffer("<?xml version=\"1.0\" encoding=\"gb2312\" ?><result><queryResult>success</queryResult><name>").append(gyName).append("</name><bank_id>").append(organId).append("</bank_id><bank_name>").append(organName).append("</bank_name></result>");
//Send the response back to the browser
response.getWriter().write(xml.toString());
}else{
response.getWriter().write("<result><queryResult>failed</queryResult></result>");
}
}else{
response.getWriter().write("<result><queryResult>failed</queryResult></result>");
}
}else{
response.getWriter().write("<result><queryResult>failed</queryResult></result>");
}
%>
本文介绍一种方法,Ajax,使用它可以构建更加更为动态和响应更加灵敏的Web应用程序。该方法的关键在于对浏览器端的JavaScript、DHTML和与服务器异步通讯的组合。Ajax用来描述一组技术,它使浏览器可以为用户提供更为自然的浏览体验。在Ajax之前,Web站点强制用户进入提交/等待/重新显示范例。用户的动作总是与服务器的“思考时间”同步。Ajax提供了与服务器异步通讯的能力,从而使用户从请求/响应的循环中解脱出来。借助Ajax,用户可以在单击按钮时,使用JavaScript和DHTML立即更新UI,并向服务器发出异步请求,以执行查询或更新数据库。当请求返回时,可以利用JavaScript和CSS来相应的更新UI而不是刷新整个页面。
定义Ajax,Ajax不是一种新技术,而是几种蓬勃发展的几种强大技术以新的方式组合而成,Ajax包括:基于XHTML和CSS标准的表示;使用Document Object Model进行动态的显示和交互;使用XML Request与服务器进行异步通讯;使用JavaScript绑定一切。
Ajax的工作原理,Ajax的核心是JavaScript和XMLHttpRequest。该对象在Internet Explorer5中首次引入,它是一种支持异步请求的技术。简单的说:XmlHttpRequest使你可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。在创建Web站点时,在客户端执行屏幕更新为用户提供了很大的灵活性能。下面是使用Ajax完成的功能:1、动态更新购物车的物品总数,无需用户单击Update并等待服务器发送整个页面。2、提升站点的性能,这是通过减少从服务器下载的数据量来实现的。例如:当更新购物车一个物品的数量时,会重新载入整个页面,这必须下载32K的数据,而使用Ajax计算新的总量,服务器只需要返回新的总量值,因此所需要的带宽仅仅为原来的百分之一。3、消除了用户每次输入时的页面刷新。例如,在Ajax中,如果用户在分页列表上单击Next,则服务器数据只刷新列表而不是整个页面。
从Ajax的序列的起点开始,创建和分派来自浏览器的XMLHttpRequest。但不同的浏览器创建XMLHttpRequest的方法各不相同。下列JavaScript的代码,可以检测出浏览器要使用的正确方法,并返回一个可以使用的XMLHttpRequest。
<script language="JavaScript">
<!--
//定义xmlHttp全局对象
var xmlHttp = null;
//根据不同浏览器创建方法的不同进行区分,确定xmlHttp对象的顺利创建
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new window.ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttp = new window.XMLHttpRequest();
}
}
//定义一个函数,可以让JS脚本可以去动态的访问后台的代码
function queryMess(){
//定义一个要查询所需要的参数
var jrnl_id = document.getElementById("jrnl_id").value;
if(jrnl_id==""){
return ;
}
//定义JS脚本要访问的地址,从访问的地址获取数据来源
var url = "../jsp/gywork/getInfo.jsp?user_id="+jrnl_id;
//调用创建xmlHttp对象的函数,来创建一个对象
this.createXMLHttpRequest();
//事先给xmlHttp对象获取数据返回后一个处理数据的函数,即:回调函数
//xmlHttp.onreadystatechange属性,是xmlHttp对象的状态改变所触发事件的事件处理程序
xmlHttp.onreadystatechange = dealDate;
//调用xmlHttp对象去访问地址,或后台内容获取数据
xmlHttp.open("GET",url,true);
//xmlHttp.send(null);用来发送信息参数,是对于发送方法为post,若发送请求的方法为get
//则发送的内容为null,xmlHttp.open("POST","login",true);发送请求的地址信息方式为
//XMLHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send(null);
}
//定义一个回调函数,用作xmlHttp对象获取数据后进行处理的操作
function dealDate(){
/*xmlHttp.readyState属性,是xmlHttp对象的对象状态值,0表示未初始化,1表示正在加载,
2表示加载完毕,3表示开始进行交互,4表示整个处理完成
*/
if(xmlHttp.readyState == 4){
/*xmlHttp.status从服务器返回的数字代码,404表示未找到,200表示就绪,不管是否获取
到数据,200表示已经顺利完成访问服务器后,顺利返回未发生异常
*/
if(xmlHttp.status == 200){
/*数据返回后可以使用xmlHttp.responseText属性获取数据,但是xmlHttp.responseText
返回的是一个字符串,对于比较复杂的数据结构可以利用xmlHttp.responseXML属性来进行
处理数据,如果返回值是一条记录,则可以处理数据的XML样式为:
<?xml version="1.0" encoding="gb2312" ?>
<result>根节点
<username>sa</username>子节点
<userid>23</username>子节点
</result>
可以根据节电名称来获取节点值,例如:*/
var responseXML = xmlHttp.reponseXML;
var username = responseXML.getElementsByTagName("username")[0].firstChild.nodeValue;
var userid = responseXML.getElementByTagName("userid")[0].firstChild.nodeValue;
/*
若返回值为一组数据,则可以处理数据的XML样式为:
<? xml version="1.0" encoding="gb2312" ?>
<result>根节点
<users>子节点
<name>sa</name>
<id>12</id>
</users>
<users>
<name>ss</name>
<id>22</id>
</users>
</result>对XML进行解析来获取数据
*/
var responseXML = xmlHttp.reponseXML;
//获取根节点,获取根节点的节点名称:var domName = responseXML.documentElement.tagName;
var xmldom = responseXML.documentElement;
var len = xmldom.childNodes.length;
for(var i=0;i<len;i++){
var child = xmldom.childNodes.item(i);//根据根节点的长度,遍历创建子节点对象child
for(var j=0;j<child.childNodes.length;j++){ //相当于users节点
var node = child.childNodes.item(j);
document.writeln(node.tagName+"||"+node.text);
}
}
/*
打印结果为:
sa || 12
ss || 22
*/
}
}else{
alert("获取数据发生错误!");
}
}
//-->
</script>
页面所请求得Jsp页面源代码如下,其中包括如何处理运算后得到的结果集:
<%@ page contentType="text/html;charset=gb2312" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.Map" %>
<%@ page import="com.yc.ycportal.blockimp.service.CommonService" %>
<%@ page import="com.yc.ycportal.util.GetRaq"%>
<%
response.setContentType("text/xml");
String userId = request.getParameter("userId");
String organ = new GetRaq(session).getParamid();
//Create the response XML
if (userId != null && !"".equals(userId.trim())) {
List gyList = CommonService.getInstance().getDynamicTable("select * from dic_counter where counter_id='" + userId + "' and organ_id='"+organ+"'");
if (gyList != null && gyList.size() == 1) {
Map gyMap = (Map) gyList.get(0);
String gyName = (String) gyMap.get("COUNTER_NAME");//柜员姓名
String organId = (String) gyMap.get("ORGAN_ID");//柜员所属行号
List organList = CommonService.getInstance().getDynamicTable("select * from dic_organ where organ_id='31" + organId + "'");
if( organList != null && organList.size() == 1) {
Map organMap = (Map) organList.get(0);
String organName = (String) organMap.get("ORGAN_NAME");//获取柜员所属行名
//组织需要返回的xml
StringBuffer xml = new StringBuffer("<?xml version=\"1.0\" encoding=\"gb2312\" ?><result><queryResult>success</queryResult><name>").append(gyName).append("</name><bank_id>").append(organId).append("</bank_id><bank_name>").append(organName).append("</bank_name></result>");
//Send the response back to the browser
response.getWriter().write(xml.toString());
}else{
response.getWriter().write("<result><queryResult>failed</queryResult></result>");
}
}else{
response.getWriter().write("<result><queryResult>failed</queryResult></result>");
}
}else{
response.getWriter().write("<result><queryResult>failed</queryResult></result>");
}
%>