AJAX の概要

ajax について学ぶ前に、まず Web 2.0 とは何かという質問について話しましょう。 Web 2.0 という言葉を聞いたとき、まず「Web 1.0 とは何ですか?」と尋ねる必要があります。Web 1.0 について言及する人はほとんどいませんが、実際には、まったく異なるリクエストとレスポンスのモデルを持つ従来の Web を指します。たとえば、hdu.edu.cn Web サイトにアクセスし、ボタンをクリックします。リクエストがサーバーに送信され、レスポンスがブラウザに返されます。リクエストは単なる新しいコンテンツと項目のリストではなく、別の完全な HTML ページです。したがって、Web ブラウザーが新しい HTML でページを再描画するときに、ちらつきやジッターが発生する場合があります。実際、新しいページが表示されるたびに、リクエストとレスポンスがはっきりと表示されます。

Web 2.0 では、この目に見えるやり取りが (大幅に) 排除されます。たとえば、Google マップでは、ほとんど再描画せずに地図をドラッグして拡大または縮小できます。もちろん、まだリクエストやレスポンスはありますが、それらは舞台裏に隠されています。ユーザーとしては、エクスペリエンスがより快適になり、デスクトップアプリケーションのように感じられます。この新しい感覚とパラダイムは、誰かが Web 2.0 について言及したときに得られるものです。

考慮する必要があるのは、これらの新しいインタラクションをどのように可能にするかです。もちろん、引き続きリクエストを作成し、レスポンスを受信する必要がありますが、Web インタラクションが遅くてぎこちない印象を与えるのは、リクエストとレスポンスのやり取りごとに HTML が再描画されることです。したがって、送信されるリクエストと受信されるレスポンスに、HTML ページ全体ではなく必要なデータのみが含まれるようにする方法が必要であることは明らかです。新しい HTML ページ全体を取得する必要があるのは、ユーザーに新しいページを表示する場合だけです。

しかし、ほとんどのインタラクションは、既存のページに詳細を追加したり、本文を変更したり、元のデータを上書きしたりすることです。このような場合、Ajax および Web 2.0 メソッドを使用すると、HTML ページ全体を更新せずにデータを送受信できます。オンラインで多くの時間を費やす人にとって、この機能によりアプリケーションの速度と応答性が向上し、アプリケーションが時々サイトに戻ってくるようになります。

Ajax とは?

1. 正式名称: Asynchronous、JavaScript、および XML (非同期 JavaScript および XML) 定義: Ajax は実際にはテクノロジーではありません。それぞれ独自の機能を持ついくつかのテクノロジーが統合されて、強力な新しいテクノロジーになります

3.和 XHTML と CSS

documentObjectModels を使用して動的に表示および対話します
データの対話と操作に XML と XSLT を使用します
非同期データを JavaScript で受信するには XMLHTTPREQUEST を使用します :
は、クライアント側のスクリプトを使用して交換する Web アプリケーション開発方法です。 Web サーバーとのデータ。このようにして、対話プロセスを中断したり再編集したりすることなく、Web ページを動的に更新できます。 Ajax を使用すると、ネイティブデスクトップアプリケーションに近い、直接的で可用性が高く、よりリッチで動的な Web ユーザーインターフェイスを作成できます。

Ajax には主に次の利点があります:

1. プラグインのサポートは必要ありません (一般的なブラウザーと JavaScript はデフォルトで有効になります)。 (ページを更新せずに更新可能なデータを取得できます);

3. Web プログラムのパフォーマンスを向上させます (全体を送信する必要がなく、オンデマンドでデータを送信できます)。サーバーと帯域幅 (サーバーの一部の操作はクライアントに転送されます)。 XMLHttpRequest オブジェクトの場合 (IE5 より前など) );

2. 前方および後方の関数は破棄されます (Ajax は常に現在のページにあり、前方または後方のページに移動しないため)。十分ではありません (検索エンジンクローラーが JS コンテンツによって引き起こされるデータの変化をまだ理解できないため)

4. 開発およびデバッグツールの欠如 (他の言語のツールセットと比較して、JS または Ajax のデバッグ開発は悲惨です)。

Ajax の使用で最も重要な部分は、非同期リクエストを実装し、レスポンスを受信し、コールバックを実行することです。では、非同期と同期の違いは何でしょうか?

私たちの通常の Web プログラム開発は基本的に同期です。これは、電話での通話に応答する前に次のプログラムを実行する必要があることを意味します。非同期的に、複数のタスクを同時に実行できます。テキストメッセージと同様に、複数の行があり、1 つのテキストメッセージを表示しても、別のテキストメッセージの受信が停止されることはありません。 Ajax は同期モードでも実行できますが、同期モードはブロックモードであり、複数の行が 1 つずつ実行されるため、Web ページが一時停止したアニメーションの状態で表示されます。 Ajax は非同期モードを使用します。

Google サジェスト

2005 年、Google は Google サジェストによって AJAX を普及させました。

Google サジェストは、AJAX を使用して非常に動的な Web インターフェイスを作成します。Google の検索ボックスにキーワードを入力すると、JavaScript がこれらの文字をサーバーに送信し、サーバーは検索候補のリストを返します。

表示例:

まずHTMLファイルを作成します:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        function checkname(){
            if($('#name').val() == ""){
                $('#msg').html("please enter the name!");
                $('#name').focus;
                return false;
            }
            if($('#address').val() == ""){
                $('#msg').html("please enter the address!");
                $('#address').focus;
                return false;
            }
            ajax_post();
        }
        function ajax_post(){
            $.post("txt.php",{name:$('#name').val(),address:$('#address').val()}, //url链接txt.php
                    function(data){
                        //$('#msg').html("please enter the name!");
                        //alert(data);
                        $('#msg').html(data);
                    },
                    "text");
        }
    </script>
</head>
<body>
    <form id="ajaxform" name="ajaxform" method="post" action="txt.php">
        <p>
            姓名：<input type="text" name="name" id="name"/>
        </p>
        <p>
            地址：<input type="text" name="address" id="address"/>
        </p>
        <p id="msg"></p>
        <p>
            <input name="Submit" type="button" value="submit" onclick="return checkname()"/>
        </p>
    </form>
</body>
</html>

txt.phpファイルを作成します:

<?php
    $name = $_POST["name"];
    $address = $_POST["address"];
    echo $name."<br>";
    echo $address."<br>";
?>

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> function checkname(){ if($('#name').val() == ""){ $('#msg').html("please enter the name!"); $('#name').focus; return false; } if($('#address').val() == ""){ $('#msg').html("please enter the address!"); $('#address').focus; return false; } ajax_post(); } function ajax_post(){ $.post("txt.php",{name:$('#name').val(),address:$('#address').val()}, //url链接txt.php function(data){ //$('#msg').html("please enter the name!"); //alert(data); $('#msg').html(data); }, "text"); } </script> </head> <body> <form id="ajaxform" name="ajaxform" method="post" action="txt.php"> <p> 姓名：<input type="text" name="name" id="name"/> </p> <p> 地址：<input type="text" name="address" id="address"/> </p> <p id="msg"></p> <p> <input name="Submit" type="button" value="submit" onclick="return checkname()"/> </p> </form> </body> </html>

提出するリセットコード

自動運転