了解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);
    }
})