使用js仿写jquery中$.ajax()方法

最新推荐文章于 2020-06-13 11:25:01 发布

希文特

最新推荐文章于 2020-06-13 11:25:01 发布

阅读量299

点赞数

分类专栏： javascript 文章标签： js原生 ajax

本文链接：https://blog.youkuaiyun.com/baidu_36720706/article/details/78483182

版权

javascript 专栏收录该内容

2 篇文章

订阅专栏

核心代码：

var Ajax = function(option){
	var _option = {
		xmlhttp : null,
		type: "GET",
		async: true,
		data: "",
		contentType: "application/x-www-form-urlencoded",
		dataType: "text", // json
		url: "",
		success: function(status, response){},
		complete: function(status, response){},
		error: function(e){console.error(e);},
		timeout: function(e){console.error(e);}
	}
	
	for( key in option){
		_option[key] = option[key];
	}
	
	var xmlhttp = (function(){
		if (window.XMLHttpRequest){// code for all new browsers
			return new XMLHttpRequest();
		}else if (window.ActiveXObject){// code for IE5 and IE6
			return new ActiveXObject("Microsoft.XMLHTTP");
		}
	})();
	if(xmlhttp != null) {
		xmlhttp.open(_option.type, _option.url, _option.async);
		xmlhttp.responseType = _option.dataType;
		xmlhttp.setRequestHeader("content-type", _option.contentType);
		xmlhttp.ontimeout = function(e) {
			_option.timeout(e);
		};
		xmlhttp.onerror = function(e) {
			_option.error(e);
		};
		
		xmlhttp.onreadystatechange = function(){
			if (xmlhttp.readyState == 4){
				if (xmlhttp.status == 200) {
					_option.success(xmlhttp.status, xmlhttp.response);
				}
				_option.complete(xmlhttp.status, xmlhttp.response);
			}
		}
		
		xmlhttp.send(_option.data);
	} else {
		console.error("Your browser does not support XMLHTTP.");
	}
}

使用示例：

Ajax({
	type: "POST",
	async: true,
	data: '{"name":"测试人员","age":22}',
	contentType: "application/json;charset=utf-8",
	dataType: "json",
	url: "test",
	success:function(status, response){
		console.log(response.code);
		console.log(response.message);
	}
});