Hướng dẫn cơ bản về jQuery AJAX | Mã Nguồn | Góc wap/webmaster -

HayVoz.Mobie.In

Gợi ý : Hãy

Đăng nhập Hoặc Đăng ký tài khoản để sử dụng hết chức năng của diễn đàn !

Tìm kiếm | Ai đang ở đây (1)

Đăng nhập bình luận

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

Đánh giá: 100%

Có

100/ 100 100 bình chọn

DangCan
Cấp bậc: mem

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:

Copy code

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);

Copy code

- 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

Copy code

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

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

Copy code

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="hayvoz" trong demo.txt

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

Copy code

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="mrkhanh"></div>
<script type="text/javascript">
  $("#mrkhanh").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>

Copy code

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);

Copy code

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

Copy code

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);

Copy code

- 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="hayvoz"><input type="text" name="text"/><form>
<button>Đăng</button>
<script>
  $("button").click(function(){
    $.post("{{form_url}}",
    {
        text: "Welcome to Hayvoz.mobie.in"
    },
    function(data, status){
        alert("Data: " + data + "\nStatus: " + status);
    });
  });
</script>

Copy code

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.

nguồn : phonho

Đã chỉnh sửa: DangCan( 28-09-2015 )

Tổng số: 1

Chia sẻ:

BBCode:

Link:

Từ khóa: dẫn , bản , jQuery , cơ , về , AJAX

Trực tuyến

BOT , 1 khách ghé thăm

Ping sitemap|Robots.txt|Sitemap.Xml