(二)AJAX异步传输(采用非匿名函数和匿名函数) 实例.

AJAX异步传输(采用非匿名函数)　：

 

 //创建xmlhttpRequest对象     var xmlHttp;    //有了这个对象就可以和引擎打交道,发送相关的参数.function createXMLHttpRequest() {//表示当前浏览器不是ie,如ns,firefoxif(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,firefoxif(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地址,改变提交方式就会变得一片混乱.  所以我们采用匿名函数传输.