CuDemVN.Wap.Sh
GetSmile.Mobie.In - Diễn đàn chia sẻ Cú đêm Việt Nam AiChat.Wap.Sh - Diễn đàn Xtgem Việt Nam HamTruyen.Xtgem.Com - Blog Ham Truyện nơi hội tụ của những tín đồ mê truyện chữ
Ajax là gì? Hướng dẫn code cơ bản khi xử lý dữ liệu với jQuery Ajax
 |  RoSino18k  
15-08-2017
|
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 tiax<.> gay!!</h2>
<p id="pppp">Đâ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="zink"></div>
<script type="text/javascript">
$("#zink").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="zink" trong demo.txt
<div id="zink"></div>
<script type="text/javascript">
$("#zink").load('link/to/demo.txt #tiaxgay');
</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="tiaxgay"></div>
<script type="text/javascript">
$("#zink").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="" method="post" id="tiaxgay"><input type="text" name="text"/><form>
<button>Đăng</button>
<script>
$("button").click(function(){
$.post("",
{
text: "Welcome to tiaxgayt"
},
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.
Chia sẻ bởi: Zink
Lượt xem: 2699 
Đánh giá: 4.5/ 5, 2699 bình chọn
| - Chia sẻ: |   |
Link:
Còn “nhiều” Lắm!