First, the simple version

Introduction to Ajax

Ajax (Asyncchronous JavaScript and Xml), translated to say: asynchronous javaScript and xml, Ajax is not a new programming language, but a new method to use existing standards.

Ajax's advantage: without reloading the entire page, you can exchange data with the server, and update the arts section of the page.

1. Ajax's works

Ajax works between the user and the server corresponds to the addition of an intermediate layer (Ajax engine), so that the user of the asynchronous operation of the server response. Not all user requests are submitted to the server. Like some data validation and data processing to do so to their own Ajax engine, only when determining the need to read the new data from the server and then on his behalf by the Ajax engine, submit a request to the server.
Take a look at the differences and the traditional way:

Ajax server communicates with a core object XMLHttpRequest, low version of the IE browser is using ActiveXObject to achieve.

Several common property of the XMLHttpRequest object

1. readyState property

readyState property presence status information of the server response. Whenever the readyState change, onreadystatechange function will be executed. ReadyState property values are:

2. onreadystatechange property

there onreadystatechange property function processing server response. The following code defines an empty function, can simultaneously be provided onreadystatechange property:

xhr.onreadystatechange = function() {

}

3. status attribute

server status is status code (eg: 404: File not found, 200: success, etc.)

4. statusText Properties

File server returns the status information of the corresponding text HTTP status code (OK or Not Found)

5. responseText properties

You can be retrieved by the data returned by the server responseText property.

xhr.onreadystatechange = function() {
	if (xhr.readyState === 4 && xhr.status === 200) {
		console.log(xhr.responseText)
	}
}

XMLHttpRequest对象上的属性总览：

XMLHttpRequest对象上的方法

1. open()方法

open()有三个参数，第一个参数定义发送请求所使用的方法，第二个参数规定服务器端脚本的URL，第三个参数规定应当对请求进行异步地处理。

xhr.open('GET', 'test.php', true)

2. send()方法

xhr.send(null)

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据。
xhr.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded;charset=UTF-8”);

3. 其他方法

2. Ajax实现步骤

要实现Ajax,大体上有四个步骤：

创建XMLHttpRequest
设置请求方式
调用回调函数
发送请求

function ajax(url, data, method='POST', async=true) {
	return new Promise((resolve, reject) {
		// 第一步，创建xmlHttpRequest
		let xhr = null
		if (window.XMLHttpRequest) {
			// 支持XMLHttpRequest
			xhr = new XMLHttpRequest()
		} else {
			// IE5或者IE6
			xhr = new ActiveXObject('Microsoft.XMLHTTP')
		}

		// 第二步，设置请求方式
		xhr.open(method, url, async)

		// 第三步， 调用回调函数
		xhr.onreadyStateChange = function() {
			if (xhr.readyState === 4) {
				if (xhr.status === 200) {
					resolve(xhr.responseText)
				} else {
					reject(xhr.statusText)
				}
			} else {
				reject(xhr.statusText)
			}
		}

		// 第四步， 发送请求
		xhr.send(data)
	})
}

详细版一：https://blog.csdn.net/weixin_37580235/article/details/81459282

AJAX的实现步骤（完整过程）：https://blog.csdn.net/qq_29569183/article/details/79259889

13, front-end knowledge --ajax principle and implementation process