PHP & AJAX



AJAX là gì?

  • AJAX là viết tắt của Asynchronous JavaScript and XML. AJAX là một kỹ thuật mới để tạo các ứng dụng web tốt hơn, nhanh hơn, và có tính tương tác hơn với sự giúp đỡ của XML, HTML, CSS và JavaScript.

  • Ứng dụng web theo qui ước truyền tải thông tin tới và từ Server bởi sử dụng các request mang tính đồng bộ. Nghĩa là, bạn điền một form, nhấn nút Submit, và được hướng tới một trang mới với thông tin mới từ Server đó.

  • Với AJAX, khi nút Submit được nhấn, JavaScript sẽ tạo một request tới Server, thông dịch kết quả và cập nhật màn hình hiện tại. Người dùng sẽ không bao giờ biết những gì được truyền tải tới Server.

Ví dụ về PHP và AJAX

Để minh họa rõ ràng rằng nó là dễ dàng để truy cập thông tin từ một Database bởi sử dụng AJAX và PHP, chúng tôi xây dựng các truy vấn MySQL và hiển thị kết quả trên "ajax.html". Nhưng trước khi tiến hành, chúng ta cần thực hiện các công việc cơ sở. Tạo một Table bởi sử dụng lệnh sau.

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ờ, truyền dữ liệu sau vào trong Table này bởi sử dụng các lệnh SQL sau:

INSERT INTO `ajax_example` VALUES ('Nam', 120, 'm', 20);
INSERT INTO `ajax_example` VALUES ('Hoang', 75, 'm', 44);
INSERT INTO `ajax_example` VALUES ('Manh', 45, 'm', 87);
INSERT INTO `ajax_example` VALUES ('Huong', 22, 'f', 72);
INSERT INTO `ajax_example` VALUES ('Kien', 27, 'f', 0);
INSERT INTO `ajax_example` VALUES ('Trung', 35, 'f', 90);

HTML file trên Client side

Bây giờ chúng ta có HTML file trên Client side là ajax.html và nó sẽ có code sau:


   
      
      
		
      
Max Age:
Max WPM:
Sex:
Kết quả của bạn sẽ hiển thị ở đây!!!

Ghi chú − Cách truyền các biến trong Query là tuân theo chuẩn HTTP và có form sau.

URL?variable1=value1;&variable2=value2;

PHP file trên Server side

Lúc này, script trên Client side đã sẵn sàng. Giờ chúng ta phải viết script trên Server side, mà sẽ lấy age, wpm và sex từ Database và sẽ gửi nó trở lại tới Client. Đặt dòng code sau vào trong "ajax-example.php" file.

";
   $display_string .= "";
   $display_string .= "Name";
   $display_string .= "Age";
   $display_string .= "Sex";
   $display_string .= "WPM";
   $display_string .= "";
   
   // chèn một hàng mới vào trong bảng
   while($row = mysql_fetch_array($qry_result)){
      $display_string .= "";
      $display_string .= "$row[name]";
      $display_string .= "$row[age]";
      $display_string .= "$row[sex]";
      $display_string .= "$row[wpm]";
      $display_string .= "";
   }
   echo "Truy vấn: " . $query . "
"; $display_string .= ""; echo $display_string; ?>

Bây giờ, bạn thử nhập một giá trị hợp lệ trong "Max Age" hoặc bất kỳ box khác, và sau đó nhấn nút Query MySQL.

Max Age: 

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

Nếu bạn đã hiểu chương này, thì bạn đã biết cách sử dụng MySQL, PHP, HTML, và JavaScript để viết các ứng dụng AJAX.

Các bài học PHP phổ biến khác tại VietJack: