首先,我们理解下AJAX的英文含义,AJAX就是(Asynchronous JavaScript And XML),其中文意思就是异步的java脚本语言与XML技术的整合。
我们理解下什么是异步(Asynchronous),我撇开单调的概念来给大家举个例子,异步就是当你点击页面上的某个按钮或出发某事件,向服务器发出请求之后,不必等待服务器的响应而可以继续进行后续的操作。如果是同步的话,你点下按钮,直到服务器响应之前,按钮是陷下去的,整个页面也是冻结的,服务器响应完毕后,按钮才弹起来,你方可进行下面的操作。再往理论想说,就是我们所处的发出请求的线程和处理请求的线程是独立的,不相互干扰。这也决定着我们的请求是有序的,但处理结果是乱序的。
那么我再来理解下AJAX的工作流程吧。
首先是JS事件委托XMLHttpRequest对象向AJAX引擎发送异步请求,调用后台的服务器程序进行处理,然后服务起程序把处理的结果放在Response对象中以不同的格式(可以是ResponseText,ResponseXML等)返回给客户端,由AJAX引擎自动调用JS中定义好的回调函数,回调函数将把返回的数据展示给页面。这里默默无闻的工作者是AJAX引擎,它把请求和处理分离开了,让其各自处于独立的线程,从而是页面上的操作得以继续进行。
再看看如何来实现吧。
首先我们来自己手工编写前端的JS,示例代码如下:
<html>
<head>
<script>
var xhr;
function createXHR()
{
if(window.ActiveXObject)
{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
return;
}else if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
return;
}
}
function SendAjaxRequest()
{
createXHR();
xhr.onreadystatechange=callBack;
//false,发同步请求
//true,发异步请求
xhr.open("get","xml.jsp",true);
//模拟表单发送数据,设置头文件的文本类型。
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xhr.send("name=zhangsan&password=zhangsan");
}
function callBack()
{
if(xhr.readyState == 4 && xhr.status == 200)
{
var result=xhr.responseText;
//执行纯文本的js
eval(xhr.responseText);
alert(result);
document.getElementById("resultDiv").innerHTML=result;
if(result)
{
alert("success");
}
else
{
alert("fail");
}
}
}
function update(result1,result2)
{
document.getElementById("resultDiv").innerHTML=result1;
document.getElementById("resultDiv2").innerHTML=result2;
}
</script>
</head>
<body>
<input type="button" value="AjaxDemo"onclick="SendAjaxRequest()">
<div id="resultDiv">
</div>
<hr />
<div id="resultDiv2">
</div>
<input type="button" value="Demo" onclick="z()">
</body>
</html>
我们再来编写处理AJAX请求的JSP,代码如下:
<jsp:directive.page contentType="text/plain"/>
<%
String username=request.getParameter("name");
String password=request.getParameter("password");
%>
update("<%=username%>","<%=password%>");
注意:我们在这个JSP的contentType中设置为纯文本的,那么他返回的ResponseText的信息就是字符串“update("<%=username%>","<%=password%>")”,在AJAX引擎调用回调函数的时候,就可以通过eval(xhr.responseText);来执行里面的js了。
通过上面的代码可以实现响应后,影响页面多出位置发生变化,你看,这里的两个层里的内容均通过js函数update(result1,result2)改变了。
上面介绍的是我们手工打造的AJAX,那么在J2EE中广泛流行的ajax框架比较典型的就是DWR框架,原理和我们手工打造的基本一样,但用起来功能更强大。
首先来说下DWR的使用吧。
第一,导入DWR.jar进入工程。
第二,在web.xml中配置DWRServlet,来监听所有DWR请求.
web.xml配置
<servlet>
<servlet-name>dwr</servlet-name>
<servlet-class>
org.directwebremoting.servlet.DwrServlet
</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
第三,编写好基本的JS,并指定我们的js请求交给DWR框架处理。
<html>
<head>
<scripttype='text/javascript'src='/AjaxParamDemo/dwr/interface/DWRDemo.js'></script>
<script type='text/javascript'src='/AjaxParamDemo/dwr/engine.js'></script>
<scripttype='text/javascript'src='/AjaxParamDemo/dwr/util.js'></script>
<scripttype="text/javascript">
//javabean测试
function DWRtest(){
var para={param1:204,param2:"21"};
DWRDemo.get(para);
}
//测试集合
function DWRtestList(){
varlist=newArray();
list[0]="123";
list[1]="456";
DWRDemo.setList(list);
}
</script>
</head>
<body>
<inputtype="button"value="测试javabean"onclick="DWRtest()">
<inputtype="button"value="测试集合"onclick="DWRtestList()">
</body>
</html>
第四,编写java类
package org.dwr.test;
import java.util.List;
/**
* DWR框架测试
*/
public class DWRDemo {
/**
* JavaBean测试
* @param param
* @return
*/
public String get(Param param) {
System.out.println(param.getParam1() +"\t" + param.getParam2());
String rs ="通过测试";
return rs;
}
/**
* 集合测试
* @param list
* @return
*/
public String setList(List list) {
System.out.println(list.get(0));
return "";
}
}
第五,配置好DWR.xml ,我们稍后为大家介绍里面的简单配置。
<?xmlversion="1.0"encoding="UTF-8"?>
<!DOCTYPEdwrPUBLIC"-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN""http://getahead.org/dwr/dwr20.dtd">
<dwr>
<allow>
<!-- 指定javascript中可以访问的java类-->
<!--creator= "new"属性指定java类实例的生成方式-->
<create javascript="DWRDemo"creator="new">
<!-- 参数是类 -->
<param name="class"value="org.dwr.test.DWRDemo"/>
<!-- 方法 -->
<include method="get"/>
<!-- 方法 -->
<include method="setList"/>
</create>
<!-- JavaBean参数使用配置 -->
<convert match="org.dwr.test.Param" converter="bean">
<!-- 参数是value是JavaBean的属性,可以不写,默认为全部 -->
<param name="include" value="param1,param2"/>
</convert>
</allow>
<!-- 参数集合List配置 -->
<signatures>
<![CDATA[
import java.util.List;
org.dwr.test.DWRDemo;
DWRDemo.setList(List);
]]>
</signatures>
</dwr>
DWR的优点是什么呢,它可以把我们的后台业务类中的方法映射到前端的js上,这简直是大家都想要的结果,呵呵。
那么如何映射,关键在乎DWR.xml的配置了。
DWR还可以和Spring整合,我的尊师说过,他们俩整的最好了,呵呵。其配置也挺简单的。以下配置信息引用老师的总结:
1、当JSP页面的Ajax调用业务层方法时,业务需要DAO层对象,而DAO层对象我们是通过spring来注入的,如果我们直接用DWR暴露给js的对象去调用业务的方法时,就会出现错误。因为业务类DAO对象是空的。这时我们就要通过DWR整合的SPRING的形式来加载对象。
2、要用到SRPING的东西,就是必须加载SPRING的配置文件(applicationContext.xml),在这里我们通过服务启动时去加载,所以要配置修改web.xml文件。在原来的基础上添加以下配置:
<!--- 这个就是用来加载SPRING配置文件的---->
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>
/WEB-INF/classes/applicationContext.xml
</param-value>
</context-param>
<listener>
<listener-class>
org.springframework.web.context.ContextLoaderListener
</listener-class>
</listener>
<!--- 这个是DWR本身的配置--->
<servlet>
<servlet-name>dwr</servlet-name>
<servlet-class>
org.directwebremoting.servlet.DwrServlet
</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
3、SPRING 的配置不变,一样给业务类注入DAO对象
<bean id="bidbiz" class="com.byz.bizimpl.BidImpl">
<property name="biddao">
<ref local="BidDAO"/>
</property>
<property name="goodsdao">
<ref local="GoodsDAO" />
</property>
<property name="userdao">
<ref local="UsersDAO" />
</property>
</bean>
4、DWR配置文件配置,这时我们需要将原先的creator="new" DWR去实例对象的,现在要改为creator="spring" 由spring注入进来。 Dwr这有个参数 <param name="beanName" value="spring对象"/> 这个可以将对象接收到。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr/dwr20.dtd">
<dwr>
<allow>
<create javascript="BidImpl" creator="spring"
scope="application">
<!-- <param name="class" value="com.byz.bizimpl.BidImpl" /> -->
<!-- 将Spring中的对象给到参数 -->
<param name="beanName" value="bidbiz" />
<include method="add" />
</create>
</allow>
<!-- 参数集合配置 -->
<signatures>
<![CDATA[
import java.util.List;
com.byz.bizimpl.BidImpl;
BidImpl.add(List);
]]>
</signatures>
</dwr>
这就是我眼里的AJAX,希望能给大家带来一些帮助。
- 大小: 16.7 KB
分享到:
相关推荐
AJAX简介 AJAX代表了异步JavaScript+XML。这种技术首先由微软在1999年引入,并以"使用远程调用的DHTML/JavaScript web应用程序"著称。这一技术的基本思想是,允许一个互联网浏览器向一个远程页面/服务作异步的HTTP...
javascript是一种在浏览器端执行的脚本语言,Ajax是一种创建交互式网页应用的开发技术 ,它是利用了一系列相关的...以上这篇浅谈Ajax和JavaScript的区别就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望
下面小编就为大家带来一篇浅谈Ajax请求与浏览器缓存。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
下面小编就为大家带来一篇浅谈ajax请求技术。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
下面小编就为大家分享一篇浅谈ajax请求不同页面的微信JSSDK问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
下面小编就为大家分享一篇浅谈ajax在jquery中的请求和servlet中的响应,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
ajax (ajax开发) AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。 AJAX 是一种用于...
AJAX,即Asynchronous Javascript And XML,可实现无刷新状态更新页面和异步提交 优点: 不需要插件支持 用户体验极佳 提升Web程序性能 减轻服务器和宽带的负担 缺点: 前进后退按钮被破坏 搜索引擎的支持不够 开发...
Ajax的缓存机制和浏览器处理资源时的缓存机制是一样的。 三条简单规则: 只要是URL相同的GET请求,浏览器会使用缓存(当然还要看服务器的Cache-Control/Expires/Last-Modified/ETag头的设置)。 只要是POST请求,...
Ajax技术的出现将基于Web的应用程序开发带进了一个全新的阶段,但Ajax主要是基于JavaScript的客户端技术,所以客户端的开发显得越来越臃肿,随之而来的安全性等一系列问题有待进一步研究。
AJAX(Asynchronous JavaScript and XML,异步JavaScript和XML),AJAX并不是一项新的技术,它产生的主要目的是用于页面的局部刷新,从之前的代码开发来看,读者可以发现,每当用户向服务器端发出请求时,那怕需要的...
主要介绍了Ajax跨域Session和跨域访问的相关问题,以及需要注意的地方,这里推荐给大家