封装ajax（兼容IE）

﹏ヽ暗。殇╰゛Y 2022-05-27 08:48 185阅读 0赞

//封装适合各种情况的简化版ajax函数
    
    //利用解构，获取将来参数对象中每个属性值
    //请求类型: "get"||"post"
    //请求的url地址: "xxx.php"
    //请求携带的参数: "变量1=值&..."
    //服务器端返回值类型: "json"||"text"
    /*function ajax({type,url,data,dataType}){*/
    function ajax(obj){
      //服务器端返回值类型默认为text
      dataType=obj.dataType||"text";
      //只要远程请求，必有延迟，只要延迟，比用promise等待完成后，才执行后续操作
      return new Promise(function(resolve){//.then()
        //AJAX 4步/5步:
        if(XMLHttpRequest){
          var xhr=new XMLHttpRequest();//1.获得xhr对象
        }else{
          var xhr=new ActiveXObject("Microsoft.XMLHTTP");
        }
        //如果是get请求，且传入了data参数，才需要拼接url和data为get请求的完整地址
        if(obj.type.toLowerCase()=="get"&&obj.data!==undefined)
          obj.url+="?"+obj.data;
        xhr.open(obj.type,obj.url,true);//2. 建立连接
        //3. 设置请求状态回调函数
        xhr.onreadystatechange=function(){
          //如果请求完成，且成功!
          if(xhr.readyState==4&&xhr.status==200){
            //如果服务器端响应类型不是json，则调用后续resolve操作，并传入原始responseText，做后续处理
            if(obj.dataType.toLowerCase()!="json")
              resolve(xhr.responseText);
            else//如果服务器端响应类型是json，则自动调用JSON.parse转为js对象，再交给resolve函数做后续处理
              resolve(JSON.parse(xhr.responseText));
          }
        }
        //只有type为post，才需要设置请求头
        if(obj.type.toLowerCase()=="post")
          xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        //只有type为post，才需要send时，传入参数
        xhr.send(obj.type.toLowerCase()=="post"?obj.data:null);
      })
    }

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    </head>
    <body>
    	
    	<script src="js/polyfill.min.js"></script>
    	<script src="js/ajax.js"></script>
    	<script type="text/javascript">
    		ajax({
    			type:'get',
    			url:'http://localhost/test/test.php',
    			dataType:'json',
    		}).then(function(data){
    			console.log(data);
    			alert(data.ok);
    		})
    	</script>
    </body>
    </html>

尝试了下IE，IE9以及以上都可以用。不过需要先引入polyfill.min.js。

polyfill.min.js下载地址：http://www.bootcdn.cn/babel-polyfill/

打开某个链接，直接复制粘贴代码即可。