Hi, Phòng khách!
Trang chủ
Đăng nhập
Công Cụ Tìm Kiếm

Lần hoạt động

| |
Tìm kiếm

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

Bài viết được duyệt bởi PuaruVN
Đăng ngày :28.02.2016 / 14:26[TOP]
Thanhzaculm
Thanhzaculm
Active Member
[Ad trutien2.vn nrong.net]
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:
Mã Code Vina4u
<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:
Mã Code Vina4u
$(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
Mã Code Vina4u
<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ã:
Mã Code Vina4u
<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
Mã Code Vina4u
<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ụ:
Mã Code Vina4u
<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:
Mã Code Vina4u
$.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
Mã Code Vina4u
<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:
Mã Code Vina4u
$.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
Mã Code Vina4u
<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 {}, 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.
nguồn ken
Đăng ngày :28.02.2016 / 14:26 #1
Thanhzaculm
Thanhzaculm
Active Member
[Ad trutien2.vn nrong.net]
like and sub để cập nhật bài mới hàng ngày nhé
Bình luận bài viết
Đăng Nhập để Bình luận và sử dụng đầy đủ tính năng Diễn Đàn
  Tổng số: 2 Bình luận

Chia sẻ bài viết
Đám Mây Từ Khóa
Bài Viết Cùng chuyên mục
Lọc theo tác giả
Xem chủ để ngoại tuyến (Offline)

Trong diễn đàn

Sắp xếp theo thứ tự từ trên xuống
BigTruyen.info - Kho Truyện Tranh Online Khổng lồ
Trang chủ