Ajax（Asynchronous JavaScript and XML）是一個(gè)結合了Java技術(shù)、XML、以及JavaScript的web開(kāi)發(fā)模式，可以讓你構建基于Java技術(shù)的Web應用。這是一種很簡(jiǎn)單的模式，但是卻解決了web開(kāi)發(fā)中經(jīng)常碰到的頁(yè)面重載問(wèn)題（即不需要頁(yè)面刷新便可輕易實(shí)現服務(wù)器端數據的獲?。?，很實(shí)用，推薦給大家。
本例中的應用是基于java的Servlet技術(shù)(也可以很容易的擴展到bean中實(shí)現)，共需要創(chuàng )建三個(gè)文件: 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個(gè)參數:(http-method, url, async, userID, password) 前三個(gè)是必要的，后兩個(gè)是可選的
//----http-method： HTTP的通信方式，比如GET或是 POST
//----url： 接收XML數據的服務(wù)器的URL地址。通常在URL中要指明 ASP或CGI程序
//----async： 布爾標識.如是異步通信方式(true)，客戶(hù)機不等待服務(wù)器的響應；如是同步方式(false)，客戶(hù)機就要等到服務(wù)器返回消息后才去執行其他操作
//----userID: 用戶(hù)ID，用于服務(wù)器身份驗證
//----password 用戶(hù)密碼，用于服務(wù)器身份驗證
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屬性能夠反映出服務(wù)器在處理請求時(shí)的進(jìn)展狀況
//----0 Response對象已經(jīng)創(chuàng )建，但XML文檔上載過(guò)程尚未結束
//----1 XML文檔已經(jīng)裝載完畢
//----2 XML文檔已經(jīng)裝載完畢，正在處理中
//----3 部分XML文檔已經(jīng)解析
//----4 文檔已經(jīng)解析完畢，客戶(hù)端可以接受返回消息
if (req.status == 200) {
//檢查是否成功接收了服務(wù)器響應
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>輸入一個(gè)數字，通過(guò)ajax將會(huì )在頁(yè)面靜態(tài)獲取服務(wù)器端相應：</font>
<input type="text" name="id" id="userid" size="20">
<input type="button" value="發(fā)送" 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" "<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>
本文是通過(guò)一個(gè)Button按鈕來(lái)觸發(fā)客戶(hù)端的sendData()方法向服務(wù)器發(fā)送數據,如果需要實(shí)現過(guò)一個(gè)固定時(shí)間默認向服務(wù)器發(fā)送數據,可以在javascript代碼中加入定時(shí)器:setInterval("sendData()",1000),定時(shí)器單位為毫秒.
文中代碼已測試通過(guò)，希望對各位有用。
聯(lián)系客服
