Kiến thức

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

Chạy một đoạn mã

Đôi khi chúng ta không muốn lấy về tất cả mã JavaScript khi trang web được tải lần đầu tiên. Chúng ta không biết đoạn mã nào là cần thiết cho đến khi có những tương tác của người dùng. Chúng ta cũng có thể sử dụng thẻ <script> nếu cần nhưng có một cách khác hay hơn để chèn thêm mã vào là dùng jQuery để tải trực tiếp tệp tin .js
Để chèn vào một đoạn mã cũng đơn giản như khi chèn một đoạn HMTL. Trong trường này chúng ta sử dụng hàm toàn cục $.getScript(), hàm này cũng như những hàm cùng chức năng của nó, chấp nhận một địa chỉ URL trỏ đến vị trí của tệp tin.

$(document).ready(function() { 
$('#letter-c a').click(function() { 
$.getScript('c.js'); 
return false; 
});
});

Ở ví dụ cuối cùng của chúng ta, chúng ta cần phải xử lý dữ liệu trả về để mình có thể làm một cái gì đó với tệp tin được tải về. Nhưng với những tệp tin chứa mã, quá trình xử lý là hoàn toàn tự động, một khi được tải đoạn mã sẽ tự chạy.

Mã được tải bằng cách này sẽ chạy trong ngữ cảnh toàn cục của trang hiện tại. Điều đó có nghĩa là chúng có thể đến được tất cả những hàm và các biến số được khai báo toàn cục, kể cả bản thân jQuery. Cho nên chúng ta có thể bắt chước ví dụ về JSON để chuẩn bị và chèn HTML vào trang khi đoạn mã được thực thi, và đặt đoạn mã này vào tệp c.js:

var entries = [ 
{ 
"term": "CALAMITY", 
"part": "n.", 
"definition": "A more than commonly plain and..." 
}, 
{ 
"term": "CANNIBAL", 
"part": "n.", 
"definition": "A gastronome of the old school who..." 
}, 
{ 
"term": "CHILDHOOD", 
"part": "n.", 
"definition": "The period of human life intermediate..." 
}, 
{ 
"term": "CLARIONET", 
"part": "n.", 
"definition": "An instrument of torture operated by..." }, 
{ 
"term": "COMFORT", 
"part": "n.", 
"definition": "A state of mind produced by..." 
}, 
{ 
"term": "CORSAIR", 
"part": "n.", 
"definition": "A politician of the seas." 
}
];
var html = '';
$.each(entries, function() { 
html += '<div class="entry">'; 
html += '<h3 class="term">' + this['term'] + '</h3>'; 
html += '<div class="part">' + this['part'] + '</div>'; 
html += '<div class="definition">' + this['definition'] + '</div>'; 
html += '</div>';
});
$('#dictionary').html(html);
}, 
{ 
"term": "COMFORT", 
"part": "n.", 
"definition": "A state of mind produced by..." 
}, 
{ 
"term": "CORSAIR", 
"part": "n.", 
"definition": "A politician of the seas." 
}
];
var html = '';
$.each(entries, function() { 
html += '<div class="entry">'; 
html += '<h3 class="term">' + this['term'] + '</h3>'; 
html += '<div class="part">' + this['part'] + '</div>'; 
html += '<div class="definition">' + this['definition'] + '</div>'; 
html += '</div>';
});
$('#dictionary').html(html);

Bạn thử nhấn vào chữ cái C để xem kết quả.

jQuery
Tải tài liệu XML

XML là một phần trong những chữ cái viết tắt của AJAX, nhưng chúng ta vẫn chưa tải XML lần nào. Cách tải tệp XML cũng khá đơn giản và rất giống với cách mà chúng ta làm với JSON. Trước hết chúng ta cần một tệp XML là đặt tên là d.xml và chứa những dữ liệu chúng ta cần hiển thị.

<?xml version="1.0" encoding="UTF-8"?>
<entries> 
<entry term="DEFAME" part="v.t."> 
<definition> 
To lie about another. To tell the truth about another. 
</definition> 
</entry> 
<entry term="DEFENCELESS" part="adj."> 
<definition> 
Unable to attack. 
</definition> 
</entry> 
<entry term="DELUSION" part="n."> 
<definition> 
The father of a most respectable family, comprising 
Enthusiasm, Affection, Self-denial, Faith, Hope, 
Charity and many other goodly sons and daughters. 
</definition> 
<quote author="Mumfrey Mappel"> 
<line>All hail, Delusion! Were it not for thee</line> 
<line>The world turned topsy-turvy we should see; 
</line> 
<line>For Vice, respectable with cleanly fancies, 
</line> 
<line>Would fly abandoned Virtue's gross advances. 
</line> 
</quote> 
</entry> 
<entry term="DIE" part="n."> 
<definition> 
The singular of "dice." We seldom hear the word, 
because there is a prohibitory proverb, "Never say 
die." At long intervals, however, some one says: "The 
die is cast," which is not true, for it is cut. The 
word is found in an immortal couplet by that eminent 
poet and domestic economist, Senator Depew: 
</definition> 
<quote> 
<line>A cube of cheese no larger than a die</line> 
<line>May bait the trap to catch a nibbling mie.</line> 
</quote> 
</entry>
</entries>

