XMLHttpRequest単純パッケージ

多くの場合、jsライブラリを導入する必要がなく、単純なページを開発する必要があります.この場合、インタフェース要求はXMLhttpRequestオブジェクトに使用される必要があります.では、使いやすい要求方法をカプセル化するのは当然です.以下は私たちが慣れているリクエスト方法です.一緒にパッケージしましょう.

ajaxRequest({
	url: '',
	method: 'POST',
	type: 'json',
	data: {},
	success: function(res) {
		console.log(res)
	},
	erro: function(err) {
		console.log(err)
	} 
})

function ajaxRequest(option) {
	// 1.                 
	if(Object.prototype.toString.call(option) !== '[object, Object]') return undefined;
	// 2.        
	option.method = option.method ? option.method.toUpperCase() : 'GET'; //    GET   
	option.data = option.data || {};
	option.type = option.type || 'json';
	
	// 3.     GET   ，     data                 url  
	var formData = [];
	for(key in option.data) {  // Object.keys.forEach
		formData.push(''.concat(key, '=', option.data[key]))
	}
	option.data = formData.join('&') //eg: a=b&c=d&e=f
	if(option.method === 'GET' && formData.lenght > 0) { //   ，option.data        ，        
		//              &option.data,           ?option.data
		option.url += location.search.length === 0 ? ''.concat('?', option.data) : ''.concat('&', option.data); 
	}
	// 4.     XMLHttpRequest   ,       
	var xhr = new XMLHttpRequest();
	xhr.responseType = option.type;
	xhr.withCredentials = false;  //       Cookie                   。
	// 5.       
	xhr.onreadystatechange = function() {
		if(xhr.readyState === 4) {
			if(xhr.status === 200) {
				if(option.success && typeof option.success === 'function') {
					option.success(xhr.response)
				}
			} else {
				if(option.error && typeof option.error === 'function') {
					option.error(new Error(xhr.statusText))
				}
			}
		}
	}
	xhr.open(option.method, option.url, true); // true        
	// 6.     POST   ，       
	if (option.method === 'POST') {
	  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
	}
	// 7.     
	xhr.send(option.method === 'POST' ? option.data : null);
}