AJAX можно использовать для интерактивного взаимодействия с базой данных.
Экземпляр базы данных AJAX
Следующий пример продемонстрирует, как веб-страница считывает информацию из базы данных через AJAX:
SQL-файл таблицы веб-сайтов, используемый в этом руководстве: веб-сайты.sql.
Пример пояснения — база данных MySQL
В приведенном выше примере таблица базы данных, которую мы использовали, выглядит следующим образом:
mysql> выберите * с веб-сайтов;+----+--------------+---------------------- -----+-------+---------+| имя | Alexa | страна |+----+--------- -----+---------------------------+-------+-------- -+| Google | https://www.google.cm/ | | США || 2 | https://www.taobao.com/ | 3 | http://www.codercto.com/ || CN || Weibo | http://weibo.com/ || 5 | Facebook | | США |+----+--------------+------------------------- - --+-------+---------+5 рядов в наборе (0,01 сек)
Пример объяснения – HTML-страница
Когда пользователь выбирает пользователя в раскрывающемся списке выше, выполняется функция с именем «showSite()». Эта функция запускается событием «onchange»:
Код файла test.html:
< ! html > <html> <голова> < мета кодировка = " utf-8 " > <title> Учебное пособие по программированию ( codercto.com ) </title> <скрипт> функция showSite ( ул ) { если ( ул == " " ) { document.getElementById ( " txtHint " ) . innerHTML = " " ; return ; если ( окно . XMLHttpRequest ) { // Код выполнения браузера IE7+, Firefox, Chrome, Opera, Safari xmlhttp = новый XMLHttpRequest ( ) } ; еще { // код выполнения браузера IE6, IE5 xmlhttp = новый ActiveXObject ( " Microsoft.XMLHTTP " ) ; xmlhttp.onreadystatechange = функция ( ) { если ( xmlhttp .readyState == 4 && xmlhttp .status == 200 ) { document.getElementById ( " txtHint " ) . } xmlhttp open ( " GET " , " getsite_mysql.php ? q = " + str , true ) ; xmlhttp send ( ) ; </ голова > <тело> <форма> < выбрать имя = " пользователи " onchange = " showSite(this.value) " > < вариант value = " " > Выберите веб-сайт: </ option > < вариант value = " 1 " > Google </ option > < вариант value = " 2 " > Taobao </ option > < вариант value = " 3 " > Учебное пособие по программированию </ option > < вариант value = " 4 " > Weibo </ option > < вариант значение = " 5 " > Facebook </ опция > </выбрать> </форма> < бр > < дел id = " txtHint " > < b > Здесь отображается информация о веб-сайте... </ b > </ div > </body> </html> Функция showSite() выполняет следующие шаги:
Проверьте, выбран ли веб-сайт
Создать объект XMLHttpRequest.
Создайте функцию, которая выполняется, когда ответ сервера готов.
Отправить запрос к файлу на сервере
Обратите внимание на параметр (q), добавленный в конец URL-адреса (содержащий содержимое раскрывающегося списка).
PHP-файлы
Страница сервера, вызванная выше через JavaScript, представляет собой PHP-файл с именем «getsite_mysql.php».
Исходный код getsite_mysql.php выполняет запрос к базе данных MySQL и возвращает результаты в таблице HTML:
Код файла getsite_mysql.php:
<?php $q = isset ( $_GET [ " q " ] ) ? intval ( $_GET [ " q " ] ) : ' ' ; if ( пусто ( $q ) ) { эхо ' Пожалуйста, выберите сайт ' ; выход } ; $ con = mysqli_connect ( ' localhost ' , ' root ' , ' 123456 ' ) ; ( ! $кон ) { die ( ' Не удалось подключиться: ' . mysqli_error ( $con ) ) ; // Выбор базы данных mysqli_select_db ( $con , " test " ) ; // Устанавливаем кодировку, чтобы предотвратить искажение китайских символов mysqli_set_charset ( $con , " utf8 " ) ; $sql = " ВЫБРАТЬ * ИЗ веб-сайтов WHERE id = ' " $q " ' " ; $ result = mysqli_query ( $con , $sql ) ; " <table border='1'><tr><th>ID</th><th>Название веб-сайта</th><th>URL-адрес веб-сайта</th><th>Рейтинг Alexa</th><th> Страна</th></tr> " ; while ( $row = mysqli_fetch_array ( $result ) ) { эхо " <тр> " ; эхо " <td> " . $ row [ ' id ' ] " </td> " ; " <td> " . $ row [ ' name ' ] " </td> " ; " <td> " . $ row [ ' url ' ] " </td> " ; " <td> " . $ row [ ' alexa ' ] " </td> " ; " <td> " . $ row [ ' страна ' ] " </td> " ; " </tr> " } эхо " </table> " ; mysqli_close ( $con ) ? >; Объяснение: Когда запрос отправляется из JavaScript в файл PHP, происходит следующее:
PHP открывает соединение с базой данных MySQL
Найти выбранного пользователя
Создайте HTML-таблицу, заполните ее данными и отправьте обратно заполнитель «txtHint».
