Hướng dẫn cơ bản về jQuery AJAX

AJAX là gì?

AJAX = Asynchronous JavaScript and XML (JavaScript và XML không đồng bộ)

Hiểu đơn giản, AJAX là cách thức tải nội dung trong nền (chạy ẩn) và hiển thị nó lên trang web mà không cần tải lại trang.

Ví dụ về AJAX: Facebook, Youtube, Gmail, ...

Xin nói trước rằng AJAX và jQuery là 2 định nghĩa hoàn toàn khác nhau, muốn dùng AJAX không nhất thiết phải dùng jQuery, và jQuery không chứa tất cả các chức năng đầy đủ của AJAX. Tuy nhiên với thư viện jQuery, việc chúng ta tiếp cận với AJAX sẽ dễ dàng hơn rất nhiều.

Đầu tiên, chúng ta cần chèn thư viện jQuery vào trang web:

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>

Lưu ý: thư viện jQuery phải chèn trước thì AJAX mới hoạt động

jQuery load()

jQuery load() là hàm AJAX cơ bản nhất, nhưng rất hiệu quả.

Cú pháp:

$(selector).load(URL,data,callback);

- selector: đây là phần tử đích, nội dung sẽ được load vào đây

- URL: địa chỉ trang mà bạn muốn load nội dung

- data (tùy chọn): các tham số dữ liệu xác định các truy vấn theo cặp tham số/giá trị để gửi cùng yêu cầu

- callback (tùy chọn): hàm chạy sau khi load() hoàn thành.

Ví dụ: chúng ta có một tập tin demo.txt với nội dung

<h2>Chào bạn đến với Phố Nhỏ <.> Nét!!</h2>
<p id="phonho">Đây là một đoạn văn bản.</p>

Để load nội dung từ tập tin đó, chúng ta sử dụng đoạn mã:

<div id="mrken"></div>
<script type="text/javascript">
  $("#mrken").load('link/to/demo.txt');
</script>

Bạn cũng có thể load nội dung từ một phần của trang demo.txt bằng cách thêm một selector cần load vào sau URL. Ví dụ ở đây tôi muốn load nội dung từ id="phonho" trong demo.txt

<div id="mrken"></div>
<script type="text/javascript">
  $("#mrken").load('link/to/demo.txt #phonho');
</script>

Vì đây là hướng dẫn cơ bản nên chúng ta sẽ bỏ qua phần data và đi thẳng vào phần callback. Callback là hàm được thực hiện ngay sau khi load() thực hiện xong. Hàm này gồm các thông số:

- responseTxt - là source của trang được load

- statusTxt - trạng thái của AJAX(success, error, ...)

- xhr - chứa các object của XMLHttpRequest

Ví dụ:

<div id="mrken"></div>
<script type="text/javascript">
  $("#mrken").load('link/to/demo.txt', function(responseTxt, statusTxt, xhr){
    if(statusTxt == "success"){
      alert("Tải nội dung thành công!");
    }else{
      alert("Tải nội dung thất bại!");
    }
  });
</script>

jQuery get()

jQuery get() có chức năng yêu cầu dữ liệu từ Server qua phương thức GET

Cú pháp:

$.get(URL,callback);

- URL (bắt buộc): URL bạn muốn lấy dữ liệu

- callback (tùy chọn): hàm xử lý sau khi yêu cầu hoàn tất

Ví dụ với file demo.txt đã tạo ở trên

<button>Lấy nội dung</button>
<script>
  $("button").click(function(){
    $.get("demo.txt", function(data, status){
      alert("Data: " + data + "\nStatus: " + status);
    });
  });
</script>

Không như load(), URL của get() không thêm được selector để lấy riêng nội dung của nó.

Thông số thứ 2 của get() là callback. Biến thứ nhất chứa nội dung trang yêu cầu, biến thứ 2 chứa trạng thái của get(). Việc xử lý dữ liệu trả về sẽ diễn ra trong hàm này.

jQuery post()

jQuery post() có chức năng yêu cầu dữ liệu từ Server thông qua phương thức POST.

Cú pháp:

$.post(URL,data,callback);

- URL (bắt buộc): URL trang cần lấy dữ liệu

- data (tùy chọn): dữ liệu gửi lên server

- callback (tùy chọn): hàm chạy sau khi yêu cầu hoàn tất

Ví dụ: đăng shoutbox wapego bằng AJAX

<form action="{{form_url}}" method="post" id="phonho"><input type="text" name="text"/><form>
<button>Đăng</button>
<script>
  $("button").click(function(){
    $.post("{{form_url}}",
    {
        text: "Welcome to PhoNho.Net"
    },
    function(data, status){
        alert("Data: " + data + "\nStatus: " + status);
    });
  });
</script>

URL của post() tương tự get(), không thêm được selector

Dữ liệu data đặt trong dấu { và }, xếp theo cặp name : value và phân cách nhau bởi dấu phẩy ( , )

Hàm callback tương tự get(), các bạn có thể xử lý dữ liệu trả về ở đây.

Bài viết trên đây đã giới thiệu tất cả những điều cơ bản về jQuery AJAX. Các bạn có thể áp dụng vào nhiều thứ giúp trang web tương tác tốt hơn với người dùng.

Bài này lấy từ tài liệu tiếng Anh và do mình dịch. Do đó khi copy đi nơi khác, vui lòng ghi nguồn http://phonho.net. Thân!

$.ajax nữa đi....nhiều người chưa biết đâu

Ken share ajax đi ..đag cần cái đó

Bạn chưa biết hay nhiều người chưa biết :24:

k pis cũng đủ hơn mấy thằng mod trong đây

Ngol rùi ..cảm ơn bác ken

Ajax chả hiểu gì. Find code title ra giống gì éo biết

bài chưa xong mà , rảnh lại viết tiếp

Rất hữu ích. like mạnh