AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

手写Ajax

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
function myAjax(url,method = 'GET',data=null) {
	var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP" )  //判断是否有该对象
	data = data ? queryString(data) : data  //参数化
	if(method == 'POST'){
		xhr.open(method,url,true)
		xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")
		xhr.send(data) //'name=lisi&age=18' 这种格式
	}else{
		data ? (url += "?" + data) : data
		xhr.open(method,url,true)
		xhr.send()
	}
	xhr.onreadystatechange = function() {
		if(xhr.readyState == 4){
			if(xhr.status == 200){
				console.log(xhr.responseText)
			}
		}
	}
	function queryString(obj){
		var str = ''
		for(var key in obj) {
			str += key + '=' + obj[key] + '&'
		}
		return str.substring(0, str.length - 1);
	}
}

使用例子

1
myAjax('http://chuan.ml:8081/api/manage/article/getBy','GET',{page:1,limit:3})

Promise版Ajax

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
function AjaxPromise(url,method = 'GET',data=null) {
	return new Promise((resolved,reject)=>{
		var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP" )
		data = data ? queryString(data) : data
		if(method == 'POST'){
			xhr.open(method,url,true)
			xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")
			xhr.send(data) //'name=lisi&age=18' 这种格式
		}else{
			data ? (url += "?" + data) : data
			xhr.open(method,url,true)
			xhr.send()
		}
		xhr.onreadystatechange = function() {
			if(xhr.readyState == 4){
				if(xhr.status == 200){
					resolved(xhr.responseText)
				}else{
					reject(xhr)
				}
			}
		}
		function queryString(obj){
			var str = ''
			for(var key in obj) {
				str += key + '=' + obj[key] + '&'
			}
			return str.substring(0, str.length - 1);
		}
	})
}

使用例子

1
2
3
AjaxPromise('http://chuan.ml:8081/api/manage/article/getBy','GET',{page:1,limit:3}).then(res=>{
	console.log(res)
})