Bài 01: Ajax là gì?
1. Ajax là gì? Ajax là một khái niệm không còn là mới lạ trong việc ứng dụng nó vào phát triển các ứng dụng phần mềm online, hay ứng dụng nó trong việc tạo ra các website động. Thực tế nó có thể mới lạ so với những bạn mới học lập trình web nên đôi lúc các bạn nghĩ nó là một ngôn ngữ lập trình ...
1. Ajax là gì?
Ajax là một khái niệm không còn là mới lạ trong việc ứng dụng nó vào phát triển các ứng dụng phần mềm online, hay ứng dụng nó trong việc tạo ra các website động. Thực tế nó có thể mới lạ so với những bạn mới học lập trình web nên đôi lúc các bạn nghĩ nó là một ngôn ngữ lập trình mới hay một công nghệ thuộc về lập trình trên server-side. Nhưng trên thực tế không như vậy, ajax đơn thuần chỉ là một kỹ thuật, viết tắt của chữ AJAX = Asynchronous JavaScript and XML, đây là một công nghệ giúp chung ta gửi request và nhận response hay nói chính xác hơn tạo ra những web động mà hoàn toàn không reload lại trang. Đối với công nghệ phần mềm online, hay lập trình web hiện nay thì ajax là một phần không thể thiếu, nó là một phần làm nên sự sinh động cho website.
Hoặc Ajax là phương pháp sử dụng các đối tượng Javascript, DHTML và XMLHttpRequest để thực hiện GET hoặc POST và trả lại kết quả mà không cần tải lại trang HTML.
Ajax được viết bằng ngôn ngữ Javascript nên nó chạy trên client của người dùng, Mỗi máy client sẽ chạy độc lập không hoàn toàn ảnh hưởng lẫn nhau.
Hiện nay có nhiều thư viện Framework javascript như jQuery hay Angular đều hỗ trợ kỹ thuật này nhằm giúp chúng ta thao tác dễ dàng hơn, đơn giản hơn. Nhưng về bản chất thì nó cũng giống nhau. Trong khuôn khổ bài viết này 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.
2. Ajax Hoạt Động Như Thế Nào
Quá trình hoạt động của Ajax diễn ra ở 2 giai đoạn:
- Client (thường là trình duyệt) sẽ gửi một request theo dạng bất đồng bộ (Asynchronous) tới server. Được gọi là bất đồng bộ là bởi vì trang web trên trình duyệt vẫn duy trì hoạt động như bình thường cho tới khi
- Server-side nhận được request từ phía client và tiến hành xử lý sau đó trả về kết quả cho client. Lúc này trình duyệt sẽ cập nhật nội dung trang web dựa trên kết quả trả về
Như vậy bạn có thể thấy được toàn bộ quá trình hoạt động của Ajax không làm gián đoạn sự hiển thị hay tương tác của trang web vào trước và trong thời gian trình duyệt gửi Ajax request tới server-side. Chính tính năng này sẽ giúp tăng trải nghiệm của người dùng và đồng thời tối ưu hóa tài nguyên trên server.
3. Viết chương trình ajax đầu tiền.
Như trên mình đã nói thì Ajax là phương pháp sử dụng các đối tượng Javascript, DHTML và XMLHttpRequest để thực hiện GET hoặc POST và trả lại kết quả mà không cần tải lại trang HTML.
Nên để xây dựng một chương trình ajax đơn giản bạn cần kết hợp của cả ba ngôn ngữ lập trình.
- HTML(Client): Xây dựng giao diện người dùng nó chứa các điều khiển, textbox, button...vvv
- Javascript(Client): Nó là ngôn ngữ trung gian nó lấy dữ liệu từ các điều khiển HTML, cũng có trường hợp không lấy :) và gửi các dữ liệu hay request cho phía server-silde xử lý.
- PHP(Server-slide): Ngôn ngữ này sẽ xử lý ở phía server-side. Nhận các request(Sử dụng trọng tâm hai phương thức là POST và GET), dữ liệu xử lý rồi trả về(response) cho phía client hiển thị kết quả.
Trong ví dụ này bạn tạo một thư mục ở htdocs(Xampp), www(Wamp) hay Vertigo tuy bạn một folder là /ajaxsimple.
- index.html: File này chưa các điều khiển HTML, Javascript.
- result.php: File này sẽ xử lý các yêu cầu(request) và trả về kết quả(response)
File index.html
<html>
<head>
<title>Simple Ajax Example</title>
<script language="Javascript">
function xmlhttpPost() {
// 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ư các bước bên dưới
var xmlHttpReq = false;
var self = this;
// Mozilla/Safari
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// Nếu trình duyệt là IE6, IE5
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
// Khai báo với phương thức (POST|GET), và url chính là file result.php
self.xmlHttpReq.open('POST', 'result.php', true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// Khởi tạo một hàm gửi ajax
self.xmlHttpReq.onreadystatechange = function(str) {
if (self.xmlHttpReq.readyState == 4 && self.xmlHttpReq.status == 200) {
// Sau khi thành công tiến hành thay đổi nội dung của thẻ div, nội dung
document.getElementById("result").innerHTML = self.xmlHttpReq.responseText;
}
}
// Cuối cùng là gửi ajax, sau khi gọi hàm send thì function vừa tạo (onreadystatechange) sẽ được chạy
// Bạn có thể có hoặc không gửi [QUERY_STRING]
self.xmlHttpReq.send(getquerystring());
}
function getquerystring() {
var form = document.forms['f1']; // Khai báo biến form để truy xuất tới các điều khiển của form
var word = form.word.value; // Lấy giá trị của input text mà bạn đã nhập vào
query_string = 'w=' + escape(word); // NOTE: Không xử dụng '?' trước [QUERY_STRING]
return query_string ;
}
</script>
</head>
<body>
<form name="f1">
<p>
<label>Nhập vào một câu</label>
<input name="word" type="text">
<input value="Go" type="button" onclick='JavaScript:xmlhttpPost(); return false;'>
</p>
<div id="result"></div>
</form>
</body>
</html>
File result.php
<?php
$w = isset($_POST['w']) ? trim($_POST['w']) : 'Empty';
echo 'Bạn đã nhập vào câu: <strong>'.$w.'<strong>'; die();
?>
Xem kết quả
4. Tổng kết
Trong bài này chúng ta đã tìm hiểu khái niệm ajax là gì và đã làm một ví dụ về ajax sử dụng ajax trong Javascript thuần, nhưng trong thực tế ngày nay thì chúng ta thường ít khi sử dụng thuần Javascript nữa. Thay vào đó là sử dụng các thư viện Javascript như jQuery, Angular để viết các đoạn mã Javascript.
