原生js实现ajax异步请求

风信子 2020-12-27 22:33:45 399℃
<script>
(function(window, undefined){
	//对象转字符串
	var objectToString = function (data) {
		let newData = [];
		for (let k in data) {
			if (data.hasOwnProperty(k) === true) {
				newData.push(
					encodeURIComponent(k) + '=' + (data[k] === null ? '' : encodeURIComponent(data[k]))
				);
			}
		}
		return newData.join('&');
	}
	
	//ajax请求主函数
	window.ajax = function(method, url, data, callback){
		if(typeof data == 'function'){
			callback = data;
			data = [];
		}
		// 数据处理
		if(data instanceof Array || data instanceof Object){
			data = objectToString(data);
		}
		if( method == 'GET' && data ){
			url = url + (url.indexOf('?')>=0 ? '&' : '?') + data;
			data = null;
		}
		// XMLHttpRequest对象用于在后台与服务器交换数据
		var xhr=new XMLHttpRequest();
		xhr.open(method, url, false);
		// 添加http头,发送信息至服务器时内容编码类型
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		xhr.onreadystatechange = function(){
			// readyState == 4说明请求已完成
			if(xhr.readyState == 4 && typeof callback == 'function'){
				//回调处理
				try {
					//json处理
					var xhrData = JSON.parse(xhr.response);
					if(typeof xhrData != 'object'){
						throw 'error';
					}
				} catch(e) {
					xhrData = xhr.response;
				}
				callback({
					data: xhrData,
					status: xhr.status,
					statusText: xhr.statusText,
					request: xhr
				});
			}
		}
		xhr.send(data);
	}

	window.ajax.get = function(url, data, callback){
		return window.ajax('GET', url, data, callback);
	};

	window.ajax.post = function(url, data, callback){
		return window.ajax('POST', url, data, callback);
	};
})(window);
</script>

使用方法

<script>
	/**
	 * ajax(method, url, data, callback)
	 * method: 请求方式 GET/POST
	 * url: 请求地址
	 * data: 请求数据 字符串 token=xxx&ver=xx 或者对象 {token: 'xxx', ver: 'xx'}
	 * callback: 请求完成回调函数
	 */
	ajax('post', 'http://daha.cc/api.php', {name: '123456', pass: '123456'}, function(res){
		//请求完成处理
		console.log(res);
	});

	/**
	 * 当data参数传入函数时,则data参数作为回调函数
	 */
	ajax('get', 'http://daha.cc/api.php', function(res){
		//请求完成处理
		console.log(res);
	});

	/**
	 * 另外提供两个快捷函数
	 * ajax.get(url, data, callback);
	 * ajax.post(url, data, callback);
	 */
</script>
标签: HTML, JS, AJAX

非特殊说明,本博所有文章均为博主原创。

上一篇 没有了
下一篇 vue实现动态增删表单项/表格项