Loading article…
非同期 JavaScript および XML [ 1 ] [ 2 ]は、通常Ajax (大文字のAJAX、/ ˈ eɪ dʒ æ k s /とも表記)と呼ばれ、クライアント側でさまざまな非同期Web テクノロジーを使用してWeb アプリケーションを作成するWeb 開発技術のセットです。Ajax を使用すると、Web アプリケーションは、既存のページの表示や動作に干渉することなく、サーバーからデータを非同期 (バックグラウンドで) に送受信できます。データ交換レイヤーをプレゼンテーションレイヤーから分離することで、Ajax は、Web ページ、ひいては Web アプリケーションが、ページ全体を再読み込みする必要なくコンテンツを動的に変更できるようにします。[ 3 ]実際には、最新の実装では、 XMLの代わりにJSONがよく使用されます。
Ajaxは技術ではなく、プログラミングパターンです。JavaScriptによってWebページを変更することで、ページを更新することなく、取得した情報を動的に表示（およびユーザーが操作できるように）できます。組み込みのXMLHttpRequestオブジェクトは、Webページ上でAjaxリクエストを実行するために使用できます。また、組み込みfetch()関数はXMLHttpRequestの新しい代替手段であり、Ajaxを実行するために使用できます。
1990年代前半から中頃にかけて、ほとんどのウェブサイトは完全なHTMLページに基づいて構築されていました。ユーザーが何らかの操作を行うたびに、サーバーから新しいページ全体を読み込む必要がありました。このプロセスは非効率的で、ユーザーエクスペリエンスにもそれが反映されていました。ページの内容がすべて消え、新しいページが表示されるという状態でした。部分的な変更のためにブラウザがページを再読み込みするたびに、たとえ一部の情報しか変更されていなくても、すべてのコンテンツを再送信する必要がありました。これはサーバーに余分な負荷をかけ、帯域幅がパフォーマンスの制限要因となっていました。
Ajax の基礎は、1996 年に JavaScript 1 が導入されたことに遡ります。開発者はすぐに、"src" 属性を受け入れる HTML 要素であれば、リモート データを取得するために使用できることを発見しました。非表示のフレームの src を変更することで、開発者はページをリロードせずにリモート データを取得、処理、または表示することができました。リモート データには、文字列、JavaScript コード、XML、またはサーバーで生成された部分的な HTML ページなどがありました。同じことは、<head>タグと<body> タグでもできましたが、多くの開発者は実行可能なGIFの概念に警戒し、非表示の <body> タグを使用することを好みました。この手法は、当時主要な 2 つのブラウザであったNetscape NavigatorとInternet Explorer の両方で使用されていましたが、開発者が Internet Explorer 4 [ 4 ]に XMLHTTP サーバー オブジェクト (MSXML 1.0) が含まれていることを発見するまで続きました。その後、ブラウザ検出を使用して、Netscape では非表示の <body> タグを実装するか、IE 4 では XMLHTTP (MSXML 1.0) オブジェクトを使用するようになりました。<img><embed><iframe><iframe>
1996 年、Internet Explorerはiframeタグを導入し、Web ページを別の Web ページ内に埋め込むことができるようになりました。埋め込まれたページは非同期で読み込まれます。1998 年、Microsoft Outlook Web AccessチームはXMLHttpRequestスクリプト オブジェクトの背後にある概念を開発しました。 [ 5 ]これは、1999 年 3 月にInternet Explorer 5.0に同梱されたMSXMLライブラリの第 2 バージョンで XMLHTTP として登場しました。[ 5 ] [ 6 ] [ 7 ]
IE 5 のWindows XMLHTTP ActiveXコントロールの機能は、後にMozilla Firefox、Safari、Opera、Google Chrome、その他のブラウザで XMLHttpRequest JavaScript オブジェクトとして実装されました。[ 8 ] Microsoft はInternet Explorer 7以降、ネイティブの XMLHttpRequest モデルを採用しました。ActiveX バージョンのサポートは Internet Explorer とMicrosoft Edgeの「Internet Explorer モード」で残されました。これらのバックグラウンドHTTPリクエストと非同期 Web テクノロジーの有用性は、Outlook Web Access (2000) [ 9 ]やOddpost (2002) [ 10 ]などの大規模なオンライン アプリケーションに登場し始めるまで、かなり知られていませんでした。
Google は、 Gmail (2004 年) とGoogle マップ(2005 年)で、標準規格に準拠したクロスブラウザAjax を広く展開しました。 [ 11 ] 2004 年 10 月、Kayak.comのパブリック ベータ版のリリースは、当時の開発者が「 xml http の仕組み」と呼んでいたものを大規模に電子商取引で使用した最初の事例の 1 つです。[ 12 ]これにより、ウェブ プログラム開発者の間で Ajax への関心が高まりました。
Ajaxという用語は、2005年2月18日にジェシー・ジェームズ・ギャレットがGoogleのページで使用されている技術に基づいて書いた「Ajax: A New Approach to Web Applications」というタイトルの記事で初めて公に使用されました。[ 1 ]
2006年4月5日、ワールドワイドウェブコンソーシアム（W3C）は、公式のWeb標準を作成する試みとして、XMLHttpRequestオブジェクトの最初のドラフト仕様を公開した。[ 13 ]
2015年に、XMLHttpRequestオブジェクトの現代的な代替手段としてFetch標準が導入されました。[ 14 ]
XMLHttpRequestオブジェクトの最終ドラフトは2016年10月6日に公開され[ 15 ]、XMLHttpRequest仕様は現在、生きた標準となっています[ 16 ]。
Ajaxという用語は、ページの現在の状態に影響を与えることなく、バックグラウンドでサーバーと通信するWebアプリケーションを実装するために使用できる幅広いWebテクノロジーのグループを表すようになりました。Ajaxという用語を生み出した記事[ 1 ] [ 3 ]で、Jesse James Garrettは、次のテクノロジーが組み込まれていると説明しました。
しかし、それ以降、Ajax アプリケーションで使用される技術や、Ajax という用語自体の定義に多くの進展がありました。データ交換に XML はもはや必要なく、したがって、データの操作に XSLT も不要になりました。JavaScript Object Notation (JSON) は、データ交換の代替フォーマットとしてよく使用されますが、[ 17 ]整形済み HTML やプレーンテキストなどの他のフォーマットも使用できます。[ 18 ] jQueryを含むさまざまな人気のある JavaScript ライブラリには、Ajax リクエストの実行を支援する抽象化が含まれています。
XMLHttpRequestは、Internet Explorerバージョン5、Firefoxバージョン1.0、Operaバージョン7.6、Safariバージョン1.2以降、主要なすべてのWebブラウザで広くサポートされています。[ 19 ]
Fetch は、XMLHttpRequest の後継として作成された JavaScript 標準です。[ 20 ] Google 開発者向けドキュメントによると、「Fetch を使用すると、古い XMLHttpRequest よりも Web リクエストの作成とレスポンスの処理が容易になります。」[ 21 ] Fetch はJavaScript の Promiseに依存しています。
Fetch仕様は、XMLHttpRequest仕様と以下の重要な点で異なります。
fetch()レスポンスが HTTP 404 または 500 であっても、HTTP エラー ステータスで拒否されることはありません。代わりに、サーバーがヘッダー付きで応答するとすぐに、Promise は正常に解決され (okレスポンスが 200～299 の範囲外の場合は、レスポンスのプロパティが false に設定されます)、ネットワーク障害またはリクエストの完了を妨げる何らかの要因があった場合にのみ拒否されます。fetch()認証情報初期化オプションを設定しない限り、クロスオリジンCookieは送信されません。（2018年4月以降。仕様によりデフォルトの認証情報ポリシーが変更されましたsame-origin。Firefoxは61.0b13以降変更されています。）GETメソッドを使用したシンプルなAjaxリクエストの例です。クライアント側のスクリプトはXMLHttpRequestオブジェクトを使用してJavaScriptで記述されており、シンプルなプレーンテキストのレスポンスを返すサーバー側のスクリプトはPHPで記述されています。
get-ajax-data.js:
// これはクライアント側のスクリプトです。// HTTPリクエストを初期化します。let xhr = new XMLHttpRequest ();// リクエストを定義します。xhr.open ( ' GET' , 'send-ajax-data.php' ) ;// リクエストの状態変化を追跡します。xhr.onreadystatechange = function ( ) {const DONE = 4 ; // readyState 4 はリクエストが完了したことを意味します。const OK = 200 ; // ステータス 200 は成功の戻り値です。if ( xhr . readyState === DONE ) {if ( xhr . status === OK ) {console.log ( xhr.responseText ); // 'これが出力です。'}それ以外{console.log ( 'エラー: ' + xhr.status ); //リクエスト中にエラーが発生しました。}}};// send-ajax-data.php にリクエストを送信します。xhr.send ( null ) ;send-ajax-data.php:
<?php // これはサーバーサイドスクリプトです。// コンテンツタイプを設定します。header ( 'Content-Type: text/plain' );// データを返送します。echo 'これが出力です。' ; ?>同じクライアント側スクリプトを、代わりにFetch関数を使用し、コールバック形式のPromise構文で記述した例を以下に示します。
// これはクライアント側のスクリプトです。fetch ( 'send-ajax-data.php' ) . then ( res = > res.text ( )) . then ( data => console.log ( data ) ) . catch ( error => console.log ( ' Error: ' + error ) ) ;JavaScriptのasync/await構文 を使用した同じスクリプト：
// これはクライアント側のスクリプトです。try { const res = await fetch ( ' send -ajax-data.php' ); const data = await res.text ( ); console.log ( data ) ; } catch ( error ) { console.log ( 'エラー: ' + error ) ; }