Java EE中Ajax技术简单实现

一、Ajax技术介绍

　　Ajax实际上并不是新技术，而是几个老技术的融合。

Ajax包含以下五个部分：

　　1.异步数据获取技术，使用XMLHttpRequest.

　　2.基于标准的表示技术，使用XHTML与CSS.

　　3.动态显示和交互技术，使用Document Object Model（文档对象模型）。

　　4.数据互换和操作技术，使用XML与XSLT.

　　5.JavaScript,将以上技术融合在一起。

　　其中，异步数据获取技术是所有技术的基础。

二、简单案例

假如在欢迎页面上有一个按钮，点击后能够显示注册的个人信息。方法如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><body><SCRIPT LANGUAGE="JavaScript">function showInfo(){window.location ="info.jsp";}</SCRIPT>欢迎来到本系统。<HR><input type="button" value="显示个人信息"  onClick="showInfo();">
</body></html>

个人信息在另一个网页内，代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>地址：甘肃兰州<BR>电话：010-1111111<br>姓名：吴先森<br>性别：男<br>家庭住址：甘肃兰州<br>
</html>

此时用户在点击“显示个人信息按钮”之后可以看到，界面上进行了整个界面的刷新，浏览器的地址栏也发生了改变。如果服务器反应慢，用户则会面临着长时间空白界面的等待。

