コミュニティ

学ぶ

ツールライブラリ

AIツール

レジャー

日本語

AJAX 中国語リファレンスマニュアル

リーディング（32756）更新時間(2022-04-12)

『AJAX 中国語リファレンスマニュアル』では、AJAX は新しいプログラミング言語ではなく、既存の標準を使用する新しい方法です。 AJAX は、サーバーとデータを交換し、ページ全体をリロードせずに Web ページの一部を更新する技術です。

AJAX は「Asynchronous JavaScript and XML」(非同期 JavaScript および XML テクノロジ) の略で、複数のテクノロジを組み合わせたブラウザ側の Web 開発テクノロジのセットを指します。 Ajax の概念は、Jesse James Jarrett によって提案されました。

従来の Web アプリケーションでは、ユーザーがフォームに入力することができ、フォームが送信されるとリクエストが Web サーバーに送信されます。サーバーは受信フォームを受信して処理し、新しい Web ページを送り返しますが、2 つのページの HTML コードのほとんどが同じであることが多いため、これにより多くの帯域幅が無駄になります。各アプリケーションの通信ではサーバーにリクエストを送信する必要があるため、アプリケーションの応答時間はサーバーの応答時間に依存します。その結果、UI の応答がネイティブアプリよりも大幅に遅くなります。

これとは異なり、AJAX アプリケーションは必要なデータをサーバーに送信および取得することのみが可能で、クライアント上で JavaScript を使用してサーバーからの応答を処理します。サーバーとブラウザーの間で交換されるデータが少なくなるため、サーバーの応答が速くなります。同時に、リクエストを行ったクライアントマシン上で多くの処理を完了できるため、Web サーバーの負荷も軽減されます。

ヒント: AJAX の学習を始める前に、HTML、CSS、javascript## について理解しておく必要があります。 # 知識には基本的な理解があります。

DHTML や LAMP と同様、AJAX は単一のテクノロジを参照するのではなく、一連の関連テクノロジを有機的に利用します。名前には XML が含まれていますが、実際にはデータ形式を JSON に置き換えることができ、データ量がさらに削減され、AJAJ と呼ばれるものが形成されます。クライアントとサーバーは非同期である必要はありません。

AJAX の初期使用

例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tryrun 1</title>
</head>
<body>
    <div id="view">
        <p>点击下面的按钮，将 Ajax 请求回来的数据更新在该文本内</p>
    </div>
    <button type="button" id="btn">发起 Ajax 请求</button>

    <script>
        document.getElementById("btn").onclick = ajaxRequest;

        function ajaxRequest () {
            var xhr = new XMLHttpRequest();

            xhr.open("GET", "https://www.php.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 を段階的に習得して適用する方法を学ぶのに役立ちます。ご質問がある場合は、PHP 中国語 Web サイト AJAX コミュニティ# にアクセスしてください。 ## 質問してください質問がある場合は、熱心なネチズンがあなたの代わりに答えます。

AJAX の長所と短所

Ajax を使用する最大の利点は、ページ全体を更新せずにデータを維持できることです。これにより、Web アプリケーションはユーザーのアクションにより迅速に応答できるようになり、変更されていない情報がネットワーク上に送信されることを回避できます。
Ajax にはブラウザプラグインは必要ありませんが、ユーザーがブラウザ上で JavaScript を実行できるようにする必要があります。 DHTML アプリケーションと同様に、Ajax アプリケーションもさまざまなブラウザーやプラットフォームで厳密にテストする必要があります。 Ajax が成熟するにつれて、Ajax の使用を簡素化するいくつかのプログラムライブラリも登場しました。同様に、JavaScript をサポートしていないユーザーに代替機能を提供する別の支援プログラミングテクノロジが登場しました。
Ajax の使用に対する主な批判は、ブラウザのバック機能やブックマーク機能が損なわれる可能性があることです。動的に更新されるページの場合、ブラウザーは履歴に静的なページしか記憶できないため、ユーザーは前のページの状態に戻ることはできません。完全に読み取られたページと動的に変更されたページの違いは非常に微妙であり、ユーザーは多くの場合、「戻る」ボタンをクリックして前の操作をキャンセルすることを期待しますが、Ajax アプリケーションではそうではありません。そうするために。ただし、開発者はこの問題を解決するためにさまざまな方法を考え出しており、HTML5 より前のほとんどの方法は、ユーザーが履歴にアクセスするために戻るボタンをクリックしたときにページ上の変更を再現するために、非表示の IFRAME を作成または使用することでした。 (たとえば、ユーザーが Google マップでクリックして戻ると、非表示の IFRAME が検索され、検索結果が Ajax 要素に反映されて、アプリケーションの状態がその時点の状態に復元されます)。
お気に入りやブックマークにステータスを追加できないという問題については、HTML5 が登場する 1 つ前には、URL フラグメント識別子 (アンカーと呼ばれることが多く、URL の # の後の部分) が使用されていました。 ) を追跡し、ユーザーが指定されたアプリケーションの状態に戻れるようにします。 (多くのブラウザでは JavaScript でアンカーを動的に更新できるため、Ajax アプリケーションは表示されたコンテンツを更新しながらアンカーを更新できます。) HTML5 では後に、閲覧履歴を直接操作したり、Web ページのステータスを文字列として保存したり、Web ページを Web のお気に入りに追加したりできるようになります。 . クリップまたはブックマークすると、その状態は目に見えずに保持されます。上記の2つの方法で、退却できない問題も同時に解決できます。
Ajax を開発する場合、ネットワーク遅延、つまりユーザーのリクエストとサーバーの応答の間の間隔を慎重に考慮する必要があります。ユーザーに明確な応答を与えなかったり、データを適切に先読みしなかったり、XMLHttpRequest を不適切に処理したりすると、ユーザーは退屈してしまいます。一般的な解決策は、視覚的なコンポーネントを使用して、システムがバックグラウンド操作を実行し、データとコンテンツを読み取っていることをユーザーに伝えることです。

アプリケーション

XHTML CSS を使用して情報を表現します。
JavaScript を使用して DOM (Document Object Model) を操作します。 ) 動的エフェクトを実行する;
XML と XSLT を使用してデータを操作する;
XMLHttpRequest または新しい Fetch API を使用して非同期データ交換を行うWeb サーバー ;

注: AJAX は、Flash、Silverlight、Java アプレットなどの RIA テクノロジとは異なります。

この AJAX チュートリアルマニュアルの内容

この AJAX チュートリアルマニュアルでは、AJAX の概要、AJAX の概要、AJAX の例、XHR 作成オブジェクトなど、AJAX の基本的な使用方法をすべて取り上げています。、XHR リクエスト、XHR レスポンスの知識、XHR ReadyState、AJAX ASP/PHP、AJAX データベース、AJAX XML など。

ヒント: このチュートリアルの各章には、多くの AJAX サンプルが含まれています。[サンプルの実行] ボタンを直接クリックすると、結果をオンラインで表示できます。これらの例は、AJAX をよりよく理解し、使用するのに役立ちます。

最新章

AJAX 实例 2016-10-19

AJAX XML 2016-10-19

AJAX 数据库 2016-10-19

AJAX ASP/PHP 2016-10-19

XHR readystate 2016-10-19

XHR 响应 2016-10-19

XHR 请求 2016-10-19

XHR 创建对象 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

提出する