AJAXはどのように機能しますか?


87

AJAXの本質は何ですか?たとえば、ユーザーがこのリンクをクリックすると、現在のページを再読み込みせずに一部の情報がサーバーに送信されるように、ページにリンクを設定したいとします。それはAJAXですか?

アイソフレームを使用することでこの動作を得ることができました。より詳細には、小さなアイソフレームにリンク(たとえば、小さな画像)を配置します。ユーザーがこのリンクをクリックすると、ブラウザはアイソフレーム内のページのみを再読み込みします。

しかし、それは目標を達成するためのエレガントな方法ではないと思います。AJAXを使用する必要があると思います。それはどのように機能しますか?XHTMLを使用すると、考えられる問題をエレガントな方法で解決できますか?または、JavaScriptを使用する必要がありますか?

あまり必要ありません。(クリックした後)サーバーに情報を送信する小さなリンクが欲しいだけです。メッセージの近くに「星の画像」があるとします。ユーザーがスターをクリックすると(メッセージが気に入った場合)、スターの色が変わり、サーバーの更新データベースが変わります(ユーザーがメッセージを気に入ったことを思い出します)。


8
Wikipediaへの必須リンク:en.wikipedia.org/wiki/Ajax_(programming)
Jon B

答えはリンクにアクセスしてください:w3schools.com/php/php_ajax_intro.asp

回答:


121

AJAX(Asynchronous Javascript And XMLの略)をまったく使用していない場合は、ウィキペディアのAJAXエントリが出発点として適しています。

DHTMLやLAMPと同様に、AJAXはそれ自体がテクノロジーではなく、テクノロジーのグループです。AJAXは次の組み合わせを使用します。

  • 情報のマークアップとスタイル設定のためのHTMLおよびCSS。
  • 提示された情報を動的に表示および操作するためにJavaScriptでアクセスされるDOM。
  • ブラウザとサーバー間で非同期にデータを交換する方法。これにより、ページのリロードを回避できます。通常、XMLHttpRequest(XHR)オブジェクトが使用されますが、代わりにIFrameオブジェクトまたは動的に追加されたタグが使用されることもあります。
  • ブラウザに送信されるデータの形式。一般的な形式には、XML、事前にフォーマットされたHTML、プレーンテキスト、JavaScript Object Notation(JSON)などがあります。このデータは、なんらかのサーバーサイドスクリプトによって動的に作成できます。

ご覧のとおり、純粋な技術の観点から見ると、ここには本当に新しいものはありません。AJAXパーツのほとんどは、1994年にすでに存在していました(XMLHttpRequestオブジェクトの場合は1999年)。本当の目新しさは、GoogleがGMail(2004)とGoogle Maps(2005)で行ったように、これらのパーツを一緒に使用することでした。実際、どちらのサイトもAJAXの推進に大きく貢献しました。

クライアントとリモートサーバー間の通信、および従来のアプリケーションとAJAXを利用したアプリケーションの違いを示す図の下にある、1,000ワードに相当する図:

代替テキスト

オレンジ色の部分については、(XMLHttpRequestオブジェクトを使用して)手作業ですべてを行うか、jQueryPrototypeYUIなどの有名なJavaScriptライブラリを使用して、アプリケーションのクライアント側を「AJAXify」できます。このようなライブラリは、JavaScript開発の複雑さ(ブラウザ間の互換性など)を隠すことを目的としていますが、単純な機能ではやり過ぎになる場合があります。

サーバー側では、一部のフレームワークも役立ちます(たとえば、Javaを使用している場合はDWRまたはRAJAX)。ただし、基本的に必要なのは、ページを部分的に更新するために必要な情報のみを返すサービス(最初はXMLとして)を公開することだけです。 / XHTML-AJAXのX-しかし、今日ではJSONがよく使用されます)。


17

AJAXの本質はこれです。

ユーザーが他のことをしているときに、ページでWebを閲覧し、独自のコンテンツを更新できます

つまり、JavaScriptは非同期のGETリクエストとPOSTリクエストを(通常はXMLHttpRequestオブジェクトを介して)送信し、それらのリクエストの結果を使用して(ドキュメントオブジェクトモデルの操作を介して)ページを変更できます。


この「自分で更新する」が実際に動作しているところを私が見ることができる手に負えない例はありますか?
ダニエルスプリンガー