Tất nhiên dữ liệu này có thể được biểu thị bằng nhiều cách, và một số phần rất giống với cấu trúc mà chúng ta đã làm với HTML và JSON trước đây. Nhưng trong ví dụ này bạn sẽ được làm quen với một vài chức năng của XML được thiết kế để con người còn có thể hiểu được, như là cách sử dụng thuộc tính cho term và part thay vì dùng thẻ.
Chúng ta cũng bắt đầu hàm với cách quen thuộc

$(document).ready(function() { 
$('#letter-d a').click(function() { 
$.get('d.xml', function(data) { 
}); 
return false; 
});
});

Lần này chúng ta sử dụng hàm $.get(). Nói chung, hàm này chỉ đơn thuần là truy xuất tệp tin ở địa chỉ URL cho trước và cung cấp một đoạn chữ trắng không định dạng cho hàm truy hồi. Nhưng nếu phản hồi lại là định dạng XML dựa vào MINE type của server cung cấp, hàm truy hồi sẽ nhận được cây XML DOM.

Cũng may cho chúng ta là jQuery có khả năng di chuyển rất tốt trong DOM. Chúng ta có thể sử dụng phương thức .find(), .filter() và những phương thức di chuyển khác trong tài liệu XML y như cách mà chúng ta làm việc với HTML.

$(document).ready(function() { 
$('#letter-d a').click(function() { 
$.get('d.xml', function(data) { 
$('#dictionary').empty(); 
$(data).find('entry').each(function() { 
var $entry = $(this); 
var html = '<div class="entry">'; 
html += '<h3 class="term">' + $entry.attr('term') 
+ '</h3>'; 
html += '<div class="part">' + $entry.attr('part') 
+ '</div>'; 
html += '<div class="definition">'; 
html += $entry.find('definition').text(); 
var $quote = $entry.find('quote'); 
if ($quote.length) { 
html += '<div class="quote">'; 
$quote.find('line').each(function() { 
html += '<div class="quote-line">' 
+ $(this).text() + '</div>'; 
}); 
if ($quote.attr('author'))
html += '<div class="quote-author">' 
+ $quote.attr('author') + '</div>'; 
} 
html += '</div>'; 
} 
html += '</div>'; 
html += '</div>'; 
$('#dictionary').append($(html)); 
}); 
}); 
return false; 
});
});

Bạn nhấn thử chữ D để xem kết quả

jQuery

Đây là một cách mới trong những phương thức di chuyển trong DOM mà chúng ta đã biết, cho ta thấy tính linh động của bộ chọn CSS trong jQuery. Cú pháp của CSS thường được sử dụng để làm đẹp cho trang HTML, cho nên bộ chọn tiêu chuẩn trong file .css sử dụng tên thẻ HTML như div và body để tìm đến nội dung. Tuy nhiên, jQuery cũng có thể sử dụng những thẻ XML thông thường như là entry và definition, như cách mà chúng ta sử dụng HTML.

Những bộ chọn nâng cao của jQuery còn cho phép tìm đến những phần ở tài liệu XML trong những trường hợp phức tạp hơn nhiều. Ví dụ chúng ta muốn giới hạn hiển thị những mục từ có chứa câu trích dẫn và thuộc tính author. Để làm được điều này, chúng ta có thể giới hạn những mục từ có chứa các phần tử <quotes> bằng cách thay đổi entry thành entry:has(quote). Sau đó chúng ta cũng có thể giới hạn thêm những mục từ có chứa thuộc tính author trong phần bằng cách viết entry:has(quote[author]). Bây giờ bộ chọn của chúng ta sẽ như sau:

$(data).find('entry:has(quote[author])').each(function() {

Biểu thức bộ chọn bây giờ giới hạn những mục từ như hình

jQuery
Phần 2

Xem tiếp phần 2 của chương này

Related posts

8 lý do không nên làm Flash Website

admin

Tôi nên làm trang web về chủ đề gì?

admin

Accordion with CSS3

admin

Leave a Comment