JavaWeb——Ajax

一、概述

Ajax 是一种客户端技术，无论使用何种服务器技术都可以使用 Ajax；Ajax 是 XMLHttpRequest 对象和 Javascript、XML、CSS、DOM 等多种技术的组合。
XMLHttpRequest 对象为新技术，是 Ajax 技术中的核心部分，是一个具有应用程序接口的 Javascript 对象，能使用 HTTP 连接服务器；由微软公司在 1999 年提出。
XML 即 eXtensible Markup Language，翻译为中文为：可拓展标记语言，用于描述结构化数据，适用于不同应用程序之间的数据交换，因此 XMLHttpRequest 对象与服务器交互的数据采用该格式。

二、XMLHttpRequest

1、初始化

XMLHttpRequest 对象的初始化分为 IE 式和非 IE 式，IE 式初始化如下：

	var http_request = new ActiveXObject("Msxml2.XMLHTTP");
	var http_request = new ActiveXObject("Microsoft.XMLHTTP");

IE 浏览器将 XMLHttpRequest 对象初始化为一个 ActiveX 对象；非 IE 式初始化如下：
```
var htpp_request = new XMLHttpRequest();
```

因此要达到一个跨浏览器的 XMLHttpRequest 对象，可以使用如下方式：

if(window.XMLHttpRequest){
	http_request = new XMLHttpRequest();
}else if(window.ActiveXObject){
	try{
			http_request = new ActiveXObject("Msxml2.XMLHTTP");
		}catch(e){
			try{
					http_request = new ActiveXObject("Microsoft.XMLHTTP");
				}catch(e){}
		}
}

2、常用方法

open(method,URL,asyncFlag,userName,password)

该方法用于设置进行异步请求目标的 URL、请求方法以及其他参数信息。
前两个为必选参数，后三个为可选参数。

示例：

	http_request.open("GET","register.jsp",true);

send(content)

该方法用于向服务器发送请求，为异步请求则立刻返回，如果非异步请求则等到服务器响应才返回。
示例：
```
http_request.send(null);
```

setRequestHeader(header,value)

用于设置请求的 HTPP 头设置值，第一个参数指定 HTTP 头，第二个参数设置 HTTP 头值。

示例：

	http_request.setRequestHeader("Content-Type","application/x-www-from-urlcoded");

abort()

用于停止或放弃当前异步请求。

getReqponseHeader(headerLabel)

该方法用于获取指定的 HTTP 头的信息，类似的还有 getAllResponseHeader() 方法用于获取所有的 HTTP 头信息。

3、常用属性

XMLHttpRequest 对象常用属性如下表：

属性名	意义
onreadystatechange	用于指定状态改变时所触发的事件处理器
readyState	用于获取请求的状态：0-未初始化，1-正在加载，2-已加载，3-交互中，4-完成
responseText	用于获取服务器的响应，表示为字符串
responseXML	用于获取服务器的响应，表示为 XML
status	用于返回服务器的 HTTP 状态码，200-表示成功，202-表示请求被接受但尚未成功，400-错误的请求，404-文件未找到，500-内部服务器错误
statusText	用于返回 HTTP 状态码对应的文本

3、简单示例

首先新建一个 JSP 页面，命名为：userLogin.jsp，其代码如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户名检查</title>
    <script language="javascript">
        function createRequest(url) {
            http_request = false;
            if (window.XMLHttpRequest) {    							   // a browser is not IE
                http_request = new XMLHttpRequest();	                      //create XMLHttpRequest object instance
            } else if (window.ActiveXObject) {     						   // a browser is IE
                try {
                    http_request = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    try {
                        http_request = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e) {}
                }
            }
            if (!http_request) {
                alert("Cannot create XMLHttpRequest object instance!");
                return false;
            }
            http_request.onreadystatechange = getResult;					   // call option function  to deal with the result
            http_request.open('GET', url, true);							   // create the connection between the server and client
            http_request.send(null);									   // send a request to a server
        }
        function getResult() {
            if (http_request.readyState === 4) {     		// Judge the statue of request
                if (http_request.status === 200) {     		// Request successfully,start to deal with the result of return
                    document.getElementById("toolTip").innerHTML=http_request.responseText;	//设置提示内容
                    document.getElementById("toolTip").style.display="block";	//show tooltip
                } else {     						// An error occurred on the request pages
                    alert("The page you requested has errors!");
                }
            }
        }
        function checkUser(userName){
            if(userName.value===""){
                alert("please enter user name!");userName.focus();return;
            }else{
                createRequest('checkUser.jsp?user='+userName.value);
            }
        }
    </script>
    <style type="text/css">
        <!--
        #toolTip {
            position:absolute;
            left:331px;
            top:39px;
            width:100px;
            height:150px;
            padding-top:45px;
            padding-left:25px;
            padding-right:25px;
            z-index:1;
            display:none;
            color:red;
            background: #9ce9dd;
        }
        -->
    </style>
</head>
<body>
<form method="post" action="" name="form">
    <table width="509" height="352" border="0" align="center" cellpadding="0" cellspacing="0" >
        <tr>
            <td height="54">&nbsp;</td>
        </tr>
        <tr>
            <td height="253" valign="top">
                <div style="position:absolute;">


                    <table width="100%" height="250" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td width="18%" height="54" align="right" style="color:#8e6723 "><b>用户名：</b></td>
                            <td width="49%"><label for="username"></label><input name="username" type="text" id="username" size="32"></td>
                            <td width="33%"><input type="button" value="Checking username！" onclick="checkUser(form.username)"> </td>
                        </tr>
                        <tr>
                            <td height="51" align="right" style="color:#8e6723 "><b>密码：</b></td>
                            <td><label for="pwd1"></label><input name="pwd1" type="password" id="pwd1" size="35"></td>
                            <td rowspan="2">&nbsp;    <div id="toolTip"></div></td>
                        </tr>
                        <tr>
                            <td height="56" align="right" style="color:#8e6723 "><b>确认密码：</b></td>
                            <td><label for="pwd2"></label><input name="pwd2" type="password" id="pwd2" size="35"></td>
                        </tr>
                        <tr>
                            <td height="55" align="right" style="color:#8e6723 "><b>E-mail：</b></td>
                            <td colspan="2"><label for="email"></label><input name="email" type="text" id="email" size="45"></td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td colspan="2"><input type="button" value="Login"></td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
    </table>
</form>
</body>
</html>

在建立一个 JSP 页面用于检查用户名是否可用，命名为：checkUser.jsp，代码如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.Arrays" %>
<%
    String[] userList={"御承扬","pyc","夜烬天","wyn"};			//创建一个一维数组
    String user= request.getParameter("user");	//获取用户名
    Arrays.sort(userList);									//对数组排序
    int result=Arrays.binarySearch(userList,user);				//搜索数组
    if(result>-1){
        out.println("Sorry, the username is already registered!");			//输出检测结果
    }else{
        out.println("Congratulations, the username has not been registered!");			//输出检测结果
    }
%>