Ajax (プログラミング)

Ajax（AJAX / ˈ eɪ dʒ æ k s /とも呼ばれ、「asynchronous JavaScript and XML」の略^{[1] [2]}）は、クライアント側でさまざまなWebテクノロジを使用して非同期Webアプリケーションを作成する一連のWeb開発手法です。Ajaxを使用すると、Webアプリケーションは、既存のページの表示や動作を妨げることなく、サーバーと非同期に（バックグラウンドで）データを送受信できます。データ交換層をプレゼンテーション層から分離することにより、Ajaxでは、Webページ、ひいてはWebアプリケーションが、ページ全体を再読み込みすることなく、コンテンツを動的に変更することができます。^[3]実際には、最新の実装では、 XMLではなく JSONが一般的に使用されています。

Ajax はテクノロジーではなく、プログラミングの概念です。HTMLとCSS を組み合わせて使用​​することで、情報をマークアップしてスタイル設定できます。Web ページは JavaScript によって変更でき、新しい情報を動的に表示 (およびユーザーが操作) できます。組み込みのXMLHttpRequestオブジェクトは、Web ページで Ajax を実行するために使用され、Web サイトはページを更新せずにコンテンツを画面に読み込むことができます。Ajax は新しいテクノロジーでも、新しい言語でもありません。既存のテクノロジーを新しい方法で使用するものです。

1990 年代前半から中頃にかけて、ほとんどの Web サイトは完全な HTML ページに基づいていました。ユーザーが操作するたびに、サーバーから新しいページ全体を読み込む必要がありました。このプロセスは非効率的であり、ユーザー エクスペリエンスにも反映されていました。つまり、すべてのページ コンテンツが消えてから新しいページが表示されました。部分的な変更のためにブラウザーがページを再読み込みするたびに、一部の情報しか変更されていなかったとしても、すべてのコンテンツを再送信する必要がありました。これにより、サーバーに余分な負荷がかかり、帯域幅がパフォーマンスの制限要因になりました。

1996年、Internet Explorerによってiframeタグが導入されました。オブジェクト要素と同様に、^{[引用が必要]} Web ページの一部を非同期に読み込むことができます。1998年、Microsoft Outlook Web Accessチームは、 XMLHttpRequestスクリプト オブジェクトの背後にある概念を開発しました。 ^{[4]これは、} MSXMLライブラリの 2 番目のバージョンで XMLHTTP として登場し、^{[4] [5]} 1999 年 3 月にInternet Explorer 5.0に同梱されました。 ^[6]

IE 5 のWindows XMLHTTP ActiveXコントロールの機能は、後にMozilla Firefox、Safari、Opera、Google Chromeなどのブラウザーに XMLHttpRequest JavaScript オブジェクトとして実装されました。^{[7] Microsoft は、} Internet Explorer 7からネイティブ XMLHttpRequest モデルを採用しました。ActiveX バージョンは Internet Explorer で引き続きサポートされていますが、Microsoft Edgeではサポートされていません。これらのバックグラウンドHTTPリクエストと非同期 Web テクノロジの有用性は、Outlook Web Access (2000) ^[8]やOddpost (2002)などの大規模なオンライン アプリケーションで登場するまで、あまり知られていません。^[9]

Google は、Gmail (2004) とGoogle マップ(2005)で、標準に準拠したクロスブラウザAjax を幅広く展開しました。 ^[10] 2004 年 10 月、Kayak.comのパブリック ベータ リリースは、当時の開発者が「xml http のもの」と呼んでいたものの最初の大規模な電子商取引の使用の 1 つでした。^[11]これにより、Web プログラム開発者の間で Ajax への関心が高まりました。

AJAXという用語は、2005年2月18日にジェシー・ジェームズ・ギャレットがGoogleページで使用されている技術に基づいて書いた「Ajax: Webアプリケーションへの新しいアプローチ」という記事で初めて公開されました。^[1]

2006年4月5日、ワールドワイドウェブコンソーシアム（W3C）は、公式のウェブ標準を作成するために、XMLHttpRequestオブジェクトの最初のドラフト仕様をリリースしました。^[12] XMLHttpRequestオブジェクトの最新のドラフトは2016年10月6日に公開され、^[13] XMLHttpRequest仕様は現在、生きた標準となっています。^[14]

Ajaxという用語は、ページの現在の状態を妨げずにバックグラウンドでサーバーと通信する Web アプリケーションを実装するために使用できる、幅広い Web テクノロジのグループを表すようになりました。Ajax という用語を生み出した記事^{[1] [3]}で、 Jesse James Garrett は、次のテクノロジが組み込まれていると説明しています。

