3.简单封装ajax

简单封装ajax

步骤：

• 1创建xhr对象
• 2设置请求行
• 3设置请求头
• 4设置请求体
• 5监听响应内容

• 6获取相应内容

  参数提取:

参数名	参数类型	描述	传值	默认值
type	string	请求方式	get/post	只要不传post，就是get
url	string	请求地址	接口地址	如果不传地址，不发送请求
async	boolean	是否异步	true/fase	只要不传false，那就是true，异步请求
data	object	请求数据	{key:value,key1:value2}	需要把这个对象拼接成参数的格式 uname=Jepson&upass=12345
dataType	string	返回的数据类型	xml/json/text	text
success	function	响应成功时调用	-	-
error	function	响应失败时调用	-	-

参数检测

    //要求参数obj必须传值，否则不发送请求
    if(!obj||typeof obj!=="object"){
        return;
    }
    //type传的是post,那就发送post请求，否则发送get
    var type = obj.type =="post"?"post":"get";
    //url不传则不发送
    var url = obj.url;
    if(!url){
        return;
    }
    //async传了false则发送同步请求，否则默认true
    var async = obj.async ==false?false:true;

封装:

 //参数对象用obj可以解决传参顺序问题
 function ajax(obj){
     if(!obj||typeof obj!=="object"){
         return;
     }
     var type = obj.type ==="post"?"post":"get";
     var url = obj.url;
     if(!url){
         return;
     }
     var async =obj.async===false?false:true;

     var dataType = obj.dataType;
     function parseParams(obj2){
         if(!obj2||typeof obj2!="object"){
             return null;
         }
         var arr = [];
         for var( var k in obj2){
             arr.push(k+"="+obj2[k]);
         }
         return arr.join('&');
     }
     //data参数作为参数对象，解析成urlencoded各式
     //将 { username: "Jepson", "password":123456 }
    // => username=Jepson&password=123456

     var data = obj.data;
     var params = parseParams(data);
    //发送请求
    var xhr = new XMLHttpRequest();
    if(type === "get"){
        url+="?"+params;
        params = null;
    }
    //设置请求行
    xhr.open(type,url,async);
    //设置请求头
    if(type ==="post"){
        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
    }
    //设置请求体并发送
    xhr.send(params);

    //处理响应
    xhr.onreadystatechange = function(){
        if (xhr.readyState == 4){
            if(xhr.status ==200){
                var result = null;  /*根据响应头的content-type属性指定方法接收到的内容*/
               var dataType = xhr.getResponseHeader('content-type'); //datetype有三种数据类型响应处理，分别判断
                if(dateType.indexOf("xml")>-1){
                    result =xhr.responseXML;
                }else if(dateTypeindexOf('json')>-1){
                    result = JSON.parse(xhr.responseText);
                }else{
                    result = xhr.responseText;
                }
                obj.success&&obj.success(result);
            }
            else{
                //响应错误的提示
                obj.error && obj.error(xhr.responseText);
            }
        }
    }
 }
 //调用ajax函数
 ajax({
     type:"get",
     url:"1.php",
     params:"username=123",
     async:true
 })