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

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

elseif(window.ActiveXObject){

xmlHttp=newActiveXObject(\} }

functionvalidate(){

varnumber=document.getElementById(\varurl=\createXMLHttpRequest();

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

functionhandleStateChange(){ if(xmlHttp.readyState==4){ if(xmlHttp.status==200){ varpass=xmlHttp.responseXML.getElementsByTagName( \

varmessage=xmlHttp.responseXML.getElementsByTagName( \ if(pass===\color=\

document.getElementById(\\} else{ document.getElementById(\} } } }

伺服端会传回XML作为回应，当中包括以下讯息：

false

输入的格式有误

所以程式上设定，当格式错误时为false，此时以红字在网页上显示错误讯息，如果正确则什么都不作。

您可以搭配以下这个简单的Servlet来进行验证： ValidateServlet.java

packageonlyfun.caterpillar; importjava.io.IOException; importjava.io.PrintWriter;

16

importjavax.servlet.ServletException;

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

publicclassValidateServletextendsjavax.servlet.http.HttpServlet implementsjavax.servlet.Servlet{

protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse) throwsServletException,IOException{ booleanpass=request.getParameter(

\

response.setContentType(\

response.setHeader(\response.setCharacterEncoding(\

Stringmessage=\输入的格式有误\

if(pass){

message=\！\}

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

out.println(\

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

40.8动态清单

除了要求使用者按下按钮之外，还有什么更直觉的方式可以取得资料？以这个观点出发，可以想到许多非同步请求回应的使用方式，例如，当使用者选择书籍类别完成后，触发onchange事件，自动将使用者的选择送出，取得下一个选单的资料并呈现在网页上，这个功能在桌面应用程式上很常见，但在Web应用程式来说，以前并不常见。

例如您设计的网页如下： DynamicListeEx-1.html

\

动态载入清单

17

种类…

书籍…

当使用者选择完书籍种类之后，另一个选单就会自动填上符合该重类的书籍，来看看JavaScript如何撰写：

DynamicListEx-1.js varxmlHttp;

window.onload=refreshBooklList; functioncreateXMLHttpRequest(){ if(window.XMLHttpRequest){ xmlHttp=newXMLHttpRequest(); }

elseif(window.ActiveXObject){

xmlHttp=newActiveXObject(\} }

functionrefreshBooklList(){

vartype=document.getElementById(\varurl=\

createXMLHttpRequest();

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

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

18

} }

//清除上一次的显示结果 functionclearBookList(){

varbooks=document.getElementById(\while(books.childNodes.length>0){

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

//以回应更新资料

functionupdateBookList(){

varresults=xmlHttp.responseXML.getElementsByTagName(\varbooks=document.getElementById(\

varoption=null;

for(vari=0;i

option=document.createElement(\

option.appendChild(document.createTextNode(results[i].firstChild.nodeValue)); books.appendChild(option); } }

从伺服端要传回以下的XML，表示根据种类的查询结果：

Java学习笔记 C++学习笔记

JSP/Servlet学习笔记 Ajax学习笔记

您可以使用以下这个简单的Servlet模拟资料查询并传回XML回应的过程：RefreshBookServlet.java packageonlyfun.caterpillar; importjava.util.*;

importjava.io.IOException;

importjavax.servlet.ServletException;

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

publicclassRefreshBookServletextendsjavax.servlet.http.HttpServlet implementsjavax.servlet.Servlet{

privatestaticMapinMemoryDB=newHashMap();

publicvoidinit()throwsServletException{ inMemoryDB.put(\

newString[]{\学习笔记\电脑图学\常见程式演算\设计模式\inMemoryDB.put(\

newString[]{\学习笔记\学习笔记\\学习笔记\学习笔记\

19

inMemoryDB.put(\

newString[]{\学习笔记\学习笔记\\学习笔记\学习笔记\}

protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse) throwsServletException,IOException{ Stringtype=request.getParameter(\

StringBufferxml=newStringBuffer(\String[]books=(String[])inMemoryDB.get(type); for(inti=0;i

xml.append(\

response.setCharacterEncoding(\response.setContentType(\

response.getWriter().write(xml.toString()); response.getWriter().close(); } }

40.9自动表单填写

当使用者在您的网页上填写资料时，如果您的网站资料库中已经有该使用者的资料，那么您可以贴心的在他填写完部份栏位后，根据这些栏位，自动帮他显示其它相关的资料，以避免他仍要填写重复的资料。

举个例子来说，有个员工管理的网页： AutoFilledEx-1.html

\

自动表单填写

编号：

20