day 20 ajax上

同步和异步:

       同步请求会刷新整个页面（向服务器发送了请求，请求了所有的页面资源），

       异步请求不会刷新整个页面，只是更新了局部数据，请求了所需数据（按需取数据）。

一、ajax   全称：Asynchronous（ajax所有的知识都很重要，面试的时候都有可能会问到）

     定义:ajax是一种技术，用来和后台进行数据交互

   Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术（也就是异步）

 

二、ajax请求过程

        1）//创建一个XMLHttpRequest();

            var xhr = new XMLHttpRequest();

        alert(xhr.readyState)//0 - (未初始化)还没有调用send()方法

        2）//调用open(method,url,boolean)

                三个参数

                    method：请求方式：get/post

                    url:接口路径

                    boolean:true：异步（默认）；false:同步

        xhr.open("get","index.php");

        3)//调用send()：发送请求。

           xhr.send();

           alert(xhr.readyState)// 1 - (载入)已调用send()方法，正在发送请求

            //2 - (载入完成)send()方法执行完成，

            // 3 - (交互)正在解析响应内容

            // 4 - (完成)响应内容解析完成，可以在客户端调用了

        4)//监听请求状态

        xhr.onreadystatechange = function(){

            //判断状态为4时，可以接收后台返回的数据了。

            if(xhr.readyState == 4){

               //xhr.readyState请求的状态

                if(xhr.status == 200){//后台返回了一个结果。

                    alert(xhr.responseText);//返回响应的内容

                }else{

                    alert("响应出错，状态为："+xhr.status+",出错原                            因"+xhr.statusText);

                }

            }

        }

三、 AJAX状态码说明：

          

          1**：请求收到，继续处理

          2**：操作成功收到，分析、接受

          3**：完成此请求必须进一步处理

          4**：请求包含一个错误语法或不能完成

          5**：服务器执行一个完全有效请求失败

          200——交易成功

          404——没有发现文件、查询或URl

          502——服务器暂时不可用，有时是为了防止发生系统过载

四、ajax 请求

1、get请求

var xhr = new XMLHttpRequest();

    xhr.open("get","index2.php?uname=tom");

    xhr.send();

    xhr.onreadystatechange = function(){

        if(xhr.readyState == 4){

            if(xhr.status == 200){

                alert(xhr.responseText);

            }else{

                alert("响应出错，状态为："+xhr.status+",出错原因"+xhr.statusText);

            }

        }

    }

2.post请求

var xhr = new XMLHttpRequest();

    

    xhr.open("post","index2.php");

    

    //post的请求头设置

    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");（面试会问到）

    //send的参数，post请求携带的参数。

    xhr.send("uname=tom");//请求体

    xhr.onreadystatechange = function(){

        if(xhr.readyState == 4){

            if(xhr.status == 200){

                alert(xhr.responseText);

            }else{

                alert("响应出错，状态为："+xhr.status+",出错原因"+xhr.statusText);

            }

        }

    }

五、ie7缓存：

    每一交发送请求，如果请求路径没有发生任何改变，浏览器会认为上与上一次请求是同一次请求。

    上次请求在浏览器的缓存中保存了上次请求的记录，会在缓存中直接获取数据，而不会到接口中去获取数据。

 六.如何解决缓存问题？

    解决办法：让每一次请求与上一次请不同。

    xhr.open("get","text.txt?rand="+Math.random());

    xhr.open("get","text.txt?rand=" + new Date().getTime());：

七、ie6兼容：

    var xhr = new XMLHttpRequest();

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

兼容：

function getXHR(){

 var xhr = null;

    if(Window.XMLHttpRequest){

        xhr = new XMLHttpRequest();

    }else{

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

    }

return xhr;

}

八、封装1.0版本

 

