Thứ Hai , Tháng Chín 4 2017
Trang chủ / Công nghệ web / Ajax là gì? Tìm hiểu về các tính năng của Ajax

Ajax là gì? Tìm hiểu về các tính năng của Ajax

Ajax là gì?

AJAX, hoặc (A) đồng bộ (J) avascript (A) nd (X) ML (có xu hướng sử dụng JSON hơn hiện nay), là một hệ thống trong đó Javascript sử dụng một đối tượng trình duyệt để giao tiếp với máy chủ từ xa. Trường hợp sử dụng chung của điều này là để có thể cập nhật giao diện của khách hàng mà không cần phải đi đến một trang khác. Trước khi chúng tôi bắt đầu, một vài lời cảnh báo:

  • Không nên dùng Ajax để đăng nhập và xác thực đăng nhập
  • Người dùng có thể tắt Javascript, hoặc có thể bị hạn chế khi chạy Javascript do chính sách CNTT
  • Với điều này trong tâm trí, khuyên bạn không sử dụng AJAX là giải pháp duy nhất cho các chức năng người dùng quan trọng. Luôn luôn có một dự phòng.

Lưu ý : Bài đăng wiki cộng đồng này sử dụng JQuery để hiển thị các cuộc gọi AJAX ví dụ. Nó được đề nghị cho người mới đến vì nó giấu các vấn đề tương thích trình duyệt của việc thực hiện cuộc gọi AJAX. Vui lòng kiểm tra trang thiết kế web của JQuery để biết thêm thông tin về JQuery.

Lưu ý : Các ví dụ sử dụng giao tiếp với một máy chủ PHP, nhưng bất kỳ ngôn ngữ phía máy chủ sẽ làm việc.

Gọi lại AJAX

Đầu tiên chúng ta có một cuộc gọi AJAX. Trong cuộc gọi AJAX, bạn thiết lập các trình xử lý gọi lại cho các loại sự kiện khác nhau có thể xảy ra. Một quan niệm sai lầm phổ biến có thể được hiển thị trong đoạn mã sau:

// Incorrect!
function makeAjaxCall() {
var result = $.ajax({
url: 'ajax/test.html'
});
return result;
}

Vấn đề ở đây là khi trình duyệt của bạn tạo một yêu cầu AJAX, nó có thể trở lại thành công, hoặc như là một thất bại. Ví dụ: nếu bạn thử một trang truy cập không tồn tại, hoặc nếu máy chủ có một lỗi nội bộ. Để giữ mọi thứ được tổ chức càng tốt, AJAX yêu cầu bạn tạo các chức năng gọi lại để xử lý yêu cầu dữ liệu. Cách chính xác là như sau:

// Correct!
function makeAjaxCall() {
$.ajax({
url: 'ajax/test.html',
success: function(data) {
alert('Horray the AJAX call succeeded!');
},
error: function(xhr, error) {
alert('Holy errors batman!');
}
});
}

Bản chất của các cuộc gọi AJAX

Các cuộc gọi AJAX có thể là không đồng bộ hoặc đồng bộ. Không đồng bộ có nghĩa là trình duyệt sẽ thực hiện yêu cầu AJAX và tiếp tục làm những việc khác. Đồng bộ có nghĩa là trình duyệt sẽ dừng những gì nó làm cho đến khi cuộc gọi AJAX hoàn thành. Dưới đây là một ví dụ về sự khác biệt trong hai mã:

// An asynchronous call
// This is the default
$.ajax({
url: '/server.php',
success: function(data) {
alert('Horray the AJAX call succeeded!');
},
error: function(xhr, error) {
alert('Holy errors batman!');
}
});
// This will get called right away
myFunction();

Bây giờ cho một cuộc gọi đồng bộ:

// A synchronous call
$.ajax({
url: '/server.php',
async: false, // set the property here
success: function(data) {
alert('Horray the AJAX call succeeded!');
},
error: function(xhr, error) {
alert('Holy errors batman!');
}
});
// This won't get called until the AJAX returns!
myFunction();

Cảnh báo : Các cuộc gọi đồng bộ làm cho trình duyệt không thể làm bất cứ điều gì cho đến khi trình duyệt hoàn thành cuộc gọi. Điều này có tiềm năng khóa trình duyệt! Chỉ sử dụng nó nếu bạn thực sự biết điều bạn đang làm! 99% thời gian bạn muốn gọi không đồng bộ AJAX.

Lưu ý : Các cuộc gọi đồng bộ không có nghĩa là bạn có thể thoát khỏi việc không cài đặt trình điều khiển gọi lại. Bạn vẫn phải đối phó với các kết quả sử dụng callbacks.

Đường dẫn truyền thông Client-> Server

