Чтобы наглядно продемонстрировать, насколько легко получить доступ к информации из базы данных с помощью AJAX, мы собираемся строить запросы MySQL на лету и отображать результаты на «ajax.html». Но прежде чем мы продолжим, давайте сделаем почву. Создайте таблицу, используя следующую команду.

ПРИМЕЧАНИЕ . Мы предполагаем, что у вас есть достаточно полномочий для выполнения следующих операций MySQL

CREATE TABLE 'ajax_example' (
   'name' varchar(50) NOT NULL,
   'age' int(11) NOT NULL,
   'sex' varchar(1) NOT NULL,
   'wpm' int(11) NOT NULL,
   PRIMARY KEY  ('name')
)

Теперь выгрузите следующие данные в эту таблицу, используя следующие операторы SQL:

INSERT INTO 'ajax_example' VALUES ('Jerry', 120, 'm', 20);
INSERT INTO 'ajax_example' VALUES ('Regis', 75, 'm', 44);
INSERT INTO 'ajax_example' VALUES ('Frank', 45, 'm', 87);
INSERT INTO 'ajax_example' VALUES ('Jill', 22, 'f', 72);
INSERT INTO 'ajax_example' VALUES ('Tracy', 27, 'f', 0);
INSERT INTO 'ajax_example' VALUES ('Julie', 35, 'f', 90);

Клиентский HTML-файл

Теперь давайте получим HTML-файл клиентской стороны, который является ajax.html, и он будет иметь следующий код:

<html>
<body>
<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function ajaxFunction(){
   var ajaxRequest;  // The variable that makes Ajax possible!
   try{
  
      // Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
   }catch (e){
     
      // Internet Explorer Browsers
      try{
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      }catch (e) {
        
         try{
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         }catch (e){
        
            // Something went wrong
            alert("Your browser broke!");
            return false;
         }
      }
   }
  
   // Create a function that will receive data
   // sent from the server and will update
   // div section in the same page.
   ajaxRequest.onreadystatechange = function(){
  
      if(ajaxRequest.readyState == 4){
         var ajaxDisplay = document.getElementById('ajaxDiv');
         ajaxDisplay.innerHTML = ajaxRequest.responseText;
      }
   }
  
   // Now get the value from user and pass it to
   // server script.
   var age = document.getElementById('age').value;
   var wpm = document.getElementById('wpm').value;
   var sex = document.getElementById('sex').value;
   var queryString = "?age=" + age ;
  
   queryString +=  "&wpm=" + wpm + "&sex=" + sex;
   ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
   ajaxRequest.send(null);
}
//-->
</script>
 
<form name='myForm'>
 
   Max Age: <input type='text' id='age' /> 

   Max WPM: <input type='text' id='wpm' /> 

   Sex:
   <select id='sex'>
      <option value="m">m</option>
      <option value="f">f</option>
   </select>
   <input type='button' onclick='ajaxFunction()' value='Query MySQL'/>
  
</form>
<div id='ajaxDiv'>Your result will display here</div>
</body>
</html>

ПРИМЕЧАНИЕ . Способ передачи переменных в запросе соответствует стандарту HTTP и имеет форму A.

URL?variable1=value1;&variable2=value2;

Вышеприведенный код даст вам экран, как показано ниже:

ПРИМЕЧАНИЕ . Это фиктивный экран и не работает.

Max Age: Max WPM: Sex:

Ваш результат отобразится здесь в этом разделе после того, как вы сделали свою запись.

ПРИМЕЧАНИЕ . Это фиктивный экран.

Файл PHP на стороне сервера

Ваш клиентский скрипт готов. Теперь нам нужно написать наш серверный скрипт, который будет получать возраст, wpm и пол из базы данных и отправит его обратно клиенту. Поместите следующий код в файл «ajax-example.php».

<?php
$dbhost = "localhost";
$dbuser = "dbusername";
$dbpass = "dbpassword";
$dbname = "dbname";
            
//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass);
            
//Select Database
mysql_select_db($dbname) or die(mysql_error());
            
// Retrieve data from Query String
$age = $_GET['age'];
$sex = $_GET['sex'];
$wpm = $_GET['wpm'];
            
// Escape User Input to help prevent SQL Injection
$age = mysql_real_escape_string($age);
$sex = mysql_real_escape_string($sex);
$wpm = mysql_real_escape_string($wpm);
            
//build query
$query = "SELECT * FROM ajax_example WHERE sex = '$sex'";
 
if(is_numeric($age))
   $query .= " AND age <= $age";
 
if(is_numeric($wpm))
   $query .= " AND wpm <= $wpm";
            
//Execute query
$qry_result = mysql_query($query) or die(mysql_error());
 
//Build Result String
$display_string = "<table>";
$display_string .= "<tr>";
$display_string .= "<th>Name</th>";
$display_string .= "<th>Age</th>";
$display_string .= "<th>Sex</th>";
$display_string .= "<th>WPM</th>";
$display_string .= "</tr>";
 
// Insert a new row in the table for each person returned
while($row = mysql_fetch_array($qry_result)){
   $display_string .= "<tr>";
   $display_string .= "<td>$row[name]</td>";
   $display_string .= "<td>$row[age]</td>";
   $display_string .= "<td>$row[sex]</td>";
   $display_string .= "<td>$row[wpm]</td>";
   $display_string .= "</tr>";
}
 
echo "Query: " . $query . "
";
$display_string .= "</table>";
 
echo $display_string;
?>

Теперь попробуйте ввести допустимое значение (например, 120) в Max Age или любое другое поле, а затем нажмите кнопку «Запрос MySQL».

Max Age: Max WPM: Sex:

Ваш результат отобразится здесь в этом разделе после того, как вы сделали свою запись.

Если вы успешно завершили этот урок, вы знаете, как использовать MySQL, PHP, HTML и Javascript в тандеме для написания приложений AJAX.


Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!



We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies).

You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok