『AJAX 中國語リファレンスマニュアル』では、AJAX は新しいプログラミング言語ではなく、既存の標準を使用する新しい方法です。 AJAX は、サーバーとデータを交換し、ページ全體をリロードせずに Web ページの一部を更新する技術(shù)です。
AJAX は「Asynchronous JavaScript and XML」(非同期 JavaScript および XML テクノロジ) の略で、複數(shù)のテクノロジを組み合わせたブラウザ側(cè)の Web 開発テクノロジのセットを指します。 Ajax の概念は、Jesse James Jarrett によって提案されました。
従來の Web アプリケーションでは、ユーザーがフォームに入力することができ、フォームが送信されるとリクエストが Web サーバーに送信されます。サーバーは受信フォームを受信して??処理し、新しい Web ページを送り返しますが、2 つのページの HTML コードのほとんどが同じであることが多いため、これにより多くの帯域幅が無駄になります。各アプリケーションの通信ではサーバーにリクエストを送信する必要があるため、アプリケーションの応答時間はサーバーの応答時間に依存します。その結(jié)果、UI の応答がネイティブ アプリよりも大幅に遅くなります。
これとは異なり、AJAX アプリケーションは必要なデータをサーバーに送信および取得することのみが可能で、クライアント上で JavaScript を使用してサーバーからの応答を処理します。サーバーとブラウザーの間で交換されるデータが少なくなるため、サーバーの応答が速くなります。同時に、リクエストを行ったクライアントマシン上で多くの処理を完了できるため、Web サーバーの負荷も軽減されます。
DHTML や LAMP と同様、AJAX は単一のテクノロジを參照するのではなく、一連の関連テクノロジを有機的に利用します。名前には XML が含まれていますが、実際にはデータ形式を JSON に置き換えることができ、データ量がさらに削減され、AJAJ と呼ばれるものが形成されます。クライアントとサーバーは非同期である必要はありません。 AJAX の初期使用ヒント: AJAX の學(xué)習(xí)を始める前に、HTML、CSS、javascript## について理解しておく必要があります。 # 知識には基本的な理解があります。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tryrun 1</title> </head> <body> <div id="view"> <p>點擊下面的按鈕,將 Ajax 請求回來的數(shù)據(jù)更新在該文本內(nèi)</p> </div> <button type="button" id="btn">發(fā)起 Ajax 請求</button> <script> document.getElementById("btn").onclick = ajaxRequest; function ajaxRequest () { var xhr = new XMLHttpRequest(); xhr.open("GET", "http://ipnx.cn/statics/demosource/ajax_info.txt", true); xhr.send(); xhr.onreadystatechange = function(){ if (xhr.readyState === 4 && xhr.status === 200) { document.getElementById("view").innerHTML = xhr.responseText; } } } </script> </body>
例の実行>>[例の実行] をクリックします。オンラインの例を表示するボタン
AJAX の長所と短所ヒント: AJAX チュートリアルは、AJAX を段階的に習(xí)得して適用する方法を?qū)Wぶのに役立ちます。ご質(zhì)問がある場合は、PHP 中國語 Web サイト AJAX コミュニティ# にアクセスしてください。 ## 質(zhì)問してください 質(zhì)問がある場合は、熱心なネチズンがあなたの代わりに答えます。
- Ajax を使用する最大の利點は、ページ全體を更新せずにデータを維持できることです。これにより、Web アプリケーションはユーザーのアクションにより迅速に応答できるようになり、変更されていない情報がネットワーク上に送信されることを回避できます。
- Ajax にはブラウザ プラグインは必要ありませんが、ユーザーがブラウザ上で JavaScript を?qū)g行できるようにする必要があります。 DHTML アプリケーションと同様に、Ajax アプリケーションもさまざまなブラウザーやプラットフォームで厳密にテストする必要があります。 Ajax が成熟するにつれて、Ajax の使用を簡素化するいくつかのプログラム ライブラリも登場しました。同様に、JavaScript をサポートしていないユーザーに代替機能を提供する別の支援プログラミング テクノロジが登場しました。
- Ajax の使用に対する主な批判は、ブラウザのバック機能やブックマーク機能が損なわれる可能性があることです。動的に更新されるページの場合、ブラウザーは履歴に靜的なページしか記憶できないため、ユーザーは前のページの狀態(tài)に戻ることはできません。完全に読み取られたページと動的に変更されたページの違いは非常に微妙であり、ユーザーは多くの場合、「戻る」ボタンをクリックして前の操作をキャンセルすることを期待しますが、Ajax アプリケーションではそうではありません。そうするために。ただし、開発者はこの問題を解決するためにさまざまな方法を考え出しており、HTML5 より前のほとんどの方法は、ユーザーが履歴にアクセスするために戻るボタンをクリックしたときにページ上の変更を再現(xiàn)するために、非表示の IFRAME を作成または使用することでした。 (たとえば、ユーザーが Google マップでクリックして戻ると、非表示の IFRAME が検索され、検索結(jié)果が Ajax 要素に反映されて、アプリケーションの狀態(tài)がその時點の狀態(tài)に復(fù)元されます)。
- お気に入りやブックマークにステータスを追加できないという問題については、HTML5 が登場する 1 つ前には、URL フラグメント識別子 (アンカーと呼ばれることが多く、URL の # の後の部分) が使用されていました。 ) を追跡し、ユーザーが指定されたアプリケーションの狀態(tài)に戻れるようにします。 (多くのブラウザでは JavaScript でアンカーを動的に更新できるため、Ajax アプリケーションは表示されたコンテンツを更新しながらアンカーを更新できます。) HTML5 では後に、閲覧履歴を直接操作したり、Web ページのステータスを文字列として保存したり、Web ページを Web のお気に入りに追加したりできるようになります。 . クリップまたはブックマークすると、その狀態(tài)は目に見えずに保持されます。上記の2つの方法で、退卻できない問題も同時に解決できます。
- Ajax を開発する場合、ネットワーク遅延、つまりユーザーのリクエストとサーバーの応答の間の間隔を慎重に考慮する必要があります。ユーザーに明確な応答を與えなかったり、データを適切に先読みしなかったり、XMLHttpRequest を不適切に処理したりすると、ユーザーは退屈してしまいます。一般的な解決策は、視覚的なコンポーネントを使用して、システムがバックグラウンド操作を?qū)g行し、データとコンテンツを読み取っていることをユーザーに伝えることです。
アプリケーション
XHTML CSS を使用して情報を表現(xiàn)します。
JavaScript を使用して DOM (Document Object Model) を操作します。 ) 動的エフェクトを?qū)g行する;
XML と XSLT を使用してデータを操作する;
XMLHttpRequest または新しい Fetch API を使用して非同期データ交換を行うWeb サーバー ;
注: AJAX は、Flash、Silverlight、Java アプレットなどの RIA テクノロジとは異なります。
この AJAX チュートリアル マニュアルの內(nèi)容
この AJAX チュートリアル マニュアルでは、AJAX の概要、AJAX の概要、AJAX の例、XHR 作成オブジェクトなど、AJAX の基本的な使用方法をすべて取り上げています。 、XHR リクエスト、XHR レスポンスの知識、XHR ReadyState、AJAX ASP/PHP、AJAX データベース、AJAX XML など。
ヒント: このチュートリアルの各章には、多くの AJAX サンプルが含まれています。[サンプルの実行] ボタンを直接クリックすると、結(jié)果をオンラインで表示できます。これらの例は、AJAX をよりよく理解し、使用するのに役立ちます。
最新章
- AJAX 實例 2016-10-19
- AJAX XML 2016-10-19
- AJAX 數(shù)據(jù)庫 2016-10-19
- AJAX ASP/PHP 2016-10-19
- XHR readystate 2016-10-19
- XHR 響應(yīng) 2016-10-19
- XHR 請求 2016-10-19
- XHR 創(chuàng)建對象 2016-10-19
関連コース
- Web フロントエンド開発の簡単な紹介 2021-12-10
- あなたを最もよく理解するフロントエンドコース: HTML5/CSS3/ES6/NPM/Vue/...[オリジナル] 2022-09-30
- Gulp 入門ビデオチュートリアル 2022-04-18
- Brothers in Arms Gao Luofeng CSS3 ビデオ チュートリアル 2022-04-20
- AngularJS 開発 Web アプリケーションの基本的なサンプル ビデオ チュートリアル 2022-04-18
- アヤックスのフルコンタクト 2022-04-13
- MUI フレームワークの基本的なビデオ チュートリアル 2022-04-13
- オンライントレーニングクラス體験クラス 2019-01-10
-
知識の拡大
-
チュートリアルのナビゲーション