Scribd Logo
Upload

Welcome to Scribd!

  • Ajax

    Uploaded by

    Le Anh Toan
    10 views33 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOC, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    10 views33 pages

    Ajax

    Uploaded by

    Le Anh Toan

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 33

    Trong nhng nm gn y, ngi ta hay nh gi mt trang web da vo cng ngh m trang ang ng dng.

    . Mt trong nhng cng ngh tr nn rt nh m trong thi gian gn y l ng dng web c gi l AJAX. N l tng hp ca nhiu cng ngh khc nhau. AJAX l ch vit tt ca Asynchronous JavaScript and XML. Nhng cng ngh c trong mt gii php AJAX bao gm

    JavaScript dng tng tc vi ngi dng hoc cc s kin lin quan n trnh duyt. i tng XMLHttpRequest, cho php nhng cu lnh truy vn c gi n server m khng lm gin on nhng tc v khc ca trnh duyt XML trn server, hoc nhng nh dng d liu tng t nh HTML v JSON Thm JavaScript, dng chuyn i d liu t server v hin th n ln trang web.

    Cng ngh AJAX c ca tng nh l v cu tinh ca th gii web, n bin nhng trang web tnh thnh nhng ng dng c tnh tng tc cao. Rt nhiu frameworks c to ra gip cc lp trnh vin hc cch s dng n, chnh bi s khng nht qun ca trnh duyt trong vic ng dng i tng XMLHttpRequest, jQuery cng khng phi l ngoi l. Chng ta s xem xem AJAX c thc s k diu nh ngi ta hay ni khng.
    Ti d liu khi c yu cu

    ng sau nh hong quang, th AJAX thc s ch l mt cng c dng ti d liu t server v trnh duyt m khng cn phi refresh li trang web. Nhng d liu ny c nhiu nh dng v chng ta cng c nhiu la chn lm vic vi n khi n c ti xong. Chng ta s xy dng mt trang web hin th nhng t mi trong cun t in, cc nhm t c gom li di mt ch ci nh trong t in. M HTML nh dng vng ni dung ca trang s nh sau: 1<div id="dictionary"> 2</div> Yep! Ch c vy thi. Trang web ca chng ta s khng c ni dung no ht. Chng ta s s dng nhng phng thc AJAX ca jQuery hin th th <div> vi cun t in. Chng ta s cn mt ni kch hot qu trnh ti d liu, do vy chng ta s thm vo vi ng lin kt sau ny mnh c ni gn b x l s kin. 1 2 3 4
    <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>

    5 6 </div> 7 <div class="letter" id="letter-c"> 8 <h3><a href="#">C</a></h3> 9 </div> 10<div class="letter" id="letter-d"> 11<h3><a href="#">D</a></h3> </div> 12</div> 13 14 Thm mt cht CSS, chng ta c mt trang nh sau

    By gi chng ta tp trung vo phn ly ni dung cho trang.


    Gn HTML vo

    ng dng AJAX thng ch l nhng truy vn c c nhng on m HTML. K thut ny i khi cn c gi l AHAH (Asynchronous HTTP and HTML), li qu n gin vi jQuery. Trc ht chng ta cn mt on m HTML chn, chng ta s to mt file mi t tn l a.html. File HTML ny s c m nh sau: 1 <div class="entry"> 2 <h3 class="term">ABDICATION</h3> <div class="part">n.</div> 3 <div class="definition"> 4 An act whereby a sovereign attests his sense of the high 5 temperature of the throne. 6 <div class="quote"> <div class="quote-line">Poor Isabella's Dead, whose 7 abdication</div> 8 <div class="quote-line">Set all tongues wagging in the 9 Spanish nation.</div> 10<div class="quote-line">For that performance 'twere 11unfair to scold her:</div>

    12 13 14 15<div class="quote-line">She wisely left a throne too 16hot to hold her.</div> <div class="quote-line">To History she'll be no royal 17riddle &mdash;</div> 18<div class="quote-line">Merely a plain parched pea that 19jumped the griddle.</div> 20<div class="quote-author">G.J.</div> 21</div> </div> 22</div> 23<div class="entry"> 24<h3 class="term">ABSOLUTE</h3> 25<div class="part">adj.</div> <div class="definition"> 26Independent, irresponsible. An absolute monarchy is one 27in which the sovereign does as he pleases so long as he 28pleases the assassins. Not many absolute monarchies are 29left, most of them having been replaced by limited 30monarchies, where the sovereign's power for evil (and for good) is greatly curtailed, and by republics, which are 31governed by chance. 32</div> 33</div> 34 35 36 y l hnh m chng ta s c c, tt nhin n nhn hi ci v cha c nh dng g ht.

    Bn cng nn ch l file a.html khng phi l mt ti liu HTML thc s, bi v n khng c th <html>, <head> v <body>. y l nhng th bt buc phi c cho mt ti liu HTML. Nhng file nh th ny c gi l mnh hoc on m, mc ch tn ti ca n ch dng chn vo nhng ti liu HTML khc, y chnh l vic chng ta s lm. 1$(document).ready(function() { 2$('#letter-a a').click(function() { 3$('#dictionary').load('a.html'); 4return false; 5}); }); 6 Phng thc .load() s lm tt c nhng vic cn li cho chng ta. Chng ta ch cho n ng dn n on m cn chn bng cch s dng nhng b chn jQuery thng thng, v sau a URL ca tn file m chng ta cn ti di dng tham s ca phng thc. By gi nu bn nhp chut vo ng lin kt u tin, tp tin s c ti v t vo trong <div id=dictionary>. Trnh duyt s x l on m HTML mi ngay khi n c chn vo.

    Ban nhn thy rng ma HTML cua chung ta a t ng co inh dang CSS con trc y thi no khng co inh dang gi. Bi vi ngay sau khi oan ma HTML nay c chen vao trang thi no se chiu anh hng bi cac lut CSS cua trang no c chen vao. Khi ban th nhn mt ch thi inh nghia cua t o se xut hin gn nh ngay lp tc. y chinh la im nhm ln khi ban lam vic local. Ban se khng thy c thi gian phai i truyn tai tai liu trn mang. Gia s chung ta thm mt thng bao khi inh nghia cua t a tai xong 1$(document).ready(function() { 2$('#letter-a a').click(function() { 3$('#dictionary').load('a.html'); 4alert('Loaded!'); 5return false; }); 6}); 7 Khi ban nhin vao oan ma jQuery trn ban co th nghi rng hp thng bao chi xut hin sau khi tai liu a c tai xong. Nhng lnh cua JavaScript la ng b, lam xong vi tac vu nay mi n tac vu khac theo trt t nghim ngt. Nhng nu oan ma nay c chay th trn host tht thi bang thng bao xut hin va bin

    mt trc khi qua trinh tai hoan thanh, o chinh la do s chm tr cua mang. iu nay xay ra la vi nhng cuc goi cua AJAX la khng ng b. Nu khng thi ta phai goi no la SJAX, nghe a khng thy ph ri. Tai d liu khng ng b co nghia la mt khi truy vn HTTP gi i ly oan ma HTML v c s dung, oan ma va gi truy vn o lp tc quay lai hoat ng ma khng ch thm gi na. Khoang mt luc sau, trinh duyt nhn c phan hi t server va x ly no. Thng thi y la iu minh mun bi vi ban khng mun khoa ca s duyt web cua ngi dung trong khi ch tai d liu. Nhng nu ban mun oan ma phai ch cho n khi qua trinh tai hoan thanh, jQuery cung cp mt ham truy hi cho vn nay. Chung ta hay xem vi du di y
    Lm vic vi i tng JavaScript

    ti c mt trang HTML c inh dang y u rt n gin, nhng cng c lc chng ta mun on m ca mnh c th x l d liu trc khi n c hin th. Trong trng hp ny, chng ta cn ly d liu ra vi cu truc m chng ta c th dng JavaScript thao tc. Vi b chn jQuery, chng ta c th di chuyn qua li trong HTML v thao tac vi n, nhng trc ht n phi c chn vo ti liu . nh dng d liu thun JavaScript hn c ngha l bn t phi vit t m hn. Ly ra mt i tng JavaScript Nh chng ta thng thy, i tng JavaScript ch l tp hp cua nhng cp key-value, v c th c inh nghia ngn gn vi cp ngoc cong {}. Tri li, mng JavaScript li c inh nghia bng cp ngoc vung []. Kt hp hai khi nim ny, chng ta c th biu t c nhng cu trc phc tp va giau d liu. Khi nim JavaScript Object Notation (JSON) c gii thiu bi Douglas Crockford tn dng th mnh v c php n gin ny. Bn k php ny cho chng ta mt s thay th hon ho cho nh XML, m c lc rt cng knh. 1 { 2"key": "value", 3"key 2": [ 4"array", 5"of", 6"items" ] 7} 8 Lu : Nu bn mun bit thm nhng thng tin v th mnh ca JSON v nhng ng dng ca n cho nhng ngn ng lp trnh khc, bn c th vo trang web www.json.org

    Chng ta c th m ha d liu ca chng ta bng cch s dng nh dng ny bng nhiu cch. Chng ta s vi mc t trong t in mt file JSON v t tn l b.json. on m s nh sau 1 2 3 [ 4 { "term": "BACCHUS", 5 "part": "n.", 6 "definition": "A convenient deity invented by the...", 7 "quote": [ 8 "Is public worship, then, a sin,", for devotions 9 "Thatlictors dare topaid to Bacchus", "The run us in,", 10"And resolutely thump and whack us?" 11], 12"author": "Jorace" 13}, { 14"term": "BACKBITE", 15"part": "v.t.", 16"definition": "To speak of a man as you find him when..." 17}, 18{ "term": "BEARD", 19"part": "n.", 20"definition": "The hair that is commonly cut off by..." 21}, 22 23 ly d liu ny ra, chng ta s s dng phng thc $.getJSON(), phng thc ny s tm np tp tin v x l n, kt qu ca on m c gi s l i tng JavaScript.
    Hm jQuery ton cc

    Cho n thi im ny, nhng phng thc m chng ta s dng c gn vo mt i tng jQuery m chng ta tao ra bng cach s dung hm $(). B chn cho php chng ta chn ra mt im trong DOM cc phng thc ca chng ta lm vic trn chng. Nhng hm $.getJSON thi li khc. No se khng c ap dung ln bt c phn t DOM nao, i tng tra v phai c s dng cho on m ch khng phi l chn vo trang. Chnh v l do ny m hm getJSON() c nh ngha l phng thc i tng jQuery ton cc (mt i tng c gi bi jQuery hoc c $ xc nh mt ln bi jQuery) ch khng phi mt phin bn i tng jQuery (i tng c chng ta to vi hm $(). Nu JavaScript co class nh nhng ngn ng lp trinh hng i tng khac, thi chung ta se goi $.getJSON() la mt phng thc class. Do vy chng ta gi phng php dng ny l hm ton cc, trong thc t, n l nhng hm s dng du cch jQuery trnh b xung t vi tn ca cc hm khc.

    s dng hm ny, chng ta truyn qua tn file nh trc: 1$(document).ready(function() { 2$('#letter-b a').click(function() { 3$.getJSON('b.json'); 4return false; 5}); }); 6 on m trn khng to ra thay i g r rng khi ban nhp vao ng lin kt. Ham c goi se tai tp tin, nhng chung ta cha bao JavaScript phai lam gi vi d liu co c. Do vy chung ta phai s dung ham truy hi. Ham $.getJSON() ly vao mt tham s th 2, tham s nay cung chinh la mt ham c goi khi qua trinh tai hoan thanh. Nh a noi trc y, nhng cuc goi cua AJAX la dang khng ng b, cho nn ham truy hi se i cho d liu c tai ht thay vi chay oan ma ngay lp tc. Ham truy hi nay cung ly vao mt tham s na dung cha d liu thu v. Nn chung ta co th vit: 1$(document).ready(function() { 2$('#letter-b a').click(function() { 3$.getJSON('b.json', function(data) { 4}); 5return false; }); 6}); 7 y chung ta s dung mt ham n nh la ham truy hi, nh mt cach vit tt ph bin trong jQuery. Mt ham co th c s dung lam ham truy hi. Bn trong ham nay, chung ta co th s dung bin s data di chuyn trong cu truc d liu nu cn. Chung ta cn phai chay ln mang trn cung, xy dng HTML cho tng phn t. Chung ta cung co th lam vic nay vi mt vong for, nhng thay vao o, chung ta se lam quen vi mt ham toan cuc na cua jQuery la $.each(). Chung ta a bit mt ham gn ging no la phng thc .each() trong chng 5. Thay vi chi lam vic vi mt i tng jQuery, ham nay ly vao mt mang hoc mt biu lam tham s th nht va mt ham truy hi lam tham s th 2. Mi ln vong lp chay thi chi s lp hin tai va phn t hin tai trong mang hoc biu c chuyn vao nh hai tham s cho ham truy hi. 1 2 3 4 5 6 7
    $(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">';

    8 9 10html += entry['definition']; html += '</div>'; 11html += '</div>'; 12$('#dictionary').append(html); 13}); 14}); return false; 15}); 16}); 17 18 Trc khi vong lp bt u, chung ta a lam rng the <div id=dictionary>, do vy chung ta co th chen vao ma HTML va tao c. Sau o chung ta s dung ham $.each() kim tra tng phn t mt, xy dng cu truc HTML da vao ni dung cua biu . Cui cung chung ta bin oan ma HTML thanh cy DOM bng cach gan no vao the <div> Lu y: cach nay gia s rng d liu tai v la an toan s dung vi HTML, no khng c co nhng ky hiu nh kiu <. By gi chi con phn trich dn cua muc t trong t in, bng cach s dung mt vong lp $.each() na. 1 $(document).ready(function() { 2 $('#letter-b a').click(function() { $.getJSON('b.json', function(data) { 3 $('#dictionary').empty(); 4 $.each(data, function(entryIndex, entry) { 5 var html = '<div class="entry">'; 6 html += '<h3 class="term">' + entry['term'] + '</h3>'; html += '<div class="part">' + entry['part'] + '</div>'; 7 html += '<div class="definition">'; 8 html += entry['definition']; 9 if (entry['quote']) { 10html += '<div class="quote">'; 11$.each(entry['quote'], function(lineIndex, line) { html += '<div class="quote-line">' + line + '</div>'; 12}); 13if (entry['author']) { 14html += '<div class="quote-author">' + entry['author'] + '</div>'; 15} 16html += '</div>'; } 17html += '</div>'; 18html += '</div>'; 19$('#dictionary').append(html); 20}); }); 21return false; 22}); 23});

    24 25 26 27 28 By gi ban co th th nhp chut vao ch B xem th kt qua

    Lu y: inh dang JSON rt ngn gon nhng nghim ngt. Mi du ngoc, du nhay hay du phai u phai y u va chinh xac, nu khng tp tin se khng c tai. Trong phn ln cac trinh duyt, thm chi no con khng bao li ma ca oan ma hoan toan khng chay mt cach m thm.
    Chay mt oan ma

    i khi chung ta khng mun ly v tt ca ma JavaScript khi trang web c tai ln u tin. Chung ta khng bit oan ma nao la cn thit cho n khi co nhng tng tac cua ngi dung. Chung ta cung co th s dung the <script> nu cn nhng co mt cach khac hay hn chen thm ma vao la dung jQuery tai trc tip tp tin .js chen vao mt oan ma cung n gian nh khi chen mt oan HMTL. Trong trng nay

    chung ta s dung ham toan cuc $.getScript(), ham nay cung nh nhng ham cung chc nng cua no, chp nhn mt ia chi URL tro n vi tri cua tp tin. 1$(document).ready(function() { 2$('#letter-c a').click(function() { 3$.getScript('c.js'); 4return false; 5}); }); 6 vi du cui cung cua chung ta, chung ta cn phai x ly d liu tra v minh co th lam mt cai gi o vi tp tin c tai v. Nhng vi nhng tp tin cha ma, qua trinh x ly la hoan toan t ng, mt khi c tai oan ma se t chay. Ma c tai bng cach nay se chay trong ng canh toan cuc cua trang hin tai. iu o co nghia la chung co th n c tt ca nhng ham va cac bin s c khai bao toan cuc, k ca ban thn jQuery. Cho nn chung ta co th bt chc vi du v JSON chun bi va chen HTML vao trang khi oan ma c thc thi, va t oan ma nay vao tp c.js: 1 var entries = [ 2 { "term": "CALAMITY", 3 "part": "n.", 4 "definition": "A more than commonly plain and..." 5 }, 6 { "term": "CANNIBAL", 7 "part": "n.", 8 "definition": "A gastronome of the old school who..." 9 }, 10{ 11"term": "CHILDHOOD", "part": "n.", 12"definition": "The period of human life intermediate..." 13}, 14{ 15"term": "CLARIONET", 16"part": "n.", "An instrument of torture operated by..." }, "definition": 17{ 18"term": "COMFORT", 19"part": "n.", 20"definition": "A state of mind produced by..." }, 21{ 22"term": "CORSAIR", 23"part": "n.", 24"definition": "A politician of the seas." 25} ]; 26var html = ''; 27$.each(entries, function() {

    28 29 30 31 32 33html += '<div class="entry">'; 34html += '<h3 class="term">' + this['term'] + '</h3>'; 35html += '<div class="part">' + this['part'] + '</div>'; 36html += '<div class="definition">' + this['definition'] + '</div>'; 37html += '</div>'; }); 38$('#dictionary').html(html); 39}, 40{ 41"term": "COMFORT", "part": "n.", 42"definition": "A state of mind produced by..." 43}, 44{ 45"term": "CORSAIR", 46"part": "n.", "definition": "A politician of the seas." 47} 48]; 49var html = ''; 50$.each(entries, function() { html += '<div class="entry">'; 51html += '<h3 class="term">' + this['term'] + '</h3>'; 52html += '<div class="part">' + this['part'] + '</div>'; 53html += '<div class="definition">' + this['definition'] + '</div>'; 54html += '</div>'; 55}); $('#dictionary').html(html); 56 57 58 59 60 61 Ban th nhn vao ch cai C xem kt qua.

    Tai tai liu XML

    XML la mt phn trong nhng ch cai vit tt cua AJAX, nhng chung ta vn cha tai XML ln nao. Cach tai tp XML cung kha n gian va rt ging vi cach ma chung ta lam vi JSON. Trc ht chung ta cn mt tp XML la t tn la d.xml va cha nhng d liu chung ta cn hin thi. 1 <?xml version="1.0" encoding="UTF-8"?> 2 <entries> <entry term="DEFAME" part="v.t."> 3 <definition> 4 To lie about another. To tell the truth about another. 5 </definition> 6 </entry> <entry term="DEFENCELESS" part="adj."> 7 <definition> 8 Unable to attack. 9 </definition> 10</entry> 11<entry term="DELUSION" part="n."> <definition> 12The father of a most respectable family, comprising 13Enthusiasm, Affection, Self-denial, Faith, Hope, 14Charity and many other goodly sons and daughters. 15</definition> 16<quote author="Mumfrey Mappel">

    17 18 19 20<line>All hail, Delusion! Were it not for thee</line> 21<line>The world turned topsy-turvy we should see; 22</line> 23<line>For Vice, respectable with cleanly fancies, 24</line> <line>Would fly abandoned Virtue's gross advances. 25</line> 26</quote> 27</entry> 28<entry term="DIE" part="n."> 29<definition> The singular of "dice." We seldom hear the word, 30because there is a prohibitory proverb, "Never say 31die." At long intervals, however, some one says: "The 32die is cast," which is not true, for it is cut. The 33word is found in an immortal couplet by that eminent 34poet and domestic economist, Senator Depew: </definition> 35<quote> 36<line>A cube of cheese no larger than a die</line> 37<line>May bait the trap to catch a nibbling mie.</line> 38</quote> </entry> 39</entries> 40 41 42 43 Tt nhin d liu nay co th c biu thi bng nhiu cach, va mt s phn rt ging vi cu truc ma chung ta a lam vi HTML va JSON trc y. Nhng trong vi du nay ban se c lam quen vi mt vai chc nng cua XML c thit k con ngi con co th hiu c, nh la cach s dung thuc tinh cho term va part thay vi dung the. Chung ta cung bt u ham vi cach quen thuc 1$(document).ready(function() { 2$('#letter-d a').click(function() { 3$.get('d.xml', function(data) { 4}); 5return false; }); 6}); 7 Ln nay chung ta s dung ham $.get(). Noi chung, ham nay chi n thun la truy xut tp tin ia chi URL cho trc va cung cp mt oan ch trng khng inh dang cho ham truy hi. Nhng nu phan hi lai la inh dang XML da vao MINE type cua server cung cp, ham truy hi se nhn c cy XML DOM.

    Cung may cho chung ta la jQuery co kha nng di chuyn rt tt trong DOM. Chung ta co th s dung phng thc .find(), .filter() va nhng phng thc di chuyn khac trong tai liu XML y nh cach ma chung ta lam vic vi HTML. 1 2 3 4 $(document).ready(function() { 5 $('#letter-d a').click(function() { $.get('d.xml', function(data) { 6 $('#dictionary').empty(); 7 $(data).find('entry').each(function() { 8 var $entry = $(this); 9 var html = '<div class="entry">'; 10html += '<h3 class="term">' + $entry.attr('term') + '</h3>'; 11html += '<div class="part">' + $entry.attr('part') 12+ '</div>'; 13html += '<div class="definition">'; 14html += $entry.find('definition').text(); var $quote = $entry.find('quote'); 15if ($quote.length) { 16html += '<div class="quote">'; 17$quote.find('line').each(function() { 18html += '<div class="quote-line">' 19+ $(this).text() + '</div>'; }); 20if ($quote.attr('author')) 21html += '<div class="quote-author">' 22+ $quote.attr('author') + '</div>'; 23} html += '</div>'; 24} 25html += '</div>'; 26html += '</div>'; 27$('#dictionary').append($(html)); 28}); }); 29return false; 30}); 31}); 32 33 34 Ban nhn th ch D xem kt qua

    y la mt cach mi trong nhng phng thc di chuyn trong DOM ma chung ta a bit, cho ta thy tinh linh ng cua b chon CSS trong jQuery. Cu phap cua CSS thng c s dung lam ep cho trang HTML, cho nn b chon tiu chun trong file .css s dung tn the HTML nh div va body tim n ni dung. Tuy nhin, jQuery cung co th s dung nhng the XML thng thng nh la entry va definition, nh cach ma chung ta s dung HTML. Nhng b chon nng cao cua jQuery con cho phep tim n nhng phn tai liu XML trong nhng trng hp phc tap hn nhiu. Vi du chung ta mun gii han hin thi nhng muc t co cha cu trich dn va thuc tinh author. lam c iu nay, chung ta co th gii han nhng muc t co cha cac phn t <quotes> bng cach thay i entry thanh entry:has(quote). Sau o chung ta cung co th gii han thm nhng muc t co cha thuc tinh author trong phn bng cach vit entry:has(quote[author]). By gi b chon cua chung ta se nh sau: 1$(data).find('entry:has(quote[author])').each(function() { Biu thc b chon by gi gii han nhng muc t nh hinh

    Phn 2 La chon inh dang d liu

    Chung ta a xem qua 4 inh dang cho d liu bn ngoai, mi mt dang u c x ly bi nhng ham thun AJAX cua jQuery. Chung ta cung a xac minh ca 4 inh dang u co th x ly c tinh hung la tai thng tin cho trang mi khi ngi dung yu cu ch khng phai trc o. Nh vy thi inh dang nao phu hp vi ng dung nao? HTML khng mt nhiu cng tai. D liu bn ngoai ngoai co th c tai va chen vao trang vi mt phng thc ma thm chi khng cn co ham truy hi. Chung ta cung khng cn s dung nhng phng thc di chuyn trong d liu thm mt oan HTML vao trang. Trai lai, d liu nay khng co cu truc phu hp co th tai s dung cho nhng ng dung khac. Ma no c lin kt cht che vi thanh phn ma no se c chen vao. JSON thi c cu truc cho vic tai s dung n gian. inh dang nay c ong va d oc. Nhng chung ta phai di chuyn trong cu truc d liu ly thng tin hin thi ra trang web, nhng iu nay cung d dang c thc hin bi nhng ky thut JavaScript tiu chun. Bi vi tp tin co th c tai chi bng mt cuc goi n phng thc JavaScript eval(), phng thc nay oc tp JSON ht sc mau le. Tuy nhin cach s dung eval() cung cht cha mt chut rui ro. Nhng li lp trinh trong tp JSON co gy ra li n va tao ra hiu ng phu khng mong mun trn trang, cho nn d liu phai c vit ht sc cn thn. Tp JavaScript co tinh linh ng nht nhng no lai khng thc s la mt c ch lu tr d liu. Bi vi no mang hi hng cua ngn ng lp trinh, no khng th cung cp cung mt loai thng tin cho nhng h thng khac nhau. Thc t vic tai mt tp JavaScript co nghia

    la nhng b x ly ma it khi c dung ti co th tach ri mt tp bn ngoai, nh th chung ta co th giam c dung lng cua ma va chi tai no khi cn thit. Tai liu XML cc ky c ng. Bi vi XML a tr thanh ngn ng chung cho th gii mang, cung cp d liu di dang nay thi no rt co th c tai s dung u o. Vi du Flickr, del.icio.us va Upcoming u xut d liu cua ho di dang XML, va c rt nhiu cac trang khac tai s dung rt sang tao. Tuy nhin inh dang XML hi cng knh va mt nhiu thi gian tai va thao tac hn nhng inh dang khac. Vi nhng tinh nng nh trn, thi ban thy cach d nht cung cp d liu t bn ngoai la di dang HTML min la d liu o khng cn phai c s dung cho nhng ng dung khac. Trong trng hp d liu se c tai s dung va nhng ng dung khac co th bi anh hng, thi JSON thng la la chon tt bi vi no co hiu sut lam vic cao va dung lng nho. Nhng khi ng dung la iu ma ban khng chc chn, thi XML la la chon an toan nht co tinh tng kt cao nht. Trn tt ca nhng iu trn, chung ta phai xac inh xem d liu a co sn cha. Nu no a co sn ri thi rt co th no ri vao mt trong nhng inh dang trn va nh th thi ban khoi cn phai mt cng t quyt inh.
    Truyn d liu n server

    Nhng vi du cua chung ta cho n gi chi tp trung vao vic ly d liu tinh t web server. Tuy nhin, AJAX chi thc s manh me khi ma server co th t ng truyn d liu da vao thng tin c nhp t trinh duyt web. JQuery co th giup chung ta rt nhiu trong qua trinh nay, nhng phng thc chung ta a hoc n nay co th c cai tin mt chut cho qua trinh truyn tai d liu tr thanh ng 2 chiu. Lu y: nhng vi du sp ti oi hoi phai tng tac vi web server, cho nn y la ln u tin trong cun sach chung ta se s dung ma server-side. Trong nhng phn ti chung ta se s dung ngn ng lp trinh PHP, y la ngn ng c s dung rng rai va hoan toan min phi. Chung ta se khng cp n cach tao web server trong khun kh cua cun sach nay. Ban co th tim cac ngun hng dn nh trang Apache.org hoc php.net. Trn izwebz cung co mt vai bai hng dn cach tao localhost lam vic vi PHP.
    Thc hin lnh truy vn GET

    minh hoa cho qua trinh giao tip gia ngi dung va server, chung ta se vit mt oan ma ma no co th chi gi mt muc t trong t in n trinh duyt cho mi mt lnh truy vn. Muc t c chon se da vao tham s c gi qua trinh duyt. Ma cua chung ta se ly d liu t cu truc d liu trong nh sau: 1 2 3 4
    <?php $entries = array( 'EAVESDROP' => array( 'part' => 'v.i.', 'definition' => 'Secretly to overhear a catalogue of the

    5 6 7 8 crimes and vices of another or yourself.', 9 'quote' => array( 'A lady with one of her ears applied', 10'To an open keyhole heard, inside,', 11'Two female gossips in converse free &mdash;', 12'The subject engaging them was she.', 13'"I think," said one, "and my husband thinks', 14'That she\'s a prying, inquisitive minx!"', 'As soon as no more of it she could hear', 15'The lady, indignant, removed her ear.', 16'"I will not stay," she said, with a pout,', 17'"To hear my character lied about!"', 18), 'author' => 'Gopete Sherany', 19), 20'EDIBLE' => array( 21'part' => 'adj.', 22'definition' => 'Good to eat, and wholesome to digest, as 23a worm to a toad, a toad to a snake, a snake to a pig, a pig to a man, and a man to a worm.', 24), 25'EDUCATION' => array( 26'part' => 'n.', 27'definition' => 'That which discloses to the wise and 28disguises from the foolish their lack of understanding.', 29), 30); 31?> 32 33 34 trong nhng ng dung tht s thi d liu phai c lu tr trong c s d liu va chi c tai khi hoi. Bi vi d liu la mt phn cua oan ma trn cho nn vic vit ma ly d liu ra kha n gian. Chung ta se xem xet d liu a c tao ra va vit ma HTML hin thi n: 1 <?php 2 $term = strtoupper($_REQUEST['term']); if (isset($entries[$term])) { 3 $entry = $entries[$term]; 4 $html = '<div class="entry">'; 5 $html .= '<h3 class="term">'; 6 $html .= $term; $html .= '</h3>'; 7 $html .= '<div class="part">'; 8 $html .= $entry['part']; 9 $html .= '</div>'; 10$html .= '<div class="definition">';
    $html .= $entry['definition'];

    11 12 13 14if (isset($entry['quote'])) { $html .= '<div class="quote">'; 15foreach ($entry['quote'] as $line) { 16$html .= '<div class="quote-line">'. $line .'</div>'; 17} 18if (isset($entry['author'])) { 19$html .= '<div class="quote-author">'. $entry['author'] .'</div>'; 20} 21$html .= '</div>'; 22} 23$html .= '</div>'; 24$html .= '</div>'; print($html); 25} 26?> 27 28 29 By gi khi oan ma c truy vn thi tp e.php c goi, va no se tra v mt oan HTML phu hp vi iu kin c gi qua tham s cua GET. Vi du khi ban truy cp oan ma vi e.php?term=eavesdrop, chung ta se co c.

    Mt ln na chung ta thy c trang kt qua khng co chut inh dang nao bi vi CSS cha c ap dung vao trang nay. Bi vi chung ta se nghin cu d liu c truyn tai n server nh th nao, chung ta se s dung mt phng thc khac ly muc t thay vi chi s dung mt dang nut n t trc ti gi. Di y la oan ma HTML 1 <div class="letter" id="letter-e"> 2 <h3>E</h3> <ul> 3 <li><a href="e.php?term=Eavesdrop">Eavesdrop</a></li> 4 <li><a href="e.php?term=Edible">Edible</a></li> 5 <li><a href="e.php?term=Education">Education</a></li> 6 <li><a href="e.php?term=Eloquence">Eloquence</a></li> <li><a href="e.php?term=Elysium">Elysium</a></li> 7 <li><a href="e.php?term=Emancipation">Emancipation</a> 8 </li> 9 <li><a href="e.php?term=Emotion">Emotion</a></li> 10<li><a href="e.php?term=Envelope">Envelope</a></li> 11<li><a href="e.php?term=Envy">Envy</a></li> <li><a href="e.php?term=Epitaph">Epitaph</a></li> 12<li><a href="e.php?term=Evangelist">Evangelist</a></li> 13

    14 15</ul> 16</div> 17 By gi chung ta cn ma JavaScript goi n PHP vi tham s phu hp. Chung ta co th lam c vic nay vi c ch .load(), gan chui truy vn vao URL va sau o thi truy xut d liu trc tip vi ia chi nh kiu e.php?term=eavesdrop. Tuy nhin, thay vi lam nh vy chung ta se s dung jQuery xy dng chui truy vn da vao biu ma ta cung cp cho ham $.get(): 1 $(document).ready(function() { 2$('#letter-e a').click(function() { 3$.get('e.php', {'term': $(this).text()}, function(data) { 4$('#dictionary').html(data); 5}); 6return false; }); 7}); 8 Ti gi chung ta a thy nhng giao tac AJAX ma jQuery cung cp, cach lam vic cua ham nay rt quen thuc. iu khac bit duy nht la tham s th 2, no cho phep chung ta cung cp mt biu key-value va no la mt phn cua chui truy vn. Trong trng hp trn, gia tri key lun la term nhng value se c ly t ch cua mi ng lin kt. Nn nu by gi ban nhp chut vao ng lin kt u tin trong danh sach thi inh nghia cua t o se xut hin.

    Tt ca nhng ng lin kt u co ia chi du cho chung ta khng s dung no trong ma. iu nay cho phep nhng ngi dung khng co hoc khng bt JavaScript vn co th xem c thng tin trn trang. tranh ng lin kt di chuyn theo mc inh, b x ly s kin phai la return false.
    Thc hin lnh truy vn POST

    Truy vn HTTP s dung phng thc POST gn nh tng ng vi phng thc GET. Mt trong nhng khac bit d thy nht o la phng thc GET t tham s cua no vao chui truy vn cua URL. Con POST thi khng. Tuy nhin trong cac cuc goi cua AJAX, im khac bit nay cung bi n i vi ngi dung. Noi chung, ly do chinh chon phng thc nay thay vi phng thc khac la phu hp vi chun cua server, hoc truyn tai mt lng d liu ln. Phng thc GET co gii han nghim khc hn. Chung ta a vit ma PHP trong vi du nay sao cho no co th lam vic c vi ca 2 phng thc, chung ta co th chuyn t GET sang POST chi bng cach thay i phng thc jQuery ma chung ta goi:

    1 $(document).ready(function() { 2$('#letter-e a').click(function() { 3$.post('e.php', {'term': $(this).text()}, function(data) { 4$('#dictionary').html(data); 5}); 6return false; }); 7}); 8 Cac tham s thi vn vy nhng lnh truy vn se c gi qua POST. Chung ta cung co th n gian hoa oan ma hn na bng cach s dung phng thc .load(). Phng thc nay theo mc inh la s dung POST khi no c cung cp mt biu tham s. 1$(document).ready(function() { 2$('#letter-e a').click(function() { 3$('#dictionary').load('e.php', {'term': $(this).text()}); 4return false; 5}); }); 6 Phin ban ma ngn hn nay vn co tac dung tng t khi ch a c nhp chut.

    Sp xp th t form

    Thng khi ban mun gi d liu n server ban c yu cu phai in vao form. Thay vi phai phu thuc vao nhng c ch gi form binh thng nh kiu tai toan b cu tra li vao mt ca s trinh duyt, chung ta co th s dung AJAX cua jQuery gi mt form theo th t va t cu tra li vao trang hin tai. Di y chung ta se tao mt form n gian: 1 <div class="letter" id="letter-f"> 2<h3>F</h3> 3<form> 4<input type="text" name="term" value="" id="term" /> 5<input type="submit" name="search" value="search" 6id="search" /> </form> 7</div> 8 Ln nay chung ta se tra v mt tp hp cac muc t t ma PHP bng cach tim kim t khoa c cung cp di dang chui phu cua t trong t in. Cu truc d liu se co inh dang ging nh trc y, nhng logic thi hi khac mt chut. 1 foreach ($entries as $term => $entry) { 2 if (strpos($term, strtoupper($_REQUEST['term']))

    3 4 5 !== FALSE) { 6 $html = '<div class="entry">'; 7 $html .= '<h3 class="term">'; $html .= $term; 8 $html .= '</h3>'; 9 $html .= '<div class="part">'; 10$html .= $entry['part']; 11$html .= '</div>'; $html .= '<div class="definition">'; 12$html .= $entry['definition']; 13if (isset($entry['quote'])) { 14foreach ($entry['quote'] as $line) { 15$html .= '<div class="quote-line">'. $line .'</div>'; 16} if (isset($entry['author'])) { 17$html .= '<div class="quote-author">'. 18$entry['author'] .'</div>'; 19} 20} $html .= '</div>'; 21$html .= '</div>'; 22print($html); 23} 24} 25 26 Ham strops() tim t khoa phu hp vi chui tim kim cua ngi dung. By gi chung ta co th phan ng lai vi form gi v va tao tham s truy vn phu hp bng cach di chuyn trong cy DOM: 1$(document).ready(function() { 2$('#letter-f form').submit(function() { 3$('#dictionary').load('f.php', 4{'term': $('input[name="term"]').val()}); 5return false; }); 6}); 7 Tuy oan ma cua chung ta a lam vic nh mong mun, nhng tim tng trng nhp liu bng tn va sau o gan tng cai mt cho biu thi phin phc qua. Hn na cach nay kho x ly c khi ma form cua chung ta tr nn phc tap hn. Cung may la jQuery co cach giup chung ta trong trng hp nay. Phng thc .serialize() hoat ng trn mt i tng jQuery va chuyn nhng phn t DOM phu hp thanh chui truy vn va chuyn no cung vi AJAX truy vn. Chung ta co th vit ma cho b x ly form nh sau: 1$(document).ready(function() { 2$('#letter-f form').submit(function() {

    $.get('f.php', $(this).serialize(), function(data) {

    3 4$('#dictionary').html(data); }); 5return false; 6}); 7}); 8 By gi oan ma a co th gi form, cho du s lng cac trng nhp liu co tng. Khi chung ta mun tim kim, nhng muc t phu hp se c hin thi.

    Nn chu y n lnh truy vn

    Cho n gi chung ta co th tao cuc goi n phng thc AJAX va kin nhn ch i c tra li. Nhng cung co luc chung ta mun bit thm mt chut na v lnh truy vn HTTP khi no c thc hin. jQuery cho ban mt s ham co th c s dung ng ky ham truy hi khi nhiu s kin lin quan n AJAX xay ra. Hai phng thc .ajaxStart() va .ajaxStop() la nhng vi du in hinh v chc nng quan sat, va co th c gan vi bt ky i tng jQuery nao. Khi lnh goi AJAX bt u ma khng co gi ang c tai, ham truy hi .ajaxStart() se khi ng. Ngc lai, khi lnh truy vn cui cung kt thuc, ham truy hi c gn vi .ajaxStop() se bt u. Tt ca nhng ham quan sat la dang ham toan cuc, chung c goi mi khi s giao tip AJAX xay ra, ma khng quan tm n ma nao goi no. Chung ta co th s dung nhng phng thc nay thng bao cho ngi dung bit trong trng hp mang cua ho khng c nhanh. oan ma HTML se co mt oan thng bao ang tai d liu: 1<div id="loading"> 2Loading... 3</div> Thng bao nay chi la mt oan ma HTML binh thng, nhng ban cung co th thm vao mt hinh GIF ng kiu xoay xoay cho no chun. Chung ta se chinh sa CSS mt chut khi thng bao c a ra no c hin thi nh hinh di.

    Bi vi y chi la tinh nng lam cho trang thm ep cho nhng ngi dung co trinh duyt hin ai, do vy chung ta se khng chen oan ma HTML nay trc tip vao trang. Bi vi chung ta chi mun no hin thi vi nhng ai co bt JavaScript, cho nn chung ta se chen no bng jQuery.

    1$(document).ready(function() { 2$('<div id="loading">Loading...</div>') 3.insertBefore('#dictionary') 4}); Chung ta se khai bao trong CSS cho the div nay co display: none; cho khi trang c tai, thi thng bao se bi n i. no hin thi ung luc minh cn, chung ta chi cn ng ky no vi chc nng quan sat vi .ajaxStart(): 1$(document).ready(function() { 2$('<div id="loading">Loading...</div>') 3.insertBefore('#dictionary') 4.ajaxStart(function() { 5$(this).show(); }); 6}); 7 Chung ta kt hp phng thc .hide() lun vao y 1 2$(document).ready(function() { $('<div id="loading">Loading...</div>') 3.insertBefore('#dictionary') 4.ajaxStart(function() { 5$(this).show(); 6}).ajaxStop(function() { $(this).hide(); 7}); 8}); 9 Nh vy chung ta a co bang thng bao. Mt ln na ban cung nn lu y rng nhng phng thc nay khng lin quan gi n cach ma giao tip AJAX bt u. Chinh phng thc .load() c gan cho ch A va .getJSON() c gan cho ch B a lam cho giao tip AJAX xay ra. Trong trng hp nay, tp tinh toan cuc la iu chung ta mun. Tuy nhin nu chung ta mun cu th hn na, chung ta co vai la chon s dung. Mt vai chc nng quan sat nh, .ajaxError(), no se gi cho ham truy hi mt tham chiu n i tng XMLHttpRequest. Cai nay co th dung phn bit gia cac lnh truy vn vi nhau, va cung cp nhng tp tinh khac nhau. co nhng cach x ly cu th hn ban co th s dung ham $.ajax() cp thp, ma chung ta se ban ti phn di. Tuy nhin cach ph bin nht giao tip vi lnh truy vn la ham truy hi thanh cng, ma chung ta a noi n trn. Chung ta a s dung no trong mt vai nhng vi du trn x ly d liu quay lai t server va cho hin thi kt qua ln trang web. Tt nhin no cung co th c s dung cho nhng thng tin phan hi khac. Hay xem lai vi du v .load():

    1$(document).ready(function() { 2$('#letter-a a').click(function() { 3$('#dictionary').load('a.html'); 4return false; 5}); }); 6 Chung ta co th cai tin mt chut y bng cach lam cho ni dung t t hin ra thay vi m mt phat. Phng thc .load() co th ly vao mt ham truy hi va kich hoat no khi a hoan thanh. 1 $(document).ready(function() { 2$('#letter-a a').click(function() { 3$('#dictionary').hide().load('a.html', function() { 4$(this).fadeIn(); 5}); 6return false; }); 7}); 8 Trc tin ta n i phn t ich, va sau o thi khi ng qua trinh tai. Khi qua trinh tai hoan thanh, chung ta s dung ham truy hi cho phn t va tao hin ra t t.
    AJAX va s kin

    Gia s chung ta mun dung cac muc t trong t in quyt inh n hoc hin inh nghia cua t o, khi ngi dung nhp chut vao t thi no se n hoc hin inh nghia i kem vi no. Vi nhng ky thut ta a hoc, thi lam c vic nay rt n gian 1$(document).ready(function() { 2$('.term').click(function() { 3$(this).siblings('.definition').slideToggle(); 4}); }); 5 Khi muc t bi nhp chut, jQuery se tim phn t la anh em ho cua no ma co class=definition, va trt no ln trn hoc xung di. Moi vic nghe co ve hp l, nhng khi ta nhp chut vao thi se khng xay ra vic gi. Vn la muc t cha c thm vao tai liu khi ta gan b x ly s kin. Cho du ta co th gan c b x ly click vao cac phn t nay, mt khi minh nhp chut vao mt ch cai khac thi b x ly se khng con c gan cho no na. y la vn thng thy trong pham vi cua trang c a vao bi AJAX. Mt giai phap thng thng la chung ta se gan lai b x ly mi khi vung cua trang c refresh. Nhng

    cach nay cung hi mt thi gian bi vi oan ma gan s kin phai c goi mi khi co mt thanh phn nao lam thay i cu truc DOM cua trang. Mt cach thay th hay nht cho vn nay c gii thiu chng 3: Chung ta co th ap dung uy thac s kin y, bng cach gn s kin cho thanh phn b me va y la nhng thanh phn se khng bao gi thay i. Trong trng hp nay, chung ta se gan b x ly s kin nhp chut vao tai liu s dung phng thc .live() 1$(document).ready(function() { 2$('.term').live('click', function() { 3$(this).siblings('.definition').slideToggle(); 4}); }); 5 Phng thc .live() se hng dn cho trinh duyt quan sat tt ca nhng cu nhp chut trn toan b trang web, va chi khi mt phn t phu hp vi b chon .term, thi b x ly s kin mi thc hin. By gi phng thc .slideToggle() se hoat ng di bt ky term nao, cho du no c thm vao sau nay bi mt giao tac AJAX
    Han ch v bao mt

    i vi tt ca cac tin ich cua no trong vic tao cac ng dung web ng, XMLHttprequest (cng ngh trinh duyt c ban ng sau nhng ng dung jQuery AJAX) c quan ly rt nghim ngt. Thng thi ban khng th truy vn c mt tai liu ang nm mt server khac vi server ang cha trang gc cua ban, iu nay tranh nhng vu tn cng crosssite. y thc t lai la mt vic tt. Vi du co ngi cho rng cach thc thi phn tich JSON bng cach s dung .eval() la khng an toan. Nu co nhng oan ma c nm trong tp d liu, no se chay nu ham .eval() goi no. Vy nn nu tp d liu va ban thn trang web cung nm trn mt server thi kha nng chen ma c vao tp d liu gn nh tng ng vi vic t chen ma vao trang cua minh. iu o co nghia la, trong trng hp ban tai nhng tp JSON khng mang ma c, thi ham .eval() khng con la mt mi lo cho bao mt. Nhng cung trong nhiu trng hp lai co li hn nu ban co th tai d liu t mt ngun th 3. Co vai cach ban co th lam tranh c khu gii han bao mt va cho phep vic tai d liu nay co th thc hin c. Cach th nht la da vao server tai d liu t xa va sau o thi cung cp no khi c yu cu bi ngi dung. y la cach rt manh bi vi server co th x ly trc d liu nu cn. Vi du chung ta co th tai file XML cha RSS Feed t nhiu ngun, tp hp chung lai thanh mt feed trn server va phat hanh tp mi nay n ngi dung khi c yu cu. tai d liu t mt vi tri t xa ma khng cn s can thip cua server, chung ta phai gian manh mt ti. Mt cach thng dung trong trng hp ban mun tai mt tp JavaScript

    bn ngoai la chen cp the <script> khi cn. Bi vi jQuery co th giup chung ta chen nhng phn t DOM mi, nn chung ta d dang co th vit: 1$(document.createElement('script')) 2.attr('src', 'http://example.com/example.js') 3.appendTo('head'); Thc t, phng thc $.getScript() cung t ng thich nghi vi ky thut nay nu no phat hin mt host khac trong tham s URL, vy nn k ca vic nay cung a c giai quyt cho chung ta. Trinh duyt se chay oan ma c tai, nhng khng co c ch nao co th ly v kt qua t oan ma. Chinh vi th ky thut nay oi hoi s cng tac vi host xa. oan ma c tai v cung phai lam mt cai gi o nh la tao ra mt bin toan cuc va co hiu lc trn mi trng cuc b. Nhng ai tao ra ma co th chay c bng cach nay cung se cung cp mt API tng tac vi ma t xa nay. Mt cach na la s dung the HTML <iframe> tai d liu t xa. Phn t nay cho phep bt c URL nao cung c s dung lam ngun truy xut d liu cua no, cho du no khng cung mt server. D liu d dang c tai va hin thi ln trang. Nhng thao tac vi d liu thi cung oi hoi s cng tac nh la cach s dung the <script>. Ma nm trong <iframe> cn phai cung cp d liu cho i tng trong tai liu gc mt cach ro rang.
    S dung JSONP cho d liu t xa

    Y tng s dung the <script> truy xut tp JavaScript t mt ngun xa cung co th s dung keo mt file JSON t mt server khac. Nhng thc hin c, chung ta cn phai chinh sa tp JSON mt chut. Cung co vai cach lam vic nay, mt trong s o c h tr trc tip bi jQuery: JSON vi Padding hoc vit tt la JSONP. inh dang cua tp JSONP bao gm mt tp JSON tiu chun a c t trong du ngoc n va gan vao ng sau mt chui ky t binh thng. Chui nay, hay con la padding, c xac inh bi ngi dung ang truy vn d liu. Bi vi hai du ngoc nay, ngi dung co th hoc la lam cho ham c goi hoc mt bin c thit lp phu thuc vao cai gi c gi di dang chui padding. Mt ng dung PHP cua ky thut JSONP kha n gian: 1<?php 2print($_GET['callback'] .'('. $data .')'); 3?> y bin $data cha mt chui lam ai din cho mt tp JSON. Khi oan ma nay c goi, mt tham s chui truy vn callback c gan vao trc tp kt qua va se c tra v cho ngi dung.

    minh hoa cho ky thut nay, chung ta chi cn sa i mt chut vi du v JSON trn goi ngun d liu t xa. Ham $.getJSON() tn dung ky t gi ch c bit, ?, lam c vic nay. 1 2 3 $(document).ready(function() { 4 var url = 'http://examples.learningjquery.com/jsonp/g.php'; 5 $('#letter-g a').click(function() { $.getJSON(url + '?callback=?', 6 function(data) { $('#dictionary').empty(); 7 $.each(data, function(entryIndex, entry) { 8 var html = '<div class="entry">'; 9 html += '<h3 class="term">' + entry['term'] 10+ '</h3>'; 11html += '<div class="part">' + entry['part'] + '</div>'; 12html += '<div class="definition">'; 13html += entry['definition']; 14if (entry['quote']) { 15html += '<div class="quote">'; $.each(entry['quote'], function(lineIndex, line) { 16html += '<div class="quote-line">' + line 17+ '</div>'; 18}); 19if (entry['author']) { 20html += '<div class="quote-author">' + entry['author'] + '</div>'; 21} 22html += '</div>'; 23} 24html += '</div>'; 25html += '</div>'; $('#dictionary').append(html); 26}); 27}); 28return false; 29}); }); 30 31 32 Thng thi chung ta khng c phep truy xut JSON t mt server xa. Nhng bi vi file nay c tao nn cung cp d liu cua no di dang JSONP, chung ta co th ly d liu nay bng cach gan mt chui truy vn vao URL, s dung du ? lam ni lu gi cho gia tri cua tham s ham truy hi. Khi truy vn a c tao, jQuery se thay th du ? cho chung ta, phn tich kt qua, va chuyn no n ham di dang d liu nh th o la mt truy vn JSON ni b. Ban cung nn lu y v vn bao mt y nh trc, bt c cai gi server tra v n trinh duyt u se c thc hin trong may tinh cua ngi dung. Ky thut JSONP chi nn c s dung vi d liu n t cac ngun co ang tin cy.

    La chon thm

    B cng cu AJAX c cung cp bi jQuery rt y u. Chung ta a xem qua mt s la chon, nhng o mi chi la b ni cua tang bng. Co qua nhiu th co th noi n trong phn nay, do vy chung ta chi khai quat qua mt s nhng cach ph bin tuy bin giao tip AJAX.
    Phng phap AJAX cp thp

    Chung ta a thy mt s phng phap khi ng giao tac AJAX. Nhng ng sau hu trng, jQuery gom mi mt phng thc nay vao nhng ham $.ajax() toan cuc khac nhau. Thay vi phong oan mt dang s kin AJAX, ham nay ly vao mt biu cac s la chon ma co th c s dung tuy bin ch cua no. Vi du u tin ma chung ta s dung $(#dictionary).load(a.html) tai mt oan ma HTML. Cach nay co th c thay th bang phng thc $.ajax() nh sau: 1 $.ajax({ 2url: 'a.html', 3type: 'GET', 4dataType: 'html', 5success: function(data) { 6$('#dictionary').html(data); } 7}); 8 Chung ta cn phai ht sc cu th vi phng thc truy vn, loai d liu tra v, va se lam gi vi kt qua d liu o. Cai nay co ve hi tn cng sc nhng bu lai vi cng sc ban bo ra la thanh qua my man. Mt vai trong s nhng kha nng c bit khi s dung vi nhng phng thc $.ajax() cp thp bao gm:

    Ngn khng cho trinh duyt lu lai s phan hi t server. iu nay co ich khi ma server t ng tao ra d liu cua no. ng ky ring bit ham truy hi cho du khi lnh truy vn thc hin thanh cng, bi li hoc trong tt ca cac trng hp. Chn b x ly toan cuc (nh la b x ly ng ky vi $.ajaxStart()) ma thng c khi ng bi tt ca cac tng tac AJAX. Cung cp Username va mt khu xac nhn vi host t xa.

    Chu y: bit thm chi tit v cach s dung nhng la chon khac, xem thm phn jQuery Reference Guide hoc xem phn API Reference tai (http://docs.jquery.com/Ajax/jQuery.ajax).
    Chinh sa tuy chon mc inh

    Ham $.ajaxSetup() cho phep chung ta inh ro gia tri mc inh cua mi tuy chon c s dung khi phng thc AJAX c goi. No cung ly vao mt biu tuy chon ging y nh

    biu co trong ban thn $.ajax(), va lam cho nhng gia tri nay c s dung cho nhng truy vn AJAX v sau tr khi co cai khac manh hn. 1 2 $.ajaxSetup({ 3 url: 'a.html', type: 'POST', 4 dataType: 'html' 5 }); 6 $.ajax({ 7 type: 'GET', success: function(data) { 8 $('#dictionary').html(data); 9 } 10}); 11 Day thao tac nay hoat ng ging nh vi du trc la $.ajax(). Ban nn chu y rng URL cua lnh truy vn c xac inh lam gia tri mc inh bi cuc goi $.ajaxSetup(), cho nn gia tri nay co th c bo trng khi $.ajax() c goi. Ngc lai, tham s type co gia tri mc inh la POST, nhng no vn bi e ln bi cuc goi $.ajax() n GET.
    Tai cac phn cua mt trang HTML

    Ky thut u tin va cung la n gian nht ma chung ta a thao lun trn la truy xut mt oan code HTML va chen no vao mt trang. Nhng cung co khi server a cung cp cho ta oan HTML minh cn nhng no lai bi bao quanh bi mt trang HTML khac ma ta khng mun. Khi ma vic yu cu server cung cp inh dang chung ta mun khng thun tin, jQuery co th giup chung ta phia ngi dung. Hay tng tng trng hp nh vi du u tin, nhng trang cha cac t muc lai la mt trang HTML hoan chinh nh sau: 1 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" 2 lang="en"> <head> 3 <meta http-equiv="Content-Type" 4 content="text/html; charset=utf-8"/> 5 <title>The Devil's Dictionary: H</title> 6 <link rel="stylesheet" href="dictionary.css" type="text/css" media="screen" /> 7 </head> 8 <body> 9 <div id="container"> 10<div id="header"> 11<h2>The Devil's Dictionary: H</h2> <div class="author">by Ambrose Bierce</div> 12</div> 13<div id="dictionary"> 14<div class="entry"> 15<h3 class="term">HABEAS CORPUS</h3> 16<div class="part">n.</div>

    17 18 19 20<div class="definition"> A writ by which a man may be taken out of jail 21when confined for the wrong crime. 22</div> 23</div> 24<div class="entry"> 25<h3 class="term">HABIT</h3> <div class="part">n.</div> 26<div class="definition"> 27A shackle for the free. 28</div> 29</div> 30</div> </div> 31</body> 32</html> 33 34 35 Chung ta co th tai toan b tai liu vao trong trang bng cach s dung oan ma ta vit trc y: 1$(document).ready(function() { 2$('#letter-h a').click(function() { 3$('#dictionary').load('h.html'); 4return false; 5}); }); 6 Ban thy trang web khng c binh thng bi vi no cha nhng oan HTML chung ta khng mun thm vao.

    loai bo nhng oan d nay, chung ta co th s dung mt tinh nng mi cua phng thc .load(). Khi ban khai bao URL cua tai liu cn tai, chung ta cung co th cung cp mt biu thc b chon jQuery. Nu a khai bao, biu thc nay se c s dung xac inh mt phn ma cua tai liu. Chi nhng phn nao phu hp vi b chon mi c chen vao trang. Trong trng hp nay, chung ta co th s dung ky thut nay keo chi nhng muc t nm trong tai liu va chen no: 1$(document).ready(function() { 2$('#letter-h a').click(function() { $('#dictionary').load('h.html .entry'); 3return false; 4});

    5}); 6 By gi nhng phn khng lin quan cua tai liu a loai bo khoi trang

    Tom tt

    Chung ta a hoc c rng nhng phng thc AJAX cung cp bi jQuery co th giup chung ta tai d liu di mt s inh dang khac nhau t server ma khng cn phai refresh lai trang. Chung ta co th thc hin ma t server khi cn va gi d liu quay lai server. Chung ta cung hoc c cach x ly vi nhng kho khn thng gp cua ky thut tai khng ng b nh la gi b x ly nguyn vi tri khi qua trinh tai bt u va tai d liu t mt server th 3. Chng nay a khep lai phn tutorial cua cun sach. Chung ta a co u nhng cng cu chu yu cua jQuery: b chon, s kin, hiu ng, thao tac DOM va truy vn server khng ng b. y khng phai la tt ca jQuery co th h tr ta, chung ta se tim hiu thm v mt vai tinh nng ma cac jQuery Plugin em lai trong chng ti. Nhng trc ht, chung ta hay xem xet nhng kt hp cua cac ky thut a hoc lam cho trang web cua chung ta hp dn hn.

    You might also like