利用dom方式进行异步传输，XMLHttpRequest对象的创建，数据的异步交互

与jquery的区别是：jquery封装了XMLHttpRequest对象的get请求。$.get(),  data就是接受到的数据

 

Verufy.js

var xmlhttp;

//创建不同浏览器的xmlhttprequest对象

    function createXMLHttpRequest(){

        //针对fiefor,mozillar,opera,ie7,ie8

        if(window.XMLHttpRequest()){

            xmlhttp = new XMLHttpRequest();

           

        }else if(window.ActiveXObject()){

             //针对ie5,ie6

            //两个可以用于创建xmlhttprequest对象的控件名称，保存在一个js数组中

            //排在前面的版本较新

            var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];

            for(var i=0;i<activeName.length;i++){

                try{

                    //取出一个控件进行创建，创建成功就返回

                    xmlhttp = new ActiveXObject(activexName[i]);

                    break;

                }catch(e){

 

                }

            }

        }

 }

 

    function verify(){

        createXMLHttpRequest();

        var userName = document.getElementById("name").value;

        var url = "AjaxServer?name=" + userName + "&timestampt=" + new Date().getTime();

        //提交的方式，提交的地址，同步还是异步

       xmlhttp.open("GET",url,true);

        xmlhttp.onreadystatechange = callback;

        xmlhttp.send(null);

 

     

 //post方式提交

        var url = "AjaxXMLServer";

        xmlhttp.open("post",url,true);

        //设置头信息

        xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        xmlhttp.onreadystatechange = callback;

        //异步方式。send这句话会立即执行

        xmlhttp.send("name=" + userName + "&timestampt=" + new Date().getTime());

 

    }

 

    function callback(){

        if(xmlhttp.readyState == 4){   //全部传完了

            if(xmlhttp.status == 200){ //传递的消息正确

                var resTextdiv = document.getElementById("result");

                resTextdiv.innerHTML = "<font color='red'>" + xmlhttp.responseText + "</font>";

            }

        }

    }