XMLHttpRequestはどのように処理を進めるか?

１. まずは、XMLHttpRrequestをインスタンス化する

let xhr = new XMLHttpRequest() 

2. onreadystatechangeHTTP通信の状態が変更したら、発火するイベントハンドラーで変更後の処理を書く

let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
	
}

3. readyState HTTP通信の状態0〜4 で4（全ての応答データを取得）になったら

let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
	if(readyState === 4) {
		
	}
}

4. status HTTP通信のステータスコードが200 （処理が成功）になったら

※二重のif → 「全ての応答データを取得」かつ「HTTP通信処理が成功」したら

let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
	if(xhr.readyState === 4) {
		if(xhr.status === 200) {

		}
	}
}

5. resultに応答データのテキストを表示させる

let result = document.getElementById('result');
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
	if(xhr.readyState === 4) {
		if(xhr.status === 200) {
			result.textContent = xhr.responseText;
		}
	}
}

6. 「処理が成功」（200）以外の状態（401,403,404,500,503など）は、「サーバーエラーが発生しました」と表示させる

let result = document.getElementById('result');
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
	if(xhr.readyState === 4) {
		if(xhr.status === 200) {
			result.textContent = xhr.responseText;
		} else {
			result.textContent = 'サーバーエラーが発生しました'
		}
	}
}

7. HTTP通信の状態が「全応答データを受信」（4）以外の時は「通信中...」と表示

let result = document.getElementById('result');
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
	if(xhr.readyState === 4) {
		if(xhr.status === 200) {
			result.textContent = xhr.responseText;
		} else {
			result.textContent = 'サーバーエラーが発生しました'
		}
	} else {
		result.textContent = '通信中...'
	}
}

8. openメソッドHTTP通信の送信データを初期化する（getメソッドで、受信したいデータのHTTPリクエストを指定）

※第三引数は非同期にするかどうか
（初期値はtrueで、XMLHttpRequestは原則「非同期」が前提なので何も書かないことが多い）
【参照】 https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/open

let result = document.getElementById('result');
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
	if(xhr.readyState === 4) {
		if(xhr.status === 200) {
			result.textContent = xhr.responseText;
		} else {
			result.textContent = 'サーバーエラーが発生しました'
		}
	} else {
		result.textContent = '通信中...'
	}
	xhr.open('get', 'hello_ajax.php?name=' + encodeURIComponent(document.getElementById('name').value), true)
}

<?php
sleep(3);
print('こんにちは、'.$_REQUEST['name'].'さん！');

9. リクエスト通信を送信

※send()の引数は、getメソッドの場合はnull？
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/send

let result = document.getElementById('result');
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
	if(xhr.readyState === 4) {
		if(xhr.status === 200) {
			result.textContent = xhr.responseText;
		} else {
			result.textContent = 'サーバーエラーが発生しました'
		}
	} else {
		result.textContent = '通信中...'
	}
	xhr.open('get', 'hello_ajax.php?name=' + encodeURIComponent(document.getElementById('name').value), true)
	xhr.send(null)
}

メモ

sendメソッドの理解が不明瞭
getとpostの場合で引数に指定するものが違う