AJAX と PHP

AJAX は、よりインタラクティブなアプリケーションを作成するために使用されます。

AJAX PHP の例

次の例は、ユーザーが入力ボックスに文字を入力したときに Web ページが Web サーバーとどのように通信するかを示します:

例

入力ボックスに名前を入力してみます、例:Anna:

名前:

戻り値:

例の説明 - HTMLページ

ユーザーが上の入力ボックスに文字を入力すると、「 showHint"()"関数が実行されます。この関数は、「onkeyup」イベントによってトリガーされます:

    <html>
        <head>
        <script>
        function showHint(str)
        {
            if (str.length==0)
            {
                document.getElementById("txtHint").innerHTML="";
                return;
            }
            if (window.XMLHttpRequest)
            {
                // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行的代码
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                //IE6, IE5 浏览器执行的代码
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","gethint.php?q="+str,true);
            xmlhttp.send();
        }
        </script>
        </head>
        <body>
        <p><b>在输入框中输入一个姓名:</b></p>
        <form>
        姓名: <input type="text" onkeyup="showHint(this.value)">
        </form>
        <p>返回值: <span id="txtHint"></span></p>
        </body>
     </html>

ソースコードの説明:

入力ボックスが空 (str.length==0) の場合、この関数は txtHint プレースホルダーの内容をクリアして、関数。

入力ボックスが空でない場合、showHint() は次の手順を実行します:

1) XMLHttpRequest オブジェクトを作成します

2) サーバー応答の準備ができたときに実行する関数を作成します

3) リクエストを送信しますサーバー上のファイルに保存します

4) URL (入力ボックスの内容を含む) の末尾に追加されるパラメーター (q) に注意してください

注: 上記の例については、まずこの章を参照してください: JavaScript チュートリアル

PHP ファイル

上記の JavaScript を通じて呼び出されるサーバーページは、「gethint.php」という名前の PHP ファイルです。

「gethint.php」のソースコードは名前配列をチェックし、対応する名前をブラウザに返します:

  <?php
        // 将姓名填充到数组中
        $a[]="Anna";
        $a[]="Brittany";
        $a[]="Cinderella";
        $a[]="Diana";
        $a[]="Eva";
        $a[]="Fiona";
        $a[]="Gunda";
        $a[]="Hege";
        $a[]="Inga";
        $a[]="Johanna";
        $a[]="Kitty";
        $a[]="Linda";
        $a[]="Nina";
        $a[]="Ophelia";
        $a[]="Petunia";
        $a[]="Amanda";
        $a[]="Raquel";
        $a[]="Cindy";
        $a[]="Doris";
        $a[]="Eve";
        $a[]="Evita";
        $a[]="Sunniva";
        $a[]="Tove";
        $a[]="Unni";
        $a[]="Violet";
        $a[]="Liza";
        $a[]="Elizabeth";
        $a[]="Ellen";
        $a[]="Wenche";
        $a[]="Vicky";
        //从请求URL地址中获取 q 参数
        $q=$_GET["q"];
        //查找是否由匹配值， 如果 q>0
        if (strlen($q) > 0)
        {
            $hint="";
            for($i=0; $i<count($a); $i++)
            {
                if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
                {
                    if ($hint=="")
                    {
                        $hint=$a[$i];
                    }
                    else
                    {
                        $hint=$hint." , ".$a[$i];
                    }
                }
            }
        }
        // 如果没有匹配值设置输出为 "no suggestion"
        if ($hint == "")
        {
            $response="no suggestion";
        }
        else
        {
            $response=$hint;
        }
        //输出返回值
        echo $response;
   ?>

説明: JavaScript がテキストを送信した場合 (つまり、strlen($q) > 0)、何が行われますか

1. JavaScript によって送信された文字に一致する名前を検索します

2. 一致する名前が見つからない場合は、応答文字列を「提案なし」に設定します

3. 1 つ以上の一致する名前が見つかった場合は、応答を設定します。すべての名前を含む文字列

4. "txtHint" プレースホルダーに応答を送信します

概要: HTML 形式を返します

HTML はいくつかの通常のテキストで構成されます。サーバーが XMLHttpRequest 経由で HTML を送信する場合、テキストは responseText プロパティに保存されます。

responseText プロパティからデータを読み取る必要はありません。すでに目的の形式になっているため、ページに直接挿入できます。

HTML コードを挿入する最も簡単な方法は、この要素の innerHTML プロパティを更新することです。

利点:

サーバーから送信されたHTMLコードをブラウザ側のJavaScriptで解析する必要がありません。

HTMLは読みやすいです。

HTML コードブロックは、高い効率を実現する innerHTML 属性と組み合わせられています。

短所:

AJAX を通じてドキュメントの複数の部分を更新する必要がある場合、HTML は適していません

innerHTML は DOM 標準ではありません。

PHP Ajax クロスドメイン問題解決策

非同期リクエストをクロスドメインにする必要がある場合は、PHP Ajax クロスドメインの問題の解決策を確認してください。

学び続ける

新しいファイル

<?php //与前面的HTML文件组合使用 // 将姓名填充到数组中 $a[]="Anna"; $a[]="Brittany"; $a[]="Cinderella"; $a[]="Diana"; $a[]="Eva"; $a[]="Fiona"; $a[]="Gunda"; $a[]="Hege"; $a[]="Inga"; $a[]="Johanna"; $a[]="Kitty"; $a[]="Linda"; $a[]="Nina"; $a[]="Ophelia"; $a[]="Petunia"; $a[]="Amanda"; $a[]="Raquel"; $a[]="Cindy"; $a[]="Doris"; $a[]="Eve"; $a[]="Evita"; $a[]="Sunniva"; $a[]="Tove"; $a[]="Unni"; $a[]="Violet"; $a[]="Liza"; $a[]="Elizabeth"; $a[]="Ellen"; $a[]="Wenche"; $a[]="Vicky"; //从请求URL地址中获取 q 参数 $q=$_GET["q"]; //查找是否由匹配值，如果 q>0 if (strlen($q) > 0) { $hint=""; for($i=0; $i<count($a); $i++) { if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) { if ($hint=="") { $hint=$a[$i]; } else { $hint=$hint." , ".$a[$i]; } } } } // 如果没有匹配值设置输出为 "no suggestion" if ($hint == "") { $response="no suggestion"; } else { $response=$hint; } //输出返回值 echo $response; ?>

提出するリセットコード

自動運転