Ajax là gì? Viết chương trình Ajax bằng Javascript - Học Ajax - PHP Ajax - jQuery Ajax
Trong bài này chúng ta sẽ tìm hiểu về Ajax, một kỹ thuật dùng để xử lý các chức năng trên Website. Trước đây Ajax là một kỹ thuật nâng cao, nhưng kể từ khi có NodeJS thì nó trở nên tầm thường trong mắt lập trình viên. Tuy nhiên, dù sao đi nữa thì việc sử dụng Ajax sẽ giúp website hoạt động trơn ...
Trong bài này chúng ta sẽ tìm hiểu về Ajax, một kỹ thuật dùng để xử lý các chức năng trên Website. Trước đây Ajax là một kỹ thuật nâng cao, nhưng kể từ khi có NodeJS thì nó trở nên tầm thường trong mắt lập trình viên.
Tuy nhiên, dù sao đi nữa thì việc sử dụng Ajax sẽ giúp website hoạt động trơn tru, khách hàng truy cập vào sẽ cảm thấy tốc độ xử lý rất nhanh nên rất thân thiện với người dùng. Vậy Ajax là gì thì chúng ta cùng tìm hiểu ngay nhé.
1. Ajax là gì?
Ajax (Asynchronous JavaScript and XML) là một kỹ thuật giúp tạo ra trang Web động mà hoàn toàn không reload lại toàn bộ trang. Đối với công nghệ web hiện nay thì ajax không thể thiếu, nó là một phần làm nên sự sinh động cho website. Còn đối với ngành SEO thì khi sử dụng ajax lại không tốt, tại vì bot Google sẽ không index được. Nhưng thực tế ta có cách khắc phục và vấn đề này ta sẽ tìm hiểu nó ở một bài khác.
Ajax được viết bằng ngôn ngữ Javascript nên nó chạy trên client, tức là mỗi trình duyệt sẽ chạy độc lập hoàn toàn không ảnh hưởng lẫn nhau. Hiện nay có nhiều thư viện javascript như [jQuery], [Angular], [React JS] đều hỗ trợ kỹ thuật này nhằm giúp chúng ta thao tác dễ dàng hơn. Nhưng tôi muốn các bạn nắm rõ bản chất của ajax nên trong bài này chúng ta sẽ code thuần javascript 100% nhé.
2. Viết chương trình Ajax Javascript
Chúng ta viết một chương trình đơn giản đó là lấy nội dung trả về của một file PHP, các bước thực hiện như sau:
Tạo file index.php để xử lý ajax
Các bạn tạo một project và tạo một file index.php với nội dung nhu sau:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="javascript">
function load_ajax(){
alert('Clicked');
}
</script>
</head>
<body>
<div id="result">
Nội dung ajax sẽ được load ở đây
</div>
<input type="button" name="clickme" id="clickme" onclick="load_ajax()" value="Click Me"/>
</body>
</html>
Trong đó tôi đã tạo một thẻ div dùng để chứa nội dung load ajax, một button trong đó có sự kiện onclick, sự kiện này sẽ gọi đến hàm load_ajax. Các bạn test thử bằng cách chạy file lên và click thử vào button, nếu nó alert với nọi dung là "clicked" tức là ta tạo file thành công rồi đấy.
Tạo file trả về nội dung ajax
Bạn tạo một file php với tên là tên là result.php với nội dung như sau:
<?php echo 'Đây là nội dung trả về'; ?>
Viết code gọi ajax lấy nội dung từ file result
Bây giờ ta sẽ viết hàm xủ lý gọi ajax để lấy nội dung từ file result.php và gán nội dung đó vào thẻ div như khai báo ở file index.php trên. Nội dung như sau:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="javascript">
function load_ajax()
{
// Tạo một biến lưu trữ đối tượng XML HTTP. Đối tượng này
// tùy thuộc vào trình duyệt browser ta sử dụng nên phải kiểm
// tra như bước bên dưới
var xmlhttp;
// Nếu trình duyệt là IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
// Nếu trình duyệt là IE6, IE5
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// Khởi tạo một hàm gửi ajax
xmlhttp.onreadystatechange = function()
{
// Nếu đối tượng XML HTTP trả về với hai thông số bên dưới thì mọi chuyện
// coi như thành công
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
// Sau khi thành công tiến hành thay đổi nội dung của thẻ div, nội dung
// ở đây chính là
document.getElementById("result").innerHTML = xmlhttp.responseText;
}
};
// Khai báo với phương thức GET, và url chính là file result.php
xmlhttp.open("GET", "result.php", true);
// Cuối cùng là Gửi ajax, sau khi gọi hàm send thì function vừa tạo ở
// trên (onreadystatechange) sẽ được chạy
xmlhttp.send();
}
</script>
</head>
<body>
<div id="result">
Nội dung ajax sẽ được load ở đây
</div>
<input type="button" name="clickme" id="clickme" onclick="load_ajax()" value="Click Me"/>
</body>
</html>
Như vậy là ta có toàn bộ 2 file là index.php và result.php. Trong đó file index.php tôi viết hàm xử lý gọi ajax và lấy kết quả đổ vào thẻ div#result. Còn file result.php sẽ echo một câu chào với nội dung là "Đây là nội dung trả về'.
Bây giờ các bạn click vào button để xem kết quả nhé, nếu mọi chuyện ok thì thẻ div sẽ bị thay đổi nội dung chính bằng nội dung trong file result.php. Các bạn có thể thay đổi nội dung trong file result.php để test.
Tóm lại ta có các bước tạo một ứng dụng ajax như sau:
- Tạo
file1.phphiển thị ra trình duyệt - Tạo
file2.phptrả về kết quả - Viết xử lý ajax ở
file1.php, đoạn ajax sẽ gọi đếnfile2.phpđể lấy nội dung sau đó xử lý theo yêu cầu.
Như vậy ta đã biết ajax là gì rồi nhỉ? Tôi thì tôi chưa biết nó là gì 
.
3. Lời kết
Trong bài này chúng ta chỉ tìm hiểu khái niệm ajax là gì và thực hiện ví dụ cách sử dụng ajax trong Javascript thuần, nhưng trong thực tế thì chúng ta thường sử dụng các thư viện Javascript như jQuery để thực hiện nên kể từ bài tiếp theo tôi sẽ không dùng Javascript nữa.
