了解AJAX以及其封装编程

AJAX的封装

一般我们的请求方式有两种，一种是GET，一种是POST，而我们通过这两种方法发出的异步请求通常成为AJAX；那么我们来通过封装AJAX实现我们去请求更便捷的调用

//先了解一下get方法的设置    function get(url,data,success){        var xhr = new XMLHttpRequest;        //GET方法可以不设置请求头        //设置请求方式，xxx.php为请求的页面        xhr.open('get','xxx.php');        //设置请求完成后的事件        xhr.onreadystatechange = function(){            if (xhr.readyState == 4 && xhr.status == 200){                //当请求完成之后调用函数，并把接收的数据传进去                success(xhr.responseText);            }        }        //有于GET方法在url后面拼接了发送请求的信息，所以这里直接传入NULL即可        xhr.send(null);    }//同理，POST方法基本与GET方法相同，只有几处值得注意的地方    function post(url,data,success){        var xhr = new XMLHttpRequest;        xhr.open('post','xxx.php');        //POST方法当你需要发送数据的时候，则需要设置请求头        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")        xhr.onreadystatechange = function(){            if(xhr.readystate == 4 && xhr.status == 200){                success(xhr.responseText);            }        }        xhr.send(data);    }//我们发现GEI方法和POST方法有很多共同的地方，那么我们可以提取部分的程序并封装成AJAX函数    function ajax(option){        var xhr = new XMLHttpRequest;        //通过type判断是采用什么方式进行请求        if(option.type == "get"){            option.url += "?";            option.url += option.data;            //因为GET方法后面发送为NULL，所以这里就直接把data设置为null            option.data = null;        }        xhr.open(option.type,option.url);        xhr.onreadystatechange = function(){            if(xhr.readyState == 4 && xhr.status == 200){                //返回的数据通常有三种类型，一种是普通的字符串，一种是XML格式的字符串，另一种是JSON格式的字符串，那么为了方便我们调用不同的数据，那么就对响应头responseHeader进行判断，判断出是什么类型的字符串，然后转化成相应的数据之后再调用                //获取响应头                var value = xhr.getResponseHeader("Content-Type");                //通过indexOf函数判断value中是否有json的字符串，如果有，则返回的是json所在的字符串的索引位置，如果没有的话就是返回-1，xml判断同理                if(value.indexOf('json') != -1){                    //通过json.parse把字符串转化成json对象                    option.success(json.parse(xhr.responseText));                } else if(value.indexOf('xml') != -1){                    option.success(xhr.responseXML);                } else {                    option.success(xhr.responseText);                }            }        }        xhr.send(option.data);      }//调用方法ajax({    data:"name=jack",    url:"xxx.php",    type:"post",    success:function(data){        //在这里调用传回的数据data        console.log(data);    }})