一、封装
ajax
封装ajax，可直接复制引用
ajax.js
function sendAjax(obj){/ 先判断url是否传入
if(!obj.url){
/ 没有传
throw new Error(‘地址必填’) / 抛出自定义错误
}
/ 传入了之后需要验证url是否是
字符串
if(Object.prototype.toString.call(obj.url) !== ‘[object String]’){
throw new Error(‘地址必须是字符串’)
}
/ 判断请求方式是否传入
if(!obj.method){
obj.method = ‘get’
}
/ 传入了 – 验证是否是get或post
if(obj.method.toLowerCase()!==’get’ && obj.method.toLowerCase()!==’post’){
throw new Error(‘请求方式必须是get或post’)
}
/ 判断async是否传入
if(obj.async === undefined){
obj.async = true
}
/ 判断类型
if(Object.prototype.toString.call(obj.async) !== ‘[object Boolean]’){
throw new Error(‘async必须是布尔值’)
}
/ 判断是否传入success
if(!obj.success){
obj.success = function(){}
}
/ 判断是否是函数
if(Object.prototype.toString.call(obj.success) !== ‘[object Function]’){
throw new Error(‘success必须是函数’)
}
if(!obj.error){
obj.error = function(){}
}
if(Object.prototype.toString.call(obj.error) !== ‘[object Function]’){
throw new Error(‘error必须是函数’)
}
/ 判断数据是否传入
var str = ”;
if(obj.data){
/ 判断类型
if(Object.prototype.toString.call(obj.data) === ‘[object String]’){
str = obj.data
}else if(Object.prototype.toString.call(obj.data) === ‘[object Object]’){
/ 对象要处理成字符串
var f = ”;
for(var attr in obj.data){
str += f + attr + ‘=’ + obj.data[attr]
f = ‘&’
}
}else{
throw new Error(‘非法数据’)
}
/ 如果是get请求，需要将数据拼接在地址后
if(obj.method.toLowerCase() === ‘get’){
obj.url += ‘?’ + str
}
}
/ 判断希望请求回来的数据格式
if(!obj.dataType){
obj.dataType = ‘json’
}
/ 如果传了
if(obj.dataType.toLowerCase()!==’json’ && obj.dataType.toLowerCase()!==’text’ && obj.dataType.toLowerCase()!==’xml’){
throw new Error(‘dataType非法’)
}
/*
{
url:”,
method:”,
data:”,
async:”,
success:function(){},
error:”,
dataType:’text/json/xml’
}
*/
var xhr = new XMLHttpRequest;
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(parseInt(xhr.status/100) === 2){
/ 确定要不要转对象
switch(obj.dataType.toLowerCase()){
case ‘json’:
var res = xhr.responseText;
res = JSON.parse(res)
break;
case ‘xml’:
var res = xhr.responseXML;
break;
case ‘text’:
var res = xhr.responseText;
break;
}
obj.success(res)
}else{
obj.error()
}
}
}
xhr.open(obj.method,obj.url,obj.async)
if(obj.method.toLowerCase() === ‘post’ && obj.data){
/ 设置请求头
xhr.setRequestHeader(‘content-type’,’application/x-www-form-urlencoded’)
xhr.send(str)
return
}
xhr.send()
}
function promiseAjax(obj){return new Promise(function(resolve,reject){
/ 先判断url是否传入
if(!obj.url){
// 没有传
throw new Error(‘地址必填’) /抛出自定义错误
}
/传入了之后需要验证url是否是字符串
if(Object.prototype.toString.call(obj.url) !== ‘[object String]’){
throw new Error(‘地址必须是字符串’)
}
/ 判断请求方式是否传入
if(!obj.method){
obj.method = ‘get’
}
/ 传入了 – 验证是否是get或post
if(obj.method.toLowerCase()!==’get’ && obj.method.toLowerCase()!==’post’){
throw new Error(‘请求方式必须是get或post’)
}
/ 判断async是否传入
if(obj.async === undefined){
obj.async = true
}
/ 判断类型
if(Object.prototype.toString.call(obj.async) !== ‘[object Boolean]’){
throw new Error(‘async必须是布尔值’)
}
/ 判断数据是否传入
var str = ”;
if(obj.data){
/ 判断类型
if(Object.prototype.toString.call(obj.data) === ‘[object String]’){
str = obj.data
}else if(Object.prototype.toString.call(obj.data) === ‘[object Object]’){
/ 对象要处理成字符串
var f = ”;
for(var attr in obj.data){
str += f + attr + ‘=’ + obj.data[attr]
f = ‘&’
}
}else{
throw new Error(‘非法数据’)
}
/ 如果是get请求，需要将数据拼接在地址后
if(obj.method.toLowerCase() === ‘get’){
obj.url += ‘?’ + str
}
}
/ 判断希望请求回来的数据格式
if(!obj.dataType){
obj.dataType = ‘json’
}
/ 如果传了
if(obj.dataType.toLowerCase()!==’json’ && obj.dataType.toLowerCase()!==’text’ && obj.dataType.toLowerCase()!==’xml’){
throw new Error(‘dataType非法’)
}
/*
{
url:”,
method:”,
data:”,
async:”,
success:function(){},
error:”,
dataType:’text/json/xml’
}
*/
var xhr = new XMLHttpRequest;
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(parseInt(xhr.status/100) === 2){
/ 确定要不要转对象
switch(obj.dataType.toLowerCase()){
case ‘json’:
var res = xhr.responseText;
res = JSON.parse(res)
break;
case ‘xml’:
var res = xhr.responseXML;
break;
case ‘text’:
var res = xhr.responseText;
break;
}
resolve(res)
}else{
reject()
}
}
}
xhr.open(obj.method,obj.url,obj.async)
if(obj.method.toLowerCase() === ‘post’ && obj.data){
/ 设置请求头
xhr.setRequestHeader(‘content-type’,’application/x-www-form-urlencoded’)
xhr.send(str)
return
}
xhr.send()
})
}