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:
<html>
<body>
<script language="javascript" type="text/javascript">
<!--
//trình duyệt hỗ trợ code
function ajaxFunction(){
var ajaxRequest; // khai báo một biến để làm việc với Ajax
try{
// các trình duyệt Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
}
catch (e){
// trình duyệt IE
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
// xử lý ngoại lệ
alert("Không hỗ trợ!");
return false;
}
}
}
// Tạo một hàm mà sẽ nhận dữ liệu được gửi
// từ server và sẽ cập nhật khu vực div
// trong cùng page nỳ.
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
// Bây giờ lấy các giá trị từ người dùng và
// truyền nó tới 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'>Kết quả của bạn sẽ hiển thị ở đây!!!</div>
</body>
</html>
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.
<?php
$dbhost = "localhost";
$dbuser = "tennguoidung";
$dbpass = "matkhau";
$dbname = "tencosodulieu";
//Kết nối với MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass);
//chọn Database
mysql_select_db($dbname) or die(mysql_error());
// lấy dữ liệu
$age = $_GET['age'];
$sex = $_GET['sex'];
$wpm = $_GET['wpm'];
// phần này giúp ngăn cản SQL Injection
$age = mysql_real_escape_string($age);
$sex = mysql_real_escape_string($sex);
$wpm = mysql_real_escape_string($wpm);
//truy vấn
$query = "SELECT * FROM ajax_example WHERE sex = '$sex'";
if(is_numeric($age))
$query .= " AND age <= $age";
if(is_numeric($wpm))
$query .= " AND wpm <= $wpm";
//thực thi truy vấn
$qry_result = mysql_query($query) or die(mysql_error());
//định dạng chuỗi kết quả
$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>";
// chèn một hàng mới vào trong bảng
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 "Truy vấn: " . $query . "<br />";
$display_string .= "</table>";
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.
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ó app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.
Các bạn ở Hà Nội có thể tham gia khóa học thứ 9 của vietjackteam (đang tuyển sinh) vào cuối tháng 10/2018 do anh Nguyễn Thanh Tuyền, admin vietjack.com trực tiếp giảng dạy tại Hà Nội. Chi tiết nội dung khóa học tham khỏa link : Khóa học Java.Các bạn học CNTT, điện tử viễn thông, đa phương tiện, điện-điện tử, toán tin có thể theo học khóa này. Số lượng các công việc Java hoặc .NET luôn gấp ít nhất 3 lần Android hoặc iOS trên thị trường tuyển dụng. Khóa online= Đi phỏng vấn, Khóa offline= Đi phỏng vấn+ 1.5 tháng thực tập ngoài doanh nghiệp.
Mọi người có thể xem demo nội dung khóa học tại địa chỉ Video demo khóa học Offline
Các bạn ở xa học không có điều kiện thời gian có thể tham dự khóa Java online để chủ động cho việc học tập. Từ tháng 4/2018, VietJack khuyến mại giá SỐC chỉ còn 250k cho khóa học, các bạn có thể trả lại tiền nếu không hài lòng về chất lượng trong 1 tháng, liên hệ facebook admin fb.com/tuyen.vietjack để thanh toán chuyển khoản hoặc thẻ điện thoại, khóa học bằng Tiếng Việt với gần 100 video, các bạn có thể chủ động bất cứ lúc nào, và xem mãi mãi. Thông tin khóa học tại Khóa học Java Online trên Udemy
Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.
Các bài học PHP phổ biến khác tại VietJack:
