まず、シンプルなバージョン

アヤックスの概要

アヤックス（AsyncchronousのJavaScriptとXML）は、言って翻訳：非同期JavaScriptとXMLを、アヤックスは、新しいプログラミング言語ではなく、既存の標準を使用する新しい方法。

アヤックスの利点：ページ全体をリロードせずに、あなたがサーバーとデータを交換し、ページの芸術セクションを更新することができます。

1.アヤックスの作品

AJAXは、ユーザ間で動作し、サーバの応答の非同期動作のユーザーように、サーバーは、中間層（Ajaxのエンジン）の添加に相当します。すべてのユーザーの要求がサーバーに送信されるわけではありません。サーバから新しいデータを読み込み、その後、Ajaxのエンジンによって彼に代わって、サーバーに要求を提出する必要があると判断する場合にのみ、いくつかのデータの検証とデータ処理と同じように、自分自身のAjaxエンジンにそうします。
違いと伝統的な方法を見てみましょう：

Ajaxのサーバーは、IEブラウザの低いバージョンを達成するためにActiveXObjectのを使用しているコアオブジェクトのXMLHttpRequestと通信します。

XMLHttpRequestオブジェクトのいくつかの一般的なプロパティ

1. readyStateのプロパティ

サーバの応答のreadyStateのプロパティのプレゼンスステータス情報。たびreadyStateの変更、onreadystatechangeに関数が実行されます。readyStateのプロパティ値は次のとおりです。

2. onreadystatechangeにプロパティ

プロパティ関数処理サーバの応答がありonreadystatechangeに。次のコードは、空の関数を定義し、同時にプロパティonreadystatechangeに提供することができます。

xhr.onreadystatechange =関数（）{ 

}

3.ステータス属性

サーバのステータスは、ステータスコードです（例：404：200ファイルが見つかりません：成功、など）

4. STATUSTEXTプロパティ

ファイルサーバは、対応するテキストHTTPステータスコードのステータス情報を返します（OKまたは見つかりません）

5. responseTextプロパティ

あなたは、サーバーresponseTextプロパティによって返されたデータにより取得することができます。

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、フロントエンド知識--ajax原理及び実装プロセス