Hình ảnh này minh hoạ cách AJAX được sử dụng để giao tiếp với một máy chủ từ xa. Đầu tiên các giao diện mã AJAX với một đối tượng trình duyệt, làm cho cuộc gọi thực tế đến máy chủ. Máy chủ sẽ xử lý yêu cầu và gửi lại kết quả cho trình duyệt, sau đó sẽ xem kết quả cuộc gọi để xác định xem nó cần gọi trình xử lý sự thành công hay trình xử lý lỗi. Tuy nhiên, có một vấn đề có thể ngăn chặn truyền thông ở tất cả, mà thường được gọi là cùng một chính sách xuất xứ.

Lưu ý: Từ quan điểm của máy chủ, cuộc gọi AJAX sẽ giống như thể khách hàng đã thực hiện yêu cầu theo cách thủ công. Điều đó có nghĩa là máy chủ có thể sử dụng những thứ như phiên và các dữ liệu khách hàng cụ thể khác.

Chính sách xuất sắc

Chính sách nguồn gốc giống nhau về cơ bản có nghĩa là nếu cuộc gọi AJAX của bạn là từ một trang được lưu trữ trên http://www.mysite.com, bạn không thể thực hiện cuộc gọi http://www.othersite.comnhư minh họa ở đây:

Một cách để bạn có thể có được xung quanh đây là thông qua một dịch vụ proxy. Đây là nơi bạn giao diện với một kịch bản trên cùng một máy chủ, và lần lượt giao diện với trang web bạn muốn, thông qua các cuộc gọi CURL. Sau đây minh hoạ phương thức proxy này:

Chú ý Lưu ý rằng máy chủ của bên thứ ba sẽ không nhìn thấy yêu cầu như là đến từ khách hàng, nhưng như đến từ máy chủ. Một số máy chủ cau mày khi cùng một IP thực hiện nhiều cuộc gọi đến các máy chủ của họ. Điều này có thể khiến bạn bị chặn, do đó hãy xác minh rằng trang web được đề cập không được với thiết lập này.

Lưu ý : Có một số trường hợp không áp dụng cùng chính sách nguồn gốc, chẳng hạn như các cuộc gọi mở rộng của Google Chrome (bạn phải đặt quyền cho từng trang web), các cuộc gọi Greasemonkey nhất định và Adobe Air.

Bây giờ khái niệm cuối cùng để đi qua là làm thế nào các máy chủ trả về dữ liệu cho khách hàng để tương tác với.

Trả về dữ liệu AJAX

Vì nó là một lựa chọn rất phổ biến, chúng ta sẽ sử dụng JSON, hoặc (J) ava (S) cript (O) bation (N) otation, để truyền lại dữ liệu. JSON về cơ bản sẽ như thế này:

{
color: "red",
value: "#f00"
}

Chuỗi này có thể được biến thành một đối tượng JavaScript, cung cấp truy cập dễ dàng đến các kết quả máy chủ.

Chú ý Vì đây là mã JavaScript hợp lệ, nên nhiều người sử dụngeval()để nhanh chóng tạo các đối tượng js. Xin đừng làm điều này . Nó mở ra cho bạn những vấn đề bảo mật nếu kết quả có mã độc hại trong đó. Luôn sử dụng trình phân tích cú pháp JSON kiểm tra dữ liệu an toàn!

Sử dụng ví dụ trước, chúng ta có thể truy cập các giá trị khác nhau như sau:

$.ajax({
url: '/server.php',
// It's a good idea to explicitly declare the return type
dataType: 'json',
success: function(json) {
alert("The color is: " + json.color + " and the value is: " + json.value);
},
error: function(xhr, error) {
alert('Holy errors batman!');
}
});

Lưu ý cách dễ dàng để truy cập các giá trị của sự trở lại. Một lựa chọn phổ biến nữa là lấy HTML từ một máy chủ và đưa nó vào một <div>hoặc một phần tử khác. Dưới đây là một ví dụ về điều này:

$.ajax({
url: '/server.php',
// It's a good idea to explicitly declare the return type
dataType: 'html',
success: function(html) {
$("#mydiv").html(html);
},
error: function(xhr, error) {
alert('Holy errors batman!');
}
});
// Some JS/HTML here
<div id="mydiv"></div>

Trong trường hợp trả lại thành công, nội dung của di <div>chúc sẽ được điền với HTML trả lại.

Điều này kết luận về bài đăng wiki cộng đồng trên AJAX. Tôi hy vọng nó sẽ hữu ích trong việc giúp bạn hiểu AJAX, hoặc như một cách dễ dàng để trả lời các câu hỏi phổ biến về nó.

Xem thêm:

 

Rate this post

Giới thiệu Tuyết Ngân

Có thể bạn quan tâm

Codelgniter Framework là gì? Tìm hiểu về Codelgniter Framework

Tóm tắt bài viết CodeIgniter framework là gì?Tại sao bạn nên sử dụng CodeIgniter framework?Các …

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

--------------------------------------------------->