Alustasin seda artiklit algajate palvel, kes alles hakkavad JS/jQueryt valdama ja seisavad varem või hiljem silmitsi probleemiga, kuidas Ajaxi tehnoloogiat praktikas kasutada. Selles osas proovin lihtsas keeles ( Ärge ajage see kogenud kasutajaid segadusse) selgitage, kuidas seda "trikki" oma projektides jQuery teeki kasutades rakendada.
Niisiis... jQueryl on mitu meetodit, mis teevad päringuid saidi serveri poolele ilma lehte uuesti laadimata. Me ei vaata iga meetodit eraldi "mikroskoobi all" sel lihtsal põhjusel, et need kõik on meetodi $.ajax() funktsioonid. Kõigepealt vaatame allolevat koodi ja seejärel vaatame seda üksikasjalikumalt:
HTML ( index.html faili)
Lahe lehe sait Klõpsake mind!
Selles failis oleme ühendanud jQuery teegi, meie JS-koodiga faili, nupu (id="btn"), klõpsamisel käivitatakse ajaxi päring ja ploki (id="väljund"), milles väljastame ajaxi päringu operatsiooni tulemuse
JS/jQuery ( script.js faili)
$(function())( var output = $("#output"); // teabe väljundplokk $("#btn").on("click", function())( $.ajax(( url: " path/ to/handler.php", // tee php töötleja tüüp: "POST", // andmeedastusmeetodi dataType: "json", // vastuseandmetes eeldatavate andmete tüüp: (võti: 1), // andmed, mille edastame serverisse beforeSend: function())( // Funktsioon kutsutakse välja enne päringu saatmist output.text("Päring on saadetud. Oodake vastust."); error: function( req, text, error)( // jälgimisvead ajaxi päringu täitmisel output.text("Houston, meil on probleem! " + text + " | " + error); lõpetage: function())( // funktsioon kutsutakse välja, kui päring on lõpetatud output.append("
Taotlus on täielikult täidetud!
"); ), success: function(json)( // funktsioon, mida kutsutakse välja, kui päring serverile õnnestub // json - muutuja, mis sisaldab serveri vastuseandmeid. Kutsuge seda kuidas iganes soovite;) output.html (json) ; // serverist saadud andmete kuvamine lehel ) ));Kommenteerisin seda koodi koheselt, nii et erilisi küsimusi ei tohiks tekkida. Ainus asi, mida tahan kopeerimis-kleepimise austajatele märkida, on see, et peate url-i parameetris määrama töötleja tegeliku tee. Ja veel üks asi - näites edastame käsitsi sisestatud andmeid (klahv "võti" väärtusega "1"), kuid reaalsetes projektides kogutakse need andmed mõnest allikast, kuid sellest räägime hiljem.
PHP töötleja ( failihaldur.php)
Faili time.php eesmärk on kuvada ekraanil praegust kellaaega.
Laadige alla näidisallikafailid (16,6 kb):
Programm, mis laadib sisu dünaamiliselt kasutaja äranägemise järgi.
Faili index.html sisu.
Millise lehe soovite avada?
$(document).ready(function())( $("#btn1").click(function())( $.ajax(( url: "page1.html", vahemälu: false, edu: funktsioon(html)) ( $ ("#content").html(html); )); $("#btn2").click(function())( $.ajax(( url: "page2.html", vahemälu: false, edu) : function(html)( $("#sisu").html(html; ) ));Dokumendi kehasse on loodud vorm, millel on kaks nuppu, mille kaudu kasutaja valib soovitud sisu. Ja konteiner sisu laadimiseks.
Klõpsusündmust nupul "Lehekülg 1" haldab funktsioon $("#btn1").click() ja nupul "Lehekülg 2" klõpsamist töötleb $("#btn2"). funktsioon click().
Dünaamiliselt sisualasse laaditavate failide page1.html ja page2.html sisu on lihtsad HTML-lehed või sisu sisaldavad tekstifailid.
Laadige alla näidisallikafailid (18,4 kb):
Vaatame näidet, mis saadab sisestatud kasutajanime serverisse. Kui server saab nime, saadab ta tervituse ja loendab sisestatud nimes olevate märkide arvu.
Faili index.html sisu.
Sisestage oma nimi:
$(document).ready(function())( $("#myForm").submit(function())( $.ajax(( tüüp: "POST", url: "tervitused.php", andmed: "kasutajanimi" =" +$("#kasutajanimi").val(), edu: function(html)( $("#content").html(html; ) ));
Dokumendi kehasse on loodud vorm kasutajanime sisestamiseks. Ja konteiner dünaamilise sisu laadimiseks.
Pange tähele, et vormil endal pole tavalisi tegevus- ja meetodivälju. Funktsioon $("#myForm").submit() toimib nupu "Esita" klõpsamise juhtumi käsitlejana. Vaatame seda funktsiooni.
$("#myForm").submit(function())( $.ajax(( tüüp: "POST", url: "tervitused.php", andmed: "kasutajanimi="+$("#kasutajanimi").val ( ), edu: function(html)( $("#content").html(html; ) ));
Nagu näeme, on põhitöö jällegi seotud funktsiooniga $.ajax(). Seekord ilmuvad lisaparameetrid, mida näidetes 1 ja 2 arvesse ei võetud. Nimelt:
Tüüp: "POST" Andmeedastuse tüüp. andmed: "kasutajanimi="+$("#kasutajanimi").val() Serverile edastatud parameetrid. Sel juhul edastame kasutajanime välja sisu - kasutajanime. Üldiselt kirjutatakse parameetrid samamoodi nagu GET-meetodil, näiteks ühele reale:
andmed: "kasutajanimi=Vasya&age=18&sex=male"
Pange tähele, et lõpus on rida:
Return false; Seda tehakse selleks, et vorm ei üritaks andmeid edastada faili, millest see käivitatakse, ja leht ei laadita uuesti.
Faili greetings.php sisu.
Kuvame tervituse ja loendame nimes olevate märkide arvu.
Laadige alla näidisallikafailid (16,8 kb):
Kokkuvõtteks tasub öelda, et lisaks dünaamilise värskendamise sisu abil lehtede loomise ilmsetele eelistele on saidi arendamisel arvesse võtta ka mitmeid puudusi, nimelt:
1. Dünaamilise sisu värskendamisega lehtedel ei tööta brauseri nupp "Tagasi" õigesti.
2. Dünaamiliste sisuvärskendustega lehed ei muuda URL-e nende sisu põhjal, seega ei saa neid järjehoidjatesse lisada.
3. Otsingumootorid ei indekseeri dünaamiliste sisuuuendustega lehti, kuna nad ei täida JavaScripti käske.
Programmiliselt saate ülaltoodud puudustest lahti saada. Selles artiklis selliseid meetodeid ei käsitleta.
Kuidas AJAX-i abil html-i väljastadaSellest artiklist saate teada, kuidas saate spetsiaalse AJAX-tehnoloogia abil kuvada mis tahes HTML-koodi. See ei ole väga lihtne ja nõuab teatud teadmisi, kuid ärge muretsege, et teil ei õnnestu. Altpoolt leiate üksikasjalikud juhised, millest isegi algaja saab aru. Enne otse juhiste juurde asumist vastan küsimusele, miks seda üldiselt vaja on ja millised võimalused on.
Üldiselt on sisu kuvamiseks kaks võimalust: kas JavaScripti või AJAX-i kaudu. Minu arvamus on, et parem on kasutada AJAXi kui JS-i, aga miks see parem on - küsite? Lõppude lõpuks peidavad mõlemad tehnoloogiad teksti eraldi failidesse. Ja vastus on, et otsingumootorid on jõudnud väga kõrgele tasemele ja suudavad juba tuvastada linke, mis JavaScriptis sisalduvad. Näiteks Google on sellest juba teatanud ja ilmselt peagi annab sellest saavutusest teada ka Yandex.
Juhised sisu kuvamiseks AJAX-i kaudu
1) Lisage päisekataloogi järgmine skript:
... ...
Nii ühendame AJAX-i tööks vajalikud teegid otse nende ametlikult veebisaidilt.
2) Looge html- või php-dokument koodiga, mida soovite AJAX-i kaudu väljastada. Loome näiteks faili text-dlya-ajax.html ja kirjutame sinna:
See tekst väljastatakse AJAX-i kaudu
3) Looge eraldi JavaScripti (.js) fail. Tavaliselt nimetan seda ajax.js-ks, et selle sisust kohe aru saada. Lisage sellele järgmine kood:
(function($) ( $(function() ( $("#blockajax").load("PUT SIIA_PATH_TO_FILE_html/text-dlya-ajax.html"); )) ))(jQuery)
Nüüd iseloomustab blockajaxi fail text-dlya-ajax.html.
Märge
Kui teil on vaja kuvada palju selliseid "block" = "html-koodi" seoseid, saate kirjutada nii palju erinevaid vasteid, kui soovite:
(function($) ( $(function() ( $("#block1").load("block1.html"); $("#block2").load("block2.php"); .... ......................... $("#blockN").load("blockN.html" )) )) (jQuery)
4) Ühendage fail ajax.js peasildi kaudu dokumendiga:
... ...
5) Kohta, kus peate kuvama faili text-dlya-ajax.html html-teksti, kirjutage:
Selle asemel laaditakse meie html-kood failist text-dlya-ajax.html. See on tähendus: et lehel pole koodi, kuid meile vajaliku sisu väljund on olemas.
Rohkem pole vaja midagi teha. Nüüd saate lihtsalt sisu kuvada AJAX-i kaudu.
Ülalkirjeldatud näite saate alla laadida järgmiselt lingilt: ajax.rar
Märge
Muide, PHP-koodi saab kuvada ja tõlgendada ka AJAX-i kaudu. Ja see avab teile tohutult võimalusi.
Miks on vaja HTML-i AJAX-i abil väljastada (3 põhjust)
1. Väga lühidalt öeldes on see vajalik saidi reklaamimiseks otsingumootorites. Tõsiasi on see, et saidil olevad lingid näivad üksteisele kaalu kandvat. Sagedamini lingitud lehtedel on suurem kaal. Seetõttu peate saidi kaalu ühtlasemaks jaotamiseks lehtede vahel (ja mitte seda kõike läbi otspunktide linkide liitmise) kuidagi tagama, et neid otspunktilinke ei võetaks arvesse. otsingumootorid.
Näiteks võite paljudel saitidel leida linke siltidele, mis kuvatakse saidi igal leheküljel külgribal. Selgub, et siltidega lehtedel on suurim kaal, kuigi need ei sisalda olulist teavet. See hõlmab ka muid mittevajalikke linke lehtedel, mis on põhimõtteliselt mittevajalikud.
Muidugi saate sulgeda kõik lingid siltides, kuid uuringud on näidanud, et nii langeb saidil kaal, st. see kaal ei kandu kellelegi üle, tundub, et see lihtsalt aurustub (kõlab imelikult, aga see on tõsi).
2. Teine põhjus HTML-väljundi kasutamiseks AJAX-i kaudu on saidi lehel oleva koodi vähendamine. Jällegi on see otsingumootorite jaoks vajalik. Näiteks saidi jalus dubleerib pidevalt sama koodi, mis võtab lehelt ainult ebavajaliku kaalu, seega oleks hea see kood eemaldada, aga jalus jätta. Ajax sobib ideaalselt selle probleemi lahendamiseks.
3. AJAX-i abil laaditakse leht plokkide kaupa ehk iga element laaditakse sünkroonselt ja ei sõltu teistest. Nii ei aeglusta saidi "rasked" elemendid saidi muude osade laadimist. See on kasutajale mugavam, kuna ta näeb, et sait laadib, ja tunneb end lõdvemalt kui siis, kui sait mingil hetkel laadib.
AJAX on akronüüm, mis tähistab asünkroonset Javascripti ja XML-i. Tegelikult ei ole AJAX uus tehnoloogia, kuna nii Javascript kui ka XML on olnud kasutusel üsna pikka aega ning AJAX on määratud tehnoloogiate süntees. AJAX-i seostatakse kõige sagedamini terminiga Web 2.0 ja seda reklaamitakse kui uusimat veebirakendust.
AJAX-i kasutamisel ei ole vaja kogu lehte iga kord värskendada, kuna värskendatakse ainult teatud osa sellest. See on palju mugavam, kuna te ei pea kaua ootama, ja säästlikum, kuna kõigil pole piiramatut Internetti. Tõsi, sellisel juhul peab arendaja tagama, et kasutaja on lehel toimuvaga kursis. Seda saab rakendada laadimisindikaatorite ja tekstisõnumite abil, mis näitavad, et andmeid vahetatakse serveriga. Samuti peate mõistma, et mitte kõik brauserid ei toeta AJAX-i (brauserite vanemaid versioone ja tekstibrausereid). Lisaks saab kasutaja keelata Javascripti. Seetõttu ei tohiks kuritarvitada tehnoloogia kasutamist ja kasutada veebisaidil teabe esitamiseks alternatiivseid meetodeid.
Teeme kokkuvõtte AJAX-i eelistest:
- Võimalus luua mugav veebiliides
- Aktiivne kasutaja suhtlus
- Kasutusmugavus
Andmete vahetamiseks tuleb lehele luua objekt XMLHttpRequest, mis on omamoodi vahendaja kasutaja brauseri ja serveri vahel (joonis 1). XMLHttpRequesti abil saate saata serverile päringu ja saada ka vastuse erinevat tüüpi andmete kujul.
Andmete vahetamiseks serveriga on kaks võimalust. Esimene meetod on GET-i päring. Selle päringu korral pääsete juurde serveris olevale dokumendile, edastades sellele argumendid URL-i enda kaudu. Sel juhul oleks kliendi poolel loogiline kasutada Javascripti paofunktsiooni, et osad andmed päringut ei katkestaks.
Kliendiosa, mis on kirjutatud Javascriptis, peab pakkuma vajalikku funktsionaalsust turvaliseks teabevahetuseks serveriga ja pakkuma meetodeid andmete vahetamiseks mis tahes ülaltoodud viisil. Serveri osa peab sisendandmeid töötlema ja nende põhjal genereerima uut infot (näiteks töötades andmebaasiga) ja saatma selle kliendile tagasi. Näiteks serverist teabe küsimiseks võite kasutada tavalist GET-päringut mitme väikese parameetri edastamisega, kuid teabe värskendamiseks või uue teabe lisamiseks peate kasutama POST-päringut, kuna see võimaldab teil edastada suuri andmehulgad.
Nagu juba mainitud, kasutab AJAX asünkroonset andmeedastust. See tähendab, et andmete edastamise ajal saab kasutaja teha muid vajalikke toiminguid. Sel ajal tuleks kasutajat teavitada, et toimub mingi andmevahetus, vastasel juhul arvab kasutaja, et midagi on valesti ja võib saidilt lahkuda või uuesti kutsuda funktsiooni, mis tema arvates on "külmutatud". Veeb 2.0 rakenduses suhtlemise ajal näitamine mängib väga olulist rolli: külastajad ei pruugi olla veel harjunud selle lehe värskendamise viisiga.
Serveri vastus võib olla mitte ainult XML, nagu tehnoloogia nimi viitab. Lisaks XML-ile saate vastuse saada lihttekstina või JSON-vormingus (Javascript Object Notation). Kui vastus saadi lihttekstina, saab selle kohe lehel konteineris kuvada. XML-vormis vastuse saamisel töödeldakse tavaliselt vastuvõetud XML-dokumenti kliendi poolel ja andmed teisendatakse (X)HTML-iks. JSON-vormingus vastuse saamisel peab klient täisväärtusliku Javascripti objekti saamiseks täitma ainult saadud koodi (Javascripti eval funktsioon). Kuid siin peate olema ettevaatlik ja võtma arvesse asjaolu, et selle tehnoloogia abil saab edastada pahatahtlikku koodi, nii et enne serverist saadud koodi käivitamist peaksite seda hoolikalt kontrollima ja töötlema. On selline praktika nagu “idle” päring, mille puhul serverilt vastust ei tule, muudetakse vaid serveripoolseid andmeid.
Erinevates brauserites on sellel objektil erinevad omadused, kuid üldiselt on see sama.
XMLHttpRequest objektimeetodidPange tähele, et meetodite nimed on kirjutatud samas Cameli stiilis nagu teised Javascripti funktsioonid. Olge nende kasutamisel ettevaatlik.
katkesta()- serveri poole pöördumise tühistamine.
getAllResponseHeaders()- hankige serverist kõik vastuse päised.
getResponseHeader("päise_nimi")- hankige määratud päis.
open("päringu_tüüp", "URL", "asünkroonne", "kasutajanimi", "parool")- päringu lähtestamine serverile, päringu meetodi määramine. Taotluse tüüp ja URL on kohustuslikud parameetrid. Kolmas argument on tõeväärtus. Tavaliselt on tõene alati määratud või pole üldse määratud (vaikimisi on tõene). Autentimiseks kasutatakse neljandat ja viiendat argumenti (autentimisandmete salvestamine skripti on väga ebaturvaline, kuna skripti saab vaadata iga kasutaja).
saada ("sisu")- saatke serverile HTTP päring ja saate vastuse.
setRequestHeader("päise_nimi", "väärtus")- määrake päringu päise väärtused.
Objekti XMLHttpRequest omadusedoleku muutmisel- objekti XMLHttpRequest üks olulisemaid omadusi. Seda atribuuti kasutades määratakse töötleja, mis kutsutakse välja alati, kui objekti olek muutub.
valmisolek- number, mis näitab objekti olekut.
vastusetekst- serveri vastuse esitus lihttekstina (stringina).
vastusXML- serverist saadud DOM-iga ühilduv dokumendiobjekt.
olek- serveri vastuse olek.
olekTekst- vastuse oleku tekstiesitus serverist.
Peaksite atribuuti readyState lähemalt uurima:
- 0 – objekt ei ole lähtestatud.
- 1 – objekt laadib andmeid.
- 2 – objekt on oma andmed laadinud.
- 3 – objekt ei ole täielikult laetud, kuid kasutaja saab sellega suhelda.
- 4 - objekt on täielikult lähtestatud; saadi serverilt vastus.
Nagu eespool mainitud, on selle objekti loomine igat tüüpi brauseri jaoks ainulaadne protsess.
Näiteks Gecko-ühilduvates brauserites, Konqueroris ja Safaris objekti loomiseks peate kasutama järgmist väljendit:
Var Request = new XMLHttpRequest();
Ja Internet Exploreri jaoks kasutatakse järgmist:
Var Request = new ActiveXObject("Microsoft.XMLHTTP");
Var Request = new ActiveXObject("Msxml2.XMLHTTP");
Nüüd, et saavutada brauseriülene ühilduvus, peate ühendama kõik funktsioonid üheks:
Funktsioon CreateRequest() ( var Request = false; if (window.XMLHttpRequest) ( //Gecko-ühilduvad brauserid, Safari, Konqueror Request = new XMLHttpRequest(); ) else if (window.ActiveXObject) ( //Internet explorer try ( Request) = new ActiveXObject("Microsoft.XMLHTTP"); püüdmine (CatchException) ( Request = new ActiveXObject("Msxml2.XMLHTTP"); ) ) if (!Request) ( alert("ei saa luua XMLHttpRequest"); ) return Request;
Pärast kõike seda saate selle objekti luua ja mitte muretseda populaarsete brauserite jõudluse pärast. Kuid saate luua objekti erinevates kohtades. Kui loote selle globaalselt, on teatud ajahetkel võimalik ainult üks päring serverile. Saate luua objekti iga kord, kui serverile päring tehakse (see lahendab probleemi peaaegu täielikult).
Taotlus serverileServeri päringu algoritm näeb välja selline:
- XMLHttpRequesti olemasolu kontrollimine.
- Ühenduse käivitamine serveriga.
- Päringu saatmine serverisse.
- Vastuvõetud andmete töötlemine.
/* Funktsioon serveris asuvasse faili päringu saatmiseks r_method - päringu tüüp: GET või POST r_path - faili tee r_args - argumendid nagu a=1&b=2&c=3... r_handler - funktsioon, mis käsitleb vastust server */ funktsioon SendRequest(r_method , r_path, r_args, r_handler) ( //Loo päring var Request = CreateRequest(); //Kontrolli päringu olemasolu uuesti if (!Request) ( return; ) //Määra kohandatud handler Request.onreadystatechange = function() ( // Kui andmevahetus on lõpetatud if (Request.readyState == 4) ( //Andke juhtimine kasutajakäsitlejale r_handler(Request); ) ) //Kontrolli, kas see on vajalik tee GET päring if (r_method.toLowerCase() == "get" && r_args.length > 0) r_path += "?" + r_args //Initsialiseeri ühendus Request.open(r_method, r_path, true); r_method.toLowerCase() == "post") ( //Kui see on POST-päring //Määrake päis Request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf- 8"); //päringu saatmine Request.send(r_args); ) else ( //Kui see on GET-päring //Saada nullpäring Request.send(null); ) )
Taotluse koostamine on muutunud palju lihtsamaks. Kirjutame näiteks funktsiooni, mis võtab serverisse faili sisu vastu ja väljastab selle konteinerisse.
Funktsioon ReadFile(failinimi, konteiner) ( //Loo töötleja funktsioon var Handler = function(Request) ( document.getElementById(container).innerHTML = Request.responseText; ) //Saada päring SendRequest("GET",failinimi," ", Käitleja);
Nii toimub suhtlus serveriga.
Vastuse töötlemineEelmises näites tegime serverile päringufunktsiooni. Kuid see on sisuliselt ebaturvaline, kuna me ei töötle objekti olekut ega serveri vastuse olekut.
Lisame oma koodi, et see saaks kuvada visuaalset teatist laadimisprotsessi kohta.
Request.onreadystatechange = function() ( //Kui andmevahetus on lõppenud if (Request.readyState == 4) ( //Andke juhtimine kasutajatöötlejale r_handler(Request); ) else ( //Teavitage kasutajat allalaadimisest ))...
Nagu te juba teate, võimaldab objekt XMLHttpRequest teil teada saada serveri vastuse olekut. Kasutagem seda võimalust.
Request.onreadystatechange = function() ( //Kui andmevahetus on lõpetatud if (Request.readyState == 4) ( if (Request.status == 200) ( //Andke juhtimine kasutajatöötlejale r_handler(Request); ) else ( // Teavitame kasutajat ilmnenud veast) ) else ( //Teata kasutajat allalaadimisest ) ) ...
Serveri vastuse valikudSaate serverist vastu võtta mitut tüüpi andmeid:
- Lihttekst
JSON on Javascripti objekti märkimine. Tema abiga saab esitada objekti stringina (siin saab tuua analoogia serialiseerimisfunktsiooniga). Kui saate JSON-i andmeid, peate need käivitama, et saada täielik Javascripti objekt ja teha sellega vajalikud toimingud. Pange tähele, et selline andmete edastamine ja täitmine ei ole turvalised. Peate jälgima, mis täitmiseks tuleb.
JSON-koodi näidis:
( "data": ( "misc": [ ( "nimi" : "JSON-element üks", "tüüp" : "Alapealkiri 1" ), ( "nimi" : "JSON-element kaks", "tüüp" : " Alapealkiri 2 " ) ] ) )
Sellise koodi saamisel tehke järgmist.
Var vastuseandmed = eval("(" + Request.responseText + ")")
Pärast selle koodi täitmist on objekt teile kättesaadav vastuseandmed.
Töötamine serveripoolsete programmeerimiskeeltegaSelline töö ei erine tavatööst. Näideteks võtan serveripoolse keelena PHP. Kliendi poolel pole midagi muutunud, kuid serveripoolt esindab nüüd PHP-fail.
Traditsiooni kohaselt alustame tervitustega meie imelisele maailmale:
Kaja "Tere, maailm!";
Sellele failile juurdepääsul tagastatakse kliendile string Hello, World. Nagu võite ette kujutada, pakub see rakenduste ehitamiseks tohutuid võimalusi. Argumentide edastamisega serverile XMLHttpRequestiga helistamisel saate väljundit parameetrites määrata, pakkudes seeläbi veebirakendusele laialdasi funktsioone.
Lisaks PHP-le saate kasutada mis tahes muud serveripoolset programmeerimiskeelt.
JQuery on javascripti teek, mille eesmärk on "kirjutada vähem, teha rohkem". jQueryt on lihtne oma saidiga ühendada ja kasutama hakata. jQuery muudab teie saidil JavaScripti kasutamise palju lihtsamaks.
jQuery kõrvaldab suure hulga JavaScripti koodi ridu ja võimaldab teil neid ridu rakendada vaid ühe meetodiga.
Mis on AJAX?AJAX on asünkroonne (st brauser võib peale päringu saatmist teha mida iganes, nt näidata vastust ootavat sõnumit, kerida lehte jne) JavaScript ja XML. Seda kasutatakse dünaamiliste ja kiirete veebilehtede loomiseks. AJAX võimaldab meil värskendada osa veebilehest ilma kogu lehte uuesti laadimata.
Aga jQuery ja AJAX?JQuery ja AJAX-i kombinatsioon pakub võimsaid funktsioone. Jquery ja ajaxi abil saate esitada päringu ja saada teavet erinevates vormingutes, sealhulgas XML-i, HTML-i ja isegi lihttekstina. Andmete vahetamiseks saate kasutada JSON-vormingut. Ajaxi päringu kaudu saadud andmeid saame kasutada oma html lehel.
jQuery muudab olemasoleva brauseri Ajax API võimsamaks ja hõlpsamini kasutatavaks. Ajaxi kõnede tegemine tavalisel viisil javascripti abil on veidi keeruline: kuna peate arvestama, et erinevad brauserid nõuavad XMLHttpRequest objekti loomiseks erinevat lähenemist. Lisaks muutub andmete esitamine, näiteks vormidest, keerulisemaks, kui kasutate ajaxi kõne jaoks tavalist JavaScripti.
jQuery pakub lihtsat ja võimsat funktsionaalsust, mis laiendab javascripti AJAX-i meetodeid ja pakub paindlikumat lähenemist.
Selles lühikeses artiklis näitan teile, kuidas kasutada jQueryt ja AJAX-i lihtsas php-vormingus. Alustame... JQuery ja AJAX-i kasutamiseks vajame kahte faili, esimene fail sisaldab html/php koodi, mille kaudu ajaxi päring tehakse. Teises failis töötleme ajaxi päringut ja tagastame tulemuse esimesele lehele.
1. samm: looge fail school.php ja kleepige sinna järgmine kood:Ülaltoodud koodis saame õpilase nime ja numbri ning jquery ja ajaxi abil saadame need aadressile details.php.
funktsioon getdetails())( var name = $("#name").val(); var rno = $("#rno").val(); $.ajax(( tüüp: "POST", url: " üksikasjad .php", andmed: (fname:nimi, id:rno) )).done(function(result) ( $("#msg").html(" Rulli nr " +rno +" aadress on "+result ) ; ));
| Sinu nimi: | ||
| Rulli number: | ||
Ülaltoodud koodis saame õpilase aadressi kasutades järjekorranumbrit ja tema nime.
Selle näite jaoks peate looma kooli andmebaasi ja õpilaste tabeli. Õpilaste tabel sisaldab väljasid nimede, järjenumbrite ja aadressidega.
Loodan, et see artikkel on teile kasulik.
