‍🦔 XMLHttpRequestの処理の流れまとめ①【全体像】
作成日: 2021/12/19
1

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

1. まずは、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の場合で引数に指定するものが違う


事業会社にてコーダーをしています。制作は6年目。 インプットしたことをアウトプットしています。