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

最新推荐文章于 2025-09-07 22:13:39 发布

转载最新推荐文章于 2025-09-07 22:13:39 发布 · 89 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/shaozhu520/p/10917863.html

文章标签：

#javascript #json #ViewUI

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		//ajax_all_Filed
		// https://blog.youkuaiyun.com/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: 'http://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 charset="utf-8"><title></title></head><body></body><script type="text/javascript">//ajax_all_Filed// https://blog.youkuaiyun.com/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: 'http://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>

转载于:https://www.cnblogs.com/shaozhu520/p/10917863.html