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

Posted on Updated on by adminChuyên mục:Kiến thức Internet
Trong bài này tất cả chúng ta sẽ khám phá về Ajax, một kỹ thuật dùng để giải quyết và xử lý những công dụ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

banquyen png

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 giải trí trơn tru, người mua truy vấn vào sẽ cảm thấy vận tốc giải quyết và 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ì tất cả chúng ta cùng khám phá 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é.

2. Viết chương trình Ajax Javascript

Chúng ta viết một chương trình đơn thuần đó là lấy nội dung trả về của một file PHP, những bước thực thi 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:





    
        
        
        
    
    
        

            Nội dung ajax sẽ được load ở đây

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:

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:





    
        
        
        
    
    
        

            Nội dung ajax sẽ được load ở đây

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

3. Lời kết

Trong bài này tất cả chúng ta chỉ khám phá khái niệm ajax là gì và triển khai ví dụ cách sử dụng ajax trong Javascript thuần, nhưng trong thực tiễn thì tất cả chúng ta thường sử dụng những thư viện Javascript như jQuery để triển khai 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

admin