Ajax(プログラミング)

ウィキペディアから、無料の百科事典
ナビゲーションにジャンプ 検索にジャンプ

非同期JavaScriptとXML
初登場1999年3月
ファイル名拡張子.js
ファイル形式JavaScript
に影響を受けた
JavaScriptXML

AjaxAJAX / ˈeɪdʒæks / ;「非同期JavaScriptとXML」の略 [ 1 ] [ 2 ]クライアント側でさまざまなWebテクノロジーを使用して非同期 Webアプリケーションを作成する一連のWeb開発手法です。 Ajaxを使用すると、Webアプリケーションはサーバーからデータを送受信できます既存のページの表示と動作に干渉することなく、非同期で(バックグラウンドで)。データ交換レイヤーをプレゼンテーションレイヤーから切り離すことにより、Ajaxは、Webページ、ひいてはWebアプリケーションが、ページ全体をリロードすることなくコンテンツを動的に変更できるようにします。[3]実際には、最近の実装では通常、XMLではなく JSONを使用します。

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

歴史

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

1996年に、iframeタグがInternetExplorerによって導入されました。オブジェクト要素と同様に、コンテンツを非同期でロードまたはフェッチできます。 1998年、Microsoft Outlook Web Accessチームは、 XMLHttpRequestスクリプトオブジェクトの背後にある概念を開発しました。 [4] 1999年3月にInternetExplorer5.0に同梱されたMSXMLライブラリの2番目のバージョン[4] [5]ではXMLHTTPとして登場しました。 [6]

IE5のWindowsXMLHTTP ActiveXコントロールの機能は、後にMozilla FirefoxSafariOperaGoogle Chrome、およびその他のブラウザーによってXMLHttpRequestJavaScriptオブジェクトとして実装されました。[7] Microsoftは、 Internet Explorer7の時点でネイティブXMLHttpRequestモデルを採用しましたActiveXバージョンは引き続きInternetExplorerでサポートされていますが、MicrosoftEdgeではサポートされていません。これらのバックグラウンドHTTPリクエストと非同期Webテクノロジの有用性は、Outlook Web Access(2000)[8]オッドポスト(2002)。

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

AJAXという用語は、2005年2月18日にJesse James Garrettによって、Googleページで使用されている手法に基づいたAjax:Webアプリケーションへの新しいアプローチというタイトルの記事で公に使用されました。[1]

2006年4月5日、World Wide Webコンソーシアム(W3C)は、公式のWeb標準を作成するために、XMLHttpRequestオブジェクトの最初のドラフト仕様をリリースしました[11] XMLHttpRequestオブジェクトの最新ドラフトは2016年10月6日に公開され[12]、XMLHttpRequest仕様は現在の標準です。[13]

テクノロジー

WebアプリケーションとAjaxを使用するアプリケーションの従来のモデル

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

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

JavaScriptの例

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

get-ajax-data.js:

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

// HTTPリクエストを初期化します。
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  {
			コンソールlog 'エラー: ' +  xhr。status ; //リクエスト中にエラーが発生しました。} } }; 
		
	


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

send-ajax-data.php:

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

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

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

フェッチ例

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

fetch 'send-ajax-data.php' 
    次にデータ => コンソールログデータ))
    catch  error  =>  console .log ' Error:' + error ));  

ES7 async / awaitの例

非同期 関数 doAjax () { 
    try  { 
        const  res  =  await  fetch 'send-ajax-data.php' ); 
        const  data  =  awaitres  _ テキスト(); コンソールログデータ); } catch error { console ログ'エラー:' +エラー); } }
        
       
          
    


doAjax ();

FetchはJavaScriptのpromiseに依存しています

fetch仕様はAjax、次の重要な点で 異なります。

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

も参照してください

参考文献

  1. ^ a b c ジェシー・ジェームズ・ギャレット(2005年2月18日)。「Ajax:Webアプリケーションへの新しいアプローチ」AdaptivePath.com。2015年9月10日にオリジナルからアーカイブされました2008年6月19日取得
  2. ^ 「Ajax-Web開発者ガイド」MDN WebDocs2018年2月28日にオリジナルからアーカイブされました2018年2月27日取得
  3. ^ a b Ullman、Chris(2007年3月)。Ajaxの始まりwrox。ISBN 978-0-470-10675-42008年7月5日にオリジナルからアーカイブされました2008年6月24日取得
  4. ^ a b "元の開発者によるXMLHTTPの歴史に関する記事"Alexhopmann.com。2007年1月31日。2007年6月23日のオリジナルからアーカイブ2009年7月14日取得
  5. ^ 「MicrosoftDeveloperNetworkからのIXMLHTTPRequestインターフェイスの仕様」Msdn.microsoft.com。2016年5月26日にオリジナルからアーカイブされました2009年7月14日取得
  6. ^ Dutta、Sunava(2006年1月23日)。「ネイティブXMLHTTPRequestオブジェクト」IEBlogマイクロソフト。2010年3月6日にオリジナルからアーカイブされました2006年11月30日取得
  7. ^ 「ダイナミックHTMLとXML:XMLHttpRequestオブジェクト」Apple Inc. 2008年5月9日にオリジナルからアーカイブされました2008年6月25日取得
  8. ^ ホップマン、アレックス。「XMLHTTPのストーリー」アレックスホップマンのブログ2010年3月30日にオリジナルからアーカイブされました2010年5月17日取得
  9. ^ 「Ajaxの簡単な歴史」アーロン・スワーツ。2005年12月22日。2010年6月3日のオリジナルからアーカイブ2009年8月4日取得
  10. ^ 英語、ポール(2006年4月12日)。「カヤックユーザーインターフェース」公式Kayak.comテクノブログ2014年5月23日にオリジナルからアーカイブされました2014年5月22日取得
  11. ^ van Kesteren、Anne; ジャクソン、ディーン(2006年4月5日)。「XMLHttpRequestオブジェクト」W3.orgWorld WideWebコンソーシアム。2008年5月16日にオリジナルからアーカイブされました2008年6月25日取得
  12. ^ ケステレン、アン; ジュリアン、オーブール; 歌、ジョンキー; Steen、Hallvord RM "XMLHttpRequestレベル1"W3.orgW3C。2017年7月13日にオリジナルからアーカイブされました2019年2月19日取得
  13. ^ 「XMLHttpRequest標準」xhr.spec.whatwg.org 2020年4月21日取得
  14. ^ 「JavaScriptオブジェクト表記」Apache.org。2008年6月16日にオリジナルからアーカイブされました2008年7月4日取得
  15. ^ 「JSONでAjaxベースのアプリをスピードアップ」DevX.com。2008年7月4日にオリジナルからアーカイブされました2008年7月4日取得
  16. ^ 「フェッチAPI-WebAPI」MDN2019年5月29日にオリジナルからアーカイブされました2019年5月30日取得

外部リンク