XMLHttpRequest进行Ajax异步请求过程

1.get请求

创建XMLHTTPRequest对象的封装

    function createXHR(){

        var xhr;

        if(window.XMLHttpRequest){

            xhr = new XMLHttpRequest();       

        }

        else

        {

            xhr = new ActiveXObject("Microsoft.XMLHTTP");

        }

        return xhr;

    }

    

通过url发送数据，中文的要进行url编码处理

    function send(){

//1 new (创建对象)

      var request = createXHR();

     //2 open（没有发送）

        //设置div初始值

        var div = document.getElementById("msg");

        div.innerHTML ="正在加载...";

        //当get时处理中文的编码

        var name = encodeURIComponent("张三");

        //open

        request.open("get","01-get.ashx?name="+name,true); //true 表示是异步请求

        request.setRequestHeader("If-Modified-Since","0");

        

        //3 register（注册事件）

        request.onreadystatechange=function(){

            if(request.readyState==4){

                //条件readyState==4 与else服务器错误并列

                if(request.status==200){

                    div.innerHTML =request.responseText;

                }

                 else{

                    div.innerHTML ="服务器错误";

                }    

            }

        }

      //4 send（发送请求）

        request.send();  

    }

 

2.post请求

加粗部分是与get请求不同的部分。

function login(){

     //1 new-创建对象

    var request = createXHR();

        var msgSpan = document.getElementById("msg");

        msgSpan.innerHTML="正在登陆...";

        //获取表单元素的”值“，准备要提交的数据

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

        var pwd =document.getElementById("txtPwd").value;  

        var data = "name="+name+"&pwd="+pwd;

           

        //2 open-初始化请求

        request.open("post","02-post.ashx",true);

        //与get不一样的地方 设置请求报文头的"Context-Type"：

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

        //3 register-注册状态改变事件

        request.onreadystatechange =function(){

            if(request.readyState==4 && request.status==200){

                var msg = request.responseText;

                if(msg==1){

                   msgSpan.innerHTML="登陆成功";

                }

                else{

                    msgSpan.innerHTML="登陆失败";

                }

            }

        }

        //4 send  注意send()的参数：要post的数据

        request.send(data);

   }