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&name2=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)
                    }
                }
                
                //对obj.data进行转化，把对象转化成url形式
                function toUrl(obj){
                    var arr=[]
                    for(var i in obj){
                        arr.push(i+"="+obj[i])
                    }
                    return arr.join("&")
                }
            }

ajax调用

ajax({
                type:"post或者get",
                url:"地址",
                //加post的话用到data
                //get的话直接用&拼接  
                data:{
                        key:"c0bf48603646fc9a7c8"
                    },
                async:true,
                success:function(res){      
                    console.log(res);
                }
            })

直接返回调用的对象
请求方式type用get/post
get方式直接拼接key必选项
post方式直接传入data对象再设置key必选项