Ajax---封装3，设置参数的默认值 

使用options对象中的属性覆盖defaults对象中的属性
Object.assign(defaults,defaults    );

.html

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <title></title>
  6 </head>
  7 <body>
  8     <script type="text/javascript">
  9         function ajax(options){
 10 
 11             var defaults={
 12                 type:'get',
 13                 url:'',
 14                 data:{},
 15                 header:{
 16                     'Content-Type':'application    /x-www-form-urlencoded'
 17                 },
 18                 success:function(){},
 19                 error:function(){}
 20             };
 21             //使用options对象中的属性覆盖defaults对象中的属性
 22             Object.assign(defaults,options);
 23 
 24             //创建Ajax对象
 25             var xhr=new XMLHttpRequest();
 26             //拼接请求参数的变量
 27             var params='';
 28             for(var attr in defaults.data){
 29                 //将参数转换为字符串格式
 30                 params+=attr+"="+defaults.data[attr]+"&";
 31             }
 32             //将参数最后的&截取掉
 33             params=params.substr(0,params.length-1);
 34             //console.log(params);
 35 
 36             //判断请求方式
 37             if(defaults.type=='get'){
 38                 defaults.url=defaults.url+"?"+params;
 39             }
 40 
 41             //配置ajax对象
 42             xhr.open(defaults.type,defaults.url);
 43 
 44             //如果请求方式为post
 45             if(defaults.type=='post'){
 46                 //用户希望的向服务器端传递的请求参数的类型
 47                 var contentType=defaults.header['Content-Type']
 48                 //设置请求参数格式的类型
 49                 xhr.setRequestHeader('Content-Type',contentType);
 50 
 51                 if(contentType=="application/json"){
 52                     xhr.send(JSON.stringify(defaults.data))
 53                 }else{
 54                     xhr.send(params);
 55                 }
 56                 
 57             }else{
 58                 //发送请求
 59                 xhr.send();
 60             }
 61 
 62             //监听xhr对象下面的onload事件
 63             //当xhr对象接收完响应数据后触发
 64             xhr.onload=function(){
 65 
 66                 //获取响应头中的数据
 67                 var contentType= xhr.getResponseHeader('Content-Type');
 68                 //服务器端返回的数据
 69                 var responseText=xhr.responseText;
 70 
 71                 //如果响应类型中包含application.json
 72                 if(contentType.includes('application/json')){
 73                     //将json字符串转换为json对象
 74                     responseText=JSON.parse(responseText)
 75                     console.log('包含')
 76                 }
 77                 
 78                 //http状态码等于200的时候
 79                 if(xhr.status==200){
 80                     //请求成功，调用处理成功情况的函数
 81                     options.success(responseText,xhr);
 82                 }else{
 83                     //请求失败，调用处理失败情况的函数
 84                     options.error(responseText,xhr);
 85                 }                
 86             }
 87         }
 88         ajax({
 89             //请求方式
 90             type:'get',
 91             //请求地址
 92             url:'http://localhost:3000/responseData',
 93             data:{
 94                 name:'zhangsan',
 95                 age:20
 96             },
 97             header:{
 98                 'Content-Type':'application/json'
 99             },
100             success:function(data){
101                 console.log("这里是Success函数：")
102                 console    .log(data);
103             },
104             error:function(data,xhr){
105                 console.log("这里是error函数："+data)
106                 console.log(xhr);
107             }
108         })
109     </script>
110 </body>
111 </html>

 

posted @ 2020-04-21 13:49  codeing123  阅读(527)  评论(0)  编辑  收藏  举报