Thứ Năm, 24 tháng 12, 2015

Ajax 1

12/24/2015 08:55:00 SA    No comments
Untitled Document

Bài 01: Tìm hiểu ajax là gì?
 0 
 Google +1 

  0
Đăng bởi: TheHalfHeart - Vào ngày: 10-08-2014 - Chuyên mục: PHP - View: 15079
Download Demo
Để trả lời câu hỏi ajax là gì ta sẽ đi vào một số lập luận sau:
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 trên thực tế ta có cách khắc phục lỗi này, và ta sẽ tìm hiểu nó ở một bài gần đây.
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é.


1. 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.


2. 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ề';

?>

3. 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.php hiển thị ra trình duyệt
  • Tạo file2.php trả về kết quả
  • Viết xử lý ajax ở file1.php, đoạn ajax sẽ gọi đến file2.php để lấy nội dung sau đó xử lý theo yêu cầu

4. Kết thúc bài học

Như vậy ta đã biết ajax là gì rồi nhỉ? Tôi thì tôi chưa biết nó là gì cheeky. 
Trong bài này chúng ta chỉ tìm hiểu qua sơ lược về 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 bộ thư viện Javascript 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:

Đăng nhận xét