PHP Ajax チュートリアルと例

替え： フィオナ・ブラウン フィオナ・ブラウン
Hours 更新中

アヤックスとは？

AJAX 完全な形式は非同期です Javaスクリプト XMLは、サーバーとクライアント間のやりとりを減らす技術です。これは、Webページ全体ではなく、ページの一部のみを更新することで実現します。非同期のやりとりは、 Javaスクリプト。AJAX の目的は、ページを更新せずにサーバーと少量のデータを交換することです。

Javaスクリプト クライアントサイドのスクリプト言語です。これは、サポートしているウェブブラウザによってクライアント側で実行されます。 Java脚本。Javaスクリプトコードは、 Javaスクリプトが有効になりました。

XML は、Extensible Markup Languageの略語です。人間と機械の両方が読める形式でメッセージをエンコードするために使用されます。HTMLに似ていますが、カスタムタグを作成できます。XMLの詳細については、次の記事を参照してください。 XML

AJAX を使用する理由

  • 開発を可能にするping デスクトップアプリケーションと同様に、リッチでインタラクティブなWebアプリケーション。
  • 検証は、ユーザーがフォームを送信せずにフォームに入力するときに実行できます。 これはオートコンプリートを使用して実現できます。 ユーザーが入力した単語は、処理のためにサーバーに送信されます。 サーバーは、ユーザーが入力した内容と一致するキーワードを応答します。
  • 別のドロップダウンボックスの値に応じてドロップダウンボックスに値を入力するのに使用できます。
  • サーバーからデータを取得し、ページ全体をロードせずにページの特定の部分のみを更新できます。 これは、次のようなものを読み込む Web ページ パーツに非常に役立ちます。
  • つぶやき
  • コメント
  • サイトを訪れたユーザーなど

PHP Ajax アプリケーションを作成する方法

ユーザーが人気のある PHP MVC フレームワークを検索できるシンプルなアプリケーションを作成します。

アプリケーションには、ユーザーがフレームワークの名前を入力するテキスト ボックスがあります。

次に、mvc AJAX を使用して一致するものを検索し、検索フォームのすぐ下にフレームワークの完全な名前を表示します。

ステップ1) インデックスページの作成

index.phpを

<html>

    <head>

        <title>PHP MVC Frameworks - Search Engine</title>

        <script type="text/javascript" src="auto_complete.js"></script>

    </head>

    <body>

        <h2>PHP MVC Frameworks - Search Engine</h2>

        <p><b>Type the first letter of the PHP MVC Framework</b></p>

        <form method="POST" action="index.php">

            <p><input type="text" size="40" id="txtHint"  onkeyup="showName(this.value)"></p>

        </form>

        <p>Matches: <span id="txtName"></span></p>

    </body>

</html>

ここに、

  • “onkeyup=”showName(this.value)””は、 Javaスクリプト関数 showName は、テキストボックスにキーが入力されるたびに表示されます。この機能はオートコンプリートと呼ばれます。

ステップ 2) フレームワーク ページの作成

フレームワーク.php

<?php

$frameworks = array("CodeIgniter","Zend Framework","Cake PHP","Kohana") ;

$name = $_GET["name"];

if (strlen($name) > 0) {

    $match = "";

    for ($i = 0; $i < count($frameworks); $i++) {

        if (strtolower($name) == strtolower(substr($frameworks[$i], 0, strlen($name)))) {

            if ($match == "") {

                $match = $frameworks[$i];

            } else {

                $match = $match . " , " . $frameworks[$i];

            }

        }

    }

}

echo ($match == "") ? 'no match found' : $match;

?>

関連記事

ステップ3) JSスクリプトの作成

auto_complete.js

function showName(str){

    if (str.length == 0){ //exit function if nothing has been typed in the textbox

        document.getElementById("txtName").innerHTML=""; //clear previous results

        return;

    }

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari

        xmlhttp=new XMLHttpRequest();

    } else {// code for IE6, IE5

        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

    }

    xmlhttp.onreadystatechange=function() {

        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){

            document.getElementById("txtName").innerHTML=xmlhttp.responseText;

        }

    }

    xmlhttp.open("GET","frameworks.php?name="+str,true);

    xmlhttp.send();

}

ここに、

  • 「if (str.length == 0)」で文字列の長さを確認します。 0 の場合、スクリプトの残りの部分は実行されません。
  • 「if (window.XMLHttpRequest)…」Internet Explorerバージョン5および6は、AJAX実装にActiveXObjectを使用します。Chrome、Fireなどの他のバージョンおよびブラウザでは、Fox XMLHttpRequestを使用します。 このコードにより、アプリケーションが IE 5 と 6、および他の上位バージョンの IE とブラウザの両方で動作することが保証されます。
  • 「xmlhttp.onreadystatechange=function…」は、AJAX インタラクションが完了し、ステータスが 200 であるかどうかを確認し、返された結果で txtName スパンを更新します。

ステップ 4) PHP Ajax アプリケーションをテストする

index.php ファイルを phututs/ajax に保存したと仮定して、 URL http://localhost/phptuts/ajax/index.php

PHP Ajax アプリケーションのテスト

テキスト ボックスに文字 C を入力すると、次の結果が得られます。

PHP Ajax アプリケーションのテスト

上の例は、AJAX の概念と、AJAX がリッチ インタラクション アプリケーションの作成にどのように役立つかを示しています。

製品概要

  • AJAXはAsynchronousの略語です Javaスクリプト およびXML
  • AJAX は、Web ページの一部のみを更新することでクライアントとサーバー間の対話を削減する、リッチ インタラクション アプリケーションの作成に使用されるテクノロジです。
  • Internet Explorer バージョン 5 および 6 は、ActiveXObject を使用して AJAX 操作を実装します。
  • Internet Explorer バージョン 7 以降およびブラウザ Chrome、 Firefox, Opera、Safari は XMLHttpRequest を使用します。

この投稿を要約すると次のようになります: