关于Ajax的封装方法

一、封装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()

})

}