PHP и AJAX

Что такое AJAX?

  • AJAX означает Aсинхронный JavaScript и XML. AJAX - это новый метод создания лучших, быстрых и интерактивных веб-приложений с помощью XML, HTML, CSS и Java Script.

  • Обычные веб-приложения передают информацию на сервер и с него с помощью синхронных запросов. Это означает, что вы заполняете форму, нажимаете «Отправить» и перенаправляетесь на новую страницу с новой информацией с сервера.

  • С помощью AJAX, когда нажата кнопка submit, JavaScript сделает запрос к серверу, интерпретирует результаты и обновит текущий экран. В самом чистом смысле пользователь никогда не узнает, что что-либо было передано на сервер.

Для полного изучения AJAX обратитесь к AJAX Tutorial.

Пример PHP и AJAX

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

NOTE - Мы предполагаем, что у вас достаточно прав для выполнения следующих операций 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' /> <br />
         Max WPM: <input type = 'text' id = 'wpm' />
         <br />
         
         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>

NOTE - Способ передачи переменных в запросе соответствует стандарту HTTP и имеет форму A.

URL?variable1=value1;&variable2=value2;

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

NOTE - Это фиктивный экран и работать не будет.

Ваш результат будет отображаться здесь

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

Итак, теперь ваш клиентский скрипт готов. Теперь нам нужно написать наш серверный скрипт, который будет извлекать возраст, количество слов в минуту и ​​пол из базы данных и отправлять их обратно клиенту. Поместите следующий код в файл «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 . "<br />";
   
   $display_string .= "</table>"; echo $display_string;
?>

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

Ваш результат будет отображаться здесь

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