💁‍♂️

Ajaxって何？(実装も踏まえて）

2022/11/28に公開

Node.js

JavaScript

入門

tech

背景

Webエンジニアしていると、Ajaxという言葉が聞こえてくる。全くわからないので、調べてまとめてみました。
おかしい箇所あれば、ご指摘お待ちしてます。

Ajaxとは

Ajax（エイジャックス[1][2]、アジャックス[3]）は、ウェブブラウザ内で非同期通信を行いながらインターフェイスの構築を行うプログラミング手法である[4]。XMLHttpRequest（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じてダイナミックHTML (DHTML) で動的にページの一部を書き換えるというアプローチを取る[5]。

Ajax は『Asynchronous JavaScript And XML』の略で、2005年2月18日に米国のインフォメーションアーキテクトであるジェシー・ギャレット[6]により名付けられた[5][7][8]。

https://ja.wikipedia.org/wiki/Ajax

何が嬉しい

従来のWebアプリケーションでは、サーバにリクエストを送ると、レスポンスとしてWebページが返ってくるため、画面遷移を伴っていた。

Ajaxを用いることで画面遷移を伴わない動的なWebアプリケーションが実装できる。操作のたびに画面遷移を行わないのでユーザー体験が向上した

いつ使える？

GoogleマップやGoogle検索のサジェスト機能などで使われている。
画面遷移を伴わないので、ユーザー体験がいい

実装方法

XMLHttpRequest

勉強にちょうどいいサイトがありました。

JavaScriptからサーバーにHTTPリクエストを送りたいです。
XMLHttpRequestクラスをインスタンス化させて、Webサーバーにリクエストを送ります。
その後レスポンスが帰ってくると処理を実行しています。
HTTPリクエストのHeaderを作成し、送って、レスポンスの処理を実行すると言った。流れは非常にわかりやすいです。

let xhr = new XMLHttpRequest();
//サーバーにリクエストを送る
xhr.open('GET','任意のエンドポイント',true);
xhr.send();

//サーバーからの応答を処理させる関数を定義している
xhr.onreadystatechange = function()
{
	if(xhr.readyState = 4 && xhr.status == 200){
		console.log(xhr.responseText);
	}　else{
	//エラー処理
	}
}

処理を一つ一つ確認している感じがスッと理解できますね。

Fetch API

最近では、fetch APIなるものでもAjaxを実装できる

Fetch APIは、PromiseベースのAPIで、リクエスト方法も非常にシンプルです。

[XMLHttpRequest](https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest)と似たものではありますが、より強力で柔軟な操作が可能です。

fetch('任意のエンドポイント', {
method: "GET",
}).then(response => response.text())
.then(text => {
console.log(text);
});

JSの非同期通信では、現在FetchAPIが割と使われている

結論

Ajaxとは非同期通信するためのプログラミング手法

例文

「この処理はAjaxの方がいいよね！」
「今回の機能はAjaxで行おう！」

背景

Ajaxとは

何が嬉しい

いつ使える？

実装方法

結論

Discussion