为基于 REST 的 Web 服务编写 Ajax 客户端

    如前所述，Ajax 表示 Asynchronous JavaScript + XML。它有时也称为 XML HTTP 技术。在 Ajax 中，核心的技术主要是围绕实现与服务器的异步通信，而无需页面刷新。XMLHTTPRequest 对象支持对服务器进行异步 GET、POST、PUT 和 DELETE。这并不向用户显示任何内容，换句话说，不会显示状态消息。您可以为状态更改指定一个处理程序方法，并且当发生如下请求时将通知这个处理程序：

　　　初始化
　　　启动
　　　在返回的过程中
　　　完全完成

    清单 4 显示了一个基于 Ajax 的 HTML 页面的代码，它可以用作上述基于 REST 的 Web 服务的客户端：

    清单 4. 基于 Ajax 的 HTML 页面的代码

＜SCRIPT language="javascript" type="text/javascript"＞
var req=null;
//This function initializes XHR
function initXHR() {
　if (navigator.appName.indexOf("Microsoft")＞ -1 ) {
　　try{
　　　req=new ActiveXObject("Microsoft.XMLHTTP");
　　}catch(e1){
　　　alert("failed to create XHR in IE");
　　}
　}else{
　　try{
　　　req=new XMLHttpRequest();
　　}catch(error){
　　　alert("failed to create XHR in FireFox");
　　}
　}
}
//get an employee detail
function getEmpDetails(Empurl){
　initXHR();
　req.open("GET",Empurl, true);
　req.onreadystatechange=handleEmpDetailResponse;
　req.send(null);
}
//get employee list
function getEmployeeList(listurl){
　initXHR();
　req.open("GET", listurl, true);
　req.onreadystatechange=handleEmpListResponse;
　req.send(null);
}
function handleEmpDetailResponse(){
　//if Response is complete
　if(req.readyState==4){
　　//response is OK
　　if(req.status==200){
　　　var str="";
　　　var response=req.responseXML;
　　　var root=response.documentElement;
　　　for(i=0; i ＜root.childNodes.length; i++){
　　　　if(root.childNodes[i].nodeType != 1) continue;
　　　　var name=root.childNodes[i].nodeName;
　　　　var value=root.childNodes[i].firstChild.nodeValue;
　　　　str=str+name+"---＞"+value+" ＜br＞";
　　　}
　　　document.getElementById("emp-div").style.display="";
　　　document.getElementById("emp-detail-div").innerHTML=str;
　　}else{
　　　document.getElementById("messageDiv").innerHTML=" ＜SPAN style='color:#FF0000;
　　　font-size:12pt; text-decoration:none; ' ＜Invalid URL or PartId ＜/SPAN＞";
　　}
　　req.abort();
　}
}
function handleEmpListResponse(){
　//if Response is complete
　if(req.readyState==4){
　　//response is OK
　　if(req.status==200){
　　　var pstr="";
　　　var response=req.responseXML;
　　　var root=response.documentElement;
　　　for(i=0; i ＜root.childNodes.length; i++){
　　　　if(root.childNodes[i].nodeType != 1) continue;
　　　　var id=root.childNodes[i].getAttribute("id");
　　　　var href=root.childNodes[i].getAttribute("href");
　　　　pstr=pstr+"EmpId"+"---＞"+id+" ＜input type='button' value='
GetEmpDetails' onclick="+'"'+"getEmpDetails('"+href+"')"+'"'+"＞"+" ＜br＞";
　　　}
　　　document.getElementById("emp-list-div").style.display="";
　　　document.getElementById("emp-list").innerHTML=pstr;
　　}else{
　　　document.getElementById("messageDiv").innerHTML=" ＜SPAN style='color:#FF0000;
　　　font-size:12pt; text-decoration:none; '＞Invalid Employee ID. ＜/SPAN＞";
　　}
　}
}
＜/SCRIPT＞
＜center＞
＜input type="button" value="getEmployee-List" onclick="getEmployeeList
'http://localhost:9080/AJAX_REST_Demo/RESTDemoServlet/employee-list')"＞ ＜br＞ ＜br＞
＜div id="messageDiv"＞ ＜/div＞
＜div id="emp-list-div" style='color:#FF0000; font-size:12pt; text-decoration:none;
display:none; '＞Employee List : ＜/div＞ ＜br＞
＜div id="emp-list"＞ ＜/div＞ ＜br＞ ＜br＞
＜div id="emp-div" style='color:#FF0000; font-size:12pt; text-decoration:none;
display:none; '＞Selected Employee Detail : ＜/div＞ ＜br＞
＜div id="emp-detail-div"＞ ＜/div＞
＜/center＞ 

    在清单 4 中，当用户单击 getEmployee-List 按钮时，会向服务器发送一个 XML HTTP 请求。为 XML HTTP 请求指定使用处理程序函数 handleEmpListResponse 来处理 readyState 更改。当服务器完成了响应（readyState = 4）并且该响应为 OK 时，您可以解析 XML 并将其添加到页面的文档对象模型（Document Object Model，DOM）后面，以显示雇员列表。类似地，当用户单击 GetEmpDetails 按钮时，处理程序函数 handleEmpDetailResponse 将处理来自服务器的 XML 响应，并修改页面的 DOM 以显示特定雇员的详细信息。

    结束语

    在本文中，您了解了如何使用 Servlet 和基于 Ajax 的客户端来编写基于 REST 的 Web 服务。希望您能够发现，可以很容易地理解和实现基于 REST 的 Web 服务。请查看下面的参考资料部分中所提供的有价值的链接。