tung anh

fsfsa

1 www.izwebz.com Demon Warlock  AJAX     Asynchronous JavaScript and XML    .  XMLHttpRequest     Thêm JavaScript    XMLHttpRequest  2 www.izwebz.com Demon Warlock        <div id="dictionary"> </div>     <div class="letters"> <div class="letter" id="letter-a"> <h3><a href="#">A</a></h3> </div> <div class="letter" id="letter-b"> <h3><a href="#">B</a></h3> </div> <div class="letter" id="letter-c"> <h3><a href="#">C</a></h3> </div> <div class="letter" id="letter-d"> <h3><a href="#">D</a></h3> </div> </div>  3 www.izwebz.com Demon Warlock  Gán HTML vào     a.html. File  <div class="entry"> <h3 class="term">ABDICATION</h3> <div class="part">n.</div> <div class="definition"> An act whereby a sovereign attests his sense of the high temperature of the throne. <div class="quote"> <div class="quote-line">Poor Isabella's Dead, whose abdication</div> <div class="quote-line">Set all tongues wagging in the Spanish nation.</div> <div class="quote-line">For that performance 'twere unfair to scold her:</div> <div class="quote-line">She wisely left a throne too hot to hold her.</div> <div class="quote-line">To History she'll be no royal riddle &mdash;</div> 4 www.izwebz.com Demon Warlock <div class="quote-line">Merely a plain parched pea that jumped the griddle.</div> <div class="quote-author">G.J.</div> </div> </div> </div> <div class="entry"> <h3 class="term">ABSOLUTE</h3> <div class="part">adj.</div> <div class="definition"> Independent, irresponsible. An absolute monarchy is one in which the sovereign does as he pleases so long as he pleases the assassins. Not many absolute monarchies are left, most of them having been replaced by limited monarchies, where the sovereign's power for evil (and for good) is greatly curtailed, and by republics, which are governed by chance. </div> </div> 5 www.izwebz.com Demon Warlock   <html>, <head> và <body>.  Nh  $(document).ready(function() { $('#letter-a a').click(function() { $('#dictionary').load('a.html'); return false; }); });    <div id='dictionary'> 6 www.izwebz.com Demon Warlock       xong $(document).ready(function() { $('#letter-a a').click(function() { $('#dictionary').load('a.html'); alert('Loaded!'); return false; }); });    7 www.izwebz.com Demon Warlock                 c      -value, và có     .     8 www.izwebz.com Demon Warlock { "key": "value", "key 2": [ "array", "of", "items" ] }   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 n  mn mã s  [ { "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 ." }, 9 www.izwebz.com Demon Warlock          $.getJSON     n  .   hàm    $(document).ready(function() { $('#letter-b a').click(function() { $.getJSON('b.json'); return false; }); });   . e   10 www.izwebz.com Demon Warlock   $(document).ready(function() { $('#letter-b a').click(function() { $.getJSON('b.json', function(data) { }); return false; }); });  . data        . $(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); }); }); [...]... nó là một phần của chu i truy vấn Trong trường hợp trên, giá trị key luôn là term nhưng value sẽ được lấy từ chữ của m i đường liên kết Nên nếu bây giờ bạn nhấp chuột vào đường liên kết đầu tiên trong danh sách thì định nghĩa của từ đó sẽ xuất hiện 24 www.izwebz.com Demon Warlock Tất cả những đường liên kết đều có địa chỉ dù cho chúng ta không sử dụng nó trong mã Điều này cho phép những người dùng không... được gọi m i khi sự giao tiếp AJAX xảy ra, mà không quan tâm đến mã nào gọi nó Chúng ta có thể sử dụng những phương thức này để thông báo cho người dùng biết trong trường hợp mạng của họ không được nhanh Đoạn mã HTML sẽ có một đoạn thông báo “đang tải dữ liệu”: Loading 29 www.izwebz.com Demon Warlock Thông báo này chỉ là một đoạn mã HTML bình thường, nhưng bạn cũng có thể... để làm được việc này rất đơn giản $(document).ready(function() { $('.term').click(function() { $(this).siblings('.definition').slideToggle(); }); }); Khi mục từ bị nhấp chuột, jQuery sẽ tìm phần tử là anh em họ” của nó mà có class là „definition‟, và trượt nó lên trên hoặc xuống dưới Mọi việc nghe có vẻ đúng, nhưng khi ta nhấp chuột vào thì sẽ không xảy ra việc gì Vấn đề là mục từ chưa được thêm vào... nguồn, tập hợp chúng lại thành một feed trên server và phát hành tệp mới này đến người dùng khi được yêu cầu Để tải dữ liệu từ một vị trí từ xa mà không cần sự can thiệp của server, chúng ta phải “gian manh” một tí Một cách thường dùng trong trường hợp bạn muốn tải một tệp JavaScript bên ngoài là chèn cặp thẻ khi cần Bởi vì jQuery có thể giúp chúng ta chèn những phần tử DOM mới, nên chúng ta