【DRP】ajax总结

前言

ajax在前后台交互，尤其是异步刷新的时候经常用到。个人理解：ajax是一个和正在运行的线程同级的一个引擎，像是一个代理。你正在收集姓名，学号，邮箱等信息，收集完成后统一提交，在收集到姓名的时候就让代理去帮你查一下长度是否合适，输完学号就帮你查一下是不是都是数字。你是主角，他是配角但是他很重要。

颗粒归仓

整体流程是这个样子的：

大致分为6步：
一、创建xmlHttpRequest对象
二、设置访问地址
三、打开并设置访问方式
四、发送
五、回发

创建，交互，回发分开写的例子：

    var xmlHttp;        function createXMLHttpRequest(){            if(window.XMLHttpRequest){                xmlHttp = new XMLHttpRequest();            }else if (window.ActiveXObject){                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");            }        }        function validate(field){            if(trim(field.value).length != 0){            //创建ajax的核心对象xmlhttprequest            createXMLHttpRequest();            var url = "user_validate.jsp?userId=" + trim(field.value) + "time="+new Date().getTime();            //设置请求方式为get，请求的URL，异步提交            xmlHttp.open("GET",url,true);            xmlHttp.onreadystatechange=callback;            //将设置信息发送到ajax引擎            xmlHttp.send(null);            }        }        function callback(){            if(xmlHttp.readyState == 4){                if(xmlHttp.status == 200){                   alert("请求成功");                }else{                    alert("请求失败，错误码：" + xmlHttp.status );                }            }        }

合起来写的例子：

    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");            }            //user_validate.jsp相当于一个servlet，开启一个新的线程去访问后台            var url = "user_validate.jsp?userId=" + trim(field.value) + "&time="+new Date().getTime();            //设置请求方式为get，请求的URL，异步提交            xmlHttp.open("GET",url,true);            xmlHttp.onreadystatechange=function(){            //ajax引擎状态为成功            if(xmlHttp.readyState == 4){                //http协议状态为成功                if(xmlHttp.status == 200){                  // alert(xmlHttp.responseText);                   if(trim(xmlHttp.responseText) != ""){                    document.getElementById("spanUserId").innerHTML = "<font color='red'>"+xmlHttp.responseText+"</font>";                   }else{                    document.getElementById("spanUserId").innerHTML= "";                   }                }else{                    alert("请求失败，错误码：" + xmlHttp.status );                }            }            };            //将设置信息发送到ajax引擎            xmlHttp.send(null);            }else{                document.getElementById("spanUserId").innerHTML= "";            }        }

发送后用onreadystatechange来监听，xmlHttp.readyState == 4说明有回应了。xmlHttp.status == 200说明这个交互成功了。

小结

实践出真知。在小的知识点也是需要多多应用的，学以致用嘛。