/*

* callback = function(responseText){

            text.innerHTML = responseText;

        }

*

* callback();

sub.onclick = function(){

        

        var obj = {

            uname : uname.value,

            pwd : pwd.value

        }

        ajaxGet("login.php",obj,function(responseText){

            text.innerHTML = responseText;

        });

        /*animate(  function(){

            lfwjeklfjkl

        })*/

    }

    

*/

function ajaxGet(url,callback,data){//caaa

        var xhr = getXHR();

        if(data){

            url += "?" + parameter(data);

        }

        xhr.open("get",url);

        xhr.send();

        xhr.onreadystatechange = function(){

            if(xhr.readyState == 4){

                if(xhr.status == 200){

                    //alert(xhr.responseText);

                    callback(xhr.responseText);

                    //text.innerHTML = xhr.responseText;

                }else{

                    alert("响应出错，状态为："+xhr.status+",出错原因"+xhr.statusText);

                }

            }

        }

    }

    function getXHR(){s

        var xhr = null;

        if(window.XMLHttpRequest){

            xhr = new XMLHttpRequest();

        }else{

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

        }

        return xhr;

    }

    

    function parameter(obj){

        //{uname: "刘德华", pwd: "234"}

        //uname=刘德华&pwd=234;

        //console.log(obj);

        var arr = [];

        for(var item in obj){

            arr.push(item+"="+obj[item]);

            //console.log(arr);

        }

        //console.log(arr.join("&"));

        

        return arr.join("&");

        

    }

九、get封装

    

function ajaxGet(obj){//caaa

        var xhr = getXHR();

        obj.url += "?rand=" + new Date().getTime();//ie7缓存问题

        if(obj.data){

            obj.url += "&" + parameter(obj.data);

        }

        xhr.open("get",obj.url);

        xhr.send();

        xhr.onreadystatechange = function(){

            if(xhr.readyState == 4){

                if(xhr.status == 200){

                    //alert(xhr.responseText);

                    obj.success(xhr.responseText);

                    //text.innerHTML = xhr.responseText;

                }else{

                    if(obj.erro){

                        obj.erro("响应出错，状态为："+xhr.status+",出错原因"+xhr.statusText);

                    }

                }

            }

        }

    }

    function getXHR(){

        var xhr = null;

        if(window.XMLHttpRequest){

            xhr = new XMLHttpRequest();

        }else{

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

        }

        return xhr;

    }

    

    function parameter(obj){

        //{uname: "刘德华", pwd: "234"}

        //uname=刘德华&pwd=234;

        //console.log(obj);

        var arr = [];

        for(var item in obj){

            arr.push(item+"="+obj[item]);

            //console.log(arr);

        }

        //console.log(arr.join("&"));

        

        return arr.join("&");

        

    }

十、post封装

    function ajaxPost(obj){//caaa

        var xhr = getXHR();

    

        /*if(obj.data){

            obj.url += "?" + parameter(obj.data);

        }*/

        xhr.open("post",obj.url);

        

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

        

        if(obj.data){

            xhr.send(parameter(obj.data));

        }else{

            xhr.send();

        }

        xhr.onreadystatechange = function(){

            if(xhr.readyState == 4){

                if(xhr.status == 200){

                    //alert(xhr.responseText);

                    obj.success(xhr.responseText);

                    //text.innerHTML = xhr.responseText;

                }else{

                    if(obj.erro){

                        obj.erro("响应出错，状态为："+xhr.status+",出错原因"+xhr.statusText);

                    }

                }

            }

        }

    }

    function getXHR(){

        var xhr = null;

        if(window.XMLHttpRequest){

            xhr = new XMLHttpRequest();

        }else{

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

        }

        return xhr;

    }

    

    function parameter(obj){

        //{uname: "刘德华", pwd: "234"}

        //uname=刘德华&pwd=234;

        //console.log(obj);

        var arr = [];

        for(var item in obj){

            arr.push(item+"="+obj[item]);

            //console.log(arr);

        }

        //console.log(arr.join("&"));

        

        return arr.join("&");

        

    }