AJAX异步传输(采用非匿名函数) :
//创建xmlhttpRequest对象
var xmlHttp;
//有了这个对象就可以和引擎打交道,发送相关的参数.
function createXMLHttpRequest() {
//表示当前浏览器不是ie,如ns,firefox
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
//完成检查,动态的检查用户代码是否已经存在.
function validate(field)
{
//alert(document.getElementById("userId").value);
//alert(field.value);
//如果用户中取得了用户代码的数据,且不为空.
if(trim(field.value).length != 0)
{
//创建Ajax核心对象.
createXMLHttpRequest();
//三个参数,第一个是提交方式get或post,url
//防止缓存.
var url = "user_validate.jsp?userId=" + trim(field.value) + "×=" + new Date().getTime();
//设置请求方式为get,设置请求的url,设置为异步提交true
xmlHttp.open("GET",url,true);
//将方法地址复制给onreadystatechange属性.
//类似于电话号码.
xmlHttp.onreadystatechange=callback;
//get请求参数为null. 将设置信息发送到Ajax引擎.(像手机短信一样,同时给他一个url(电话号码),打着这个座机,说明这件事完成了)
xmlHttp.send(null);
}
else
{
//开始就清除我们的显示标记.
document.getElementById("spanUserId").innerHTML = "";
}
}
function callback()
{
//Ajax的引擎发生改变.
//alert(xmlHttp.readyState);
//查看引擎的状态.Ajax引擎状态为成功.
if(xmlHttp.readyState == 4){
//无论是请求成功还是不成功,为4是有响应,200是成功,其他的状态都表示失败.
//http协议状态为成功.
if(xmlHttp.status ==200)
{
//判断返回的东西. 如果不为空的话,显示span的提示用户存在的标签.
if(trim(xmlHttp.responseText) !="")
{
//alert(xmlHttp.responseText);
//设置提示的标签内容.
document.getElementById("spanUserId").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>";
}
else
{
//如果为空.清除span标签.
document.getElementById("spanUserId").innerHTML = "";
}
}else
{
//错误代码,例如404没有找到页面.
alert("请求失败,错误码" + xmlHttp.status);
}
}
}
AJAX异步传输(采用匿名函数):
//完成检查,动态的检查用户代码是否已经存在.
function validate(field)
{
//alert(document.getElementById("userId").value);
//alert(field.value);
//如果用户中取得了用户代码的数据,且不为空.
if(trim(field.value).length != 0)
{
var xmlHttp=null;
//表示当前浏览器不是ie,如ns,firefox
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//三个参数,第一个是提交方式get或post,url
//防止缓存.
var url = "user_validate.jsp?userId=" + trim(field.value) + "×=" + new Date().getTime();
//设置请求方式为get,设置请求的url,设置为异步提交true
xmlHttp.open("GET",url,true);
//将方法地址复制给onreadystatechange属性.
//类似于电话号码.
//xmlHttp.onreadystatechange=callback;
//采用匿名函数的方式.
xmlHttp.onreadystatechange=function()
{
//Ajax的引擎发生改变.
//alert(xmlHttp.readyState);
//查看引擎的状态.Ajax引擎状态为成功.
if(xmlHttp.readyState == 4){
//无论是请求成功还是不成功,为4是有响应,200是成功,其他的状态都表示失败.
//http协议状态为成功.
if(xmlHttp.status ==200)
{
//判断返回的东西. 如果不为空的话,显示span的提示用户存在的标签.
if(trim(xmlHttp.responseText) !="")
{
//alert(xmlHttp.responseText);
//设置提示的标签内容.
document.getElementById("spanUserId").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>";
}
else
{
//如果为空.清除span标签.
document.getElementById("spanUserId").innerHTML = "";
}
}else
{
//错误代码,例如404没有找到页面.
alert("请求失败,错误码" + xmlHttp.status);
}
}
}
//get请求参数为null. 将设置信息发送到Ajax引擎.(像手机短信一样,同时给他一个url(电话号码),打着这个座机,说明这件事完成了)
xmlHttp.send(null);
}
else
{
//开始就清除我们的显示标记.
document.getElementById("spanUserId").innerHTML = "";
}
}
为什么采用匿名函数?
我们可以看到,采用非匿名函数中的XMLHttpRequest对象必须是一个全局变量, 如果我们在用户添加信息这个过程中, 不同的输入要进行不用的验证, 那就要多次调用这个对象了, 如果这个光标进入事件需要调用, 那个也需要, 多个需要的, 他们都能够改动XMLHttpRequest对象的状态, 例如给变url地址,改变提交方式就会变得一片混乱. 所以我们采用匿名函数传输.