Ajax(Asynchronous JavaScript and XML)是一个结合了Java技术、XML、以及JavaScript的web开发模式,可以让你构建基于Java技术的Web应用。这是一种很简单的模式,但是却解决了web开发中经常碰到的页面重载问题(即不需要页面刷新便可轻易实现服务器端数据的获取),很实用,推荐给大家。
本例中的应用是基于java的Servlet技术(也可以很容易的扩展到bean中实现),共需要创建三个文件: index.jsp AjaxUse.java web.xml
---------------index.jsp文件代码
<%@ page contentType="text/html;charset=GB2312"%> <html> <title>Ajax应用</title> <head> <script language="javascript"> var req; function sendData() { var idField = document.getElementById("userid"); var url = "servlet/AjaxUse?id=" + escape(idField.value); waitMessage(); if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); } req.open("GET", url, true); //open包含5个参数:(http-method, url, async, userID, password) 前三个是必要的,后两个是可选的 //----http-method: HTTP的通信方式,比如GET或是 POST //----url: 接收XML数据的服务器的URL地址。通常在URL中要指明 ASP或CGI程序 //----async: 布尔标识.如是异步通信方式(true),客户机不等待服务器的响应;如是同步方式(false),客户机就要等到服务器返回消息后才去执行其他操作 //----userID: 用户ID,用于服务器身份验证 //----password 用户密码,用于服务器身份验证 req.onreadystatechange = callback; //如用POST方法,需添加如下内容 //----req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //----req.send("id=" + escape(idField.value)); req.send(null); } function callback() { if (req.readyState == 4) { //XMLHTTP对象中的readyState属性能够反映出服务器在处理请求时的进展状况 //----0 Response对象已经创建,但XML文档上载过程尚未结束 //----1 XML文档已经装载完毕 //----2 XML文档已经装载完毕,正在处理中 //----3 部分XML文档已经解析 //----4 文档已经解析完毕,客户端可以接受返回消息 if (req.status == 200) { //检查是否成功接收了服务器响应 parseMessage(); } } } function parseMessage() { var message = req.responseXML.getElementsByTagName("data"); var str=new Array(); if(message.length>=1){ for(var i=0;i<message.length;i++){ str[i]=message[i].firstChild.data; } }else{ str[0]=message.length; } mdiv = document.getElementById("userIdMessage"); mdiv.innerHTML = "<div>"+str[0]+"</div>"; } function waitMessage() { mdiv = document.getElementById("userIdMessage"); mdiv.innerHTML = "<div>请稍后----</div>"; } </script> </head> <body bgcolor=silver> <font size=2>输入一个数字,通过ajax将会在页面静态获取服务器端相应:</font> <input type="text" name="id" id="userid" size="20"> <input type="button" value="发送" onclick="sendData()"> <div id="userIdMessage"></div> </body> </html>
---------------AjaxUse.java 文件代码
package com.servlet;
import javax.servlet.*; import javax.servlet.http.*;
public class AjaxUse extends HttpServlet { private ServletContext context; public void init(ServletConfig config) throws ServletException { this.context = config.getServletContext(); } public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException { String targetId = request.getParameter("id"); StringBuffer sb=new StringBuffer("<message>"); response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); sb.append("<data>LiaoNing</data><data>ShenYang</data>"); sb.append("</message>"); PrintWriter out=response.getWriter(); out.write(sb.toString()); out.close(); } } }
---------------web.xml 文件代码
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java./dtd/web-app_2_3.dtd"> <web-app> <servlet> <servlet-name>AjaxUse</servlet-name> <servlet-class>com.servlet.AjaxUse</servlet-class> </servlet> <servlet-mapping> <servlet-name>AjaxUse</servlet-name> <url-pattern>/servlet/AjaxUse</url-pattern> </servlet-mapping> </web-app>
本文是通过一个Button按钮来触发客户端的sendData()方法向服务器发送数据,如果需要实现过一个固定时间默认向服务器发送数据,可以在javascript代码中加入定时器:setInterval("sendData()",1000),定时器单位为毫秒.
文中代码已测试通过,希望对各位有用。
|