AJAX封装 2020/03/30

AJAX封装 – 写给自己但是不想封装

普通封装

// 封装ajax
// 功能：前后端交互
// 参数：
    // 请求方式:method
    // 请求地址:url
    // 是否异步:isAsync
    // 请求参数（浏览器端发给服务器端的数据）:params
    // 回调函数:callback
// 返回值：无
// 调用方式
// let cb = function(str){
//     document.getElementById("msg").innerHTML = str;
// }
// ajax2013("get","regSave.php","username=jzm&userpass=123",cb, true);

// 源码
function ajax(method,url,params,callback,isAsync){
    let xhr =new XMLHttpRequest();
    let urlAndParms = url;  //regSave.php
    if(method.toLowerCase()=="get"){
        urlAndParms += "?"+params ;//regSave.php?username=jzm&userpass=123
    }
    xhr.open(method,urlAndParms,isAsync);
    xhr.onreadystatechange = function(){
        if(xhr.readyState==4 && xhr.status==200){
            callback(xhr.responseText);            
        }
    }
    if(method.toLowerCase()=="get"){
        xhr.send();
    }else{ //post
        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
        xhr.send(params);
    }
}

对象封装

// 调用方式
// ajax2013useobj({
//     url:"地址",
//     params:`键=${值}&`键=${值}&....`,
//		回调函数
//     callback:function(str){}
// })

// 源码
function ajaxObj(obj){
    // 默认值：
    let defaultObj = {
        method:"get",
        url:"#",
        params:"",
        isAsync:true,    
        callback:null
    };
	// 判断是否传入值 没有传入的话使用默认值
    for(let key in defaultObj){
        if(!obj[key]){
            obj[key] = defaultObj[key];
        }
    }
	// 开始交互
    let xhr =new XMLHttpRequest();
    let urlAndParms = obj.url;  //regSave.php
    // 判断传入的提交方式
    if(obj.method.toLowerCase()=="get"){
        urlAndParms += "?"+obj.params ;//regSave.php?username=jzm&userpass=123
    }
    xhr.open(obj.method,urlAndParms,obj.isAsync);
    xhr.onreadystatechange = function(){
        if(xhr.readyState==4 && xhr.status==200){
            obj.callback(xhr.responseText);            
        }
    }
    if(obj.method.toLowerCase()=="get"){
        xhr.send();
    }else{ //post
        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
        xhr.send(obj.params);
    }
}

回调promise封装AJAX

// 使用方式
/*
let xhrobj= {
        method:"get",
        url:"地址",
        params:`键=${值}&`键=${值}&...`,
    };
// then 需要传入2 个函数 第一个函数 为后端的值  第二个函数是没有获取后端数据的返回值
	xhr传入的就是对象 数据
ajaxObjAndPromise(xhr).then(
	then第一个参数 的形参就是返回的后台的值
   function msg(ajaxMsg) {
   		使用JSON.parse 把后端拿到的值变为json数据格式
       let ajaxMsg变量 = JSON.parse(ajaxMsg)
   },
   // 第二个参数就是返回的是没有执行上面代码的值  也就是错误提示的信息
)
*/
function ajaxObjAndPromise(obj){
    // 默认值：
    let defaultObj = {
        method:"get",
        url:"#",
        params:"",
        isAsync:true
    };
    for(let key in defaultObj){
        if(!obj[key]){
            obj[key] = defaultObj[key];
        }
    }
    let xhr =new XMLHttpRequest();
    let urlAndParms = obj.url;  //regSave.php
    if(obj.method.toLowerCase()=="get"){
        urlAndParms += "?"+obj.params ;//regSave.php?username=jzm&userpass=123
    }
    xhr.open(obj.method,urlAndParms,obj.isAsync);
    let p = new Promise(function(resolve,reject){
        xhr.onreadystatechange = function(){  
            if(xhr.readyState==4){
                if(xhr.status==200){
                    resolve(xhr.responseText);
                }else{
                    reject("服务器错了");
                }
            }
        }  
    });
    if(obj.method.toLowerCase()=="get"){
        xhr.send();
    }else{ //post
        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
        xhr.send(obj.params);
    }
    return p;
}