返回给客户端的是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>
结果：
原文：https://www.cnblogs.com/technicist/p/12743912.html