PHP - NIIT-ICT : Học lập trình PHP

AJAX là gì?

AJAX là viết tắt của A Ja vaScript và X ML đồng bộ . AJAX là một kỹ thuật mới để tạo các ứng dụng web tương tác tốt hơn, nhanh hơn và tương tác hơn với sự trợ giúp của XML, HTML, CSS và Java Script.

Học lập trình PHP chuyên nghiệp

Ứng dụng web thông thường truyền thông tin đến và từ sever bằng các yêu cầu đồng bộ. Điều này có nghĩa là bạn điền vào biểu mẫu, nhấn gửi và được chuyển đến một trang mới với thông tin mới từ máy chủ.

Với AJAX khi gửi được nhấn, JavaScript sẽ đưa ra yêu cầu đến máy chủ, diễn giải kết quả và cập nhật màn hình hiện tại. Theo nghĩa thuần túy nhất, người dùng sẽ không bao giờ biết rằng bất cứ thứ gì thậm chí được truyền đến máy chủ.

>> Để học hoàn toàn về AJAX, vui lòng tham khảo Hướng dẫn AJAX hướng dẫn học lập trình php <<

Ví dụ về PHP và AJAX

Để minh họa rõ ràng việc truy cập thông tin từ cơ sở dữ liệu bằng Ajax và PHP dễ dàng như thế nào, chúng tôi sẽ xây dựng các truy vấn MySQL một cách nhanh chóng và hiển thị kết quả trên "ajax.html".

Nhưng trước khi chúng tôi tiến hành, hãy làm công việc mặt đất. Tạo một bảng bằng cách sử dụng lệnh sau đây.

LƯU Ý - Chúng tôi giả định rằng bạn có đủ đặc quyền để thực hiện các hoạt động sau của 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`)
)

Bây giờ kết xuất dữ liệu sau vào bảng này bằng các câu lệnh SQL sau.

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);

Tệp HTML phía máy khách

Bây giờ, hãy để tệp HTML phía máy khách của chúng tôi là ajax.html và nó sẽ có mã sau

<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>

LƯU Ý - Cách chuyển các biến trong Truy vấn theo tiêu chuẩn HTTP và có formA.

URL?variable1=value1;&variable2=value2;

Bây giờ đoạn mã trên sẽ cung cấp cho bạn một màn hình như được đưa ra dưới đây

LƯU Ý - Đây là màn hình giả và sẽ không hoạt động.Tuổi tối đa:

Tối đa WPM:

Giới tính:

Kết quả của bạn sẽ hiển thị ở đây

Tệp PHP phía máy chủ

Vì vậy, bây giờ kịch bản phía khách hàng của bạn đã sẵn sàng. Bây giờ chúng tôi phải viết kịch bản phía máy chủ của chúng tôi sẽ tìm nạp tuổi, wpm và sex từ cơ sở dữ liệu và sẽ gửi lại cho khách hàng. Đặt đoạn mã sau vào tệp "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;
?>

Bây giờ hãy thử bằng cách nhập một giá trị hợp lệ trong "Tuổi tối đa" hoặc bất kỳ hộp nào khác và sau đó nhấp vào nút Truy vấn MySQL.Tuổi tối đa:

Tối đa WPM:

Giới tính:

Kết quả của bạn sẽ hiển thị ở đây

Nếu bạn đã hoàn thành thành công bài học này thì bạn sẽ biết cách sử dụng MySQL, PHP, HTML và Javascript song song để viết các ứng dụng Ajax.

PHP - NIIT-ICT

Thanh Ngang

Thứ Tư, 13 tháng 3, 2019

Học lập trình PHP - PHP & AJAX

AJAX là gì?

Ví dụ về PHP và AJAX

Tệp HTML phía máy khách

Tệp PHP phía máy chủ

Tối đa WPM:

Không có nhận xét nào:

Đăng nhận xét

lập trình PHP cho các nhà phát triển PERL

Người theo dõi

Tổng số lượt xem trang