Mục luc:
- 1. Ajax là gì?
- 2. Viết chương trình Ajax Javascript
- Tạo file index.php để xử lý ajax
- Tạo file trả về nội dung ajax
- Viết code gọi ajax lấy nội dung từ file result
- 3. Lời kết
Trong bài này chúng ta tìm hiểu một kỹ thuật khá hay trong lập trình web đó là kỹ thuật Ajax.
1. Ajax là gì?
Ajax là một khái niệm có thể mới lạ với những bạn newbie 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. Nhưng thực tế không như vậy, ajax 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 tạo ra những Web động mà hoàn toàn không reload lại trang nên rất mượt và đẹp. Đố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ì con bọ google sẽ không index được, nhưng thực tế ta có cách khắc phục lỗi này, 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 máy (user) 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 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. 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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!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:
1
2
3
4
5
| <?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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
| <!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.
0 nhận xét: