J2EE从入门到精通40-41-Ajax(5)

名称：

薪水：

住址：

当输入人员填完员工编号，如果资料库中有该编号的员工资料，那您可以使用非同步请求取得名称、薪水与住址资讯，并直接显示在网页上，这样输入人员就不用重复输入这些资料，来看看AutoFilledEx-1.js的内容：

AutoFilledEx-1.js varxmlHttp;

functioncreateXMLHttpRequest(){ if(window.ActiveXObject){

xmlHttp=newActiveXObject(\}

elseif(window.XMLHttpRequest){ xmlHttp=newXMLHttpRequest(); } }

functionreadEmployee(){

varid=document.getElementById(\

//如果没有输入id就清除栏位 if(id===\clearEmployee(); return; }

varurl=\

createXMLHttpRequest();

xmlHttp.onreadystatechange=handleStateChange; xmlHttp.open(\xmlHttp.send(null); }

21

functionhandleStateChange(){ if(xmlHttp.readyState==4){ if(xmlHttp.status==200){ updateEmployee(); } } }

functionupdateEmployee(){ varxml=xmlHttp.responseXML;

document.getElementById(\ xml.getElementsByTagName(\ document.getElementById(\ xml.getElementsByTagName(\document.getElementById(\ xml.getElementsByTagName(\ }

functionclearEmployee(){

document.getElementById(\document.getElementById(\document.getElementById(\}

当这个JavaScript使用id以非同步方式方式查询伺服端时，伺服端必须使用以下的XML格式来回应：

001

Justin 30000

NTU-M8-419

例如您可以使用以下这个简单的Servlet来搭配这个客户端网页： EmployeeServlet.java

packageonlyfun.caterpillar; importjava.io.IOException; importjava.io.PrintWriter; importjava.util.HashMap; importjava.util.Map;

importjavax.servlet.ServletException;

importjavax.servlet.http.HttpServletRequest; importjavax.servlet.http.HttpServletResponse; publicclassEmployeeServlet

extendsjavax.servlet.http.HttpServletimplementsjavax.servlet.Servlet{ privateMapinMemoryDB;

publicvoidinit()throwsServletException{

inMemoryDB=newHashMap();

22

Employeee1=newEmployee(\Employeee2=newEmployee(\

inMemoryDB.put(e1.id,e1); inMemoryDB.put(e2.id,e2); }

privateEmployeefindEmployee(Stringid){ Employeeemployee=inMemoryDB.get(id);

if(employee==null){

employee=newEmployee(id,null,0,null); }

returnemployee; }

protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse) throwsServletException,IOException{

Employeeemployee=findEmployee(request.getParameter(\

response.setContentType(\

response.setHeader(\

PrintWriterout=response.getWriter(); out.println(\

out.println(\

out.println(\out.println(\out.println(\out.println(\out.close(); }

privateclassEmployee{ Stringid; Stringname; intsalary; Stringaddress;

Employee(Stringid,Stringname,intsalary,Stringaddress){ this.id=id;

this.name=name; this.salary=salary; this.address=address;

23

} } }

40.10网页聊天室

网页聊天的基本原理很简单，在使用者发送讯息给伺服端时，同时取回新的聊天讯息，在使用者没有发送讯息，同时查询伺服端是否有新的讯息，并显示在页面中。

不过重点就在于取得讯息或重新取得讯息的方式，在过去，是在让浏览器定时重新整理网页，每一次除了新的讯息之外，往往伴随着大量重复的HTML标签等内容。

如果使用非同步请求，取得XML回应讯息，并动态更新页面中显示聊天讯息的部份，这么一来，就可以节省掉下载重复页面内容的频宽，使用者的画面也会更稳定，不会因为重新整理而发生闪烁的感觉。

例如，您可以写一个简单的聊天页面： ChatRoomEx-1.html

\

聊天室

输入讯息：

聊天室讯息：

您可以在这个页面中的栏位中输入文字，而下方会有个显示讯息的区域，每次的新讯息将只在该区域更新，页面中其余的部份不用变动，所以不用重复下载，来看一下JavaScript的部份：

ChatRoomEx-1.js varxmlHttp;

functioncreateXMLHttpRequest(){ if(window.ActiveXObject){

xmlHttp=newActiveXObject(\}

elseif(window.XMLHttpRequest){ xmlHttp=newXMLHttpRequest(); }

24

}

functionsendMessage(){

varmsg=document.getElementById(\

//使用者只是随意按下传送钮，但文字栏位中没有文字 if(msg===\

//那就重新整理讯息区好了 refreshMessage(); return; }

//传送讯息

varparam=\//ajax请求

ajaxRequest(param); //清空文字栏位

document.getElementById(\}

//定时查询用这个

functionqueryMessage(){ varparam=\ajaxRequest(param); }

functionajaxRequest(param){

varurl=\createXMLHttpRequest();

xmlHttp.onreadystatechange=refreshMessage; xmlHttp.open(\

xmlHttp.setRequestHeader(\xmlHttp.send(param); }

functionrefreshMessage(){ if(xmlHttp.readyState==4){ if(xmlHttp.status==200){ //处理显示讯息的表格区域

vartable_body=document.getElementById(\ varlength=table_body.childNodes.length; vari;

for(i=0;i

//先移除原有的列（row）

table_body.removeChild(table_body.childNodes[0]); }

//处理取回的讯息

varmessages=xmlHttp.responseXML.getElementsByTagName(\ length=messages.length; for(i=length-1;i>=0;i--){ varmessage=messages[i].firstChild.data;

25