PHP i AJAX

Co to jest AJAX?

  • AJAX oznacza Asynchroniczny JavaScript i XML. AJAX to nowa technika tworzenia lepszych, szybszych i bardziej interaktywnych aplikacji internetowych za pomocą XML, HTML, CSS i Java Script.

  • Konwencjonalna aplikacja internetowa przesyła informacje do iz serwera przy użyciu synchronicznych żądań. Oznacza to, że wypełniasz formularz, klikasz przycisk Prześlij i zostajesz przekierowany na nową stronę z nowymi informacjami z serwera.

  • Z AJAX po naciśnięciu przycisku Prześlij, JavaScript wyśle ​​żądanie do serwera, zinterpretuje wyniki i zaktualizuje bieżący ekran. Mówiąc najprościej, użytkownik nigdy nie wiedziałby, że cokolwiek zostało nawet przesłane na serwer.

Aby uzyskać pełną wiedzę na temat AJAX, zapoznaj się z samouczkiem AJAX.

Przykład PHP i AJAX

Aby jasno zilustrować, jak łatwo jest uzyskać dostęp do informacji z bazy danych przy użyciu Ajax i PHP, zamierzamy budować zapytania MySQL w locie i wyświetlać wyniki w „ajax.html”. Ale zanim przejdziemy dalej, zróbmy prace ziemne. Utwórz tabelę za pomocą następującego polecenia.

NOTE - Zakładamy, że masz wystarczające uprawnienia do wykonywania następujących operacji 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`)
)

Teraz zrzuć następujące dane do tej tabeli, używając następujących instrukcji 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);

Plik HTML po stronie klienta

Teraz przygotujmy nasz plik HTML po stronie klienta, którym jest ajax.html i będzie on zawierał następujący kod

<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 - Sposób przekazywania zmiennych w zapytaniu jest zgodny ze standardem HTTP i ma formatA.

URL?variable1=value1;&variable2=value2;

Teraz powyższy kod da ci ekran, jak podano poniżej

NOTE - To jest fałszywy ekran i nie będzie działać.

Twój wynik zostanie wyświetlony tutaj

Plik PHP po stronie serwera

Więc teraz twój skrypt po stronie klienta jest gotowy. Teraz musimy napisać nasz skrypt po stronie serwera, który pobierze z bazy danych wiek, WPM i płeć i odeśle je z powrotem do klienta. Umieść następujący kod w pliku „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;
?>

Teraz spróbuj wprowadzić prawidłową wartość w „Max Age” lub w innym polu, a następnie kliknij przycisk Query MySQL.

Twój wynik zostanie wyświetlony tutaj

Jeśli pomyślnie ukończyłeś tę lekcję, wiesz, jak używać MySQL, PHP, HTML i Javascript w tandemie do pisania aplikacji Ajax.