Ajax技术——与服务器通信
1. 发送请求
Ajax可以通过XMLHttpRequest对象实现采用异步方式在后台发送请求。通常情况下，Ajax发送请求有两种，一种是发送GET请求，另一种是发送POST请求。但是无论发送哪种请求，都需要经过以下4个步骤。
（1）初始化XMLHttpRequest对象。为了提高程序的兼容性，需要创建一个跨浏览器的XMLHttpRequest对象，并且判断XMLHttpRequest对象的实例是否成功，如果不成功，则给予提示。具体代码如下：
例1.1 发送请求。
http_request=false; if(window.XMLHttpRequest){ //非IE浏览器 http_request=new XMLHttpRequest(); //创建XMLHttpRequest对象 }else if(window.ActiveXObject){ //IE浏览器 try{ http_request=new ActiveXObject("Msxml2.XMLHTTP"); //创建XMLHttpRequest对象 }catch(e){ try{ http_request=new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLHttpRequest对象 }catch(e){} } } if(!http_request){ alert("不能创建XMLHttpRequest 对象实例！"); return false; }
(2) 为XMLHttpRequest对象指定一个返回结果处理函数（即回调函数），用于对返回结果进行处理。具体代码如下：
例1.2 设置回调函数。
http_request.onreadystatechange=getResult; //调用返回结果处理函数
注意：使用XMLHttpRequest对象的onreadystatechange属性指定回调函数时，不能指定要传递的参数。如果要指定传递的参数，可以用以下方法：
http_request.onreadystatechange=function(){getResult(param)};
（3）创建一个与服务器的连接。在创建时，需要指定发送请求的方式（即GET或POST），以及设置是否采用异步方式发送请求。
例1.3 采用异步方式发送GET方式的请求的具体代码如下：
http_request.open('GET',url,true);
例1.4 采用异步方式发送POST方式的请求的具体代码如下：
http_request.open('POST',url,true);
说明：在open()方法中的url参数，可以是一个JSP页面的URL地址，也可以是Servlet的映射地址。也就是说，请求处理页，可以是一个JSP页面，也可以是一个Servlet。
技巧：在指定URL参数时，最好将一个时间戳追加到该URL参数的后面，这样可以防止因浏览器缓存结果而不能实时得到最新的结果。例如，可以指定URL参数为以下代码：
String url="deal.jsp?nocache="+new Date().getTime();
（4）想服务器发送请求。XMLHttpRequest对象的send()方法可以实现向服务器发送请求，该方法需要传递一个参数，如果发送的是GET请求，可以将该参数设置为null；如果发送的是POST请求，可以通过该参数指定要发送的请求参数。
向服务器发送GET请求的代码如下：
http_request.send(null); //向服务器发送请求
例1.5 向服务器发送POST请求的代码如下：
var param="user="+form1.user.value+"&pwd="+form1.pwd.value+"&emali="+form1.email.value; //组合参数 http_request.send(param); //向服务器发送请求
需要注意的是在发送POST请求之前，还需要设置正确的请求头。具体代码如下：
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
上面这句代码，需要加在“http_request.send(param);”语句之前。
2. 处理服务器响应
XMLHttpRequest对象提供了两个用来访问服务器响应的属性，一个是responseText属性，返回字符串响应；另一个是responseXML属性，返回XML响应。
2.1 处理字符串响应
字符串响应通常应用在响应不是特别复杂的情况下。例如，将响应显示在提示对话框中，或者响应只是显示成功或失败的字符串。
例2.1 将字符串响应显示到提示对话框中的回调函数的具体代码如下：
function getResult(){ if(http_request.readyState==4){ //判断请求状态 if(http_request.status==200){ //请求成功，开始处理返回结果 alert(http_request.responseText); //显示判断结果 }else { //请求页面有错误 alert("您所请求的页面有错误！"); } } }
如果需要将该响应结果显示到页面的指定位置，也可以先在页面的合适位置添加一个<div>或<span>标记，将设置该标记的id属性，如div_result，然后在回调函数中应用以下代码显示响应结果：
document.getElementById("div_result").innerHTML=http_request.responseText;
2.2 处理XML响应
如果在服务器端需要生成特别复杂的响应，那么就需要应用XML响应。应用XMLHttpRequest对象的responseXML属性，可以生成一个XML文档，而且当前浏览器已经提供了很好的解析XML文档对象的方法。
例2.2 保存图书信息的XML文档。具体代码如下：
<?xml version="1.0" encoding="UTF-8"?>
<mr>
<books>
<book>
<title>Java Web程序开发范例宝典</title>
<publisher>人民邮电出版社</publisher>
</book>
<book>
<title>Java 范例完全自学手册</title>
<publisher>人民邮电出版社</publisher>
</book>
</books>
</mr>
在回调函数中遍历保存图书信息的XML文档，并将其显示到页面中的代码如下：
function getResult(){ if(http_request.readyState==4){ if(http_request.status==200){ var xmldoc=http_request.responseXML; var str=""; for (int i = 0; i <xmldoc.getElementByTagName("book").length; i++) { var book=xmldoc.getElementByTagName("book").item(i); str=str+"《"+book.getElementByTagName("title")[0].firstChild.data+"》由“"+ book.getElementByTagName('publisher')[0].firstChild.data+"”出版<br>"; } document.getElementById("book").innerHTML=str; //显示图书信息 }else { alert("您所请求的页面有错误！"); } } } <div id="book"></div>
通过上面的代码获取的XML文档的信息如下：
《Java Web程序开发范例宝典》由“人民邮电出版社”出版
《Java 范例完全自学手册》由“人民邮电出版社”出版
3. 一个完整的实例——检测用户名是否唯一
例3.1 检测用户名是否唯一。
（1）创建index.jsp文件，在该文件中添加一个用于收集用户注册信息的表单及表单元素，以及表“检测用户名”按钮的图片，并在该图片的onclick事件中调用checkName()方法，检测用于名是否被注册。在页面的合适位置添加一个用于显示提示信息的<div>标记，并且通过CSS设置该<div>标记的样式。关键代码如下：
<%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>Insert title here</title> </head> <style type="text/css"> <!-- #toolTip{ position:absolute; //设置绝对定位 left:331px; //设置左边距 top:39px; //设置顶边距 width:98px; //设置宽度 height:48px; //设置高度 padding-top:45px; //设置文字与顶边的距离 padding-left:25px; //设置文字与左边的距离 padding-right:25px; //设置文字与右边的距离 z-index:1; display:none; //设置默认不显示 color:red; //设置文字的颜色 background-image:url(images/tooltip.gif); //设置背景图片 } --> </style> <div id="toolTip"></div> <script type="text/javascript"> function createRequest(url){ http_request=false; if(window.XMLHttpRequest){ //非IE浏览器 http_request=new XMLHttpRequest(); //创建XMLHttpRequest对象 }else if(window.ActiveXObject){ //IE浏览器 try{ http_request=new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ http_request=new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){} } } if(!http_request){ alert("不能创建MLHttpRequest对象实例！"); return false; } http_request.onreadystatechange=getResult; //调用返回结果处理函数 http_request.open("GET", url, true); //创建与服务器的连接 http_request.send(null); //向服务器发送请求 } function getResult(){ if(http_request.readyState==4){ //判断请求状态 if(http_request.status==200){ //请求成功，开始处理返回结果 document.getElementById("toolTip").innerHTML=http_request.responseText; //设置提示内容 document.getElementById("toolTip").style.display="block"; //显示提示框 }else { //请求页面有错误 alert("您所请求的页面有错误！"); } } } function checkUser(userName){ if(userName.value==""){ alert("请输入用户名！"); userName.focus(); return; }else{ createRequest('checkUser.jsp?user='+userName.value); } } </script> <body> <form method="post" action="" name="form1"> 用 户 名：<input type="text" name="username" id="username" size="32"> <img src="images/checkBt.png" width="100" height="26" style="cursor:hand;" onclick="checkUser(form1.username);"><br> 密 码：<input type="password" name="pwd1" id="pwd1" size="35"><br> 确认密码：<input type="password" name="pwd2" id="pwd2" size="35"><br> E-mail：<input type="text" name="email" id="email" size="45"><br> <input type="image" name="imageField" src="images/registerBt.png"> </form> </body> </html>
（2）编写检测用户名是否被注册的处理页checkUse.jsp，在该页面中判断输入的用户名是否注册，并应用JSP内置对象out的println()方法输出判断结果。checkUser.jsp页面的具体代码如下：
<%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> <%@ page import="java.util.*" %> <% String[] userList={"明日科技","mr","mrsoft","gao"}; //创建一个一维数据 String user=new String(request.getParameter("user").getBytes("ISO-8859-1"),"GB18030"); //获取用户名 防止乱码 Arrays.sort(userList); //对数组排序 int result=Arrays.binarySearch(userList, user); if(result>-1){ out.println("很抱歉，该用户名已被注册！"); //输出检测结果 }else{ out.println("恭喜您，该用户名没有被注册!"); //输出检测结果 } %>
由于本实例比较简单，这里没有从数据库中获取用户信息，而是将用户信息保存在一个一维数组中。在实际项目开发时，通常情况下是从数据库中获取用户信息。
