封装ajax工具插件

javascript
  目录
  1. 1. 封装ajax工具插件

封装一个自己的ajax工具插件

封装ajax工具插件

我们在平时开发的时候，ajax请求都会用到现有库，用的比较多的如jquery，axios等，偶尔自己写个原生ajax请求的情况也有，这些库是怎么写的呢，我们自己封装一个库，来学习学习ajax的一些基础知识。
在写这篇文章的时候，是因为头两天同事问我一个ajax问题，关于请求参数的，我突然回答不出来，忘记了，于是翻出来2年前自己封的ajax工具看了一眼，知道了怎么回事，决定把代码写到博客里，忘了的时候方便看一下。
下面我只贴出了核心代码，其他部分我会提供github的地址：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
;(function(window,undefined){

	// jinuxAjax挂载到window上
	window.jinuxAjax = function(opt){
		ieAjaxInit();
		//默认参数配置
		var defaultOpt = {
			url:'',
			type: 'GET',
			data: null,
			contentType: 'application/x-www-form-urlencoded',//'text/plain;charset=UTF-8','application/json','multipart/form-data'
			timeOut: 5000,
			files:[],
			progress: null,
			before: fn,
			success: fn,
			error: fn,
			complete: fn
		};

		//参数对象继承获取新参数对象
		if(Object.assign){
			var opt = Object.assign({}, defaultOpt, opt);
		}else {
			for(var name in defaultOpt){
				defaultOpt[name] = opt[name] || defaultOpt[name];
			}
			var opt = defaultOpt;
		}

		requestData(opt);

	}

	//将json格式数据转成application/x-www-form-urlencoded格式数据
	function encodeFormData(data){
		if(!data) return '';
		var pairs = [];
		for(var name in data){
			if(!data.hasOwnProperty(name)) continue;
			if(typeof data[name] === 'function') continue;
			var value = data[name].toString();
			name = encodeURIComponent(name.replace('%20','+'));
			value = encodeURIComponent(value.replace('%20','+'));
			pairs.push(name + '=' + value);
		}
		return pairs.join('&');
	}

	//ajax的get请求函数
	function getData(opt){
		var request = new XMLHttpRequest();
		var timeoutFlag = false; //是否超时
		//启动计时器，做超时处理
		var timer = setTimeout(function(){
			timeoutFlag = true;
			request.abort();
		},opt.timeOut);

		request.open('GET',opt.url +'?'+ encodeFormData(opt.data));
		opt.before(); //请求之前执行before函数
		request.onreadystatechange = function(){
			if(request.readyState === 4){
				if(timeoutFlag) return;
				clearTimeout(timer);
				if(request.status === 200){
					var type = request.getResponseHeader('Content-Type');
					//检查type类型做相应的解析处理
					if(type.indexOf('xml') !== -1 && request.responseXML){ //xml相应
						opt.success(request.responseXML);
					}else if(type.indexOf('application/json') !== -1) { //json相应
						opt.success(JSON.parse(request.responseText));
					}else {
						opt.success(request.responseText);
					}
				}else {
					opt.error(request);
				}
				opt.complete();
			}
		}
		request.send(null);
	}

	//ajax的post请求函数
	function postData(opt){
		var request = new XMLHttpRequest(), sendData=null;
		var timeoutFlag = false; //是否超时
		//启动计时器，做超时处理
		var timer = setTimeout(function(){
			timeoutFlag = true;
			request.abort();
		},opt.timeOut);

		request.open('POST',opt.url);
		request.onreadystatechange = function(){
			if(request.readyState === 4){
				if(timeoutFlag) return;
				clearTimeout(timer);
				if(request.status === 200){
					var type = request.getResponseHeader('Content-Type');
					//检查type类型做相应的解析处理
					if(type.indexOf('xml') !== -1 && request.responseXML){ //xml相应
						opt.success(request.responseXML);
					}else if(type.indexOf('application/json') !== -1) { //json相应
						opt.success(JSON.parse(request.responseText));
					}else {
						opt.success(request.responseText);
					}
				}else {
					opt.error(request);
				}
				opt.complete();
			}
		}
		//处理接收进度事件
		if(opt.progress.enable && request.upload){
			request.upload.onprogress = function(ev){
				if(ev.lengthComputable){
					opt.progress.receiveHandle(ev);
				}
			}
			request.upload.onload = function(ev){
				opt.progress.successHandle(ev);
			}
		}
		
		if(opt.contentType === 'application/x-www-form-urlencoded'){
			request.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8');
			sendData = encodeFormData(opt.data);
		}else if(opt.contentType === 'application/json') {
			request.setRequestHeader('Content-Type','application/json; charset=utf-8');
			sendData = JSON.stringify(opt.data);
		}else if(opt.contentType === 'multipart/form-data') {
			var fd = new FormData();
			for(var name in opt.data){
				if( !opt.data.hasOwnProperty(name) ) continue;
				if( typeof opt.data[name] === 'function' ) continue; 
				fd.append(name,opt.data[name]);
			}
			for(var i=0; i<opt.files.length; i++){
				fd.append('file'+i,opt.files[i]);
			}
			sendData = fd;
		}

		request.send(sendData);

	}

	//ajax请求函数，在函数内再调用get或者post
	function requestData(opt){
		if(opt.type === 'GET'){
			getData(opt);
		} else {
			postData(opt);
		}
	}

	// 定义一个空函数
	function fn(){}

	// 如果是ie6，创建XMLHttpRequest对象
	function ieAjaxInit(){
		if(window.XMLHttpRequest === undefined){
			window.XMLHttpRequest = function(){
				try {
					return new ActiveXObject('Msxml2.XMLHTTP.6.0');
				}
				catch (e1) {
					try {
						return new ActiveXObject('Msxml2.XMLHTTP.3.0');
					}
					catch (e2) {
						throw new Error('不支持XMLHttpRequest');
					}
				}
			}
		}
	}

	//

})(window);

详细代码请点击这里看源码

  ajax