📲 JavaScriptのAJAX

🤔 AJAXって何?

Ajax(Asynchronous JavaScript and XML)とは、JavaScriptを使用してブラウザが非同期でサーバにデータを要求し、サーバ応答のデータを受信し、Webページを動的に更新するプログラミング方式を指す.Ajaxは、ブラウザが提供するWeb APIXMLHttpRequestオブジェクトに基づいている.
Ajaxの前のページはhtmlタグから始まり、サーバーからhtmlタグで終わる完全なHTMLを受け取り、ページ全体を最初から再レンダリングするように操作します.画面切り替え後、サーバから新しいHTMLを受信し、Webページ全体を再レンダリングします.
この伝統的な方法には、次のような欠点があります.

どのような変更があっても、サーバから完全なHTMLが送信され、不要なデータ通信が発生します.

最初から再レンダリング→瞬時点滅

クライアント←→サーバ通信は同期しており、ブロックが発生する可能性があります.

🏷️ JSON

JSONは、クライアントとサーバ間のHTTP通信のためのテキストデータフォーマットである.JavaScriptの言語独立データフォーマットに依存せず、ほとんどのプログラミング言語で使用できます.JSONは、JavaScriptのオブジェクト文字に似たキーと値からなる純粋なテキストです.

JSON.stringify

クライアントがサーバにオブジェクトを転送するには、シリアル化と呼ばれるオブジェクトを文字列化する必要があります.JSON.stringfiyメソッドは、値またはオブジェクトをJSON形式の文字列に変換します.

console.log(JSON.stringify({ x: 5, y: 6 }));
// expected output: "{"x":5,"y":6}"

console.log(JSON.stringify([new Number(3), new String('false'), new Boolean(false)]));
// expected output: "[3,"false",false]"

console.log(JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] }));
// expected output: "{"x":[10,null,null,null]}"

console.log(JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)));
// expected output: ""2006-01-02T15:04:05.000Z""

JSON.parse

サーバからクライアントに送信されるJSONデータは文字列です.この文字列をオブジェクトとして使用するには、逆シーケンス化と呼ばれるJSON形式のオブジェクト化が必要です.JSON.parseメソッドはJSON形式の文字列をオブジェクトに変換します.

const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);

console.log(obj.count);
// expected output: 42

console.log(obj.result);
// expected output: true

📲 XMLHttpRequest

ブラウザは「アドレス」ウィンドウまたはHTMLの中のformタグまたはaタグを通じてHTTP要求伝送機能を提供する.JavaScriptを使用してHTTPリクエストを送信するには、XMLHttpRequestオブジェクトを使用します.

XMLHttpRequestオブジェクトの作成

XMLHttpRequestオブジェクトは、XMLHttpRequestコンストラクション関数を呼び出して生成されます.XMLHttpRequestオブジェクトは、ブラウザが提供するWeb APIであり、ブラウザ環境でのみ正常に動作する.

const xhr = new XMLHttpRequest();

HTTPリクエストの送信

HTTPリクエストを送信する場合は、以下の手順に従ってください.

XMLHttpRequest.prototype.openメソッドHTTPリクエストを初期化します.

必要に応じてXMLHttpRequest.prototype.setRequestHeader方法特定HTTP要求のヘッダ値を設定

必要に応じてXMLHttpRequest.prototype.send方法でHTTP要求を送信

// XMLHttpRequest 객체 생성
const xhr = new XMLHttpRequest();

// HTTP 요청 초기화
xhr.open('GET', '/user');

// HTTP 요청 헤더 설정
// 클라이언트가 서버로 전송할 데이터의 MIME 타입 지정:: json
xhr.setRequestHeader('content-type', 'application/json');

HTTP応答の処理

サーバから送信された応答を処理するには、XMLHttpRequestオブジェクトに発生したイベントをキャプチャする必要がありますXMLHttpRequestオブジェクトが持つイベントハンドラ構成では、HTTP応答を処理するために、HTTP要求の現在の状態を示すreadyState構成値の変更時に発生したreadystatechangaeイベントをキャプチャすることができる.

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1')';
xhr.send();

// readystatechange 이벤트는 HTTP 요청의 현재 상태를 나타내는 readyState 프로퍼티가
// 변경될 때마다 발생한다.
xhr.onreadystatechange = () => {
	// readyState 프로퍼티는 HTTP 요청의 현재 상태를 나타낸다.
	// readyState 프로퍼티 값이 4(XMLHttpRequest.DONE)가 아니면 
	// 서버 응답이 완료되지 않은 상태이다.
	if (xhr.readyState !== XMLHttpRequest.DONE) {
		return;
	}
	if (xhr.status === 200) {
		console.log(JSON.parse(xhr.response));
	}
	else {
		console.error('Error', xhr.status, xhr.statusText));
	}
}

HTTPリクエストをsendメソッドでサーバに送信すると、サーバは応答を返します.ただし、応答がクライアントにいつ到着するかは特定できないため、readystatechangeなどのイベントでHTTPリクエストの現在の状態をチェックする必要がある.onreadystatechangeイベントハンドラPropertyに割り当てられたイベントハンドラは、HTTP要求の現在のステータスを示すxhr.readyStateがXMLHttpRequest.DONEであるかどうかを確認し、サーバの応答が完了したことを確認します.以降のサーバ応答が完了すると、xhrはHTTP要求の応答状態(HTTP状態コード)を表す.statusが200であることを確認し、正常処理とエラー処理を区別します.

🧐 整理する

AJAXとは、ブラウザがJavaScriptを使用してサーバにデータを非同期で要求し、サーバ応答のデータを受信することで、Webページを動的に更新するプログラミング方式である.

JSONは、クライアントとサーバ間のHTTP通信のためのテキストデータフォーマットである.

XMLHttpRequestオブジェクトは、JavaScriptを使用してHTTPリクエストを送信するために使用されます.

📖 参考資料

モダンJavaScript Deep Dive

AJAX (816p~827p)