Java EE中Ajax技术简单实现

最新推荐文章于 2022-05-24 11:19:11 发布

suwu150

最新推荐文章于 2022-05-24 11:19:11 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Java EE企业应用开发文章标签： Java EE Ajax

本文链接：https://blog.youkuaiyun.com/suwu150/article/details/51443003

Java EE企业应用开发专栏收录该内容

41 篇文章

订阅专栏

本文介绍了Ajax技术的基本原理及其应用，通过具体案例展示了如何利用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技术的核心介绍