JAVA下AJAX应用实例

最新推荐文章于 2021-03-19 09:39:32 发布

挨踢界太危险了搬砖吧

最新推荐文章于 2021-03-19 09:39:32 发布

阅读量1.6k

点赞数

分类专栏： JAVA开发经验文章标签： java ajax

本文链接：https://blog.csdn.net/qq372712203/article/details/38305437

版权

JAVA开发经验专栏收录该内容

5 篇文章 0 订阅

订阅专栏

最近与其他公司合作开发项目，我们负责服务器及下层的硬件控制，另一个公司负责客户端的可视化的界面，中间初步决定以mysql的status数据表为接口，将底层硬件的实时状态存入数据库，供另一个公司的程序获取。

因为使用数据表进行对接，所以我们不需要考虑对方使用什么语言或者什么操作系统，所以这样来说大大提高了相互之间的独立性。

为了测试我的程序能否与上层控制程序很好的对接，我自己建立了一个jsp页面来读取数据库。但是问题来了，每次更新状态必须刷新，无论是手动刷新还是自动刷新，都会在浏览器留下记录，如果使用“后退”之后，仍然会显示出上一个状态，这对我这种致力于“傻瓜式”操作的程序猿是不可接受的，所以我需要一个方法能自动更新页面，而不留下历史记录，让用户有机会看到过去的状态。

经过一番搜索，我知道有个叫“ajax”的东西可以满足我的要求，但是看了那么多实例，都是在“定义什么叫AJAX”，而不是告诉我怎么做。所以，在我学会了ajax之后，我决定自己写一个简单好用的例子，来让其他人能更快的学会使用ajax。

首先ajax其实就是一系列javascript命令，里面的细节都已经被浏览器内核厂商做好了，我们需要做的就是直接使用它的功能。

但，在这里我用的ajax，还必须要用到servlet

（请自行下载servlet包。我在后面会介绍一个不用servlet的方法，但只是理论上可行，我没有测试）

无论是在web.xml里配置servlet还是在dispather里判断uri.endswith，都可以。

下面是是测试页面（html页面即可，不需要jsp）

<!DOCTYPE html>
<html>
  <head>    
    <title>Hello!</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
	<script src="js/ActionControl.js" type="text/javascript"></script>
  </head>
  
  <body style="text-align: center; width:100%; margin:0 auto;" οnlοad="autoFresh()">
    <h3>当前状态：</h3>
    <div id="status">
   		<p id="text">正在读取...</p>
    </div>
  </body>
</html>

其中，<body>标签里的 οnlοad="autoFresh()"在页面加载的时候就激活了autoFresh命令，可以让页面保持自动更新。

ActionControl.js文件需要放在js目录中（如果连这个都没看出来，建议还是先学html语言吧）

var XMLHttpReq = false;
function createXMLHttpRequest(){
	if (window.XMLHttpRequest){
		XMLHttpReq = new XMLHttpRequest();
	}else if (window.ActiveXObject){
		try{
			XMLHttpReq = new ActiveXObject("MSXML2.XMLHTTP");
		}catch(e){
			try{
				XMLHttpReq = new ActiveXObject("Mircsoft.XMLHTTP");
			}catch(er){
				alert("浏览器不支持AJAX");
			}
		}
	}
}

function sendRequest(url){
	createXMLHttpRequest();
	XMLHttpReq.open("GET", url, true);
	XMLHttpReq.onreadystatechange = processResponse;
	XMLHttpReq.send();
}

function processResponse(){
	if (XMLHttpReq.readyState == 4){
		if (XMLHttpReq.status == 200){
			var res = XMLHttpReq.responseText;
			document.getElementById("text").innerHTML = res;
		}else{
			document.getElementById("text").innerHTML = "请求异常, code:" + XMLHttpReq.status;
		}
	}
}

function autoFresh(){//0.1秒取得一次数据.
	timer = window.setInterval("sendRequest('updateStatus')",100);
}

其中XMLHttpReq = new ActiveXObject("MSXML2.XMLHTTP")与<span style="font-family: Arial, Helvetica, sans-serif;">XMLHttpReq = new ActiveXObject("Mircsoft.XMLHTTP")是针对不同内核的不同声明方式，目前的浏览器版本都能达到要求，几乎看不到“浏览器不支持AJAX”这个提示了。如果有人看到了这个提示，请下载一个新的浏览器。</span>

<pre name="code" class="javascript">sendRequest(url)中的url需要特别关注，这个url就是servlet中需要匹配的地址，后面会继续介绍。

<pre name="code" class="javascript">processResponse用来返回数据的方法，<span style="font-family: Arial, Helvetica, sans-serif;">XMLHttpReq.readyState == 4代表有数据返回，</span><span style="font-family: Arial, Helvetica, sans-serif;">XMLHttpReq.status == 200代表返回值正常，如果异常会返回其他数值，具体数值代表的意义请自行搜索。</span>

<span style="font-family: Arial, Helvetica, sans-serif;">然后该用到servlet功能了</span>

<span style="font-family:Arial, Helvetica, sans-serif;">先配置web.xml</span>

<span style="font-family:Arial, Helvetica, sans-serif;"></span><pre name="code" class="html"><servlet>
	<servlet-name>updateStatus</servlet-name>
	<servlet-class>com.dao.ControlAction</servlet-class>
</servlet>
<servlet-mapping> 
	<servlet-name>updateStatus</servlet-name>
	<url-pattern>/updateStatus</url-pattern>
</servlet-mapping>

<span style="font-family:Arial, Helvetica, sans-serif;">这里的updateStatus就是之前js里需要用到的url路径</span>

这样就需要新建一个 com.dao包，并在该包内建立 ControlAction类

package com.dao;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.*;
import javax.servlet.http.*;

public class ControlAction extends HttpServlet{
	
	protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
		req.setCharacterEncoding("UTF-8");
		res.setContentType("text/xml;charset=UTF-8");
		res.setHeader("Cache-Control", "no-cache");
		PrintWriter out = res.getWriter();
		out.println("<response>");
		out.println("<res>test</res>");
		out.println("</response>");
	}
	
	protected void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
		super.doGet(req, res);
	}
	
	public void init(ServletConfig config) throws ServletException{
		 
	}
}

这样返回了test字符

不用servlet的话，新建一个jsp页面，在里面用<% %>格式的命令来写servlet里面的内容，应该也可以