Kiến thức

Chương 6: AJAX – Phần 1

Tải dữ liệu không đồng bộ có nghĩa là một khi truy vấn HTTP gửi đi để lấy đoạn mã HTML về được sử dụng, đoạn mã vừa gửi truy vấn đó lập tức quay lại hoạt động mà không chờ thêm gì nữa. Khoảng một lúc sau, trình duyệt nhận được phản hồi từ server và xử lý nó. Thường thì đây là điều mình muốn bởi vì bạn không muốn khóa cửa sổ duyệt web của người dùng trong khi chờ tải dữ liệu.

Nhưng nếu bạn muốn đoạn mã phải chờ cho đến khi quá trình tải hoàn thành, jQuery cung cấp một hàm truy hồi cho vấn đề này. Chúng ta hãy xem ví dụ dưới đây

Làm việc với đối tượng JavaScript

Để tải được một trang HTML được định dạng đầy đủ rất đơn giản, nhưng cũng có lúc chúng ta muốn đoạn mã của mình có thể xử lý dữ liệu trước khi nó được hiển thị. Trong trường hợp này, chúng ta cần lấy dữ liệu ra với cấu trúc mà chúng ta có thể dùng JavaScript để thao tác.

Với bộ chọn jQuery, chúng ta có thể di chuyển qua lại trong HTML và thao tác với nó, nhưng trước hết nó phải được chèn vào tài liệu đã. Định dạng dữ liệu thuần JavaScript hơn có nghĩa là bạn ít phải viết ít mã hơn.
Lấy ra một đối tượng JavaScript

Như chúng ta thường thấy, đối tượng JavaScript chỉ là tập hợp của những cặp key-value, và có thể được định nghĩa ngắn gọn với cặp ngoặc cong {}. Trái lại, mảng JavaScript lại được định nghĩa bằng cặp ngoặc vuông []. Kết hợp hai khái niệm này, chúng ta có thể biểu đạt được những cấu trúc phức tạp và giàu dữ liệu.

Khái niệm JavaScript Object Notation (JSON) được giới thiệu bởi Douglas Crockford để tận dụng thế mạnh về cú pháp đơn giản này. Bản ký pháp này cho chúng ta một sự thay thế hoàn hảo cho định XML, mà có lúc rất cồng kềnh.

{ 
"key": "value", 
"key 2": [ 
"array", 
"of", 
"items" 
]
}

Lưu ý: Nếu bạn muốn biết thêm những thông tin về thế mạnh của JSON và nhứng ứng dụng của nó cho những ngôn ngữ lập trình khác, bạn có thể vào trang web www.json.org

Chúng ta có thể mã hóa dữ liệu của chúng ta bằng cách sử dụng định dạng này bằng nhiều cách. Chúng ta sẽ để vài mục từ trong từ điển ở một file JSON và đặt tên là b.json. Đoạn mã sẽ như sau

