js封装ajax

用了两种方式封装,回调函数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)
				}
			}
		}
	} )
}
*/


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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值