PHP Ajax チュートリアルと例

アヤックスとは？

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

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

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

AJAX を使用する理由

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

PHP Ajaxアプリケーションの作成方法

ユーザーが人気のある PHP 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 や Firefox XMLHttpRequestを使用します。このコードにより、アプリケーションがIE 5および6と最新のブラウザの両方で動作することが保証されます。
• 「xmlhttp.onreadystatechange=function…」は、AJAX のやり取りが完了し、ステータスが 200 であるかどうかを確認し、返された結果で txtName span を更新します。

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

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

テキストボックスに「C」と入力してください。以下の結果が表示されます。

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

Fetch API を使用した最新の AJAX

上記の XMLHttpRequest オブジェクトは今でも機能しますが、古い Internet Explorer 用の ActiveXObject ブランチはもはや必要ありません。最新のブラウザは、Promise ベースの Fetch API を提供しており、これを使用するとはるかに少ないコードで同じリクエストを実行できます。

function showName(str) {
    if (str.length === 0) {
        document.getElementById("txtName").innerHTML = "";
        return;
    }
    fetch("frameworks.php?name=" + encodeURIComponent(str))
        .then(response => response.text())
        .then(text => {
            document.getElementById("txtName").innerHTML = text;
        });
}

このバージョンも同様の処理を行います。入力されたテキストを frameworks.php に送信し、その応答を txtName スパンに格納します。また、encodeURIComponent を使用して入力を安全にエスケープし、catch ブロックを使用してエラー処理を追加することで、プロミスチェーンを簡単に拡張できます。

よくあるご質問