AJAX を使用すると、データベースと対話的に通信できます。
AJAX データベース インスタンス
次の例は、Web ページが AJAX を通じてデータベースから情報を読み取る方法を示しています。
このチュートリアルで使用される Web サイト テーブル SQL ファイル: Websites.sql。
例の説明 - MySQLデータベース
上記の例で使用したデータベース テーブルは次のようになります。
mysql> select * from website;+-----+--------------+---------------------- --+------+-------+| 名前 |+------+------- ----------+--------------------------+----------+---------- || 1 | Google https://www.google.cm/ | | タオバオ | | || http://www.facebook.com/ || 4689 || | アメリカ |+----+--------------+----------------------- - -+----------+----------+5 行セット (0.01 秒)
説明例 - HTMLページ
ユーザーが上のドロップダウン リストでユーザーを選択すると、「showSite()」という名前の関数が実行されます。この関数は、「onchange」イベントによってトリガーされます。
test.html ファイルのコード:
< ! html > <html> <頭> <メタ文字セット= " utf-8 " > <title>コーダーチュートリアル( codercto.com ) </title> <スクリプト>関数showSite ( str ) { もし( str == " " ) { ドキュメント.getElementById ( " txtHint " ) ; もし(ウィンドウ.XMLHttpRequest ) { // IE7+、Firefox、Chrome、Opera、Safari ブラウザの実行コード xmlhttp =新しいXMLHttpRequest ( ) ; それ以外 { // IE6、IE5 ブラウザの実行コード xmlhttp =新しいActiveXObject ( " Microsoft.XMLHTTP " ) ; xmlhttp.onreadystatechange = function ( ) { もし( xmlhttp .readyState == 4 && xmlhttp .status == 200 ) { ドキュメント.getElementById ( " txtHint " ) 。 } xmlhttp .open ( " GET " , " getsite_mysql.php ? q = " + str , true ) } ;</頭> <本文> <フォーム> <選択名前= "ユーザー" onchange = " showSite(this.value) " > <オプションvalue = " " > Web サイトを選択します: </オプション> <オプション値= " 1 " > Google </オプション> <オプション値= " 2 " >タオバオ</オプション> <オプションvalue = " 3 " >コーダーのチュートリアル</オプション> <オプション値= " 4 " > Weibo </オプション> <オプション値= " 5 " > Facebook </オプション> </select> </form> < br > < div id = " txtHint " > < b >ウェブサイトの情報がここに表示されます... </ b > </ div > </body> </html> showSite() 関数は次の手順を実行します。
Web サイトが選択されているかどうかを確認する
XMLHttpRequest オブジェクトを作成する
サーバー応答の準備ができたときに実行する関数を作成する
サーバー上のファイルにリクエストを送信します
URL の末尾にパラメータ (q) が追加されていることに注意してください (ドロップダウン リストの内容が含まれます)。
PHPファイル
JavaScript を通じて上記で呼び出されるサーバー ページは、「getsite_mysql.php」という名前の PHP ファイルです。
「getsite_mysql.php」のソース コードは、MySQL データベースに対してクエリを実行し、結果を HTML テーブルに返します。
getsite_mysql.php ファイルのコード:
<?php $q = isset ( $_GET [ " q " ] ) intval ( $ _GET [ " q " ] ) : ' ' if ( empty ( $ q ) ) { エコー' Web サイトを選択してください' ; $ con = mysqli_connect ( ' localhost ' , ' root ' , ' 123456 ' ) ; ( ! $con ) { die ( '接続
できませんでし
た: ' .mysqli_error ( $con ) ) ; //データベースを選択mysqli_select_db ( $con , " test " ) //中国語の文字化けを防ぐエンコーディングを設定します。 mysqli_set_charset ( $con , " utf8 " ) ; $ sql = " SELECT
* FROM Websites WHERE id = ' " . $ result = mysqli_query ( $ con , $ sql ) ; " <table border='1'><tr><th>ID</th><th>ウェブサイト名</th><th>ウェブサイト URL</th><th>Alexa ランキング</th><th> Country</th></tr> " ; while ( $row = mysqli_fetch_array ( $result ) ) { エコー" <tr> " ; " <td> " . $ row [ ' id ' ] 。 " <td> " . $ row [ '名前' ] 。 " <td> " . $ row [ ' url ' ] ; " <td> " . $ row [ ' </td> " ;" <td> " . $ row [ '国' ] ; " </tr> " ;エコー" </table> " ; mysqli_close ( $ con ) ;説明: クエリが JavaScript から PHP ファイルに送信されると、次のことが起こります。
PHP が MySQL データベースへの接続を開きます
選択したユーザーを検索する
HTML テーブルを作成し、データを入力して、「txtHint」プレースホルダーを送り返します。
