Hướng dẫn dùng ajax 1999 trong PHP
|
Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article) Show Nếu đã theo dõi ba bài hướng dẫn trước, thì bạn chắc đã hiểu rõ về AJAX. Trong bài cuối cùng này, chúng ta sẽ tổng hợp mọi thứ bằng cách làm việc với một ví dụ phức tạp hơn. Mã HTMLĐể có được một ý tưởng về cấu trúc của ví dụ này, hãy xem các mã đánh dấu sau đây: Mã đánh dấu cho phần tử
Lưu ý các liên kết. Những liên kết này tương ứng với các framework khác nhau cho front-end. Như chúng ta sẽ thấy trong phần tiếp theo, mỗi khi chúng ta nhấn vào các liên kết,
một yêu cầu AJAX sẽ được thực hiện. Sau đó, phần tử với lớp Dưới đây là minh hoạ cho phần tử  Mã đánh dấu của ModalBước tiếp theo là xem xét cấu trúc của modal. Dưới đây là mã HTML nó:
Như bạn thấy, modal có chứa một vài phần tử rỗng. Chúng ta đặt chúng trong HTML bởi vì văn bản của chúng sẽ thay đổi tùy thuộc vào liên kết mà chúng ta bấm vào và dữ liệu trả về mà chúng ta lấy được. Hình ảnh dưới đây cho thấy cách modal xuất hiện lần đầu: Theo mặc định, modal bị ẩn. Ngoài ra, chúng ta cũng sẽ ẩn loader. Nó sẽ chỉ xuất hiện khi yêu cầu AJAX được kích hoạt. Hãy xem các luật CSS tương ứng: .modal {
opacity: 0;
}
.loader {
display: none;
}
Lưu ý rằng chúng ta sử dụng thuộc tính Tạo ra dữ liệu trả về JSONĐối với các mục đích của ví dụ này, chúng ta sẽ chọn xây dựng dữ liệu trả về JSON của chính chúng ta. Cụ thể, phản hồi mong muốn (là tập tin Hơn nữa, giá trị của thuộc tính [
{
"url": "http://getbootstrap.com/",
"numberOfStars": "88.260+",
"currentVersion": "3.3.5",
"name": "Bootstrap"
},
{
"url": "http://foundation.zurb.com/",
"numberOfStars": "21.180+",
"currentVersion": "5.5.3",
"name": "Foundation"
},
// 4 more objects here
]
Lưu ý: các giá trị mà chúng ta sử dụng cho thuộc tính Tương tự như các ví dụ trước đó trong loạt bài này, chúng ta sẽ sử dụng AJAX để yêu cầu một tập tin tĩnh. Tuy nhiên, nếu chúng ta muốn nhúng nội dung từ các trang web khác (ví dụ như Google Maps, Flickr), chúng ta nên đọc tài liệu API của chúng, và nếu cần thiết, áp dụng một API key. Hơn nữa, dữ liệu mục tiêu của chúng ta đặt trên cùng một máy chủ với trang demo. Do đó, chúng ta sẽ hạn chế các giới hạn đó có thể xảy ra khi tương tác với các dịch vụ bên thứ ba (xem phần "Hạn chế của các yêu cầu AJAX" trong phần sau của bài này). Cài đặt yêu cầu AJAXTrong phần này, chúng ta sẽ sử dụng hàm var $list = $('.m-info'),
var $message = $('.m-message');
var $modal = $('.modal');
var $loader = $('.loader');
var $framework;
Bây giờ là lúc để xem xét đoạn mã tương ứng cho việc thực thi của yêu cầu: $('.boxes a').on('click', function(e) {
e.preventDefault();
$framework = $(this).text();
$.ajax({
url: 'Demo.json',
dataType: 'json',
beforeSend: function() {
$loader.show();
}
}).done(successFunction)
.fail(errorFunction)
.always(alwaysFunction);
});
Bạn sẽ nhận thấy cú pháp cho hàm $.ajax([settings]) Tham số
Trước khi chúng ta tiếp tục, cần phải lưu ý đến ba điều:
Các phương thức PromiseHàm Trong ví dụ này, chúng ta sử dụng các phương thức Promise sau đây:
Phương thức Hàm callback (ví dụ Phương thức Hàm callback (ví dụ Các phương thức Trạng thái của yêu cầu xác định các đối số của hàm. Trong trường hợp một yêu cầu thành công, thì hàm callback (ví dụ Lưu ý: Thay vì các phương thức Promise Hiển thị Dữ liệuNếu yêu cầu thành công, chúng ta có thể lấy dữ liệu trả về. Sau đó, chúng ta phân phối nó để gắn vào trong các phần tử rỗng của modal. Xem đoạn mã cho hàm callback function successFunction(data) {
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {
if ($framework === data[i].name) {
$list.show();
$message.hide();
$list.find('li:nth-of-type(2)').text($framework);
$list.find('li:nth-of-type(4)').text(data[i].currentVersion);
$list.find('li:nth-of-type(6)').text(data[i].numberOfStars);
$list.find('li:nth-of-type(8)').html('' + data[i].url + '');
break;
} else {
$list.hide();
$message.show().text('No data received for this framework!');
}
}
} else {
$list.hide();
$message.text('No data received from your respose!');
}
}
Mặc dù chúng ta đã cập nhật nội dung của modal của chúng ta, thì nó vẫn bị ẩn. Nó hiển thị và loader biến mất khi yêu cầu thành công. Sau đó, hàm callback function alwaysFunction() {
$loader.hide();
$modal.addClass('active');
}
Lớp .active {
opacity: 1;
z-index: 10;
transform: scale(1);
}
Dưới đây bạn có thể thấy diện mạo mong muốn của modal nếu chúng ta nhấn vào liên kết có chữ Một vài tình huốngĐiều quan trọng cần phải hiểu là các đoạn mã được thực thi trong những trường hợp nhất định. Hãy bao quát hai trường hợp phổ biến:
Xử lý các lỗiVì vậy, chúng ta xem xét đoạn mã được chạy khi yêu cầu thành công. Nhưng điều gì sẽ xảy ra nếu yêu cầu thất bại? Trong trường hợp của chúng ta, một yêu cầu không thành công, chúng ta ẩn danh sách và hiển thị một tin nhắn tùy biến. Đây là đoạn mã của hàm function failFunction(request, textStatus, errorThrown) {
$list.hide();
$message.text('An error occurred during your request: ' + request.status + ' ' + textStatus + ' ' + errorThrown);
}
Để tự làm quen với đoạn mã này, chúng ta chỉ định một URL không tồn tại. Do đó, phương thức Lưu ý: Một lần nữa, thông báo lỗi có thể khác nhau nếu bạn chạy ví dụ này tại cục bộ. Đây là bản demo nhúng từ Codepen: Kết luậnTrong hướng dẫn này, chúng ta tổng hợp bài nghiên cứu về AJAX từ góc nhìn của một nhà thiết kế - mà bạn đã theo dõi! Tôi hy vọng rằng bạn thấy loạt bài này hữu ích và bạn đã học được một số kỹ năng mới. Bước tiếp theo, tôi khuyên bạn bạn xem xét những điều sau đây:
|
