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">
        用&nbsp;户&nbsp;名：<input type="text" name="username" id="username" size="32">
        <img src="data:images/checkBt.png" width="100" height="26" style="cursor:hand;" onclick="checkUser(form1.username);"><br>
        密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" name="pwd1" id="pwd1" size="35"><br>
        确认密码：<input type="password" name="pwd2" id="pwd2" size="35"><br>
        &nbsp;&nbsp;E-mail：<input type="text" name="email" id="email" size="45"><br>
        <input type="image" name="imageField" src="data: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("恭喜您，该用户名没有被注册!"); //输出检测结果
    }
 %>

由于本实例比较简单，这里没有从数据库中获取用户信息，而是将用户信息保存在一个一维数组中。在实际项目开发时，通常情况下是从数据库中获取用户信息。