用了两种方式封装,回调函数
和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)
}
}
}
} )
}
*/
如果发现错误请告诉我~~还在学习中