プロジェクトで AJAX の使用を開始する必要がありますが、どこから始めればよいかわかりません。誰か助けてくれませんか?
21 に答える
同期JavaScriptおよびX ml 。_ _ HTTP を介して Web ブラウザーとサーバーの間で双方向のスクリプト駆動型通信を実現するための手法。
以下も参照してください。
編集: Nosredna が指摘したように、XML の代わりにJSONがよく使用されます。
大まかなアイデアを英語で:
あなたはウェブページを持っています。なんらかのイベント (ボタンの押下やその他のフォーム イベント、またはタイマーによってトリガーされるもの) が発生し、サーバーに最新の情報 (GOOG 株の最新の値など) を要求する JavaScript コードをトリガーします。
サーバーには、渡された情報を収集していくつかの情報を送り返すコードがあります。これは、サーバーが通常行うページ サービング ジョブとは異なります。
サーバーが応答すると、(サーバーへの JavaScript 呼び出しで指定した) コールバック関数がサーバーからの情報で呼び出されます。JavaScript コードはこの情報を使用して、GOOG の株価チャートなどを更新します。
よりクリーンなと混同しないでください。技術用語であるAJAX は、実際にはフレームワークを表しているか、XML と JavaScript を使用してサーバー側コードへの非同期呼び出しを行うための手法としてより適切に表現されています...
以下に、いくつかの優れたコード サンプルを示します。そして、もう少し。
上記のサンプルの多くは、すべての XML 要求オブジェクトを作成する方法を示していますが、Microsoft の ASP.NET アプリケーションまたは jQuery 用の AJAX コントロール ツールキットを調べると、これらの操作がより簡単であることがわかります。
jQuery サンプル ( jQueryサイトから):
コードがヒットすると、some.php ファイルがヒットし、名前と場所の値が渡されます。
<script type="javascript">
function saveDataAjax(){
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
}
</script>
<input type="submit" onClick="saveDataAjax();" value="submit" />
それは流行語であり、その本質は次のとおりです。
Javascriptを使用して非同期HTTPリクエストを作成します(バックグラウンドで)。
コンテンツが到着すると、アクションが実行されます。通常、何らかのロジックを実行してから、DOMツリーを操作してページの外観を更新します。つまり、新しいHTML要素の挿入、一部のhtml要素の削除などです。
AJAXのXはXMLの略ですが、関係ありません。XMLは、サーバーから送信されるデータをフォーマットするための多くの方法の1つにすぎません。JSONははるかに優れた代替手段です(IMNSHO)。また、サーバーはプレーンテキストまたは通常のHTMLを送信できます。
ここでのキーワードは非同期リクエストです。ブラウザがページをリロードすることなく、バックグラウンドで発生するリクエスト。
Pragmatic Ajaxの本から:
Ajaxとは何ですか?
Ajaxは、ワンライナーに蒸留するのが難しい獣です。それがとても難しい理由は、それに2つの側面があるからです。
- Ajaxは一連のテクノロジーと見なすことができます。
- Ajaxはアーキテクチャと見なすことができます。
Ajax:非同期JavaScriptとXML
Ajaxという名前は、ブラウザーとサーバー間の非同期通信チャネル、JavaScript、およびXMLという実現テクノロジーのバンドルに由来しています。それが定義されたとき、それは次のように想定されていました:
- XHTMLとCSSを使用した標準ベースのプレゼンテーション
- ブラウザのDocumentObjectモデル(DOM)を使用した動的な表示と対話
- XMLとXSLTを使用したデータ交換と操作
- XMLHttpRequestまたはXMLHTTP(Microsoftから)を使用した非同期データ取得
- すべてを結合するJavaScript
これらの実現技術を使用して開発することは一般的ですが、報酬よりもすぐに問題になる可能性があります。
これらの理由から、Ajaxのより重要な定義は...
Ajax:アーキテクチャ
Ajaxのエキサイティングな進化は、Webアプリケーションの設計方法にあります。まず、従来のWebアーキテクチャを見てみましょう。
- アプリケーション内のすべてのイベント(アイテムの表示、アイテムの購入、チェックアウトなど)のページを定義します。
- 各イベントまたはアクションは、ページ全体をブラウザに返します。
- そのページはユーザーに表示されます。
これは今の私たちにとって自然なことのようです。Webは実際にはアプリケーションに関するものではなかったので、Webの最初はそれが理にかなっています。Webは、より多くのドキュメントリポジトリとして始まりました。それは、アドホックな方法でドキュメント間を簡単にリンクできる世界でした。それは、意味のある意味での双方向性ではなく、ドキュメントとデータの共有に関するものでした。
リッチデスクトップアプリケーションを少し想像してみてください。クリックするたびに、アプリケーション画面のすべてのコンポーネントが最初から書き直されたとしたらどうなるか想像してみてください。ちょっとおかしなようですね。Web上では、Ajaxが登場するまで私たちが住んでいた世界でした。
Ajaxは新しいアーキテクチャです。このアーキテクチャの重要な部分は次のとおりです。
小さなサーバー側イベント: Webアプリケーションのコンポーネントは、サーバーに小さな要求を返し、いくつかの情報を取得し、DOMを変更することで表示されるページを微調整できるようになりました。ページ全体の更新はありません。
非同期:サーバーにポストバックされたリクエストによって、ブラウザーがブロックされることはありません。ユーザーはアプリケーションの他の部分を引き続き使用でき、UIを更新して、要求が行われていることをユーザーに警告できます。
onAnything:ユーザーが行うほとんどすべてのことに基づいてサーバーと対話できます。最新のブラウザは、オペレーティングシステムと同じユーザーイベントのほとんど(マウスオーバー、マウスクリック、キー押下など)をトラップします。ユーザーイベントはすべて、非同期要求を引き起こす可能性があります。
これはすべて素晴らしいですね。ただし、この変更では注意が必要です。Webの最大の利点の1つは、誰でもWebを使用できることです。単純なセマンティクスを持つことは、それを実現するのに役立ちます。船外に出ると、新しいUIの抽象化でユーザーを驚かせ始めるかもしれません。これは、Flash UIでよくある不満であり、ユーザーは新しい記号、比喩、および有用な結果を達成するために必要なアクションに直面します。
最も一般的には、ブラウザーで JavaScript* を介して XMLHttpRequest オブジェクトを使用することを指します。
誰に尋ねるかにもよりますが、ブラウザに URL を入力するだけでなく、HTTP を介したほぼすべての種類のクライアント/サーバー通信を説明するために使用できます。
*jQuery は、ブラウザー間の違いなどを処理するための優れたラッパー コードを提供します。
Ajax は少し間違った名前です。ウィキの記事を引用するには:
その名前にもかかわらず、実際には JavaScript と XML の使用は必須ではなく、リクエストが非同期である必要もありません。
現在、ほとんどの人は「ajax」と呼んでいますが、
バックグラウンドでサーバーと通信する Web アプリケーション
http://www.w3schools.com/Ajax/Default.Asp
それは始めるのに良い場所です。これですべての質問に答えられるはずです。
この用語を作り出した人から - http://adaptivepath.com/ideas/essays/archives/000385.php
「Ajax」は、定着しなかった古い用語「DHTML」を置き換えるために 2005 年に導入され、成功を収めたマーケティング用語です。今日の「Ajax」も歴史の一部であり、「HTML5」という新しい言葉が出現しています。それでも「HTML5」は、元の「DHTML」が使用されていたものとほぼ同じです。
Ajax は「アプリケーション開発への新しいアプローチ」とも呼ばれます。Web ページは最初はサーバー上で作成されますが、その後、データまたは部分的なコンテンツが通信されると、その有効期間中にクライアント上で更新が行われます。バックグラウンドでサーバー。
これが明確になることを願っています。
追加するだけ..質問には関係ないかもしれません..しかし、AJAXはブラウザの電子メールでGmailによって有名になりました..AJAXの功績はMicrosoftに行きます..彼らはAJAXのものを作成しました..
試してみて、「ブラウザで Web 上で実行するためのリッチ アプリケーションを構築するための W3C ベース (JavaScript、HTML、および CSS) のソリューションを持つという概念です」と言うことにします。
他のすべては単なる「技術的な詳細」だと思います... ;)
PS!- 驚くべき質問...!! ;)
最初の AJAX リファレンスとしてHead First AJAXを読みましたが、AJAX の簡単で実用的な概要を示していることがわかりました。
AJAX は非常に単純です。ページをリロードせずにサーバーに何かを送信し、そこから何かを受信できるとしたら、クールだろうとどこかで考えた人がいます。
AJAX は革命ではありません。単純なものの名前に過ぎません。Web ページは、リロードすることなくサーバーにリクエストを送信できます。
Visual Studio でドラッグするだけで、Web ページに AJAX コントロールを追加できます。それらのマネージャーを追加する必要があるかもしれませんが、それは単純なドラッグ アンド ドロップ タスクです。
ただし、注意してください: 不正な Web ブラウザは通常、IE と同じ AJAX 言語を話せません...
:)
AJAX は、ページ全体をリロードする必要があるコンテンツの一部を更新する機能をブラウザに与えるための非常に凝った用語です。多くの人が言っているように、それを実装するために XML や Javascript さえも必要としません。実際、初期の頃は VBScript と Jscript で行われ、DHTML と呼ばれていました。 Jesse James Garrett が AJAX 用語を発明した可能性がありますが、その背後にある概念を発明したのは実際には Microsoft でした。
この情報筋によると、Microsoft は 1999 年にそれを開始しましたが、この技術の誕生はさらに先のことになります。このWired の記事はおそらく、この技術が 90 年代後半に登場した日付の方が正確であり、その多くは、1997 年に遡って開始された Microsoft の Michael Wallent によって書かれたMSDN DHTML Dude コラムの古い時代からのものです。また、Michael 自身によるこの素晴らしいビデオでも語られています: http://channel9.msdn.com/posts/Charles/Michael-Wallent-Advent-and-Evolution-of-WPF/現在の Silverlight チームは、 Microsoft のActiveXの後継です。
AJAX の話に戻ります...2005 年に Jesse James Garrett が戻ったとき、彼は主に Javascript コード内でのXMLHTTPRequestの使用と、少しの塩について話していました。それが後に流行りの言葉の始まりとなり、多くの人がそれが何であるかを知らなくても使い始め、実際には何か古いものをリミックスしただけなのに、それは真新しくて流行りのものだと考えました。最近よく耳にするヒップホップの曲。
新しいものではなく、古いものの新しいバージョンです。
AJAX (Asynchronous JavaScript and XML) は、2 つの強力なブラウザー機能を表す新しい造語で、長年にわたって使用されてきましたが、Gmail、Google サジェスト、Google マップなどのアプリケーションが登場する最近まで、多くの Web 開発者に見過ごされていました。Ajax の詳細については、Ajax のチュートリアルをご覧ください。
開始するための最も速くて簡単な方法は、jQuery を使用することだと思います。
AJAX は非同期 JavaScript および XML の略ですが、常に XML データを処理するわけではありません。基本的には、クライアントで実行されている JavaScript を介して XMLHttpRequest オブジェクトを使用して Web 要求を作成し、ページの更新を必要とせずにページの状態を更新するために使用する情報を取得します。
基本的な Ajax を使用してhttp://www.w3schools.com/Ajax/Default.aspなどの非同期要求を作成する方法を示す基本的なチュートリアルから始めてから、実稼働レベルのアプリケーションでの使用に移ります。
アプリケーションで使用する場合は、さまざまなブラウザー間の違いを抽象化し、要求が返された後にページを簡単に操作できるようにする一般的な JavaScript フレームワークの 1 つを調査する方がはるかに優れています。個人的にはhttp://www.jquery.com/をお勧めします
JavaScript ですが、動作します。