Ajax là gì? Viết chương trình Ajax bằng Javascript

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.

test php

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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 la gi jpg

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

Bài viết này được đăng tại [free tuts .net]

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

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.

Danh sách file tải về

Tên file tải về	Pass giải nén
Tải bài học định dạng PDF	freetuts.net hoặc gameportable.net

Bài trước Bài tiếp

Cùng chuyên mục:

Hàm key_exists() trong PHP

Cách sử dụng key_exists() trong PHP

Hàm mysqli_fetch_row() trong PHP

Cách sử dụng mysqli_fetch_row() trong PHP

Hàm end() trong PHP

Cách sử dụng end() trong PHP

Hàm mysqli_field_count() trong PHP

Cách sử dụng mysqli_field_count() trong PHP

Hàm count() trong PHP

Cách sử dụng count() trong PHP

Hàm mysqli_field_seek() trong PHP

Cách sử dụng mysqli_field_seek() trong PHP

Hàm compact() trong PHP

Cách sử dụng compact() trong PHP

Hàm mysqli_field_tell() trong PHP

Cách sử dụng mysqli_field_tell() trong PHP

Hàm array_values() trong PHP

Cách sử dụng array_values() trong PHP

Hàm mysqli_free_result() trong PHP

Cách sử dụng mysqli_free_result() trong PHP

Hàm array_unshift() trong PHP

Cách sử dụng array_unshift() trong PHP

Hàm mysqli_get_charset() trong PHP

Cách sử dụng mysqli_get_charset() trong PHP

Hàm array_shift() trong PHP

Cách sử dụng array_shift() trong PHP

Hàm mysqli_get_client_stats() trong PHP

Cách sử dụng mysqli_get_client_stats() trong PHP

Hàm array_unique() trong PHP

Cách sử dụng array_unique() trong PHP

Hàm mysqli_get_client_version() trong PHP

Cách sử dụng mysqli_get_client_version() trong PHP

Hàm array_uintesect() trong PHP

Cách sử dụng array_uintesect() trong PHP

Hàm mysqli_get_connection_stats() trong PHP

Cách sử dụng mysqli_get_connection_stats() trong PHP

Hàm array_sum() trong PHP

Cách sử dụng array_sum() trong PHP

Hàm mysqli_get_host_info() trong PHP

Cách sử dụng mysqli_get_host_info() trong PHP