[ 
{ 
"term": "BACCHUS", 
"part": "n.", 
"definition": "A convenient deity invented by the...", 
"quote": [ 
"Is public worship, then, a sin,", 
"That for devotions paid to Bacchus", 
"The lictors dare to run us in,", 
"And resolutely thump and whack us?" 
], 
"author": "Jorace" 
}, 
{ 
"term": "BACKBITE", 
"part": "v.t.", 
"definition": "To speak of a man as you find him when..." 
}, 
{ 
"term": "BEARD", 
"part": "n.", 
"definition": "The hair that is commonly cut off by..." 
},

Để lấy dữ liệu này ra, chúng ta sẽ sử dụng phương thức $.getJSON(), phương thức này sẽ tìm nạp tệp tin và xử lý nó, kết quả của đoạn mã được gọi sẽ là đối tượng JavaScript.

Hàm jQuery toàn cục

Cho đến thời điểm này, những phương thức mà chúng ta sử dụng được gán vào một đối tượng jQuery mà chúng ta tạo ra bằng cách sử dụng hàm $(). Bộ chọn cho phép chúng ta chọn ra một điểm trong DOM để các phương thức của chúng ta làm việc trên chúng. Nhưng hàm $.getJSON thì lại khác. Nó sẽ không được áp dụng lên bất cứ phần tử DOM nào, đối tượng trả về phải được sử dụng cho đoạn mã chứ không phải là chèn vào trang. Chính vì lý do này mà hàm getJSON() được định nghĩa là phương thức đối tượng jQuery toàn cục (một đối tượng được gọi bởi jQuery hoặc được $ xác định một lần bởi jQuery) chứ không phải một phiên bản đối tượng jQuery (đối tượng được chúng ta tạo với hàm $().

Nếu JavaScript có class như những ngôn ngữ lập trình hướng đối tượng khác, thì chúng ta sẽ gọi $.getJSON() là một phương thức class. Do vậy chúng ta gọi phương pháp dạng này là hàm toàn cục, trong thực tế, nó là những hàm sử dụng dấu cách jQuery để tránh bị xung đột với tên của các hàm khác.

Để sử dụng hàm này, chúng ta truyền qua tên file như trước:

$(document).ready(function() { 
$('#letter-b a').click(function() { 
$.getJSON('b.json'); 
return false; 
});
});

Đoạn mã trên không tạo ra thay đổi gì rõ ràng khi bạn nhấp vào đường liên kết. Hàm được gọi sẽ tải tệp tin, nhưng chúng ta chưa bảo JavaScript phải làm gì với dữ liệu có được. Do vậy chúng ta phải sử dụng hàm truy hồi.

Hàm $.getJSON() lấy vào một tham số thứ 2, tham số này cũng chính là một hàm được gọi khi quá trình tải hoàn thành. Như đã nói trước đây, những cuộc gọi của AJAX là dạng không đồng bộ, cho nên hàm truy hồi sẽ đợi cho dữ liệu được tải hết thay vì chạy đoạn mã ngay lập tưc. Hàm truy hồi này cũng lấy vào một tham số nữa dùng để chứa dữ liệu thu về. Nên chúng ta có thể viết:

$(document).ready(function() { 
$('#letter-b a').click(function() { 
$.getJSON('b.json', function(data) { 
}); 
return false; 
});
});

Ở đây chúng ta sử dụng một hàm ẩn như là hàm truy hồi, như một cách viết tắt phổ biến trong jQuery. Một hàm có thể được sử dụng làm hàm truy hồi.

Bên trong hàm này, chúng ta có thể sử dụng biến số data để di chuyển trong cấu trúc dữ liệu nếu cần. Chúng ta cần phải chạy lên mảng trên cùng, xây dựng HTML cho từng phần tử. Chúng ta cũng có thể làm việc này với một vòng for, nhưng thay vào đó, chúng ta sẽ làm quen với một hàm toàn cục nữa của jQuery là $.each(). Chúng ta đã biết một hàm gần giống nó là phương thức .each() trong chương 5. Thay vì chỉ làm việc với một đối tượng jQuery, hàm này lấy vào một mảng hoặc một biểu đồ làm tham số thứ nhất và một hàm truy hồi làm tham số thứ 2. Mỗi lần vòng lặp chạy thì chỉ số lặp hiện tại và phần tử hiện tại trong mảng hoặc biểu đồ được chuyển vào như hai tham số cho hàm truy hồi.

$(document).ready(function() { 
$('#letter-b a').click(function() { 
$.getJSON('b.json', function(data) { 
$('#dictionary').empty(); 
$.each(data, function(entryIndex, entry) { 
var html = '<div class="entry">'; 
html += '<h3 class="term">' + entry['term'] + '</h3>'; 
html += '<div class="part">' + entry['part'] + '</div>'; 
html += '<div class="definition">'; 
html += entry['definition']; 
html += '</div>'; 
html += '</div>'; 
$('#dictionary').append(html); 
}); 
}); 
return false; 
});
});

Trước khi vòng lặp bắt đầu, chúng ta đã làm rỗng thẻ <div id=’dictionary’>, do vậy chúng ta có thể chèn vào mã HTML vừa tạo được. Sau đó chúng ta sử dụng hàm $.each() để kiểm tra từng phần tử một, xây dựng cấu trúc HTML dựa vào nội dung của biểu đồ. Cuối cùng chúng ta biến đoạn mã HTML thành cây DOM bằng cách gán nó vào thẻ <div>

Lưu ý: cách này giả sử rằng dữ liệu tải về là an toàn để sử dụng với HTML, nó không được có những ký hiệu như kiểu <.

Bây giờ chỉ còn phần trích dẫn của mục từ trong từ điển, bằng cách sử dụng một vòng lặp $.each() nữa.

$(document).ready(function() { 
$('#letter-b a').click(function() { 
$.getJSON('b.json', function(data) { 
$('#dictionary').empty(); 
$.each(data, function(entryIndex, entry) { 
var html = '<div class="entry">'; 
html += '<h3 class="term">' + entry['term'] + '</h3>'; 
html += '<div class="part">' + entry['part'] + '</div>'; 
html += '<div class="definition">'; 
html += entry['definition']; 
if (entry['quote']) { 
html += '<div class="quote">'; 
$.each(entry['quote'], function(lineIndex, line) { 
html += '<div class="quote-line">' + line + '</div>';
}); 
if (entry['author']) { 
html += '<div class="quote-author">' + entry['author'] + '</div>'; 
} 
html += '</div>'; 
} 
html += '</div>'; 
html += '</div>'; 
$('#dictionary').append(html); 
}); 
}); 
return false; 
});
});

Bây giờ bạn có thể thử nhấp chuột vào chữ B để xem thử kết quả

jQuery

Lưu ý: định dạng JSON rất ngắn gọn nhưng nghiêm ngặt. Mỗi dấu ngoặc, dấu nháy hay dấu phải đều phải đầy đủ và chính xác, nếu không tệp tin sẽ không được tải. Trong phần lớn các trình duyệt, thậm chí nó còn không báo lỗi mà cả đoạn mã hoàn toàn không chạy một cách âm thầm.

Related posts

Hướng dẫn sử dụng và tạo plugin Testimonials hiển thị ý kiến khách hàng

admin

Backup website của bạn lên mây với: WordPress backup to Dropbox

admin

Design Idea #01: Giới thiệu

admin

Leave a Comment