Bài 01: Tìm hiểu ajax là gì?

DOWNLOAD DEMO

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:

<!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.phpresult.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.

Như vậy ta đã biết ajax là gì rồi nhỉ? Tôi thì tôi chưa biết nó là gì smiley.

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. 

Hãy để lại link bài viết gốc khi chia sẻ bài viết này, mình sẽ report DMCA với những website lấy nội dung mà không để nguồn hoặc copy bài với số lượng lớn.

Nguồn: freetuts.net

Profile photo of adminTheHalfHeart

TheHalfHeart

Có sở thích viết tuts nên đã từng tham gia viết ở một số diễn đàn, đến năm 2014 mới có điều kiện sáng lập ra freetuts.net. Sinh năm 90 và có 1 vợ 2 con, thích ca hát và lập trình.

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.