目次
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
