js封装ajax

来源:互联网 发布:硬件温度监控软件 编辑:程序博客网 时间:2024/06/05 16:41
主要代码


用了两种方式封装,回调函数Promise,实现都比较简单,太复杂了暂时还写不出来,知识储备还不够~~请看代码:

/*回调函数解决方法*/const ajax = ( url,options={} ) => {    const {        data = {},        type = 'GET',        success,        async = true,    } = options;    var xmlhttp = null;    var sendData = [];    if( window.XMLHttpRequest ) {        xmlhttp = new XMLHttpRequest();    }else{        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");    }    //对发送数据作处理    if( data != {} ){        for(let key in data){            sendData.push(key + '=' + data[key]);        }        sendData = sendData.join('&');    }    //两种不同请求方式    if(type == 'GET') {        url += '?' + sendData;        xmlhttp.open( 'GET', url, async );        xmlhttp.send();    }    if( type == 'POST' ){        xmlhttp.open( 'POST', url, async);        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded")        xmlhttp.send( sendData );    }    //添加回调函数    xmlhttp.onreadystatechange = () => {        if( xmlhttp.readyState == 4) {            if( xmlhttp.status == 200 ){                success(xmlhttp.responseText);            }else{                console.log("请求失败");            }        }    }}//promise方式/*const ajax = ( url,options={} ) => {    const {        data = {},        type = 'GET',        async = true,    } = options;    var xmlhttp = null;    var sendData = [];    if( window.XMLHttpRequest ) {        xmlhttp = new XMLHttpRequest();    }else{        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");    }    //对发送数据作处理    if( data != {} ){        for(let key in data){            sendData.push(key + '=' + data[key]);        }        sendData = sendData.join('&');    }    //两种不同请求方式    if(type == 'GET') {        url += '?' + sendData;        xmlhttp.open( 'GET', url, true );        xmlhttp.send();    }    if( type == 'POST' ){        xmlhttp.open( 'POST', url, true );        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded")        xmlhttp.send( sendData );    }    //返回Promise实例    return new Promise( ( resolve, reject ) => {        xmlhttp.onreadystatechange = () => {            if( xmlhttp.readyState == 4 ) {                if( xmlhttp.status == 200 ){                    resolve(xmlhttp.responseText);                }else{                    let json = {readyState:xmlhttp.readyState,status:xmlhttp.status};                    reject(json)                }            }        }    } )}*/

如果发现错误请告诉我~~还在学习中