这几天学习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.局部更新。