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ữ
* Trang chủ >> WapMaster
Tìm Kiếm Thảo Luận
↓↓

Ajax là gì? Hướng dẫn code cơ bản khi xử lý dữ liệu với jQuery Ajax

Admin* 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, ...

Ajax là gì? Hướng dẫn code cơ bản khi xử lý dữ liệu với jQuery Ajax
[Tải ảnh]


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: 183
score
Đánh giá: 4.5/ 5, 183 bình chọn
- Chia sẻ:G  T
BBCode:

Link:
+ Còn “nhiều” Lắm!
+

Share code Diễn đàn trên Xtgem Full chức năng cực chất GetSmile.Mobie.In bởi Cú Đêm Việt Nam

+

Share code PHP hiển thị thông tin khách đang online trên Site

+

Sử dụng HTML và CSS tạo hiệu ứng hiển thị mô tả khi di chuột vào hình ảnh

+

Share full code PHP bộ tool cài đặt và quản lý Filelist KhoTruyen365 Xtgem

+

Tổng hợp Filelist Tsukuyomi (AiChat) không timeout, data vô hạn kèm tool post, leech, auto leech đầy đủ

Trang chủ Cú Đêm Việt Nam Trang Chủ[1-1-183]

Ring ring