AJAX can be used to communicate interactively with a database.
AJAX database instance
The following example will demonstrate how a web page reads information from the database through AJAX:
The Websites table SQL file used in this tutorial: websites.sql.
Example explanation - MySQL database
In the above example, the database table we used looks like this:
mysql> select * from websites;+----+--------------+---------------------- -----+-------+---------+| id | name | url | alexa | country |+----+--------- -----+---------------------------+-------+-------- -+| 1 | Google | https://www.google.cm/ | 1 | USA || 2 | Taobao | https://www.taobao.com/ | 13 | CN || 3 | Coder Tutorial| http://www.codercto.com/ | 4689 | CN || 4 | Weibo | http://weibo.com/ | 20 | CN || 5 | Facebook | https://www.facebook.com/ | 3 | USA |+----+--------------+------------------------- --+-------+---------+5 rows in set (0.01 sec)
Example explanation - HTML page
When the user selects a user in the drop-down list above, a function named "showSite()" is executed. This function is triggered by the "onchange" event:
test.html file code:
< ! DOCTYPE html > <html> <head> < meta charset = " utf-8 " > <title> Coder Tutorial ( codercto.com ) </title> <script> function showSite ( str ) { if ( str == " " ) { document . getElementById ( " txtHint " ) . innerHTML = " " ; return ; } if ( window . XMLHttpRequest ) { // IE7+, Firefox, Chrome, Opera, Safari browser execution code xmlhttp = new XMLHttpRequest ( ) ; } else { // IE6, IE5 browser execution code xmlhttp = new ActiveXObject ( " Microsoft.XMLHTTP " ) ; } xmlhttp.onreadystatechange = function ( ) { if ( xmlhttp . readyState == 4 && xmlhttp . status == 200 ) { document . getElementById ( " txtHint " ) . innerHTML = xmlhttp . responseText ; } } xmlhttp . open ( " GET " , " getsite_mysql.php?q= " + str , true ) ; xmlhttp . send ( ) ; } </ script > </ head > <body> <form> < select name = " users " onchange = " showSite(this.value) " > < option value = " " > Select a website: </ option > < option value = " 1 " > Google </ option > < option value = " 2 " > Taobao </ option > < option value = " 3 " > Coder Tutorial </ option > < option value = " 4 " > Weibo </ option > < option value = " 5 " > Facebook </ option > </select> </form> < br > < div id = " txtHint " > < b > Website information is displayed here... </ b > </ div > </body> </html> The showSite() function performs the following steps:
Check if a website is selected
Create XMLHttpRequest object
Create a function that executes when the server response is ready
Send a request to a file on the server
Note the parameter (q) added to the end of the URL (containing the contents of the drop-down list)
PHP files
The server page called above through JavaScript is a PHP file named "getsite_mysql.php".
The source code in "getsite_mysql.php" runs a query against the MySQL database and returns the results in an HTML table:
getsite_mysql.php file code:
<?php $q = isset ( $_GET [ " q " ] ) ? intval ( $_GET [ " q " ] ) : ' ' ; if ( empty ( $q ) ) { echo ' Please select a website ' ; exit ; } $con = mysqli_connect ( ' localhost ' , ' root ' , ' 123456 ' ) ; if ( ! $con ) { die ( ' Could not connect: ' . mysqli_error ( $con ) ) ; } // Select database mysqli_select_db ( $con , " test " ) ; // Set encoding to prevent Chinese garbled characters mysqli_set_charset ( $con , " utf8 " ) ; $sql = " SELECT * FROM Websites WHERE id = ' " . $q . " ' " ; $result = mysqli_query ( $con , $sql ) ; echo " <table border='1'><tr><th>ID</th><th>Website Name</th><th>Website URL</th><th>Alexa Ranking</th><th> Country</th></tr> " ; while ( $row = mysqli_fetch_array ( $result ) ) { echo " <tr> " ; echo " <td> " . $row [ ' id ' ] . " </td> " ; echo " <td> " . $row [ ' name ' ] . " </td> " ; echo " <td> " . $row [ ' url ' ] . " </td> " ; echo " <td> " . $row [ ' alexa ' ] . " </td> " ; echo " <td> " . $row [ ' country ' ] . " </td> " ; echo " </tr> " ; } echo " </table> " ; mysqli_close ( $con ) ; ?> Explanation: When a query is sent from JavaScript to a PHP file, what happens:
PHP opens a connection to a MySQL database
Find the selected user
Create an HTML table, populate it with data, and send back the "txtHint" placeholder