17

AJAXは通常、ページ全体をリロードすることなく、クライアントからサーバーにHTTPリクエストを送信し、サーバーの応答を処理します。(非同期)。

Javascriptは通常、送信を行い、サーバーからのデータ応答を受信します(通常、XML、JSONなどの他の冗長度の低い形式が多い)。

次に、JavaScriptはページDOMを動的に更新して、ユーザーのビューを更新します。

したがって、「非同期JavascriptおよびXML」です。

Flashやアプレットなど、ページをリロードせずにユーザーのビューを更新するオプションは他にもありますが、これらはあなたのケースに適したソリューションのように聞こえません。Javascriptのように聞こえます。このサイトで使用されているjQueryのように、多くの優れたライブラリサポートがあるので、実際に多くのJavaScriptを自分で作成する必要はありません。


私はこの答えが好きです。@Verrtex知っておくべきことは、XMLHttpRequestについてだけです。
enguerran 2009年

13

Ajaxは、ページの一部をリロードするだけではありません。AjaxはAsynchronous Javascript And Xmlの略です。

必要なAjaxの唯一の部分は、JavaScriptのXMLHttpRequestオブジェクトです。これを使用して、htmlの小さな部分をdivまたはその他のタグとしてロードおよび再ロードする必要があります。

そのを読んでください。そうすれば、あなたは思ったより早くプロになります!

<html>
<body>

<script type="text/javascript">
function ajaxFunction()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
else
  {
  alert("Your browser does not support XMLHTTP!");
  }
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
  {
  document.myForm.time.value=xmlhttp.responseText;
  }
}
xmlhttp.open("GET","time.asp",true);
xmlhttp.send(null);
}
</script>

<form name="myForm">
Name: <input type="text" name="username" onkeyup="ajaxFunction();" />
Time: <input type="text" name="time" />
</form>

</body>
</html>

1
AJAXという名前はXMLを必要としませんが、単語/頭字語のXはXMLを表します。これは、歴史的にはサーバーとクライアント間の通信方法であるためです。
enguerran 2009年

5

AJAXはAsynchronous Javascript and XMLの略です。AJAXは、ページ全体をサーバーにポストバックしなくても、ページの部分的な更新をサポートします。

AJAXには多くのオプションがあります。最も注目すべき2つは(おそらく)MicrosoftのASP.NET AJAX(以前のAtlas)とjQueryです。

ASP.NET AJAXは、ASP.NETに慣れている場合は比較的簡単に設定できます。jQueryは、JavaScriptをすでに知っている場合に適しています。また、ページのクエリと更新を非常に細かく制御できます。

HTH


2

興味があれば、IBMがAjaxに関する10シリーズ(おそらくそれ以上)のパートシリーズを持っています:Ajaxパート1をマスターする

今は数年前ですが、これは良いイントロです(最初の部分だけを読んでも!)

現時点ではサイトが少し遅いのですが、シリーズ全体がここにリストされているはずです...

概要:

HTML、JavaScript™テクノロジー、DHTML、およびDOMで構成されるAjaxは、扱いにくいWebインターフェースをインタラクティブなAjaxアプリケーションに変換するのに役立つ優れたアプローチです。Ajaxのエキスパートである著者は、非常に効率的なWeb開発を簡単に実現するために、これらのテクノロジーがどのように(概要から詳細に至るまで)連携するかを示しています。彼はまた、XMLHttpRequestオブジェクトを含む、Ajaxの中心的な概念を明らかにします。


1

それはajaxです。JavaScriptなしではajaxを使用できません。jqueryとプロトタイプの例を見て、使用方法を理解する必要があります。


一部の情報筋によると、VBScriptでAJAXを実行できます。しかし、それを行う正当な理由はありません。:-)
Nosredna

いいえ、できません。VBScriptでAVAXを実行できます。
Stefan Kendall

6
へえ。AJAXは非同期JavaScriptとXMLだと聞きました。非同期である必要はありませんが、JavaScriptである必要はなく、XMLである必要もありません。
Nosredna

0

あなたがやろうとしていることは、技術的にajaxです。Ajaxは、xhtmlフラグメントトランザクションを作成して、ページのセクションを更新します。Javascriptは、これらのgetリクエストをきれいに整えます。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.