下面就让我们来使用Ajax来完成该功能，其中info.jsp不变，主要是对welcome1.jsp的修改。首先编写一段短小的Ajax代码，然后进行解释。注意，一定要保证自己的浏览器是IE.如果不是IE,从后面的篇幅会得到解决办法。下面是Ajax实现的代码：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><body><SCRIPT LANGUAGE="JavaScript">function showInfo(){var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");//步骤一xmlHttp.open("get", "info.jsp", true);//步骤二xmlHttp.onreadystatechange = function()//步骤三{if (xmlHttp.readyState === 4)//步骤四{infoDiv.innerHTML = xmlHttp.responseText;}};xmlHttp.send();//步骤五}</SCRIPT>欢迎来到本系统。 <HR><input type="button" value="显示个人注册信息" onClick="showInfo()"><div id="infoDiv"></div></body></html>

此时，在点击“显示个人注册信息”按钮之后，我们能够看到如下图所示界面，而不会进行整个界面的刷新，浏览器地址栏没有任何变化。言下之意，如果服务器反应缓慢，没关系，welcome1.jsp没有刷新，用户还能够在此时浏览页面剩余的部分，不至于在空白页面上等待。

3、详细介绍

从welcome1.jsp中可以看出，点击按钮之后，触发了JavaScript的showInfo函数，该函数内包含了实现Ajax的程序需要5个步骤：

步骤1:在IE中实例化Msxml2.XMLHTTP对象：

var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");//步骤一

Msxml2.XMLHTTP是IE浏览器内置的对象，该对象具有异步提交数据和获取结果的功能。如果不是IE浏览器，实例化方法如下：

　　<SCRIPT LANGUAGE="JavaScript">var xmlHttp=new XMLHttpRequest();//Mozilla等浏览器</SCRIPT>

其他浏览器的写法可以查看相应文档，因为不同浏览器都有相应的内置对象。在此推荐一个编程框架：

　　<SCRIPT LANGUAGE="JavaScript">var xmlHttp = false;function initAjax(){if(window. XMLHttpRequest){ //Mozilla等浏览器xmlHttp=new XMLHttpRequest();}else if（window.ActiveXObject）{ //IE浏览器try{xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}catch(e){try{xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}catch(e){window.alert("该浏览器不支持Ajax");}}}}</SCRIPT>

当然，可以在网页载入时运行该函数：

<html>　　
<body onLoad="initAjax()">　　……　</html>

步骤2:指定异步提交的目标和提交方式，调用了xmlHttp的open方法：

xmlHttp.open("get","info.jsp",true);//步骤二

该方法一共3个参数，参数1表示请求的方式，一般有如下选择：get、post;

　　参数2表示请求的目标是info.jsp;当然，也可以在此处给info.jsp一些参数，如写成：

xmlHttp.open("get","info.jsp?account=012",true);

　　表示赋给info.jsp名为account,值为012的参数，info.jsp可以通过request.getParameter("account")方法获得该参数的值。

　　参数3最重要，为true表示异步请求，否则表示非异步请求。异步请求可以通俗理解为后台提交，此种情况下，请求在后台执行。以前面的welcome1.jsp为例，如果参数3取true,按钮被点下去之后马上抬起。但是如果是false,按钮被点下去之后，要等到服务器返回信息之后才能抬起，等待时间之内，网页处于类似停滞状态。

　　在Ajax情况下，第三个参数选择true值。

　　注意，此时只是指定异步提交的目标和提交方式，并没有进行真正的提交。

步骤3:指定当xmlHttp状态改变时，需要进行的处理。处理一般是以响应函数的形式进行：

  xmlHttp.onreadystatechange=function()//步骤三{if (xmlHttp.readyState===4)//步骤四{infoDiv.innerHTML = xmlHttp.responseText;}}

　该代码中用到了xmlHttp的onreadystatechange事件，表示xmlHttp状态改变时，调用处理代码。此种方式是将处理代码直接写在后面，还有一种情况，那就是将处理代码单独写成函数：

　　xmlHttp.onreadystatechange=handle;……function handle(){//处理代码}

　　在请求的过程中，xmlHttp的状态不断改变，其状态保存在xmlHttp的readyState属性中，用xmlHttp.readyState表示，常见的readyState属性值是：

　　0:未初始化状态，对象已创建，尚未调用open()。

　　1:已初始化状态，调用open()方法以后。

　　2:发送数据状态，调用send()方法以后。

　　3:数据传送中状态，已经接到部分数据，但接收尚未完成。

　　4:完成状态，数据全部接收完成。

步骤4:编写处理代码：

　if (xmlHttp.readyState===4)//步骤四{infoDiv.innerHTML = xmlHttp.responseText;}

　该代码表示，当xmlHttp的readyState为4时，将infoDiv内部的HTML代码变为xmlHttp.responseText,其中，xmlHttp.responseText表示xmlHttp从提交目标中得到的输出的文本内容，也就是info.jsp的输出。

注意，xmlHttp除了responseText属性外，还有一个属性：responseXml,表示从提交目标得到的xml格式的数据。

　　特别说明

　　1.infoDiv除了具有innerHTML属性之外，还有innerText属性，表示在该div内显示内容时，不考虑其中的HTML格式的标签，即：将内容原样显示。

　　2.除了div可以达到动态显示内容的效果之外，HTML中的span也可以做到该效果。不同的是，span将其内部的内容以文本段显示，div将其内部的内容以段落显示。一般而言，使用div从界面上看到的效果是：内容会另起一行单独显示。

步骤5:发出请求，调用xmlHttp的send函数：

xmlHttp.send();//步骤五

如果请求方式是get的话，send可以没有参数，或者参数为null;如果请求方式是post,可以将需要传送的内容传入send函数中以字符串的形式发出。

不过，即使是以post方式请求，send函数仍然可以将参数置空，因为可以将需要传送的内容附加在url后面进行请求，在info.jsp中用request.getParameter（"account"）得到。

　　由于Ajax项目中，目标页面是异步提交，因此，如果目标页面发生了修改，在客户端不一定能够马上检测到，显示的仍是以前的目标页面的内容。此种情况下，可以用如下方法进行解决：

　　1.将目标页面直接输入URL进行访问，迫使服务器重新编译。

　　2.将目标页面用response.setHeader("Cache-Control","no-cache");设置为不在客户端缓存驻留。

以上就是Ajax技术的核心介绍

Java EE中Ajax技术简单实现相关推荐

Java EE中Ajax技术实例
下面,我们使用Ajax技术实现登录验证问题: 在这里,我通过两个例子进行实验说明,在开始之前,我们需要知道ajax的一些基本知识: 如下面代码: <script type="text/ ...
java面试技术问题_11个JAVA面试中常见技术问题
原标题:11个JAVA面试中常见技术问题大家在平常面试java的过程中都会遇到哪些难题呢?还有一些即将去面试java的童鞋们,你们想知道技术面试中会涉及到哪些点吗?达妹为你整理Java面试中会被问到 ...
java ee包含哪些技术_JavaEE基本了解
标签: 1. 为什么需要JavaEE 我们编写的JSP代码中,由于大量的显示代码和业务逻辑混淆在一起,彼此嵌套,不利于程序的维护和扩展.当业务需求发生变化的时候,对于程序员和美工都是一个很重的负担. ...
openshift_OpenShift上的Java EE工作流（技术提示＃64）
openshift 该网络研讨会展示了如何使用WildFly , JBoss Tools , Forge , Arquillian和OpenShift在OpenShift上创建Java EE工作流. ...
Java EE中的RESTful计时器
在这篇文章中.... EJB计时器旋风之旅通过带有示例实现的简单REST接口即时使用EJB计时器更新(2015年7月14日) 现在可以在OpenShift上使用该应用程序的前端 . 由于我是前端新 ...
OpenShift上的Java EE工作流（技术提示＃64）
该网络研讨会展示了如何使用WildFly , JBoss Tools , Forge , Arquillian和OpenShift在OpenShift上创建Java EE工作流. 具体来说,它谈论: ...
trace java_使用java动态字节码技术简单实现arthas的trace功能。
参考资料用过[Arthas]的都知道,Arthas是alibaba开源的一个非常强大的Java诊断工具. 不管是线上还是线下,我们都可以用Arthas分析程序的线程状态.查看jvm的实时运行状态.打 ...
flyway数据迁移_使用Flyway在Java EE中进行数据库迁移
flyway数据迁移任何Java EE应用程序的数据库模式都会随着业务逻辑一起发展. 这使得数据库迁移对于任何Java EE应用程序都很重要. 您是否还在执行应用程序时手动执行它们? 它仍然是一个锁 ...
使用Flyway在Java EE中进行数据库迁移
任何Java EE应用程序的数据库模式都会随着业务逻辑一起发展. 这使得数据库迁移对于任何Java EE应用程序都非常重要. 您是否还在执行应用程序时手动执行它们? 它仍然是一个锁定步骤过程,还是作为 ...

Java EE中Ajax技术简单实现

Java EE中Ajax技术简单实现相关推荐

最新文章

热门文章