Ajax--封装2,判断返回的数据类型

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

猜你喜欢
