這幾天學習Ajax,做了個小實驗程序。程序如下:(index.jsp)
<%@ page import="java.util.*" contentType="text/html; charset=utf-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>用戶註冊</title>
<script type="text/javascript">
var xmlHttp = null;
//創建XMLHttpRequest對象
function createXMLHTTP() {
//判斷瀏覽器是否支持ActiveX
if (window.ActiveXObject) {
var arrXmlHttpTypes = ["Microsoft.XMLHTTP", "MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP"];
for (var i=0;i<arrXmlHttpTypes.length;i++){
try{
xmlHttp=new ActiveXObject(arrXmlHttpTypes[i]);
break;
}catch(ex){
}
}
//判斷瀏覽器是否將XMLHttpRequest作爲本地對象實現
}else if (window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();
}
}
//響應XMLHttpRequest對象狀態變化的函數
function httpStateChange(){
var j=0;
if(xmlHttp.readyState==4){ //表示異步調用完畢
if(xmlHttp.status==200||xmlHttp.status==0){
var userNames=xmlHttp.responseText;
var arruserName=userNames.split(';');
var bflag=false;
for(j=0;j<arruserName.length;j++)
{
if(arruserName[j] == myform.username.value) {
bflag=true;
break;
}
}
var node=document.getElementById("myDiv");
if(bflag){
node.firstChild.nodeValue="對不起,用戶名已經存在";
myform.submitButton.disabled=true;
}else{
node.firstChild.nodeValue="恭喜你,用戶名可以使用";
myform.submitButton.disabled=false;
}
}
}
}
//驗證用戶名是否有效
function checkName() {
createXMLHTTP();
if (xmlHttp != null){
xmlHttp.onreadystatechange=httpStateChange;
xmlHttp.open("get","userName.txt",true);
xmlHttp.send(null);
}else{
alert("您的瀏覽器不支持XMLHTTP,請更換瀏覽器後在進行註冊。");
}
}
</script>
</head>
<body>
<p align="center"><b>用戶註冊</b></p>
<form name="myform">
用戶名:<input type="text" name="username" onblur="checkName()" >
<span id="myDiv""> </span><br/>
輸入登錄密碼:<input type="password" name="password1"> <br/>
再次輸入密碼:<input type="password" name="password2"> <br/>
<input type="button" value="提交" name="submitButton" disabled/>
</form>
</body>
</html>
userName.txt爲服務器端的文本文件,存放已註冊用戶名,用";"分割。例如:bush;obama
將以上兩個文件發不到服務器,用瀏覽器訪問即可。
Ajax使用流程:
1.創建XMLHttpRequest對象;
2.創建響應XMLHttpRequest對象狀態變化的函數;
3.創建HTTP請求;
4.發送HTTP請求;
5.判斷異步調用是否成功;
6.獲得服務器返回數據;
7.局部更新。