ajax封装详解

封装ajax
function ajax(obj){
    //1.创建ajax对象
    var xhr
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest() //ie7以上浏览器
    }else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP") //只有IE6支持此对象
    }
    //2.打开请求
    //第一个参数表示请求方式，值为get/post，是字符串
    //第二个参数表示请求的地址
    //第三个参数是布尔值，默认是true，表示异步，false表示同步
    xhr.open(obj.type,obj.url,obj.async)
    //3.判断请求方式get/post，发送数据（post方式必须发送请求头）
    if(obj.type.toLowerCase()=="get"){
        xhr.send()
    }else if(obj.type.toLowerCase=="post"){
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded") //设置请求头
        xhr.send(toUrl(obj.data)) //name=1&name=2
    }
    //4.操作返回的数据
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4 && xhr.status==200){
            //1.readystate属性：ajax工作状态
            //2.每当readyState的值发生改变，就会触发  onreadystatechange事件
            //存有XMLHttpRequest的状态，从0-4发生改变
            //0：请求未初始化
            // 1：服务器连接已建立
            // 2：请求已连接
            // 3：请求处理中
            // 4：请求已完成，且响应已就绪
            //http状态码
            //200代表请求成功
            //403禁止访问
            //404文件未找到
            //500服务器错误
            //对responseText进行json转化
            var data = JSON.parse(xhr.responseText)
            //把转化好的数据当做参数返回给obj.success函数
            obj.success(data)
        }
    }
}

调用

ajax的调用
ajax({
    type:"get或者post",
    url:"地址路径",  //加post的话用到data     get的话直接用&拼接
    data:{
        key:"111211"
    },
    async:true,
    success:function(res){
        console.log(res);;
    }
})
//直接返回调用的对象
// 请求方式type用get/post
// get方式直接拼接key必选项
// post方式直接传入data对象再设置key必选项