简单封装ajax
步骤:
- 1创建xhr对象
- 2设置请求行
- 3设置请求头
- 4设置请求体
- 5监听响应内容
6获取相应内容
参数提取:
参数名 | 参数类型 | 描述 | 传值 | 默认值 |
---|---|---|---|---|
type | string | 请求方式 | get/post | 只要不传post,就是get |
url | string | 请求地址 | 接口地址 | 如果不传地址,不发送请求 |
async | boolean | 是否异步 | true/fase | 只要不传false,那就是true,异步请求 |
data | object | 请求数据 | {key:value,key1:value2} | 需要把这个对象拼接成参数的格式 uname=Jepson&upass=12345 |
dataType | string | 返回的数据类型 | xml/json/text | text |
success | function | 响应成功时调用 | - | - |
error | function | 响应失败时调用 | - | - |
参数检测
//要求参数obj必须传值,否则不发送请求
if(!obj||typeof obj!=="object"){
return;
}
//type传的是post,那就发送post请求,否则发送get
var type = obj.type =="post"?"post":"get";
//url不传则不发送
var url = obj.url;
if(!url){
return;
}
//async传了false则发送同步请求,否则默认true
var async = obj.async ==false?false:true;
封装:
//参数对象用obj可以解决传参顺序问题
function ajax(obj){
if(!obj||typeof obj!=="object"){
return;
}
var type = obj.type ==="post"?"post":"get";
var url = obj.url;
if(!url){
return;
}
var async =obj.async===false?false:true;
var dataType = obj.dataType;
function parseParams(obj2){
if(!obj2||typeof obj2!="object"){
return null;
}
var arr = [];
for var( var k in obj2){
arr.push(k+"="+obj2[k]);
}
return arr.join('&');
}
//data参数作为参数对象,解析成urlencoded各式
//将 { username: "Jepson", "password":123456 }
// => username=Jepson&password=123456
var data = obj.data;
var params = parseParams(data);
//发送请求
var xhr = new XMLHttpRequest();
if(type === "get"){
url+="?"+params;
params = null;
}
//设置请求行
xhr.open(type,url,async);
//设置请求头
if(type ==="post"){
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
}
//设置请求体并发送
xhr.send(params);
//处理响应
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if(xhr.status ==200){
var result = null; /*根据响应头的content-type属性指定方法接收到的内容*/
var dataType = xhr.getResponseHeader('content-type'); //datetype有三种数据类型响应处理,分别判断
if(dateType.indexOf("xml")>-1){
result =xhr.responseXML;
}else if(dateTypeindexOf('json')>-1){
result = JSON.parse(xhr.responseText);
}else{
result = xhr.responseText;
}
obj.success&&obj.success(result);
}
else{
//响应错误的提示
obj.error && obj.error(xhr.responseText);
}
}
}
}
//调用ajax函数
ajax({
type:"get",
url:"1.php",
params:"username=123",
async:true
})