• プレゼンテーション用のHTML (またはXHTML ) とCSS
• データの動的な表示と操作のためのドキュメント オブジェクト モデル ( DOM )
• データ交換にはJSONまたはXML 、 XML操作にはXSLTを使用する
• 非同期通信用のXMLHttpRequestオブジェクト
• これらの技術を統合するJavaScript

しかし、それ以来、Ajax アプリケーションで使用されるテクノロジや、Ajax という用語の定義自体に多くの進歩がありました。データ交換に XML は必要なくなり、したがって、データの操作に XSLT は必要なくなり、JavaScript Object Notation (JSON) はデータ交換の代替形式としてよく使用されますが、^[15]フォーマット済みの HTML やプレーンテキストなどの他の形式も使用できます。^[16] JQueryを含むさまざまな一般的な JavaScript ライブラリには、Ajax リクエストの実行を支援する抽象化が含まれています。

JavaScriptで記述された、GETメソッドを使用した単純な Ajax リクエストの例。

ajaxデータを取得します。

// これはクライアント側のスクリプトです。

// 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 ) ; // 'これは出力です。' } else { console.log ( 'Error: ' + xhr.status ) ; //リクエスト中にエラーが発生しました。} } };    
	    
	    
	    
		    
			 
		  
			   
		
	


// リクエストを send-ajax-data.php に送信し
ます。xhr.send ( null ) ;

ajaxデータ送信.php:

<?php 
// これはサーバー側のスクリプトです。

// コンテンツタイプを設定します。header 
( ' Content-Type: text/plain' );

// データを送り返します。echo 
" これが出力です。" ; 
?>

FetchはネイティブJavaScript APIです。^[17] Google Developers Documentationによると、「Fetchを使用すると、古いXMLHttpRequestよりもWebリクエストの作成と応答の処理が簡単になります。」

fetch ( 'send-ajax-data.php' ) .then 
( data = > console.log ( data ) ) .catch ( error = > console.log ( 'エラー: ' + error ) ) ;      
         

非同期関数doAjax1 () { try { const res = await fetch ( 'send-ajax-data.php' ) ; const data = await res.text ( ) ; console.log ( data ) ; } catch ( error ) { console.log ( ' Error:' + error ) ; } }   
     
            
            
        
       
          
    


実行結果

Fetch は JavaScript の Promise に依存します。

このfetch仕様は、Ajax次の点で大きく異なります。

• から返される Promise は、応答が HTTP 404 または 500 であっても、fetch() HTTP エラー ステータスでは拒否されません。ok代わりに、サーバーがヘッダーで応答するとすぐに、Promise は通常どおり解決され (応答が 200 ～ 299 の範囲にない場合は応答のプロパティが false に設定されます)、ネットワーク障害が発生した場合、または何らかの理由で要求の完了が妨げられた場合にのみ拒否されます。
• fetch() 資格情報初期化オプションを設定しない限り、クロスオリジン Cookie は送信されません。(2018 年 4 月以降。仕様により、デフォルトの資格情報ポリシーが に変更されましたsame-origin。Firefox は 61.0b13 以降で変更されました。)

Ajax には、Web アプリケーションのパフォーマンスとユーザー エクスペリエンスを大幅に向上できるいくつかの利点があります。サーバー トラフィックを削減し、速度を向上させることで、Ajax は現代の Web 開発において重要な役割を果たします。Ajax の重要な利点の 1 つは、データ取得を必要とせずに Web アプリケーションをレンダリングできるため、サーバー トラフィックが削減されることです。この最適化により、サーバー側とクライアント側の両方で応答時間が最小限に抑えられ、ユーザーが読み込み画面に耐える必要がなくなります。^[18]

さらに、AjaxはXmlHttpRequestの利用を簡素化することで非同期処理を容易にし、非同期データ取得のリクエストを効率的に処理できるようにします。さらに、コンテンツの動的読み込みにより、アプリケーションのパフォーマンスが大幅に向上します。^[19]

さらに、Ajaxは、Microsoft Internet Explorerバージョン5以降、Mozilla Firefoxバージョン1.0以降、Operaバージョン7.6以降、Apple Safariバージョン1.2以降を含むすべての主要なWebブラウザで幅広くサポートされています。^[20]

ウィキメディア・コモンズには、 AJAX (プログラミング)に関連するメディアがあります。

WikibooksにはAJAXに関する本があります。

• [1] Ajax: Webアプリケーションへの新しいアプローチ - Ajaxという用語を生み出した記事とQ&A
• GET、POST、テキスト、XML の例を含む Ajax チュートリアル。