Tìm hiểu về Jquery và Ajax (phần 2)
- PhongPX
- Oct 14, 2020
- 4 min read
Tiếp tục phần 1, bài viết hôm nay chúng ta lại cùng ngồi uống cà fêi để bàn về một kỹ thuật web vô cùng hay ho là Ajax. Mình đã từng có một đống câu hỏi về Ajax, ngoài những khái niệm, chức năng thì mình lại lại thích hỏi những câu kiểu như:
Tại sao cứ nói Ajax là phải gắn thêm Jquery, bộ 2 cái đó không đi lẻ được hả?
Trước khi tích hợp với Jquery thì lập trình viên muốn xử lý Ajax thì phải làm ntn ?
Khi nào dùng nó, khi nào không nên dùng ?
Trước khi đi vào tìm hiểu, hãy cũng xem một đoạn code sử áp dụng Jquery - Ajax như sau:
function PopupDisplay(taxcode) {
var content = $("#alert").html();
Swal.fire({
title: 'Nhập email mới tại đây',
input: 'email',
inputAttributes: {
autocapitalize: 'off'
},
showCancelButton: true,
confirmButtonText: 'Cập nhật',
showLoaderOnConfirm: true,
allowOutsideClick: () => !Swal.isLoading()
})
.then((result) => {
$.ajax({
type: "POST",
url: '../Ajax/AjaxListCustomer.aspx/UpdateEmail',
data: JSON.stringify({
Taxcode: taxcode,
Email: result.value,
}),
contentType: "application/json; charset=utf-8",
success: function (response) {
Swal.fire({
icon: 'success',
title: "Cập nhật thành công"
})
},
failure: function (response) {
Swal.fire({
icon: 'error',
title: "Không thành công"
})
}
})
});
}Hàm Update Email được viết như sau:
[WebMethod(EnableSession = true)]
public static void UpdateEmail(string Taxcode, string Email)
{
new UserBLL().UpdateEmail(Taxcode, Email);
}II, AJAX - Developer's Dream
Khái niệm
AJAX là chữ viết tắt của cụm từ Asynchronous Javascript and XML. AJAX là phương thức trao đổi dữ liệu với máy chủ và cập nhật một hay nhiều phần của trang web, hoàn toàn không reload lại toàn bộ trang.
Ajax được viết bằng Javascript chạy trên client, tức là mỗi browser sẽ chạy độc lập hoàn toàn không ảnh hưởng lẫn nhau. Về mặt kỹ thuật, nó đề cập đến việc sử dụng các đối tượng XmlHttpRequest để tương tác với một máy chủ web thông qua Javascript.
3 điều bạn cần chú ý là: Trao đổi dữ liệu vs máy chủ, không load lại trang và chạy bất đồng bộ (chạy độc lập).
Mô hình hoạt động:
Danh sách các options trong hàm Ajax
accepts: Nội dung được gửi trong request header giúp server biết được kiểu response server sẽ chấp nhận khi trả về.
async: Thiết lập giá trị false để thực hiện một request đồng bộ.
beforeSend: Một hàm pre-request gọi lại có thể dùng để điều chỉnh object jqXHR trước khi nó được gửi.
cache: Thiết lập giá trị false để buộc browser không lưu cache các trang được request.
complete: Một hàm được thực thi khi request kết thúc (sau khi hàm gọi lại success và error được thực thi).
contents: Một object của string hoặc REGEX dùng để xác định xem JQuery sẽ phân tích response như thế nào.
contentType: Kiểu nội dung của dữ liệu được gửi lên server.
context: Một object được dùng làm ngữ cảnh (this) của tất cả các hàm gọi lại liên quan đến Ajax.
crossDomain: Thiết lập thuộc tính này là true để buộc thực hiện request chéo giữa các domain (như là JSONP) trên cùng một domain.
data: Dữ liệu được gửi lên server khi thực thi một request Ajax.
dataFilter: Một hàm được dùng để xử lý các dữ liệu response thuần của một XMLHttpRequest.
dataType: Kiểu của dữ liệu mong muốn được trả về từ server.
error: Một hàm sẽ được gọi khi request fails.
global: Dùng để thiết lập xem có gọi các hàm xử lý sự kiện Ajax toàn cục cho request này hay không.
headers: Một object để viết thêm vào các header gửi lên server.
ifModified: Thiết lập giá trị này là true nếu bạn muốn buộc JQuery nhận diện môi trường hiện tại là “local“.
jsonp: Một chuỗi dùng để override tên hàm gọi lại trong một request JSONP.
jsonpCallback: Chỉ định tên hàm gọi lại cho một request JSONP.
mimeType: Một chuỗi chỉ định kiểu mime dùng để override lại kiểu mime của XHR.
password: Mật khẩu được sử dụng với XMLHttpRequest cho response của một request yêu cầu xác thực truy nhập HTTP.
processData: Set giá trị này là false nếu bạn không muốn dữ liệu được truyền vào thiết lập data sẽ được xử lý và biến thành một query kiểu chuỗi.
scriptCharset: Thiết lập thuộc tính charset của một thẻ script dùng cho một request nhưng chỉ áp dụng khi transport script (ví dụ: request chéo giữa các domain với jsonp) được sử dụng.
statusCode: Một object chứa các mã HTTP ở dạng số và các hàm được gọi khi response trả về có chứa một mã tương ứng.
success: Một hàm được gọi khi request thành công.
timeout: Số được thiết lập chỉ định thời gian hết hạn cho một request.
traditional: Thiết lập giá trị true nếu bạn mong muốn param được serialize theo kiểu truyền thống.
type: Kiểu request muốn thực hiện, có thể là POST hay GET …
url: Chuỗi chứa URL mà request được gửi đến.
username: Tên người dùng được sử dụng với XMLHttpRequest cho response của một request yêu cầu xác thực truy nhập HTTP.
xhr: Một hàm gọi lại dùng để tạo một object XMLHttpRequest.
xhrFields: Một object các key-value được thiết lập cho object XHR native.
Lợi ích khi dùng Ajax:
Nhanh, người dùng nhiều khi chỉ muốn đọc dữ liệu trên ngay chính trang HTML nhưng không cần load toàn trang thì Ajax giúp xử lý chuyện đó mà không tốn nhiều thời gian thực thi.
Giảm lượng request đến server do đây là quá trình bất đồng bộ.
Thân thiện với người dùng website.
Bất cập khi dùng Ajax:
Khó SEO, giair thích cho chuyện này chính là "con nhện" không thể xác định được chính xác index của trang.
Nhiều khi bạn muỗn truyền nhiều HTTP Request thông qua Ajax lại không nhanh bằng 1 lần reload lại trang.
Liên quan đến Bookmark (đánh dấu) dữ liệu do người dùng user không thể tiếp cận được Ajax
Dùng Ajax ở đâu ?
Kiểm tra tính đúng đắn cho 1 form trước khi Submit.
Hiển thị Popup
Các tính năng liên quan đến Sort hay Filter
Tính năng Vote, Rating
Các trang web có hộp thoại chat hoặc các Blog comments, các ứng dụng realtime
III, Lời kết
Vậy là sau 2 bài viết, chúng ta đã nắm được những kiến thức cơ bản về Jquey và Ajax. Cùng chờ đợi những chủ đề hay ho mình sắp viết tiếp nhé.
PEACE
Comments