Posted inPHP

例を含むPHPAjaxチュートリアル

January 1, 2020No Comments

Ajaxとは何ですか？

AJAX 完全な形式は非同期です JavaScript ＆XML。 これは、サーバーとクライアント間の相互作用を減らすテクノロジーです。 これは、ページ全体ではなくWebページの一部のみを更新することによって行われます。非同期の相互作用はJavaScriptによって開始されます。AJAXの目的は、ページを更新せずにサーバーと少量のデータを交換することです。

JavaScript クライアント側のスクリプト言語です。 これは、JavaScriptをサポートするWebブラウザーによってクライアント側で実行されます。JavaScriptコードは、JavaScriptが有効になっているブラウザーでのみ機能します。

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

なぜAJAXを使用するのですか？

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

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

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

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

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

ステップ1）インデックスページを作成する

Index.php 

<html>

    <head>

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

        <script type="text/javascript" src="https://www.guru99.com/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）”」は、テキストボックスにキーが入力されるたびにJavaScript関数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と他の高バージョンのIEおよびブラウザーの両方で動作することを保証します。

  • 「xmlhttp.onreadystatechange = function…」は、AJAXインタラクションが完了し、ステータスが200であるかどうかを確認してから、返された結果でtxtNameスパンを更新します。

ステップ4）PHPAjaxアプリケーションをテストする

ファイルindex.phpを保存したと仮定します。phututs/ ajaxで、URL http：//localhost/phptuts/ajax/index.phpを参照します。

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

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

概要

  • AJAXは、Asynchronous JavaScript andXMLの頭字語です。
  • AJAXは、Webページの一部のみを更新することにより、クライアントとサーバー間の対話を減らす豊富な対話アプリケーションを作成するために使用されるテクノロジーです。
  • Internet Explorerバージョン5および6は、ActiveXObjectを使用してAJAX操作を実装します。
  • Internet Explorerバージョン7以降、およびブラウザChrome、Firefox、Opera、SafariはXMLHttpRequestを使用します。

Hope this helps!

Source link

Tags: