Kurasa za Ajax. AJAX. Kwa hiyo ni nini? Kutumia chaguzi za ziada za usanidi

Tulijifunza kuhusu mbinu za moja kwa moja za jQuery za kufanya kazi na Ajax (kama vile get(), post(), na load()). Nakala hii inaelezea API ya kiwango cha chini cha jQuery Ajax.

Inaweza kuonekana kuwa neno la kiwango cha chini linaonyesha kuwa unafikia uwezekano uliofichwa utaratibu wa kuuliza, lakini hii sio kweli kabisa. Njia zilizoelezwa hapa hazifai sana ikilinganishwa na zile zilizojadiliwa hapo awali, lakini kwa gharama ndogo juhudi za ziada Hoja inaweza kusanidiwa kulingana na mahitaji yako, ambayo haiwezekani kila wakati kwa kutumia njia za moja kwa moja au za usaidizi.

Maombi rahisi ya Ajax

Kuunda maswali kwa kutumia API ya kiwango cha chini sio ngumu zaidi kuliko kutumia njia za moja kwa moja au za usaidizi. Tofauti ni kwamba mbinu hii hukuruhusu kudhibiti vipengele vingine vingi vya ombi na kupata taarifa zaidi kuhusu ombi linalotekelezwa. Katikati ya API ya kiwango cha chini ni njia ya ajax() , mfano rahisi wa matumizi yake umepewa hapa chini (inatumika hapa. faili asili na faili ya mydata.json iliyoelezewa katika nakala iliyotangulia):

$(function() ( $.ajax("mydata.json", ( success: function(data)) var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo ("#safu1"); template.tmpl(data.slice(3)).appendTo("#safu2"); ));));

Hoja za njia ya ajax() ni URL iliyoombwa na kitu cha kuonyesha data ambacho sifa zake hufafanua seti ya jozi za thamani-msingi, ambayo kila moja inafafanua kigezo cha ombi. Hapa, kitu kilichopitishwa kwa ajax() njia ina parameter moja tu, mafanikio, ambayo inabainisha kazi ambayo itaitwa ikiwa ombi limefanikiwa.

KATIKA katika mfano huu tunaomba faili ya mydata.json kutoka kwa seva na kuitumia pamoja na kiolezo cha data ili kuunda vipengele na kuviingiza kwenye hati, kama tulivyofanya katika makala iliyotangulia kwa kutumia mbinu za moja kwa moja. Kwa msingi, njia ya ajax() inaunda ombi la HTTP GET, i.e. mfano huu ni sawa na kutumia get() na getJSON() mbinu.

kitu cha jqXHR

Njia ya ajax() inarudisha kitu cha jqXHR ambacho kinaweza kutumika kupata maelezo ya kina kuhusu ombi na ambaye unaweza kuingiliana naye. Kipengee cha jqXHR ni kifungashio kuzunguka kitu cha XMLHttpRequest ambacho kinaunda msingi wa usaidizi wa kivinjari wa Ajax.

Kwa shughuli nyingi za Ajax, kitu cha jqXHR kinaweza kupuuzwa tu, ambayo ndio ninapendekeza. Kitu hiki kinatumika katika hali ambapo ni muhimu kupata taarifa kamili zaidi kuhusu majibu ya seva kuliko yale yanaweza kupatikana kwa njia nyingine. Inaweza pia kutumika kusanidi vigezo vya ombi la Ajax, lakini hii ni rahisi kufanya kwa kutumia mipangilio inayopatikana kwa njia ya ajax(). Sifa na njia za kitu cha jqXHR zimeelezewa kwenye jedwali hapa chini:

Sifa na mbinu za kitu cha jqXHR Maelezo ya Mali/Njia
readyState Hurejesha kiashirio cha maendeleo ya ombi katika mzunguko wake wote wa maisha, kuanzia 0 (ombi halijatumwa) hadi 4 (ombi limekamilika)
hali Hurejesha msimbo wa hali ya HTTP uliotumwa na seva
Nakala ya hali Hurejesha maelezo ya maandishi ya msimbo wa hali
majibuXML Hurejesha jibu kama XML (ikiwa ni hati ya XML)
Nakala ya majibu Hurejesha jibu kama mfuatano
setRequest(jina, thamani) Hurejesha kichwa cha ombi (hii inaweza kurahisishwa kwa kutumia vigezo vya vichwa)
getAllResponseHeaders() Hurejesha kama mfuatano vichwa vyote vilivyomo kwenye jibu
getResponseHeaders(jina) Hurejesha thamani ya kichwa cha jibu kilichobainishwa
abortion() Inabatilisha ombi

Kitu cha jqXHR kinaonekana katika sehemu kadhaa kwenye msimbo. Inatumika kwanza kuokoa matokeo yaliyorejeshwa na ajax() njia, kama inavyoonyeshwa kwenye mfano hapa chini:

$(function() ( var jqxhr = $.ajax("mydata.json", ( success: function(data)) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3) ).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ) )); var timerID = setInterval(function() ( console.log("Hali:) " + jqxhr.status + " " + jqxhr.statusText); ikiwa (jqxhr.readyState == 4) ( console.log("Ombi limekamilika: " + jqxhr.responseText); clearInterval(timerID); )), 100); ));

Katika mfano huu, tunahifadhi matokeo yaliyorejeshwa na njia ya ajax() kisha tumia njia ya setInterval() kutoa habari ya ombi kila 100ms. Kutumia matokeo yaliyorejeshwa na njia ya ajax() haibadilishi ukweli kwamba ombi linatekelezwa kwa usawa, kwa hivyo tahadhari lazima zichukuliwe wakati wa kufanya kazi na kitu cha jqXHR. Kuangalia hali ya ombi, tunatumia mali ya readyState (thamani ya 4 inalingana na kukamilika kwa ombi) na kuonyesha majibu ya seva kwa console.

Kwa hali hii, matokeo ya koni inaonekana kama hii (inaweza kuonekana tofauti kidogo kwenye kivinjari chako):

Ninatumia tu kitu cha jqXHR katika hali adimu na siifanyi kabisa ikiwa ni matokeo yaliyorejeshwa na ajax() njia. jQuery huwasha ombi la Ajax kiatomati wakati wa kupiga njia ya ajax(), kwa hivyo sioni uwezo wa kubinafsisha vigezo vya ombi kuwa muhimu sana. Ikiwa ninataka kufanya kazi na kitu cha jqXHR (kawaida kupata habari zaidi juu ya jibu la seva), mimi kawaida hufanya hivi kupitia vigezo vya kushughulikia tukio, ambavyo tutazungumza baadaye. Wananipa habari kuhusu hali ya ombi, ambayo huondoa hitaji la kuijua.

Kuweka URL ya ombi

Moja ya chaguzi muhimu zaidi zinazopatikana ni parameta ya url, ambayo hukuruhusu kubainisha URL ya ombi. Unaweza kutumia chaguo hili kama njia mbadala ya kupitisha URL kama hoja kwa njia ya ajax(), kama inavyoonyeshwa kwenye mfano hapa chini:

$(function() ( $.ajax(( url: "mydata.json", mafanikio: function(data) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3))) .appendTo("#safu1"); template.tmpl(data.slice(3)).appendTo("#safu2"); )); ));

Inaunda ombi la POST

Ili kutaja aina inayohitajika ya swala kutekelezwa, tumia aina parameter. Kwa chaguo-msingi, maombi ya GET hufanywa, kama katika mfano uliopita. Mfano wa kutumia njia ya ajax() kuunda ombi la POST na kuwasilisha data ya fomu kwa seva imepewa hapa chini:

$(function() ( $.ajax(( url: "mydata.json", mafanikio: function(data) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3))) .appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2");));// Bofya kidhibiti kwenye kitufe cha "Agiza" $("kitufe"). bofya (function(e) ( $.ajax(( url: "phphandler.php", chapa: "post", data: $("form").serialize(), mafanikio: processServerResponse, dataType: "json" )) ; e.preventDefault() )); mchakato wa kukokotoaServerResponse(data) ( // Hapo awali ficha bidhaa zote var inputElems = $("div.dcell").hide(); kwa (var prop katika data) ( // Onyesha zile pekee bidhaa , mpangilio ambao ni mkubwa kuliko 0 // (jibu kutoka kwa seva lina bidhaa kama hizo pekee) var filtered = inputElems.has("input") .appendTo("#row1").onyesha();) // Ficha vipengele vya msingi fomu $("#buttonDiv, #totalDiv").ondoa(); // Onyesha vipengele vipya kutoka kwa kiolezo totalTmpl $("#totalTmpl").tmpl(data).appendTo("mwili"); )); Jumla ya maagizo: $(jumla) Agiza .png"/> $(jina):

Sitaelezea mfano huu kwa undani hapa, kwa sababu ... tuliiangalia kwa undani katika makala iliyotangulia (tu kwa kutumia post() njia). Nitaona tu kwamba hapa, pamoja na aina, tulitumia vigezo kadhaa zaidi. Ili kubainisha lengo la ombi la POST, kigezo cha url kilichoelezwa hapo awali kinatumika. Data itakayotumwa imebainishwa kwa kutumia kigezo cha data, ambacho thamani yake imewekwa kwa kutumia mbinu ya kuratibu () iliyoelezwa katika makala iliyotangulia. Aina ya data iliyopokelewa kutoka kwa seva imebainishwa katika kigezo cha Aina ya data.

Kufanya kazi na Ajax Matukio

Vigezo kadhaa hukuruhusu kubainisha chaguo za kukokotoa ili kushughulikia matukio ambayo yanaweza kufutwa katika kipindi chote cha ombi la Ajax. Hivi ndivyo utakavyobainisha vipengele vya kurudisha nyuma ambavyo vina jukumu muhimu katika maombi ya Ajax. Tayari umefahamiana na mmoja wao wakati wa kuzingatia parameta ya mafanikio katika mfano uliopita. Orodha ya vigezo vinavyohusishwa na matukio, pamoja na maelezo yao mafupi, yanaonyeshwa kwenye jedwali hapa chini:

Kushughulikia maombi yaliyofanikiwa

Katika mifano hapo juu, wakati wa kutumia parameter ya mafanikio, hoja mbili ziliachwa kutoka kwa simu ya kazi - ujumbe unaoelezea matokeo ya ombi na kitu cha jqXHR. Mfano wa kutumia kitendakazi ambacho huchukua hoja hizi ni hapa chini:

$(function() ( $.ajax(( url: "mydata.json", success: function(data, hali, jqxr) ( console.log("Hali: " + hali); console.log("jqXHR hali: " + jqxhr.status + " " + jqxhr.statusText); console.log(jqxhr.getAllResponseHeaders()); var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); )); ));

Hoja ya hali ni mfuatano unaoelezea matokeo ya ombi. Chaguo za kukokotoa simu tunazobainisha kwa kutumia kigezo cha mafanikio hutekelezwa tu kwa maombi yaliyofaulu, kwa hivyo thamani ya hoja hii huwa ni mafanikio. Isipokuwa ni wakati unapotumia parameta ya ifModified, iliyofafanuliwa ijayo.

Utendakazi wa kurudi nyuma kwa matukio yote ya Ajax hufuata muundo sawa, lakini hoja hii ni muhimu zaidi kwa idadi ya matukio mengine.

Hoja ya mwisho ni kitu cha jqXHR. Sio lazima kujua hali ya ombi kabla ya kuanza kufanya kazi na kitu hiki kwa sababu unajua kuwa kazi hiyo inatekelezwa tu wakati ombi litafanikiwa. Mfano huu hutumia kipengee cha jqXHR kupata maelezo kuhusu hali ya ombi na vichwa ambavyo seva ilijumuisha katika majibu, na kuchapisha maelezo haya kwenye dashibodi.

KATIKA kwa kesi hii matokeo yanaonekana kama hii (kulingana na seva unayotumia, unaweza kuwa na seti tofauti za vichwa):

Hitilafu katika kuchakata

Kigezo cha hitilafu kinatumika kutaja chaguo la kukokotoa ambalo linapaswa kuitwa wakati ombi linashindwa. Mfano unaolingana umetolewa hapa chini:

Hitilafu (rangi: nyekundu; mpaka: nyekundu thabiti ya wastani; pedi: 4px; ukingo: otomatiki; upana: 200px; panga maandishi: katikati)

$(function() ( $.ajax(( url: "NoSuchFile.json", mafanikio: function(data)) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)) .appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ), hitilafu: function(jqxhr, status, errorMsg) ( $("") .text( "Hali: " + hali + " Hitilafu: " + errorMsg) .insertAfter("h1"); ) )); ));

Hapa, faili ya NoSuchFile.json inaombwa, ambayo haipo kwenye seva, na kwa hiyo ombi ni wazi haiwezi kukamilika, kwa sababu ambayo kazi iliyotajwa kwa kutumia parameter ya hitilafu itaitwa. Hoja za chaguo hili la kukokotoa ni kitu cha jqXHR, ujumbe wa hali ya hitilafu, na ujumbe wa hitilafu uliopokewa katika jibu la seva. Ndani ya kipengele hiki, imeongezwa kwenye hati kipengele cha div, kuonyesha maadili ya hali na makosaMsg hoja, kama inavyoonekana kwenye takwimu:

Inasanidi vigezo vya ombi kabla ya kuzituma

Kigezo cha beforeSend hukuruhusu kutaja chaguo la kukokotoa ambalo litaitwa kabla ya maombi kutumwa. Hii hukuruhusu kusanidi ombi katika dakika ya mwisho kwa kuongeza au kubadilisha vigezo vilivyopitishwa kwa njia ya ajax() (ambayo inaweza kuwa muhimu sana ikiwa maombi mengi yanatumia kitu sawa kilicho na maadili ya kigezo kinachohitajika). Mfano wa kutumia mbinu hii umewasilishwa hapa chini:

$(function() ( $.ajax(( success: function(data) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#safu1"). ; template.tmpl(data.slice(3)).appendTo("#row2"); ), hitilafu: function(jqxhr, status, errorMsg) ( $("") .text("Hali: " + status + " Hitilafu: " + errorMsg) .insertAfter("h1"); ), beforeSend: function(jqxhr, settings) ( settings.url = "mydata.json"; ) )); ));

Hoja kipengele maalum ni kitu cha jqXHR (ambacho kinaweza kuwa muhimu kwa kubinafsisha vichwa vya ombi au kughairi ombi kabla ya kutumwa) na kitu kilicho na vigezo vilivyopitishwa kwa njia ya ajax(). Katika mfano huu, URL ya ombi la Ajax imewekwa kwa kutumia kigezo cha beforeSend.

Kuweka Vishughulikia Matukio Nyingi

Katika mifano iliyopita, tulijibu kutokea kwa matukio yanayohusiana na ombi la Ajax kwa kupiga kazi moja, lakini katika mafanikio, makosa, kamili na kabla yaTuma vigezo unaweza kutaja safu ya kazi, ambayo kila moja itatekelezwa wakati sambamba. tukio limeanzishwa. Mfano rahisi wa hii umetolewa hapa chini:

$(function() ( $.ajax(( success: , beforeSend: function(jqxhr, settings) ( settings.url = "mydata.json"; ) )); kazi processData(data, status, jqxhr) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ) ripoti ya kaziHali(data, hadhi, jqxhr) ( console.log("Hali: " + hali + " Msimbo wa matokeo: " + jqxhr.status); ) ));

Katika mfano huu, parameter ya mafanikio imewekwa kwa safu inayojumuisha kazi mbili, moja ambayo hutumia data ili kuongeza vipengele kwenye hati, na ya pili ambayo huchapisha habari kwenye console.

Kuweka muktadha wa matukio

Kigezo cha muktadha hukuruhusu kutaja kipengee kitakachopewa utofauti huu wakati kidhibiti tukio kinaitwa. Hii inaweza kutumika kufikia vipengele lengwa katika hati bila kulazimika kuvichagua katika kitendakazi cha kidhibiti. Mfano unaolingana umetolewa hapa chini:

$(function() ( $.ajax(( success: function(data) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#safu1"). ; template.tmpl(data.slice(3)).appendTo("#row2"); ), beforeSend: function(jqxhr, settings) ( settings.url = "mydata.json"; ), muktadha: $("h1 "), kamili: function(jqxhr, status) ( var color = status == "success" ? "green" : "nyekundu"; this.css("mpaka", "thick solid " + color); ) )); ));

Hapa parameta ya muktadha imewekwa kwa kitu cha jQuery kilicho na vitu vya h1 vya hati. Katika kazi iliyoelezwa na parameter kamili, tunatengeneza vipengele vilivyochaguliwa (katika kesi hii kipengele, kwa kuwa kuna kipengele kimoja tu cha h1 kwenye waraka) kwa kupiga njia ya css () kwenye kitu cha jQuery (kinachotajwa kupitia hii). Rangi ya mpaka imedhamiriwa kulingana na hali ya ombi.

Kigezo cha muktadha kinaweza kutumika kuweka kitu chochote kama muktadha, na una jukumu la kufanya shughuli halali tu kwenye kitu hicho. Kwa mfano, ukiweka muktadha kwa Kipengele cha HTML, lazima upitishe kitu hicho kwa $() chaguo la kukokotoa kabla ya kuita mbinu zozote za jQuery juu yake.

Kuweka vigezo vya msingi kwa maombi ya Ajax

Kuna kikundi cha vigezo ambavyo unaweza kutekeleza usanidi wa msingi wa ombi la Ajax (tulijadili baadhi yao, url na aina, hapo juu). Kati ya chaguzi zote zinazopatikana, hizi sio za kuvutia zaidi na majina yao mara nyingi huzungumza wenyewe. Vigezo kuhusu ambayo tunazungumzia, zimetolewa kwenye jedwali hapa chini:

Vigezo vya msingi vya usanidi wa ombi la Ajax Maelezo ya Kigezo
anakubali Huweka ombi kwa kichwa cha Kubali, ambacho hubainisha aina za MIME zinazotumika na kivinjari. Kwa chaguo-msingi, thamani hii imedhamiriwa na kigezo cha DataType
akiba Thamani ya uwongo inaonyesha kuwa maudhui ya ombi hayapaswi kuhifadhiwa na seva. Kwa chaguo-msingi, aina zote za data isipokuwa hati na jsonp zimehifadhiwa
Aina ya maudhui Huweka thamani ya kichwa cha ziara ya maudhui kwa ombi
DataType Hubainisha ni aina gani za data zinazotarajiwa kutoka kwa seva. Chaguo hili likitumiwa, jQuery itapuuza taarifa iliyotolewa na seva kuhusu aina ya ombi
vichwa Inabainisha vichwa vya ziada na thamani ambazo zinapaswa kujumuishwa katika ombi
jsonp Hubainisha mfuatano wa kutumia badala ya kitendakazi cha kupiga simu unapotuma maombi ya JSONP (maombi ya vikoa vingi). Kigezo hiki kinahitaji makubaliano na seva
jsonpCallback Hubainisha jina la kitendakazi cha kurudi nyuma ambacho kinafaa kutumika badala ya jina lisilo la kawaida linalozalishwa kiotomatiki linalotumiwa na jQuery kwa chaguo-msingi.
nenosiri Inabainisha nenosiri ambalo linapaswa kutumika katika ombi wakati wa kupitisha utaratibu wa uthibitishaji
scriptCharset Huiambia jQuery ni herufi gani iliyowekwa itumie wakati wa kusimba maudhui yaliyoombwa ya JavaScript
muda umeisha Huweka muda wa kuisha (katika milisekunde) kwa ombi
jina la mtumiaji Hubainisha jina la mtumiaji ambalo linafaa kutumika katika ombi la uthibitishaji
Kuweka muda wa kuisha na vichwa

Watumiaji mara nyingi hata hawatambui kuwa maombi ya Ajax yanatekelezwa, na kwa hivyo kubainisha muda unaokubalika wa kuisha sio wazo mbaya, kwani hii itaokoa watumiaji kutoka kwa kungoja kwa kuchosha kwa mchakato fulani usiojulikana kukamilika. Mfano wa kuweka muda wa kuisha kwa ombi umetolewa hapa chini:

$(function() ( $.ajax(( muda umeisha: 5000, vichwa: ( "X-HTTP-Method-Override": "PUT"), mafanikio: function(data) ( var template = $("#flowerTmpl") ; template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ), hitilafu: function(jqxhr , hali, errorMsg) ( console.log("Kosa: " + hali); ) )); ));

Katika mfano huu, kigezo cha kuisha huweka muda wa juu zaidi wa kuisha hadi sekunde 5. Ikiwa ombi halijakamilika ndani ya wakati huu, kazi iliyoelezwa kwa kutumia parameter ya hitilafu itaitwa na msimbo wa hitilafu uliotajwa na parameter ya hali itaonyeshwa.

Kipima muda huanza mara baada ya ombi kutumwa kwa kivinjari, na vivinjari vingi huweka mipaka kwa idadi ya maombi ambayo yanaweza kutekelezwa wakati huo huo. Hii ina maana kwamba kuna hatari kwamba wakati muda wa kuisha unaisha, ombi hata halitatekelezwa. Ili kuepuka hili, unahitaji kufahamu mapungufu ya kivinjari na ukubwa na muda unaotarajiwa wa maombi mengine yoyote ya Ajax ambayo yanaendeshwa.

Kwa kuongeza, mfano huu hapa chini hutumia parameta ya vichwa kuongeza kichwa kwa ombi. Kitu cha kuonyesha data kinatumika kubainisha vichwa. Kijajuu kinachotumiwa hapa kinaweza kuwa muhimu kwa kuunda programu za wavuti zinazotumia mtindo wa usanifu wa REST, mradi tu seva inakitambua kwa usahihi.

Kutumia chaguzi za ziada za usanidi

Sehemu zifuatazo zinaelezea chaguo muhimu zaidi na muhimu zaidi zinazotumika kwa maombi ya Ajax. Kawaida hutumiwa mara chache, lakini wakati inahitajika, ni muhimu sana. Chaguo hizi hukuruhusu kurekebisha vizuri jinsi jQuery inavyoingiliana na Ajax.

Kuunda Maombi ya Usawazishaji

Hali ya utekelezaji wa hoja inadhibitiwa kwa kutumia kigezo cha async. Thamani chaguo-msingi ya kweli kwa kigezo hiki inamaanisha kuwa ombi litatekelezwa katika hali isiyolingana, ilhali thamani ya sivyo ni hali ya kusawazisha.

Wakati ombi linatekelezwa kwa usawa, njia ya ajax() hufanya kama kazi ya kawaida, na kivinjari kinaendelea kutekeleza maagizo mengine ya hati baada ya ombi kumaliza kutekeleza.

Kupuuza data ambayo bado haijabadilishwa

Kwa kutumia ifModified parameter inawezekana kuhakikisha upokeaji wa data tu ikiwa, tangu sasa ombi la mwisho wamebadilishwa. Tabia hii imedhamiriwa na kichwa cha Mwisho-Marekebisho. Hii inaepuka uhamishaji wa data usio na maana ambao hautampa mtumiaji habari yoyote mpya ikilinganishwa na ambayo tayari anayo. Kwa chaguo-msingi kigezo cha ifModified kina thamani ya uongo, ambayo inaambia jQuery kupuuza kichwa kilichobadilishwa Mwisho na kutoa data hata hivyo.

Mfano wa kutumia parameta hii umepewa hapa chini:

$(function() ( $("button").click(function(e) ( $.ajax("mydata.json", ( ifModified: true, success: function(data, status) ( if (status == " mafanikio") ( $("#row1, #row2").children().ondoa(); var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo( "#row1"); template.tmpl(data.slice(3)).appendTo("#row2");) vinginevyo ikiwa (status == "haijabadilishwa") ($("img").css("mpaka" , "kijani kibichi nene"); ) ) )); e.preventDefault(); )) ));

Mfano huu unaweka parameta ya ifModified kuwa kweli. Chaguo la kukokotoa la mafanikio huitwa kila mara, lakini ikiwa kutoka wakati maudhui yalipoombwa kuingia mara ya mwisho, haijabadilika, basi hoja ya data haitafafanuliwa na hoja ya hali itakuwa thamani isiyobadilishwa.

Katika kesi hii, vitendo vinavyofanywa vinatambuliwa na thamani ya hoja ya hali. Ikiwa thamani ya hoja hii ni mafanikio, basi hoja ya data hutumiwa kuongeza vipengele kwenye hati. Ikiwa hoja ya hali haijabadilishwa, basi tunatumia mbinu ya css() kuangazia vipengee ambavyo tayari vipo kwenye hati na fremu.

Kujibu tukio la kubofya linalohusishwa na kitufe, njia ya ajax() inaitwa. Hii inafanya uwezekano wa kurudia swala moja mara kadhaa ili kuonyesha athari ya parameta ya ifModified, kama inavyoonyeshwa kwenye takwimu:

Kama chaguo hili ni muhimu, ninapendekeza kuitumia kwa tahadhari. Ikiwa ombi litatumwa kama matokeo ya kitendo cha mtumiaji (kwa mfano, kubofya kitufe), basi kuna uwezekano kwamba mtumiaji alibofya kitufe kwa sababu ombi la awali halikukamilika kama ilivyotarajiwa.

Fikiria kuwa unaomba data, lakini njia iliyoainishwa kwenye parameta ya mafanikio ina hitilafu inayokuzuia. sasisho sahihi yaliyomo kwenye hati. Kisha yako hatua inayofuata itajaribu kubofya kitufe tena ili kufikia matokeo yanayotarajiwa. Ikiwa unatumia kigezo cha ifModified vibaya, unaweza kupuuza vitendo vya mtumiaji, na kuwalazimisha kuchukua hatua kali zaidi kurekebisha tatizo.

Inachakata msimbo wa majibu

parameta ya hali ya Msimbo hukuruhusu kuchagua chaguzi vitendo zaidi kulingana na nambari ya majibu kwa maombi ya HTTP. Inaweza kutumika ama badala ya vigezo vya mafanikio na makosa, au kwa kuongeza kwao. Mfano wa matumizi huru ya parameta ya statusCode imetolewa hapa chini:

$(function() ( $.ajax(( url: "mydata.json", statusCode: ( 200: function(data)) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2"); ), 404: function(jqxhr, status, errorMsg) ( $("") .text("Hali: " + hali + " Hitilafu: " + errorMsg) .insertAfter("h1"); ) ) )); ));

Hapa, kigezo cha Msimbo wa hali kinabainishwa kama kitu ambacho huanzisha uhusiano kati ya misimbo ya majibu kwa maombi ya HTTP na vitendakazi sambamba ambavyo lazima vitekelezwe kwenye seva. Ni hoja zipi zinazopitishwa kwa chaguo za kukokotoa hutegemea ikiwa nambari ya majibu inaonyesha ombi lililofaulu au kosa.

Ikiwa nambari (kwa mfano, 200) inalingana na ombi lililofanikiwa, basi hoja ni sawa na zile ambazo zingepitishwa kwa kazi iliyoainishwa na parameta ya mafanikio. Vinginevyo (kwa mfano, msimbo wa majibu 404 unaoonyesha kuwa faili iliyoombwa haikupatikana), hoja ni sawa na zile ambazo zingepitishwa kwa kazi iliyobainishwa na kigezo cha hitilafu.

Kama unavyoona, zana hii haitoi habari ya moja kwa moja kuhusu misimbo ya majibu. Mimi huitumia mara nyingi wakati wa kurekebisha mwingiliano wa seva ya kivinjari, kawaida ili kujua ni kwanini jQuery haifanyi jinsi ninavyotaka. Katika kesi hii, mimi hutumia parameta ya haliCode kwa kuongeza mafanikio na vigezo vya makosa na kutoa habari kwa koni. Ikiwa vigezo hivi vinatumiwa pamoja, kazi za mafanikio na makosa zitatekelezwa kwanza, na kisha kazi zilizofafanuliwa na parameta ya statusCode zitatekelezwa.

Data ya majibu ya kusafisha kabla

Kwa kutumia dataFilter parameter unaweza kutaja chaguo la kukokotoa ambalo litaitwa kusafisha mapema data iliyorejeshwa na seva. Zana hii ni ya lazima katika hali ambapo data iliyotumwa na seva hairidhishi kwako kabisa, ama kwa sababu imeumbizwa kwa njia isiyofaa, au kwa sababu ina data ambayo hutaki kuchakata.

Chombo hiki hunisaidia sana ninapofanya kazi na seva za Microsoft ASP.NET ambazo zinaongeza data ya nje kwa data ya JSON. Kuondoa data kama hiyo kwa kutumia kigezo cha DataFilter kunahitaji tu juhudi ndogo. Mfano wa kutumia kigezo cha dataFilter umepewa hapa chini:

$(function() ( $.ajax(( url: "mydata.json", mafanikio: function(data) ( var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3))) .appendTo("#row1"); template.tmpl(data.slice(3)).appendTo("#row2");), dataType: "json", dataFilter: function(data, dataType) ( if (dataType = = "json") ( var filteredData = $.parseJSON(data); filteredData.shift(); rudisha JSON.stringify(filteredData.reverse()); ) vinginevyo ( rudisha data; ) )); ));

Chaguo za kukokotoa hupitishwa data iliyopokelewa kutoka kwa seva na thamani ya kigezo cha DataType. Ikiwa DataType haitumiki, hoja ya pili imewekwa kuwa isiyofafanuliwa. Kazi yako ni kurudisha data iliyochujwa. Katika mfano huu, mada ya umakini wetu ni data katika umbizo la JSON:

Var filteredData = $.parseJSON(data); iliyochujwaData.shift(); rudisha JSON.stringify(filteredData.reverse()); ...

Ili kufanya mfano kuwa wa kielelezo zaidi, hufanya shughuli zingine za ziada. Kwanza, data ya JSON hubadilishwa kuwa safu ya JavaScript kwa kutumia Mbinu ya jQuery changanuaJSON. Kisha kipengele cha kwanza kinaondolewa kwenye safu kwa kutumia njia ya kuhama(), na mpangilio wa vitu vyake vilivyobaki hubadilishwa kwa kutumia njia ya reverse().

Kazi yote inayohitajika kufanya ni kurudisha kamba, kwa hivyo tunaita JSON.stringify() tukijua kuwa jQuery itabadilisha data kuwa Kitu cha JavaScript kabla ya kupiga simu kazi ya mafanikio. Mfano huu ulionyesha uwezo wa kuondoa kipengele kutoka kwa safu, hata hivyo, kulingana na hali, tunaweza kufanya aina nyingine yoyote ya usindikaji.

Matokeo ya mwisho yanaonyeshwa kwenye takwimu:

Usimamizi wa ubadilishaji data

Nilihifadhi hakiki ya mojawapo ya mipangilio ninayoipenda kwa mara ya mwisho. Huenda umegundua kuwa jQuery hufanya ubadilishaji unaofaa kiotomatiki wakati wa kurejesha aina fulani za data. Kwa mfano, wakati wa kupokea data ya JSON, jQuery hutoa utendaji wa mafanikio unaotumia kitu cha JavaScript badala ya mfuatano mbichi wa JSON.

Ili kudhibiti mabadiliko kama haya hutumiwa vigezo vya kubadilisha fedha. Thamani ya kigezo hiki ni kitu ambacho huanzisha ramani kati ya aina za data na vitendakazi vinavyotumika kuzichakata. Mfano hapa chini unaonyesha jinsi ya kutumia chaguo hili kubadilisha data ya HTML kiotomatiki kuwa kitu cha jQuery:

$(function() ( $.ajax(( url: "flowers.html", // Katika mfano huu tunapakia alama za HTML, sio mafanikio ya data ya JSON: function(data, status, jqxhr) ( var elems = data.filter( "div").addClass("dcell"); elems.slice(0, 3).appendTo("#row1"); elems.slice(3).appendTo("#row2"); ), vigeuzi: (" maandishi html": kazi(data) ( rudisha $(data); ) ) )); ));

Mfano huu husajili chaguo za kukokotoa kwa aina ya data ya maandishi ya html. Kumbuka nafasi kati ya vijenzi vya aina iliyobainishwa ya MIME (kinyume na fomu ya nukuu ya maandishi/html). Chaguo la kukokotoa linakubali data iliyopokelewa kutoka kwa seva na kurejesha data iliyobadilishwa. Katika kesi hii, mabadiliko ya data yanajumuisha kupitisha kipande cha HTML kilicho katika faili ya flowers.html hadi $() chaguo la kukokotoa na kurejesha matokeo. Hii inamaanisha kuwa njia za kawaida za jQuery zinatumika kwa kitu kilichopitishwa kama hoja ya data ya mafanikio.

Unapofanya kazi na vibadilishaji data, unaweza kubebwa sana. Mimi hujaribu kila mara kuepusha jaribu la kufanya zaidi ya nipaswavyo na kazi hizi. Kwa mfano, wakati mwingine ninajaribiwa kutumia kiolezo kwa data ya JSON na kurudisha vipengele vinavyotokana vya HTML. Ingawa mbinu hii ni rahisi sana, haitakutumikia vyema ikiwa mtu mwingine atajaribu kupanua nambari yako au, kwa mfano, wewe mwenyewe baadaye unahitaji kufanya usindikaji wa kina wa data ili kuipata katika hali yake ya asili.

Kuanzisha na kuchuja maombi ya Ajax

Sasa kwa kuwa umefahamu njia ya ajax() na vigezo vinavyopatikana kufanya kazi nayo, tunaweza kuangalia chache. mbinu za ziada, iliyotolewa na jQuery ili kurahisisha kusanidi maswali.

Kufafanua mipangilio chaguo-msingi

Njia ya ajaxSetup() hukuruhusu kuweka maadili ya parameta ambayo yatatumika kwa chaguo-msingi katika maombi yote ya Ajax, na hivyo kukuweka huru kutokana na kusanidi vigezo kwa kila ombi. Mfano wa kutumia njia hii umetolewa hapa chini:

") .text("Hali: " + hali + " Hitilafu: " + errorMsg) .insertAfter("h1"); ), vigeuzi: ( "text html": function(data) ( return $(data); ) ) )); $.ajax(( url: "flowers.html", mafanikio: function(data, status, jqxhr) ( var elems = data.filter("div").addClass("dcell"); elems.slice( 0, 3).appendTo("#safu1"); elems.slice(3).appendTo("#safu2"); )));));

Njia ya ajaxSetup() inaitwa kutumia kazi ya jQuery $ kwa njia ile ile kama njia ya ajax() iliitwa. Hoja ya njia ya ajaxSetup() ni kitu kilicho na maadili ya parameta ambayo ungependa kutumia kwa chaguo-msingi kwa maombi yote ya Ajax. Katika mfano huu tunaweka maadili chaguo-msingi kwa vigezo vya muda, kimataifa, makosa na vibadilishaji.

Baada ya njia ya ajaxSetup() kuitwa, tunahitaji tu kufafanua maadili ya vigezo ambavyo tunataka kubadilisha, au zile ambazo hazijatolewa na chaguo-msingi. Hii hutoa uokoaji mkubwa wa wakati katika hali ambazo lazima uulize maswali mengi maadili sawa vigezo.

Omba kuchujwa

Njia ya ajaxSetup() inafafanua thamani za msingi za usanidi zinazotumika kwa maombi yote ya Ajax. Uwezekano mipangilio yenye nguvu vigezo kwa ajili ya maombi ya mtu binafsi Ajax hutolewa na ajaxPrefilter() mbinu. Mfano wa kutumia njia hii umetolewa hapa chini:

$(function() ( $.ajaxSetup(( timeout: 15000, global: false, error: function(jqxhr, status, errorMsg) ( $("") .text("Hali: " + hali + " Hitilafu: " + errorMsg) .insertAfter("h1"); ), vigeuzi: ( "text html": function(data) ( return $(data); ) ) ); $.ajaxPrefilter("json html", function(settings, originalSettings , jqxhr) ( ikiwa (originalSettings.dataType == "html") ( settings.timeout = 2000; ) vinginevyo ( jqxhr.abort(); ) )) $.ajax(( url: "flowers.html", dataType: " html ", mafanikio: kazi(data, hadhi, jqxhr) ( var elems = data.filter("div").addClass("dcell"); elems.slice(0, 3).appendTo("#row1"); vipengele .kipande(3).ambatanishaKwa("#safu2"); ))); ));

Chaguo za kukokotoa utakazobainisha zitatekelezwa kwa kila ombi jipya la Ajax. Hoja zilizopitishwa kwa chaguo la kukokotoa ni vigezo vya ombi (pamoja na maadili yoyote chaguo-msingi uliyoweka kwa kutumia njia ya ajaxSetup()), na vile vile vigezo asili vilivyopitishwa kwa njia ya ajax() (bila kujumuisha maadili yoyote chaguomsingi) na ombi la jqXHR. kitu.

Tunafanya mabadiliko kwa kitu kilichopitishwa kama hoja ya kwanza, kama inavyoonyeshwa kwenye mfano. Katika hali hii, ikiwa kigezo cha Aina ya data kipo kati ya vigezo vilivyopitishwa kwa njia ya ajax(), basi muda wa kuisha umewekwa kwa sekunde mbili. Ili kuzuia maombi mengine yote kutumwa, njia ya abort() inaitwa kwenye kitu cha jqXHR.


Ajax ni mbinu ya kujenga miingiliano ya mtumiaji inayoingiliana kwa programu za wavuti, iliyotengenezwa katika javaScript, ambayo usuli(bila kupakia upya ukurasa mzima, kama katika PHP) hukuruhusu kubadilishana data kati ya kivinjari na seva.

AJAX kutoka Kiingereza agex, matamshi ni maarufu katika Kirusi ajax.

Kutoka kwa historia ya AJAX Kutajwa kwa kwanza kwa AJAX kulijulikana rasmi mnamo Februari 18, 2005 katika nakala ya Jesse James Garrett, Njia Mpya ya Maombi ya Wavuti. Mwandishi aliamua kuelezea mbinu mpya ya teknolojia za wavuti na mawasiliano yaliyorahisishwa kati ya seva na mteja.

AJAX ilipata umaarufu mkubwa baada ya Google kuitumia katika huduma zake kama vile Gmail, ramani za google na Google Pendekeza.

Utafutaji wa Google hurejesha chaguo za hoja

Jinsi AJAX inavyofanya kazi Mwanzoni ningependa kusema kwamba AJAX inachukua umbo la kitu kimoja tu kinachoitwa XMLHttpRequest.

Sifa za XMLHttpRequest zinawezesha kupitisha taarifa kwa seva kwa kutumia njia za Pata au Chapisha, baada ya hapo seva hufanya shughuli zinazohitajika na kilichobaki ni kupokea jibu.

Unapotumia Ajax unahitaji kuzingatia sheria zifuatazo:
1. taarifa zote hutumwa/kupokelewa katika usimbaji wa UTF-8 pekee
2. XMLHttpRequest inaitwa tofauti katika vivinjari tofauti

Faida kuu na hasara za AJAXAdvantages

Akiba ya trafiki. Data huhamishwa tu kwa sehemu maalum ya ukurasa, ambayo hupunguza trafiki kwa kiasi kikubwa.
Kupunguza mzigo kwenye seva. Hakuna haja ya kuonyesha upya ukurasa mzima, ombi mahususi hutoweka. Kwa mfano, ulitaka kupiga kura kwenye tovuti. Baada ya kubonyeza kitufe, data hutumwa kwa seva kwa kutumia sauti yako, na jibu hurejeshwa. Walakini, ukurasa wenyewe haujasasishwa. Matokeo tu hubadilika.
Uendeshaji wa haraka wa huduma yenyewe. Kwa kuwa kazi hufanyika kwa kuzuia maalum, matokeo ya kazi yake yanaweza kuonekana kwa kasi zaidi.
Tofauti katika matumizi. Kitendo cha AJAX kinahusisha zaidi ya kufanya kazi na fomu tu. Kwa mfano, katika Utafutaji wa Google unaweza kuona uteuzi tafuta misemo baada ya kuingiza barua za kwanza za ombi lako.
Mapungufu

Inahitaji Hati ya Java kuwezeshwa. Ikiwa Hati ya Java imezimwa katika mipangilio ya usalama ya kivinjari chako, huenda usione matokeo ya AJAX.
Data haipatikani kwa injini tafuti. Ambayo ni ya kimantiki, kubadilisha data kwa nguvu, kama zingine kwenye Hati ya Java, haionekani kwa roboti ya utafutaji.
Ugumu wa mradi wenyewe. Baada ya muda, kwa matumizi ya mara kwa mara ya AJAX kwenye huduma, matatizo yanaweza kutokea katika kufanya kazi na msimbo wa programu na ukubwa wa mradi. Kwa hiyo, matumizi ya AJAX mwanzoni kabisa inapaswa kuwa mdogo na kutumika kwa kuchagua.
Haiwezekani kufuatilia idadi ya maombi. Kwa sababu AJAX imeunganishwa kwa urahisi na zana za kawaida za kivinjari, matumizi ya vipengele vinavyobadilika hayawezi kufuatiliwa au kukaguliwa. Ili kufanya hivyo, lazima utumie maandishi mengine.

Tovuti nyingi za kisasa hutumia teknolojia inayoitwa AJAX kuingiliana haraka na kwa ufanisi na mgeni. AJAX imekuwa njia maarufu sana ya kupata data kutoka kwa seva nyuma na sasisho la nguvu kurasa.

Kutengeneza msimbo wa JavaScript ili kutekeleza AJAX kuanzia mwanzo ni mchakato unaotumia muda mwingi na unaochosha. Hata hivyo, maktaba nyingi za JavaScript, ikiwa ni pamoja na jQuery, zina utekelezwaji bora wa kiwango cha juu wa AJAX katika mfumo wa seti ya mbinu na kazi zinazofanya tovuti za ujenzi kuwa rahisi na haraka.

Katika mfululizo huu wa mafunzo, tutaangalia misingi ya kujenga maombi ya AJAX kwa kutumia jQuery. Mada zifuatazo zitashughulikiwa:

  • Teknolojia ya AJAX ni nini? Inafanyaje kazi? Faida zake ni zipi?
  • Jinsi ya kufanya aina tofauti za maombi ya AJAX kwa kutumia jQuery?
  • Kutuma data kwa seva kwa kutumia maombi ya AJAX.
  • Inachakata na kutoa data kutoka kwa majibu ya AJAX kutoka kwa seva.
  • Jinsi ya kubinafsisha usindikaji wa AJAX katika jQuery na kubadilisha mipangilio chaguo-msingi?

Kumbuka: Mafunzo yanalenga sehemu ya upande wa mteja ya JavaScript. Lakini kukuza upande wa seva pia ni rahisi sana. Kwa habari kamili zaidi, unapaswa kusoma nyenzo kwenye lugha za programu za upande wa seva, kama vile PHP.

AJAX ni nini na ni muhimu vipi?

AJAX ni mbinu ya ukuzaji wa programu ya wavuti ambapo msimbo wa JavaScript unaoendeshwa kwenye kivinjari cha mgeni huwasiliana na seva ya wavuti kwa usawa, yaani, chinichini. Tofauti na mtandao wa kawaida maombi ni kama ifuatavyo:

  • Ukurasa wa wavuti wa kawaida una viungo au fomu ambazo, zinapobofya au kuwasilishwa, huunda ombi kwa URL mpya kwenye seva ya wavuti. Seva hutuma ukurasa mpya kabisa wa HTML, ambao kivinjari hutoa, kuchukua nafasi ukurasa asili. Njia hii inachukua muda mwingi na ni mbaya kwa mgeni, kwani anapaswa kusubiri ukurasa mpya kupakia.
  • Unapotumia teknolojia ya AJAX, msimbo wa JavaScript hufanya ombi kwa URL kwenye seva. Msimbo pia unaweza kutuma data pamoja na ombi. Msimbo wa JavaScript kisha huchakata majibu ya seva na kutenda ipasavyo. Kwa mfano, mahesabu yanaweza kufanywa na data iliyorejeshwa, widget inaweza kuongezwa au kusasishwa kwenye ukurasa, au ujumbe unaweza kutumwa kwa mgeni kuhusu uppdatering database kwenye seva.

Kwa sababu ombi la AJAX linaendeshwa chinichini, msimbo wa JavaScript (na mgeni) unaweza kuendelea kuingiliana na ukurasa wakati ombi linachakatwa. Mchakato umefichwa kutoka kwa mgeni, ambaye hahitaji kuondoka kwenye ukurasa anaoutazama sasa. Mbinu hii hufanya kurasa za AJAX kufurahisha sana kufanya kazi nazo.

Jambo la msingi la AJAX ni kitu cha JavaScript XMLHttpRequest. Inatoa mbinu kadhaa kama vile open() , send() na onreadystatechange() ambazo zinaweza kutumika wakati wa kutuma maombi ya AJAX kwa seva na kuchakata majibu chinichini.

Ukuzaji wa kivinjari JavaScript code AJAX inaweza kuwa mchakato wa kuchosha. Kwa bahati nzuri, jQuery hukupa njia kadhaa za AJAX ambazo ni rahisi kutumia ambazo hukuruhusu kuchukua shughuli nyingi za kiwango cha chini.

Kwa wale ambao ni wadadisi zaidi, neno AJAX ni ufupisho wa herufi za kwanza za usemi katika Lugha ya Kiingereza"Avascript A na X ML iliyosawazishwa" ( JavaScript Asynchronous na XML). Walakini, neno hilo linaweza kupotosha - ombi sio lazima liwe la usawa na sio lazima kutumia XML kutuma data.

Kutuma ombi la GET kwa kutumia $.get()

Mbinu ya jQuery $.get() hutoa njia rahisi na rahisi ya kufanya ombi rahisi la AJAX. Inatekeleza ombi kwa kutumia Mbinu ya HTTP GET (hutumika kupata URL, kama vile kurasa na picha), badala ya mbinu ya POST (ambayo kwa kawaida hutumiwa kuwasilisha data ya fomu).

KATIKA fomu rahisi zaidi unaweza kuita njia kama hii:

Ambapo url ni URL ya rasilimali ambayo majibu yanatarajiwa. Kwa kawaida hii ni hati ya upande wa seva ambayo hufanya vitendo kadhaa na inaweza kurudisha data fulani:

$.get("http://example.com/getForecast.php");

Ingawa inawezekana pia kuomba hati tuli:

$.get("http://example.com/mypage.html");

Unapoomba URL, unaweza kutuma data pamoja na ombi. Unaweza kupitisha data kwenye kamba ya hoja, kama vile ombi la kawaida la GET:

$.get("http://example.com/getForecast.php?city=rome&date=20120318");

Njia sahihi ya kufanya vivyo hivyo ni kupitisha kitu cha data kama kigezo cha pili kwa $.get() mbinu. Kipengee cha data lazima kiwe na taarifa katika mfumo wa jina la mali/jozi za thamani ya mali. Kwa mfano:

Var data = (mji: "rome", tarehe: "20120318" ); $.get("http://example.com/getForecast.php", data);

Vinginevyo, unaweza kupitisha data kwa $.get() mbinu kama mfuatano:

Var data = "city=rome&date=20120318"; $.get("http://example.com/getForecast.php", data);

Inapokea data kutoka kwa seva

Kufikia sasa, tumeangalia mifano ya kutumia $.get() kutuma maombi kwa seva pekee, tukipuuza jibu lolote ambalo hati ya upande wa seva inaweza kutoa. Lakini katika hali nyingi, msimbo wako wa JavaScript utasubiri jibu kutoka kwa hati ya upande wa seva na kuchakata data iliyopokelewa.

Ombi la AJAX halilandanishi, kumaanisha kwamba linaendeshwa chinichini huku msimbo mwingine wa JavaScript ukiendelea kufanya kazi. Jinsi gani, basi, kupokea jibu kutoka kwa seva wakati ombi limekamilika?

Unahitaji kuandika kitendakazi cha kurudi nyuma ambacho kitatekelezwa kiotomatiki ombi la AJAX litakapokamilika na seva kutuma jibu. Kwa uchache, chaguo lako la kukokotoa linapaswa kukubali data iliyorejeshwa na seva kama hoja yake ya kwanza:

Fanya kazi myCallback(returnedData) ( // Tunachakata data iliyorejeshwaData)

Mara tu kitendakazi cha kurudisha nyuma kitakapoundwa, unaweza kuipitisha kama hoja ya tatu kwa $.get() mbinu:

Var data = (mji: "rome", tarehe: "20120318" ); $.get("http://example.com/getForecast.php", data, myCallback);

Kuamua aina ya data ya majibu

Kwa kawaida, upande wa seva hutuma data katika mojawapo ya miundo kadhaa ya kawaida, ikiwa ni pamoja na XML, JSON, JavaScript, au HTML. Kwa chaguo-msingi, jQuery inajaribu kuamua zaidi muundo unaofaa na uchanganue data ipasavyo. Lakini ni bora kufafanua kwa uwazi muundo.

Ili kubainisha umbizo, unahitaji kupitisha hoja ya nne kwa mbinu ya $.get(). Hoja hii inaweza kuwa kamba kutoka kwa orodha ifuatayo:

  • "xml"
  • "json"
  • "script"
  • "html"

Kwa mfano, ikiwa unajua kuwa hati ya seva hurejesha data katika umbizo la JSON, basi unaita $.get() mbinu kama hii:

$.get("http://example.com/getForecast.php", data, myCallback, "json");

Mfano wa kutumia mbinu ya $.get().

Huu hapa ni mfano wa kuunda ombi la AJAX kwa kutumia mbinu ya $.get() na usindikaji rahisi jibu. Ili mfano ufanye kazi, unahitaji kuunda faili rahisi ya maandishi kwenye seva inayoitwa getForecast.txt iliyo na maandishi yafuatayo:

( "city": "Vasyuki", "date": "Machi 18, 2012", "forecast": "Baridi kali na matope", "maxTemp": +1 )

Faili hii itaiga jibu katika umbizo la JSON ambalo linaweza kuzalishwa na hati ya utabiri wa hali ya hewa kwenye seva.

Kisha tunaunda ukurasa wa showForecast.html katika folda sawa na getForecast.txt:

Utabiri wa hali ya hewa $(function() ( $("#getForecast").click(function() ( var data = ( city: "Vasyuki", date: "20120318" ); $.get("getForecast.txt", data , mafanikio, "json"); )); kazi success(forecastData) ( var forecast = forecastData.city + " utabiri wa " + forecastData.date; forecast += ": " + forecastData.forecast + ". Kiwango cha juu cha halijoto: " + forecastData.maxTemp + "C"; tahadhari(utabiri); ) )); Pata utabiri wa hali ya hewa

Fungua showForecast.html kwenye kivinjari na ubofye kitufe cha "Pata utabiri wa hali ya hewa". Katika dirisha la ujumbe tutapokea utabiri wa hali ya hewa kutoka kwa seva yetu.

Hivi ndivyo kanuni inavyofanya kazi:

  • showForecast.html ina kipengee cha kitufe cha "Pata Utabiri wa Hali ya Hewa" chenye kitambulisho getForecast .
  • JavaScript iliyo juu ya ukurasa inatekelezwa mara tu ukurasa unapopakiwa na DOM iko katika hali tayari.
  • Msimbo wa JavaScript kwanza hufunga kidhibiti cha tukio la kubofya kwenye kitufe cha #getForecast. Mshikaji huyu hufanya ombi la AJAX GET kwa getForecast.txt, kupitisha jina la jiji na tarehe ya utabiri. Kitendo cha kurudisha nyuma mafanikio () pia kinafafanuliwa, ambacho kitatekelezwa ombi litakapokamilika. Umbizo la data iliyorejeshwa na seva inafafanuliwa kama JSON.
  • Faili ya getForecast.txt hurejesha data ya utabiri kwa kivinjari katika umbizo la JSON.
  • Kazi ya mafanikio () inaitwa. jQuery huchanganua data ya JSON iliyopokelewa kutoka getForecast.txt, inaigeuza kuwa kitu cha JavaScript, na kuipitisha kwenye chaguo la kukokotoa.
  • Chaguo za kukokotoa hurejesha kipengee cha data ya utabiri wa data na kuonyesha ujumbe ambao una sifa kadhaa za kitu, ikiwa ni pamoja na jina la jiji, utabiri na halijoto.

    • Mfano rahisi, wa mistari michache unaonyesha jinsi ombi la AJAX linavyofanya kazi kwa kutumia mbinu ya $.get().

    Nakala hii inaelezea AJAX katika kiwango cha kipengele na mfano. Vipengele vya mwingiliano wa asynchronous na mifano ya matumizi huzingatiwa, lakini kwa kiwango cha chini cha maelezo ya kiufundi.

    Natumai itakuwa muhimu kwa kuelewa AJAX ni nini na inatumika kwa nini.

    AJAX ni nini? Utekelezaji wa mfano.

    AJAX, au zaidi, A ya kusawazisha J avascript A nd X ml ni teknolojia ya kuingiliana na seva bila kupakia tena kurasa.

    Kutokana na hili, muda wa majibu umepunguzwa na programu ya wavuti inawakumbusha zaidi kompyuta ya mezani katika suala la mwingiliano.

    Teknolojia ya AJAX, kama herufi ya kwanza A kwa jina inavyoonyesha, haina usawa, i.e. kivinjari, baada ya kutuma ombi, kinaweza kufanya chochote, kwa mfano, kuonyesha ujumbe.
    kuhusu kusubiri jibu, kusogeza ukurasa, n.k.

    Hapa kuna nambari ya kifungo katika mfano hapo juu:

    Inapobofya, huita kipengele cha kupiga kura, ambacho hutuma ombi kwa seva, husubiri jibu, na kisha kuonyesha ujumbe kuihusu kwenye div iliyo chini ya kitufe:

    Jibu la seva litakuwa hapa

    Ili kubadilishana data na seva, kitu maalum cha XmlHttpRequest kinatumiwa, ambacho kinaweza kutuma ombi na kupokea jibu kutoka kwa seva. Unaweza kuunda kivinjari cha kitu kama hiki, kwa mfano, kama hii:

    Kazi getXmlHttp())( var xmlhttp; jaribu ( xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); ) kamata (e) ( jaribu ( xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); ) kamata (E) ( xmlhttp = false; ) ) ikiwa (!xmlhttp && typeof XMLHttpRequest!="undefined") ( xmlhttp = new XMLHttpRequest(); ) itarudisha xmlhttp; )

    Unaweza kusoma zaidi kuhusu maelezo ya kutekeleza AJAX kwa kutumia XmlHttpRequest na usafirishaji mwingine katika sehemu ya kuwasiliana na seva.

    Hatutazingatia hili hapa na kwenda moja kwa moja kwenye shughuli ya kupiga kura:

    // msimbo wa kupigia kura wa javascript kutoka kwa mfano wa chaguo la kukokotoa vote() ( // (1) unda kitu cha ombi kwa seva var req = getXmlHttp() // (2) // span karibu na kitufe // kitaonyesha maendeleo ya utekelezaji var statusElem = document.getElementById("vote_status") req.onreadystatechange = function() ( // onreadystatechange imewashwa wakati jibu la seva linapokewa ikiwa (req.readyState == 4) ( // ikiwa ombi limekamilika. kutekeleza statusElem.innerHTML = req.statusText // onyesha hali (Haijapatikana, Sawa..) if(req.status == 200) ( // ikiwa hali ni 200 (Sawa) - toa jibu kwa tahadhari ya mtumiaji(" Jibu la seva: "+req.responseText); ) // hapa unaweza kuongeza lingine kwa kushughulikia makosa ya ombi ) ) // (3) weka anwani ya muunganisho req.open("GET", "/ajax_intro/vote.php", kweli); // kitu cha ombi kimetayarishwa: anwani imebainishwa na kitendakazi cha onreadystatechange kimeundwa // kushughulikia jibu la seva // (4) req.send(null); // tuma ombi // (5) statusElem.innerHTML = "Inasubiri majibu ya seva..." )

    Mtiririko wa utekelezaji unaotumiwa na kura ni wa kawaida kabisa na unaonekana kama hii:

  • Chaguo za kukokotoa huunda kitu cha XmlHttpRequest
  • inapeana kidhibiti cha majibu ya seva kwa onreadystatechange
  • inafungua muunganisho wazi
  • hutuma ombi kwa kutumia simu ya kutuma (jibu la seva linapokewa na kitendakazi cha onreadystatechange, ambacho huwaka bila kulinganishwa)
  • huonyesha mgeni kiashiria cha hali ya mchakato

    • Kidhibiti cha seva ambacho ombi la AJAX linashughulikiwa (kwa mfano hii ni vote.php) kimsingi sio tofauti na ukurasa wa kawaida. Ombi la AJAX lililotumwa na XmlHttpRequest sio tofauti na ombi la kawaida.

    Ni kwamba maandishi ambayo seva hurejesha hayaonyeshwi kama HTML, lakini yanasomwa na kuchakatwa na kitendakazi cha onreadystatechange.

    Maana ya AJAX ni kuunganisha teknolojia

    Teknolojia ya AJAX hutumia mchanganyiko wa:

    • (X)HTML, CSS kwa ajili ya kuwasilisha na kuweka maelezo ya mtindo
    • DOM-mfano, shughuli ambazo zinafanywa na javascript kwenye upande wa mteja ili kutoa onyesho thabiti na mwingiliano na habari.
    • XMLHttpOmbi la mawasiliano yasiyolingana na seva ya wavuti. Katika baadhi ya mifumo ya AJAX na katika hali fulani, IFrame, lebo ya SCRIPT, au usafiri mwingine kama huo hutumiwa badala ya XMLHttpRequest.
    • JSON hutumiwa mara nyingi kubadilishana data, lakini umbizo lolote litafanya kazi, ikijumuisha HTML, maandishi, XML na hata baadhi ya EBML.

    Programu ya kawaida ya AJAX ina angalau sehemu mbili.

    Ya kwanza inaendesha kwenye kivinjari na kawaida imeandikwa katika JavaScript, na ya pili iko kwenye seva na imeandikwa, kwa mfano, katika Ruby, Java au PHP.

    Data inabadilishwa kati ya sehemu hizi mbili kupitia XMLHttpRequest (au usafiri mwingine).

    Naweza kufanya nini na AJAX?

    Hatua ya AJAX ni mwingiliano na wakati wa majibu ya haraka.

    Vidhibiti vidogo

    Awali ya yote, AJAX ni muhimu kwa vipengele vidogo vinavyohusishwa na vitendo vya msingi: kuongeza kwenye gari, kujiandikisha, nk.

    Upakiaji unaobadilika wa data kutoka kwa seva.

    Kwa mfano, mti ambao nodes ni kubeba kama wao kupanua.

    Wakati wa kuonekana kwake, ilikuwa wazi tu huduma ya posta kutumia AJAX kwa huduma zifuatazo.

    • Inakagua hitilafu za ingizo la fomu KABLA ya kuwasilisha

      Jina la mtumiaji linatumwa kwa seva, na matokeo ya hundi yanarejeshwa kwenye ukurasa.

    • Pakua "Papo hapo".

      Kivinjari huwasiliana na seva tu kwa data, badala ya kusasisha kiolesura kizima

    • "Uwasilishaji" wa kiotomatiki wa herufi kwenye folda iliyo wazi

      Mara kwa mara ombi hutumwa kwa seva na ikiwa barua mpya zinafika, zinaonekana kwenye kivinjari.

    • Kukamilisha kiotomatiki

      Inatosha kuingiza herufi za kwanza za jina la mpokeaji, na zingine zinakamilishwa kiatomati, kama ilivyo kwa programu za kompyuta.

    Matokeo: umaarufu mkubwa, mahitaji makubwa ya akaunti tangu kufunguliwa.

    Mfano wa kusawazisha VS Mfano wa Asynchronous

    Katika programu ya kawaida, shughuli zote ni synchronous, yaani, zinafanywa moja baada ya nyingine.

    Kwa kusema, tunafanya kama hii:

  • piga fimbo ya uvuvi
  • kusubiri kuuma
  • kidogo - kurejea fimbo inazunguka inaimarisha

    • Kwa mbinu ya asynchronous sisi:

  • tunapachika kizuizi maalum cha kuuma kwenye fimbo ya uvuvi, tuombe ivute fimbo inayozunguka wakati inauma.
  • piga fimbo ya uvuvi
  • tunafanya mambo mengine
  • detector ya bite husababishwa, na kuchochea uondoaji wa fimbo inayozunguka

    • Hiyo ni, katika kesi ya synchronous, fimbo ya uvuvi daima huvutia tahadhari yetu. Kukamata samaki ni mchakato unaofuatana.

    Katika toleo la asynchronous, sisi kwanza tuliweka mpango wa nini cha kufanya wakati wa kuuma, na kisha tukapunguza fimbo ya uvuvi ili kukamata na kwenda juu ya mambo mengine.
    Kwa mfano, tuliweka vijiti 5 zaidi vya uvuvi vile.

    Programu ya Asynchronous ni ngumu zaidi kuliko programu ya synchronous, na kwa mara ya kwanza ni ya kawaida, kwa sababu ni mbeleni kitakachofanya kazi kinatolewa baada ya.
    Hiyo ni, mpango "nini cha kufanya wakati wa kuuma" lazima uweke kabla ya kuumwa, na kwa ujumla haijulikani ikiwa kuna samaki kwenye hifadhi.

    Kuna mbinu za kuifanya iwe rahisi programu ya asynchronous, kwa mfano, kitu kilichoahirishwa kwa muda (Iliyopotoka, Dojo, Mochikit), lakini hii itajadiliwa katika makala tofauti.

    Mfano wa kusawazisha na wa asynchronous katika AJAX

    Wacha turudi kwa kondoo wetu: kivinjari, seva na, sema, hifadhidata.

    Katika mfano wa synchronous, kivinjari hutuma ombi kwa seva na hutegemea, kusubiri kukamilisha kila kitu. kazi muhimu. Seva hutekeleza maswali kwenye hifadhidata, hufunga jibu katika umbizo linalohitajika na kutoa matokeo. Kivinjari. Baada ya kupokea jibu, inaita kazi ya onyesho.

    Taratibu zote zinafanywa kwa mlolongo, mmoja baada ya mwingine.

    Ucheleweshaji wa mtandao unajumuishwa wakati wa kusubiri, umeonyeshwa kwa kijivu kwenye mchoro.

    Mtumiaji hawezi kufanya kitu kingine chochote kwenye ukurasa huo huo wakati data iliyosawazishwa inabadilishwa.

    KATIKA mfano wa asynchronous ombi linatumwa ("fimbo imewekwa"), na unaweza kufanya kitu kingine. Wakati ombi limekamilika ("becked") - inazinduliwa mapema
    kazi iliyoandaliwa na mpanga programu ("vuta juu ya fimbo inayozunguka") kwa ajili ya kuonyesha ujumbe wa seva.

    Hapa seva hufahamisha kivinjari mara moja kwamba ombi limekubaliwa kwa usindikaji na kuachilia kwa usindikaji. kazi zaidi. Wakati jibu liko tayari, seva itaisambaza, na kazi ya kuonyesha inayofanana itaitwa kwenye kivinjari, lakini wakati jibu hili linatolewa na kutumwa, kivinjari ni bure.

    Mtumiaji anaweza kuandika maoni, kujaza na kuwasilisha fomu, nk: Maombi mapya ya asynchronous yanaweza kufanywa.

    Mfano wa asynchronous una sifa ya jibu la karibu mara moja kwa vitendo vya mtumiaji, ili programu ihisi rahisi na ya haraka.

    Kwa sababu ya pengo hili kati ya kitendo na matokeo halisi, programu inakuwa rahisi zaidi kukabiliwa na makosa.

    Hasa katika kesi ya maombi mengi ya wakati mmoja ya asynchronous, unahitaji kutunza utaratibu wa utekelezaji na majibu (masharti ya mbio) na, katika tukio la kosa, kuondoka maombi katika hali thabiti.

    Vipengele vya mfano wa asynchronous
    • Ngumu kutekeleza
      • Upungufu wa uwezo wa kivinjari (javascript)
      • Mfano wa asynchronous ni ngumu zaidi kurekebisha
    • Masharti ya mbio
      • Mfuatano wa utekelezaji ambao haujabainishwa
      • Unaweza kufanya kazi nyingi za wakati mmoja ("vijiti vya uvuvi"), lakini kazi iliyoanza kwanza inaweza kuishia mwisho.
    • Mwitikio ni wa haraka, lakini haijulikani matokeo yatakuwa nini. Ushughulikiaji wa hitilafu ni ngumu zaidi
      • Makosa ya mawasiliano - kukatwa, nk.
      • Makosa ya mtumiaji - kwa mfano, hakukuwa na marupurupu ya kutosha
    • Udhibiti wa uadilifu (usio na hitilafu)
      • Kwa mfano, mhariri alituma ombi lisilolingana kuondoa tawi la mti. Kuiongeza lazima kuzime hadi jibu la seva liwasili. Ikiwa ghafla hapakuwa na marupurupu ya kutosha, basi operesheni ilishindwa.
    • Mwingiliano
    • Kiolesura cha haraka

    Kuna faida mbili tu, lakini ni faida gani! Mchezo ni wa thamani ya mshumaa.

    Kokota"n"kudondosha kwa usawa.

    Wakati mwingine kwa shughuli za asynchronous ni muhimu kufanya "hila za sikio" mbalimbali. Kwa mfano, unataka kuburuta"n"kudondosha kwenye mti, yaani, buruta vifungu kutoka sehemu moja hadi nyingine na panya, na ili wabadilishe mzazi wao kwenye seva kwenye hifadhidata.

    Drag "n" tone - hii ni "alichukua kitu panya - kuiweka ambapo ni lazima - kufanyika." Lakini katika mfano wa asynchronous, kila kitu hawezi kuwa "tayari" mara moja.
    Unahitaji kuangalia haki kwenye seva, angalia ikiwa kitu bado kipo, ikiwa mtumiaji mwingine atakifuta.

    Tunahitaji kwa namna fulani kuonyesha kwamba mchakato umeanza, lakini matokeo yatakuwa "nini kitatokea ...". Lakini kama? Katika mfano wa asynchronous, pointer ya panya haiwezi tu kuelea juu ya kitu, na kugeuka kuwa saa.

    Katika kesi hii, wanaweza kutumia maombi ya usawazishaji kwa seva - na kisha kila kitu kinagandishwa, au suluhisho asili ni kuweka kitu kana kwamba kimehamishwa na kufahamisha kwa ikoni ya uhuishaji kwamba jibu linangojea.
    Ikiwa jibu ni hasi, kidhibiti majibu huhamisha kitu nyuma.

    Muktadha wa zamani, muktadha uliopitwa na wakati

    Mfano wenye buruta"n"tone pia unagusa tatizo la "muktadha wa zamani" - muktadha wa kizamani.

    Mtandao ni mazingira ya watumiaji wengi. Ikitumika kwa urambazaji,
    Wacha tuseme mti wa vifungu, basi watu wengi hufanya kazi juu yake. Mmoja wao anaweza kufuta tawi la mti ambalo mwingine anafanyia kazi: migogoro.

    Kama sheria, njia zifuatazo hutumiwa kushinda matukio kama haya:

    Sera ya Kuhariri

    Huu ndio wakati kila mtu anajua ni nani anafanya nini na kwa kiwango cha mgawanyiko wa mamlaka na mawasiliano ya kibinafsi kufuta vile kunakubaliwa. Chaguo hili ni wazi sio salama, lakini kawaida hufanya kazi.

    Kufunga na/au udhibiti wa toleo

    Kufungia - kuzuia hati zilizohaririwa.

    Udhibiti wa toleo - kila hati mpya inakuwa toleo, kwa hivyo mabadiliko hayapotei kamwe. Uchapishaji unajumuisha migogoro wakati Petya alianza kuhariri hati kabla ya Vasya, na kuihifadhi baadaye. Wakati huo huo, katika toleo la hivi karibuni, mabadiliko ya Vasya yalipotea, ingawa toleo la penultimate (Vasya) linapatikana katika mfumo.

    Unaweza kusoma zaidi kuhusu kufunga na kutengeneza matoleo, kwa mfano, katika hati za mfumo wa udhibiti wa toleo la Ubadilishaji.

    Usasishaji wa muktadha otomatiki

    Tatizo la maudhui yaliyopitwa na wakati linaweza kutatuliwa kwa 99% kwa kusasisha kiotomatiki papo hapo.

    Kivinjari hudumisha uunganisho wa mara kwa mara na seva (au hufanya maombi ya kurekebisha mara kwa mara) - na mabadiliko ya lazima zinatumwa kupitia chaneli hii.

    Kwa mfano, makala mpya wakati mwingine hupakiwa kwenye tawi lililo wazi la mti; kiolesura cha barua- barua mpya.

    Kwa ujumla, tatizo la muktadha uliopitwa na wakati linahusiana moja kwa moja na tatizo la uadilifu wa data. Kwa hali yoyote, seva inawajibika kwa ukaguzi wa mwisho wa uadilifu, kama ilivyo kwa uthibitishaji wa fomu.

    Ufupisho AJAX(Javascript ya Asynchronous na XML) inaashiria dhana ya kutumia teknolojia mbalimbali za utayarishaji wa wavuti kuwezesha sasisha kwa usawa maudhui ya maeneo mahususi ya ukurasa wa HTML. Asynchronously inamaanisha kuwa kusasisha kizuizi unachohitaji Alama ya HTML inaweza kutokea kwa usawa kwa kusasisha ukurasa mzima. Kwa hivyo, kivinjari hakitapata mtetemo ambao mara nyingi huambatana na uonyeshaji upya wa ukurasa au mtumiaji kuhamia ukurasa mwingine kupitia kiungo.

    Asynchronously pia inaweza kumaanisha kusasisha sambamba ya vipande kadhaa mara moja. Kwa mfano, wakati ukurasa unapakia kiasi kikubwa vitambulisho , basi picha zenyewe zinaweza kuonekana hatua kwa hatua na sambamba kwa kila mmoja. Ni uwezo wa kusasisha sio ukurasa mzima wa Mtandao, lakini sehemu yake tofauti, ambayo hufanya teknolojia za AJAX kuwa maarufu sana na zinazohitajika katika uwanja wa muundo wa wavuti. Mara nyingi, AJAX hutumiwa katika hati za idhini (kizazi cha kukamata) au wakati wa kuonyesha hali ya shughuli za muda mrefu zinazofanywa kwenye seva.

    Bila kuingia katika maelezo, AJAX inachanganya mbinu mbili kuu za kuunda kurasa zinazoingiliana za Mtandao:

    Kutumia kitu XMLHttpRequest kuwasiliana na seva na kupokea jibu kutoka kwake kwa nyuma kupitia itifaki ya http.

    Usasishaji wenye nguvu wa ukurasa wenyewe kupitia violesura vyake vya programu mfano wa kitu (Mfano wa Kitu cha Hati, DOM) kwa kanuni. Hii yote kwa pamoja inaitwa.

    Je, ni faida gani za kutumia AJAX? Ili kuelewa hili unahitaji kuitumia na kulinganisha na kile kilichotokea bila hiyo. Chini ni michache isiyoweza kuepukika. faida za kutumia AJAX wakati wa kujenga tovuti za mtandao:

    Kupunguza trafiki na mzigo kwenye seva, kwani seva na mteja hawabadilishana alama nzima ya ukurasa wa mtandao, lakini ni sehemu yake tu.

    Ergonomics bora na zaidi kasi kubwa uendeshaji wa kiolesura cha mtumiaji wa tovuti.

    Kutumia AJAX haina faida tu, bali pia hasara ambazo unapaswa kuvumilia ikiwa unaamua kutumia dhana hii ya programu katika miradi yako ya mtandao. Hapa kuna baadhi ya kukumbuka:

    • Data iliyopakuliwa wakati wa mawasiliano ya chinichini na seva kupitia kipengee cha XMLHttpRequest haijajumuishwa katika historia ya kuvinjari na haiwezi kuongezwa kwa vialamisho vya kivinjari.

    • Maudhui yanayoonyeshwa kutokana na ombi la AJAX huenda yasionekane kamwe na injini za utafutaji (Google, Yandex), kwa kuwa haziigi tabia ya mtumiaji na hazitekelezi msimbo wa JavaScript.

    • Huduma za kawaida za kuhesabu wageni na kutazama ukurasa zinaweza kutoa takwimu zisizo sahihi.

    • Kutumia sio programu ya AJAX pekee, lakini pia hati zozote za JavaScript zinaweza kusababisha ukurasa wako kuwa na tabia tofauti chini ya vivinjari tofauti, na tabia hii haitakuwa sahihi kila wakati.
    Kitu cha XMLHttpRequest

    Sasa nitaelezea kwa ufupi hali ya jinsi AJAX inatumiwa katika fomu yake safi, na kisha nitakuambia kwa undani zaidi jinsi . Kama ilivyotajwa tayari, simu zisizo sawa kwa seva hufanywa kupitia kitu cha XMLHttpRequest. Kwanza unahitaji kuunda, na hii inafanywa tofauti katika vivinjari tofauti. Utaratibu wa kuunda XMLHttpRequest ambayo ina nafasi ya kufanya kazi kwa usahihi kila mahali inaonekana kama hii.

    Kazi createRequest() ( var request = null; ikiwa (window.XMLHttpRequest) ( request = new XMLHttpRequest(); ) vinginevyo ikiwa (window.ActiveXObject) ( jaribu (request = new ActiveXObject("Msxml2.XMLHTTP");) kamata ( ex) ( jaribu ( request = new ActiveXObject("Microsoft.XMLHTTP");) catch (ex)(return null;) ) ) ombi la kurudisha; )

    // Unda ombi var ombi = createRequest() //Pitisha aina ombi la http a (PATA au POST), Omba URL na hali: ombi la asynchronous (kweli) //au synchronous (uongo), wakati kivinjari kimesimamishwa wakati ombi linatekelezwa. request.open("GET", url, true); //Kufafanua ombi la kidhibiti cha kukamilisha ombi.onreadystatechange = onSuccess; // Tekeleza ombi ombi.tuma ();

    Ambapo kazi ya kushughulikia kukamilika kwa ombi la onSuccess inaweza kuonekana kama hii:

    Kazi kwenyeSuccess () ( jaribu ( ikiwa (request.readyState == 4) ( // Ombi limekamilika ikiwa (request.status == 200) ( // na kukamilika kwa mafanikio //hapa tunafanya kitu na matokeo ya ombi var result = request .responseText; ) vinginevyo ( //hapa tunashughulikia tahadhari ya utekelezaji wa ombi lisilofanikiwa(request.statusText); ) ) ) catch(ex) () )

    AJAX na jQuery

    Kimsingi, hakuna chochote ngumu katika mfano hapo juu, lakini makini na kazi ya createRequest. Uwezo wa msimbo wa programu kufanya kazi kwa usawa chini ya kivinjari chochote inaitwa utangamano wa kivinjari. Kwako msimbo wa programu ikawa kivinjari, unahitaji kufanya juhudi kubwa: unahitaji kujua nuances ya kila kivinjari na njia za kutatua shida za kutokubaliana kwa miundombinu yake na ile unayotumia. programu. Maarufu kati ya watengenezaji wa programu za wavuti Maktaba ya Javascript Sio tu kwamba jQuery hurahisisha kufanya kazi na kitu cha XMLHttpRequest, pia inahakikisha (na inajaribu) kuwa suluhisho lako linaendana na kivinjari. jQuery ina njia kadhaa za kufanya kazi na teknolojia za AJAX. Kwanza kabisa, hii ndiyo njia ya ajax yenyewe, ambayo ni ya ulimwengu wote na inafaa kwa kutunga maombi yoyote kwa seva. Njia za kupata na kuchapisha ndani pia hutumia njia ya ajax (ni vifuniko vyake), na imekusudiwa, kama unavyoweza kudhani kutoka kwa jina lao, kutuma kwa seva. PATA Na POST maombi ipasavyo. Ifuatayo ni mifano ya msimbo wa JavaScript kutumia AJAX kwa kutumia jQuery.

    Upakiaji wa kaziArticle_ajax(aina, id) ( $..php", data: ((article_id:id)), mafanikio: OnComplete, hitilafu: OnFail )); ) upakiaji wa kaziArticle_get(id) ( $..php", (article_id: id), OnComplete).fail(OnFail); ) kazi loadArticle_post(id) ( $..php", (article_id:id), OnComplete).fail(OnFail); ) kitendakazi OnComplete(html) ( $("#content").html(html); ) kitendakazi OnFail (jibu) ( $("#content").html("Hitilafu ya kupakia data:
    "+jibu.haliNakala+"
    " + response.responseText);)

    Vitendo vilivyo hapo juu vinatekeleza ombi la vigezo la http kupitia kiungo (URL) cha fomu ifuatayo:

    Http://site/readarticle_content.php?article_id=id

    Maudhui yaliyorejeshwa inategemea parameta ya kitambulisho. Ikiwa kwa upande wako hauitaji kupitisha vigezo vyovyote, basi acha seti tupu () kama hoja inayolingana. Unaweza kuangalia mfano wa kazi. Hiyo yote ni kwangu kuhusu AJAX na jQuery.



    MAKALA INAYOHUSIANA