Ajax--Ajax封装
问题：发送一次请求代码过多，发送多次请求代码冗余且重复。
解决方案：将请求代码封装到函数中，发请求时调用函数即可。
ajax({
type:'get',
url:'http://localhost:3000/first',
sucess:function(data){
console.log(data);
}
})
请求参数要考虑的问题
1、请求参数位置的问题
将请求参数传递到ajax函数内部，在函数内部根据请求方式的不同将请求参数放置到不同的位置
- get 放在请求地址的后面
- post 放在send方法中
2、请求参数格式的问题
application/x-www-form-urlencoded
参数名称=参数值&参数名称=参数值
name=zhangsan&age=20
application/json
{name:'zhangsan',age:20}
结论：
- 传递对象数据类型对于函数的调用者更加友好
- 在函数内部对象数据类型转换为字符串数据类型更加方便
.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'){
//用户希望的向服务器端传递的请求参数的类型
var contentType=options.header['Content-Type']
//设置请求参数格式的类型
xhr.setRequestHeader('Content-Type',contentType);
if(contentType=="application/json"){
xhr.send(JSON.stringify(options.data))
}else{
xhr.send(params);
}
32 //设置请求参数格式的类型
33 //xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
34 //xhr.send(params);
35 }else{
36 //发送请求
37 xhr.send();
38 }
39
40 //监听xhr对象下面的onload事件
41 //当xhr对象接收完响应数据后触发
42 xhr.onload=function(){
43 //options.success(xhr.responseText);
//http状态码等于200的时候
if(xhr.status==200){
//请求成功，调用处理成功情况的函数
options.success(xhr.responseText,xhr);
}else{
//请求失败，调用处理失败情况的函数
options.error(xhr.responseText,xhr);
}
44 } 45 } 46 ajax({ 47 //请求方式 48 type:'get', 49 //请求地址 50 url:'http://localhost:3000/first', 51 data:{ 52 name:'zhangsan', 53 age:20 54 },
header:{
'Content-Type':'application/json'
},
55 success:function(data){
56 console.log("这里是Success函数："+data)
57 }，
error:function(data,xhr){
console.log("这里是error函数："+data)
console.log(xhr);
}
58 }) 59 </script> 60 </body> 61 </html>
结果1：
结果2：
结果3：
结果4：
