阅读背景:

原生js 封装好了的ajax 带钩子版本 可封装成对象

来源:互联网 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		//ajax_all_Filed
		// https://blog.csdn.net/qq_33285292/article/details/76147450
		
		// 封装ajax函数
	// @param {string}opt.type http连接的方式,包括POST和GET两种方式
	// @param {string}opt.url 发送请求的url
	// @param {boolean}opt.async 是否为异步请求,true为异步的,false为同步的
	// @param {object}opt.data 发送的参数,格式为对象类型
	// @param {function}opt.success ajax发送并接收成功调用的回调函数
	function Ajax() {//构造函数
		//this.opt = opt;
		this.ajax = function(opt){
			try{
				//var opt = this.opt;
				opt = opt || {};
				opt.method = opt.method.toUpperCase() || 'POST';
				opt.url = opt.url || '';
				opt.async = opt.async || true;
				opt.data = opt.data || null;
				opt.success = opt.success || function () {};
				opt.error = opt.error || function () {};
				
				var xmlHttp = null;
				if (XMLHttpRequest) {
					xmlHttp = new XMLHttpRequest();
				}
				else {
					xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
				}var params = [];
				for (var key in opt.data){
					params.push(key + '=' + opt.data[key]);
				}
				var postData = params.join('&');
				if (opt.method.toUpperCase() === 'POST') {
					xmlHttp.open(opt.method, opt.url, opt.async);
					xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
					xmlHttp.setRequestHeader('Accept', 'application/json, text/javascript, */*');
					xmlHttp.send(postData);
				}
				else if (opt.method.toUpperCase() === 'GET') {
					xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
					xmlHttp.send(null);
				} 
				xmlHttp.onreadystatechange = function () {
					if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
						var res = JSON.parse(xmlHttp.responseText);
						if(res.code !=200){
							//全局处理异常
						}
						opt.success(res);
					}else if(xmlHttp.readyState == 4 && xmlHttp.status == 0){
						opt.error("Your url is error");//错误
					}else if(xmlHttp.readyState == 4 && xmlHttp.status != 200){
						opt.error(xmlHttp.responseText);//错误
					}
					
					//console.log(xmlHttp.readyState,xmlHttp.status);
					//console.log(xmlHttp.readyState,xmlHttp.status);
				};
			
			}catch(e){
				opt.error(e);//错误
			}
		}
	}

	// 使用
	// error:function(ev) {
	var http = new Ajax();//实例化一个对象
	http.ajax({
		method: 'get',
		url: 'https://106.15.196.194:3333/Getlist',
		async:true,
		data: {
			name1: 'value1',
			name2: 'value2'
		},
		success: function (response) {
		   //console.log(response);
		   

		},
		error:function(e){
			console.log(e);
		}
	});
		
		
	</script>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta char



你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到: