千言万语也无法详尽的描述ajax的魅力，那就先下水试试吧（临渊羡鱼，不如退而结网）
下面就结合这样一个案例来体验一下，需求是：用ajax实现网站用户唯一性校验。描述如下：
1.打开一个网站页面，输入用户名，点击校验按钮。
2.系统收到信息后进行比较判断，如果存在，则在当前页面提示“用户帐户信息已存在”，否则，提示“用户帐户可用”。
这里，客户端就要用到ajax，服务器我们用Servlet来实现。
首先，设计一个html页面,命名为accountCheck.html,具体代码见附件
其中,页面上有一个输入框,名称叫做accountNo,在输入框的旁边有一个div标签,它是做什么的呢?对了,它就是用于动态的显示我们的提示信息用的.按照web开发的原理,要想触发实践,在我们的实例中必须在按钮上加上onclick事件触发动作,而当单击事件发生后,则去执行我们的js函数checkAccount()(是不是弱智了点啊,觉得土的话,接着往下看,下面就是传说中的javascript
)
<script>
var http_request;
/*按钮点击时触发checkAccount函数*/
function checkAccount(){
var account = document.getElementById("accountNo");
var serverUrl = "CheckAccountServlet";
var requestMethod = "post";
var requestData = "account="+account.value;
sendRequestByAjax(requestMethod,serverUrl,requestData,doResponse);
}
/*具体负责处理服务器返回数据的函数*/
function doResponse(){
//当服务器将数据返回给客户端时,readyState状态值为4
if(http_request.readyState==4){
//当服务器返回的数据是正常的数据时,status状态值为200
if(http_request.status==200){
//通过XMLHttpRequest对象的responseText属性获取
//服务器返回的文本信息
var returnMsg = http_request.responseText;
showMessage(returnMsg);
}
}
}
/*用ajax方式发送数据到url指定的服务器地址上*/
function sendRequestByAjax(method,url,data,dataHandler){
//获取XMLHttpRequest对象
http_request = getAjaxObject();
//设置当服务器数据返回后,处理服务器返回数据的js函数
//这里处理函数名称是以参数形式给出
http_request.onreadystatechange = dataHandler;
//与指定的url地址建立连接
//第一个参数可以选择传递为Post或者Get,表示请求方式
//第二个参数表示请求的服务器地址
//第三个参数如果为true,表示只有建立连接成功后才执行后面的js代码
//如果为false,则相反
http_request.open(method,url,true);
//如果是以post方式发送数据,则必须加上如下代码,否则服务器将会收不到数据
//setRequestHeader("Content-Type","application/x-www-form-urlencoded");
if("post"==method.toLowerCase()){
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
//真正发送数据
//如果method指定是Get方式发送数据,则这里send函数参数data=null
//如果method指定是Post方式发送数据,则这里send函数参数
//具体的数据data(参数data的数据格式为:name=zhang&money=10000)
http_request.send(data);
}
/*
*最终目的只有一个,就是获得XMLHttpRequest对象(只有有了它以后,
*才能以ajax方式发送请求数据)
*函数内部的实现代码是为了兼容不同浏览器类型
*/
function getAjaxObject(){
var xmlHttpRequest;
if(window.XMLHttpRequest){//Mozilla,IE7.0
xmlHttpRequest = new XMLHttpRequest();
if(xmlHttpRequest.overrideMimeType){
xmlHttpRequest.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){//IE
try{
xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}
return xmlHttpRequest;
}
/*显示服务器返回的信息到div标记中*/
function showMessage(message){
//根据id获取div元素对象
var msgDiv = document.getElementById("msg");
//通过设置div元素的innerHTML属性来完成信息的显示
msgDiv.innerHTML = message;
}
</script>
够你看的了吧,慢慢看,每一个函数都有详细的注释,希望你能成为ajax高手.
哦,你已经看懂了吗?如果看懂了,把如上代码copy到accountCheck.html的标签之内,至此客户端的代码已经ok.
接下来,我们再来看看服务器端代码如何编写,前文已经说过,服务器端我们用Servlet来实现.具体代码如下:
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request,response);
}
/**
* The doPost method of the servlet.
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//获取客户端请求帐户数据
String accountNo = request.getParameter("account");
//如果输出信息中包含中文信息,则需要设置字符集编码为gb2312
//否则,客户端收到的信息将会是乱码
response.setContentType("text/html;charset=gb2312");
//设置响应报文头,使浏览器不做数据缓存
response.setHeader("Cache-Control","no-cache");
PrintWriter out = response.getWriter();
if("zhangsan".equalsIgnoreCase(accountNo)){
out.println("用户帐户信息已存在");
}else{
out.println("用户帐户可用");
}
//信息输出完成后,关闭输出流
out.close();
}
OK,现在我们终于可以歇口气来看看我们的成果啦.我将本文的全部代码以附件的形式附上,望大家测试评判!
