AJAX do të thotë JavaScript Asinkron dhe XML, që do të thotë JavaScript asinkron dhe XML. AJAX ju lejon të përditësoni të dhënat e faqes HTML pa i ringarkuar plotësisht ato. Përveç kësaj, teknologjia ju lejon të punoni me faqet e internetit në mënyrë asinkrone. Kjo do të thotë, ndërsa JavaScript ndërvepron me serverin në ueb, përdoruesi mund të vazhdojë të punojë me faqen e internetit.
Një shembull i përdorimit të teknologjisë AJAX është Google Sugjeroni. Mënyra se si funksionon Google Suggest është se ndërsa jeni duke shtypur një fjalë ose frazë për të kërkuar, JavaScript shkon në bazën e të dhënave të Google dhe i kërkon 10 pyetjeve më të njohura që fillojnë me të njëjtat shkronja. Dhe më pas shfaq këtë listë pa e ringarkuar faqen.
Për të marrë në konsideratë parimet e funksionimit të teknologjisë AJAX, ne do të zbatojmë një mekanizëm të ngjashëm me Google Suggest në faqen tonë të internetit. Le të themi se kemi një faqe interneti të operatorit turistik. Faqja ka një fushë kërkimi për sugjerime sipas emrit të shtetit. Le të shtojmë një listë rënëse në këtë fushë me plotësim automatik bazuar në shkronjat e futura. Le të fillojmë ta zgjidhim këtë problem. Unë do të them menjëherë se për të zbatuar këtë detyrë ju duhet njohuri për HTML dhe pak JavaScript (nuk duhet të jeni ekspert). PHP do të përdoret si gjuhë e serverit.
Së pari, le të krijojmë një formular kërkimi. Për ta bërë këtë, krijoni një skedar index.html në serverin tuaj të internetit, hapeni atë duke përdorur çdo redaktues teksti dhe futni kodin e mëposhtëm html.
Kërkoni për oferta.
Pushimet në det
Kërkoni për oferta:
Në këtë listim, ne krijuam një formular kërkimi me një fushë të futjes së tekstit dhe një buton dërgimi, dhe krijuam një shtresë div për të shfaqur rezultatet. Një skedar ajax.js është bashkangjitur gjithashtu në këtë faqe, i cili do të përmbajë funksione JavaScript.
Më pas, ne do të shkruajmë funksione JavaScript që do të dërgojnë kërkesa në server dhe do të përditësojnë faqen. Në mënyrë që të mos duhet të mbingarkojmë plotësisht dokumentin HTML, na duhet teknologjia Ajax. Pra, le të fillojmë. Krijoni një skedar ajax.js, vendoseni në të njëjtën dosje si index.html dhe hapeni në një redaktues teksti.
Së pari, duhet të krijoni një objekt që do të dërgojë kërkesa në server dhe do të marrë përgjigje. Ky objekt krijohet ndryshe në shfletues të ndryshëm. Ne do të shkruajmë një funksion universal që duhet të funksionojë në shfletues të ndryshëm. Shtoni kodin e mëposhtëm JavaScript në skedarin tuaj ajax.js.
/*variabla për ruajtjen e objektit të kërkesës*/
var kërkesë;
/*funksioni për krijimin e një objekti kërkese*/
funksioni CreateRequest()
{
var kërkesë=null;
provoni
{
//krijoni një objekt kërkese për Firefox, Opera, Safari
kërkesë = new XMLHttpRequest();
}
kap (e)
{
//krijoni një objekt kërkese për Internet Explorer
provoni
( request=new ActiveXObject("Msxml2.XMLHTTP");
}
kap (e)
{
request=new ActiveXObject("Microsoft.XMLHTTP");
}
}
kërkesë për kthim;
}
Ju duhet të shfaqni një listë të rezultateve sa herë që ndryshoni fushën e kërkimit. Për ta bërë këtë, ne do të përdorim një mbajtës ngjarjesh JavaScript. Ne do të zbulojmë ndryshime në çdo tastierë të ngjarjeve të tastierës. Për ta bërë këtë, në kodin tonë HTML të skedarit index.html, në rreshtin ku është krijuar një fushë kërkimi me emrin e vendit, shtoni atributin onkeyup="KeyPress(this.value)":
Domethënë, kur shtypet ndonjë tast, do të thirret funksioni JavaScript KeyPress(), të cilit i kalohen si parametër karakteret e futura në vargun e kërkimit. Funksioni KeyPress() duhet të kryejë detyrat e mëposhtme:
- Krijo një objekt të ri kërkese duke thirrur funksionin CreateRequest();
- Gjeneroni URL-në me të cilën duhet të lidheni për të marrë rezultate;
- Konfiguro një objekt kërkese për të krijuar një lidhje me serverin;
- Dërgoni një kërkesë në server.
Le të fillojmë krijimin e funksionit KeyPress(). Për të krijuar një objekt të ri kërkese, thjesht duhet t'i caktojmë variablit të kërkesës vlerën e kthyer nga funksioni CreateRequest() i krijuar më parë. Dhe për të qenë në anën e sigurt, le të kontrollojmë variablin e kërkesës. Nëse është NULL, atëherë objekti i kërkesës nuk mund të krijohet. Kështu do të duket kodi JavaScript për të zgjidhur këtë problem:
Funksioni TastiPress(term) (
kërkesë=KrijoKërkesë();
nëse (kërkesë==null)
{
kthimi;
}
}
Më pas, duhet t'i tregoni objektit të kërkesës se cili funksion JavaScript do të përpunojë përgjigjen e serverit. Për ta bërë këtë, duhet t'i caktoni vetisë onreadystatechange emrin e funksionit përkatës. Kjo veçori i tregon shfletuesit se cilin funksion duhet të ekzekutojë sa herë që ndryshon gjendja e gatishmërisë së kërkesës. Funksioni ynë LoadResults() do të përpunojë përgjigjen. Shtoni linjën e mëposhtme në funksion: request.onreadystatechange = LoadResults; . Vini re se nuk ka kllapa pas emrit të funksionit.
Pastaj le të vendosim lidhjen. Për ta bërë këtë, së pari duhet t'i tregoni objektit se ku ta dërgojë këtë kërkesë. Le të krijojmë URL-në e skriptit që do të llogarisë rezultatet dhe do ta caktojë atë në ndryshoren url. Le të themi se skripti php country.php do të jetë përgjegjës për llogaritjen e rezultateve në anën e serverit. Atëherë URL-ja jonë do të duket kështu: var url = "country.php" + "?s=" + encodeURIcomponent(term) + "&sid=" + Math.random(); , ku ndryshorja s përmban karakteret e futura në fushën e kërkimit, dhe sid i caktohet një numër i rastësishëm në mënyrë që shfletuesi të mos e ruajë faqen në memorie të fshehtë. Shtoni këtë rresht në trupin e funksionit KeyPress().
Më pas, duhet të inicializoni lidhjen duke përdorur metodën e hapur ("GET", url, e vërtetë) të objektit të kërkesës. Kjo metodë ka tre parametra. Parametri "GET" specifikon se si të dërgohen të dhënat në server. Ne përdorim metodën GET sepse karakteret e futura në vargun e kërkimit i kalohen skriptit të serverit nëpërmjet URL-së. Parametri i dytë specifikon URL-në e skriptit të serverit. Ne e ruajmë adresën url në variablin url, kështu që ne e specifikojmë këtë variabël në parametrin e dytë. Parametri i tretë mund të ketë dy vlera: modaliteti i vërtetë - asinkron dhe modaliteti i gabuar - sinkron. Aplikacioni ynë do të funksionojë në modalitetin asinkron, kështu që ne specifikojmë true . Pas inicializimit të lidhjes, duhet të krijoni lidhjen dhe të kërkoni rezultatet. Për ta bërë këtë, thjesht duhet të telefononi funksionin send(null) në objektin e kërkesës. Parametri null tregon se kërkesa nuk përmban të dhëna.
Pas kryerjes së të gjitha ndryshimeve, funksioni KeyPress(this.value) do të duket kështu:
Funksioni Shtypja e tastit (termi)
{
/*krijo një objekt të ri kërkese*/
kërkesë=KrijoKërkesë();
/*nëse nuk ishte e mundur të krijohej një objekt kërkese, atëherë përfundojmë ekzekutimin e funksionit*/
nëse (kërkesë==null)
{
kthimi;
}
/*formoni URL-në*/
var url = "country.php" + "?s=" + encodeURIcomponent(term) + "&sid=" + Math.random();
/* vendosni një objekt kërkese për të krijuar një lidhje*/
request.onreadystatechange = LoadResults;
request.open("GET", url, true);
/* dergo nje kerkese serverit*/
kërkesë.send(null);
}
Pra, vendoset lidhja, dërgohet kërkesa, serveri përpunon të dhënat dhe kthen rezultatin. Më pas, ju duhet të merrni një përgjigje, përpunoni dhe shfaqni rezultatet në një faqe interneti. E gjithë kjo do të bëhet nga funksioni LoadResults(), i cili do të thirret sa herë që ndryshon statusi i gatishmërisë së kërkesës. Le të shohim se si duhet të funksionojë ky funksion.
Së pari, duhet të kontrolloni gjendjen aktuale të gatishmërisë. Statusi gati ruhet nga vetia readyState e objektit të kërkesës. Kur kërkesa përpunohet, statusi i gatishmërisë është 4. Kjo do të thotë, nëse request.readyState == 4, atëherë mund ta përpunoni përgjigjen:
Funksioni LoadResults()
{
/*përpunoni përgjigjen*/
}
}
Funksioni LoadResults()
{
/*Kontrollimi i gjendjes se gatishmerise*/
nëse (kërkim.readyState == 4)(
/*Kontrollimi i statusit të kërkesës*/
nëse (kërkesa.status == 200)(
/*çdo gjë është në rregull, duke përpunuar përgjigjen*/
}
}
}
Nëse kontrollimi i statusit dhe statusit të kërkesës ka përfunduar me sukses, atëherë mund të filloni përpunimin e të dhënave të marra nga serveri. Ju mund të merrni të dhëna në dy mënyra: request.responseText - marrjen e të dhënave në formën e tekstit, ose request.responseXML - marrjen e të dhënave në formën e një objekti XMLDocument. Le të themi se serveri ynë dërgon një përgjigje në formën e një liste teksti të vendeve të ndara me presje. Më pas marrim të dhënat: var përgjigje = request.responseText . Më pas, ne përpunojmë të dhënat dhe i shfaqim ato në një shtresë me id="rezultatet e kërkimit".
Unë nuk do të hyj në detaje të përpunimit të të dhënave, por thjesht do të jap kodin e funksionit me komente:
Funksioni LoadResults()
{
/*Kontrollimi i gjendjes se gatishmerise*/
nëse (kërkim.readyState == 4)(
/*Kontrollimi i statusit të kërkesës*/
nëse (kërkesa.status == 200)(
//bëni të dukshme shtresën e rezultateve të kërkimit
ShowDiv ("rezultatet e kërkimit");
//pastroni rezultatet
ClearResults();
//merr të dhëna
var përgjigje = request.responseText;
//konvertoni një varg teksti në një grup
var array = përgjigje.ndarje(",");
//përcaktoni madhësinë e grupit
var count = varg.gjatesi;
//gjeni shtresën e rezultateve të kërkimit
//krijoni një tabelë në modelin e objektit të dokumentit
var tbl = dokument.createElement("tabela");
var tblbody = dokument.createElement("tbody");
var tblRow, tblCell, tblNode;
// përsërit nëpër të gjithë elementët e grupit të grupit
për (var i = 0; i (
var tekst = grup[i];
//krijoni rreshta të tabelës dhe shtoni ato në trupin e saj
tblRow = dokument.createElement("tr");
tblCell = dokument.createElement("td");
//vendos atributet dhe funksionet e qelizave
tblCell.onmouseover = funksion())(this.className="mouseOver";);
tblCell.onmouseout = funksion())(this.className="mouseOut";);
tblCell.setAttribute("kufiri", "0");
tblCell.onclick = funksion())(Replace(this);
tblNode = document.createTextNode(tekst);
tblCell.appendChild(tblNode);
tblRow.appendChild(tblCell);
tblbody.appendChild(tblRow);
}
//shtoje trupin e saj në tryezë
tbl.appendChild(tblbody);
//vendosni tabelën në shtresë
div.appendChild(tbl);
}
}
}
Dhe disa funksione të tjera ndihmëse JavaScript për shfaqjen e rezultateve në ekran:
/*bëje të dukshme shtresën e rezultateve*/
funksioni ShowDiv(id)
{
nëse (dokument.shtresat) dokument.shtresat.dukshmëri="shfaq";
else document.getElementById(id).style.visibility="i dukshëm";
}
/*bëjeni shtresën me rezultatet të padukshme*/
funksioni HideDiv(id)
{
nëse (dokumenti.shtresat) dokumenti.shtresat.dukshmëria="fshih";
else document.getElementById(id).style.visibility="fshehur";
}
/*rezultate të qarta*/
funksioni ClearResults ()
{
/* Hiqni rreshtat ekzistues nga tabela e rezultateve
var div = dokument.getElementById("rezultatet e kërkimit");
var counter = div.childNodes.length;
for(var i = kundër-1; i >= 0; i--)
{
div.removeChild(div.childNodes[i]);
}
}
/*Zëvendësoni vlerën në fushën e hyrjes me vlerën e zgjedhur me klikim të miut*/
funksioni Replace (tblCell)
{
var inputbox = document.getElementById("vendi");
inputbox.value = tblCell.firstChild.nodeValue;
ClearResults();
HideDiv ("rezultatet e kërkimit");
}
Gjithashtu në skedarin tonë html index.html midis etiketave dhe shtoni rregullat e mëposhtme të CSS:
.mouseOut (sfondi: #ffffff; ngjyra: #0000000; )
.mouseOver( sfond: #ccccff; ngjyra: #0000000; )
tabela (gjerësia: 250 px)
Kjo eshte e gjitha. Në këtë artikull, ne shikuam bazat e teknologjisë Ajax duke përdorur një shembull.
AJAX është një akronim që qëndron për Javascript asinkron dhe XML. Në fakt, AJAX nuk është një teknologji e re, pasi Javascript dhe XML kanë ekzistuar për një kohë të gjatë, dhe AJAX është një sintezë e teknologjive të përcaktuara. AJAX është më së shpeshti i lidhur me termin Web 2.0 dhe konsiderohet si aplikacioni më i fundit Web.
Kur përdorni AJAX, nuk ka nevojë të rifreskoni të gjithë faqen çdo herë, pasi vetëm një pjesë specifike e saj përditësohet. Kjo është shumë më e përshtatshme, pasi nuk duhet të prisni gjatë, dhe më ekonomike, pasi jo të gjithë kanë internet të pakufizuar. Vërtetë, në këtë rast, zhvilluesi duhet të sigurojë që përdoruesi të jetë i vetëdijshëm për atë që po ndodh në faqe. Kjo mund të zbatohet duke përdorur tregues ngarkimi dhe mesazhe me tekst që tregojnë se të dhënat po shkëmbehen me serverin. Ju gjithashtu duhet të kuptoni se jo të gjithë shfletuesit mbështesin AJAX (versionet më të vjetra të shfletuesve dhe shfletuesve të tekstit). Plus Javascript mund të çaktivizohet nga përdoruesi. Prandaj, nuk duhet të abuzohet me përdorimin e teknologjisë dhe të përdoret metoda alternative e paraqitjes së informacionit në një faqe interneti.
Le të përmbledhim avantazhet e AJAX:
- Aftësia për të krijuar një ndërfaqe të përshtatshme në internet
- Ndërveprimi aktiv i përdoruesit
- Lehtësinë e përdorimit
Për të shkëmbyer të dhëna, në faqe duhet të krijohet një objekt XMLHttpRequest, i cili është një lloj ndërmjetësi midis Browser-it të përdoruesit dhe serverit (Fig. 1). Duke përdorur XMLHttpRequest, ju mund të dërgoni një kërkesë në server dhe gjithashtu të merrni një përgjigje në formën e llojeve të ndryshme të të dhënave.
Ka dy mënyra për të shkëmbyer të dhëna me serverin. Metoda e parë është një kërkesë GET. Në këtë kërkesë, ju aksesoni një dokument në server, duke i kaluar argumentet e tij përmes vetë URL-së. Në këtë rast, në anën e klientit do të ishte logjike të përdoret funksioni i ikjes Javascript në mënyrë që disa të dhëna të mos ndërpresin kërkesën.
Pjesa e klientit, e shkruar në Javascript, duhet të sigurojë funksionalitetin e nevojshëm për shkëmbim të sigurt me serverin dhe të ofrojë metoda për shkëmbimin e të dhënave në ndonjë nga mënyrat e mësipërme. Pjesa e serverit duhet të përpunojë të dhënat hyrëse, dhe bazuar në to, të gjenerojë informacione të reja (për shembull, duke punuar me një bazë të dhënash) dhe t'ia dërgojë atë klientit. Për shembull, për të kërkuar informacion nga serveri, mund të përdorni një kërkesë të rregullt GET me transferimin e disa parametrave të vegjël, por për të përditësuar informacionin ose për të shtuar informacione të reja, do t'ju duhet të përdorni një kërkesë POST, pasi ju lejon të transferoni të mëdha sasitë e të dhënave.
Siç është përmendur tashmë, AJAX përdor transferimin asinkron të të dhënave. Kjo do të thotë që gjatë transferimit të të dhënave, përdoruesi mund të kryejë veprime të tjera të nevojshme. Në këtë moment, përdoruesi duhet të njoftohet se po ndodh një lloj shkëmbimi i të dhënave, përndryshe përdoruesi do të mendojë se diçka e gabuar ka ndodhur dhe mund të largohet nga faqja, ose të ritherrë funksionin që ai mendon se është "ngrirë". Tregimi gjatë komunikimit në një aplikacion Web 2.0 luan një rol shumë të rëndësishëm: vizitorët mund të mos jenë mësuar ende me këtë mënyrë të përditësimit të faqes.
Përgjigja nga serveri mund të jetë jo vetëm XML, siç sugjeron emri i teknologjisë. Përveç XML, ju mund të merrni përgjigjen në tekst të thjeshtë, ose JSON (Javascript Object Notation). Nëse përgjigja është marrë në tekst të thjeshtë, atëherë ajo mund të shfaqet menjëherë në një enë në faqe. Kur merrni një përgjigje në formën e XML, dokumenti i marrë XML zakonisht përpunohet në anën e klientit dhe të dhënat konvertohen në (X)HTML. Kur merr një përgjigje në formatin JSON, klienti duhet vetëm të ekzekutojë kodin e marrë (funksioni vlerësues i Javascript) për të marrë një objekt Javascript të plotë. Por këtu duhet të jeni të kujdesshëm dhe të merrni parasysh faktin që kodi me qëllim të keq mund të transmetohet duke përdorur këtë teknologji, kështu që përpara se të ekzekutoni kodin e marrë nga serveri, duhet ta kontrolloni dhe përpunoni me kujdes atë. Ekziston një praktikë e tillë si një kërkesë "boshe", në të cilën nuk merret asnjë përgjigje nga serveri, vetëm të dhënat në anën e serverit ndryshohen.
Në shfletues të ndryshëm, ky objekt ka veti të ndryshme, por në përgjithësi është i njëjtë.
Metodat e objektit XMLHttpRequestVini re se emrat e metodave janë shkruar në të njëjtin stil Camel si funksionet e tjera Javascript. Kini kujdes kur i përdorni.
abort ()- anulimi i kërkesës aktuale në server.
getAllResponseHeaders()- merrni të gjitha titujt e përgjigjeve nga serveri.
getResponseHeader ("emri_header")- merrni kokën e specifikuar.
hapur ("lloj_kërkese", "URL", "asinkron", "emri i përdoruesit", "fjalëkalimi")- inicializimi i një kërkese në server, duke specifikuar metodën e kërkesës. Lloji i kërkesës dhe URL-ja janë parametra të kërkuar. Argumenti i tretë është një vlerë boolean. Zakonisht e vërtetë është gjithmonë e specifikuar ose nuk specifikohet fare (parazgjedhja është e vërtetë). Argumenti i katërt dhe i pestë përdoren për vërtetim (është shumë e pasigurt të ruash të dhënat e vërtetimit në një skript, pasi skripti mund të shikohet nga çdo përdorues).
dërgo ("përmbajtje")- dërgoni një kërkesë HTTP në server dhe merrni një përgjigje.
setRequestHeader ("emri_header", "vlera")- vendosni vlerat e kokës së kërkesës.
Vetitë e objektit XMLHttpRequestnë gjendje të gatshme ndryshim- një nga vetitë më të rëndësishme të objektit XMLHttpRequest. Duke përdorur këtë veti, specifikohet një mbajtës që thirret sa herë që ndryshon statusi i një objekti.
shtet i gatshëm- një numër që tregon statusin e objektit.
Teksti i përgjigjes- paraqitja e përgjigjes së serverit si tekst i thjeshtë (string).
përgjigjeXML- një objekt dokumenti i pajtueshëm me DOM i marrë nga serveri.
statusi- statusi i përgjigjes nga serveri.
statusTeksti- përfaqësimi me tekst i statusit të përgjigjes nga serveri.
Ju duhet të shikoni më nga afër pronën ReadState:
- 0 - Objekti nuk është inicializuar.
- 1 - Objekti po ngarkon të dhënat.
- 2 - Objekti ka ngarkuar të dhënat e tij.
- 3 - Objekti nuk është plotësisht i ngarkuar, por mund të ndërveprohet me të nga përdoruesi.
- 4 - Objekti është inicializuar plotësisht; u mor një përgjigje nga serveri.
Siç u përmend më lart, krijimi i këtij objekti për çdo lloj shfletuesi është një proces unik.
Për shembull, për të krijuar një objekt në shfletuesit e përputhshëm me Gecko, Konqueror dhe Safari, duhet të përdorni shprehjen e mëposhtme:
Var Kërkesë = new XMLHttpRequest();
Dhe për Internet Explorer përdoret si më poshtë:
Var Kërkesë = i ri ActiveXObject ("Microsoft.XMLHTTP");
Var Kërkesë = new ActiveXObject("Msxml2.XMLHTTP");
Tani, për të arritur përputhshmërinë e ndër-shfletuesve, duhet të kombinoni të gjitha funksionet në një:
Funksioni CreateRequest() ( var Request = false; if (window.XMLHttpRequest) ( //Shfletues të pajtueshëm me Gecko, Safari, Konqueror Request = ri XMLHttpRequest(); ) tjetër nëse (window.ActiveXObject) ( //Internet explorer provo (Kërkesë = new ActiveXObject("Microsoft.XMLHTTP"); ) catch (CatchException) (Kërkesë = new ActiveXObject("Msxml2.XMLHTTP"); ) ) if (!Kërkesë) ( alarm("Nuk mund të krijohet XMLHttpKërkesa"); ) Kërkesa për kthim; )
Pas gjithë kësaj, ju mund ta krijoni këtë objekt dhe të mos shqetësoheni për performancën në shfletuesit e njohur. Por ju mund të krijoni një objekt në vende të ndryshme. Nëse e krijoni atë globalisht, atëherë në një moment të caktuar kohor do të jetë e mundur vetëm një kërkesë për serverin. Mund të krijoni një objekt sa herë që i bëhet një kërkesë serverit (kjo do ta zgjidhë pothuajse plotësisht problemin).
Kërkesë në serverAlgoritmi i kërkesës së serverit duket si ky:
- Kontrollimi i ekzistencës së XMLHttpRequest.
- Inicializimi i një lidhjeje me serverin.
- Dërgimi i një kërkese në server.
- Përpunimi i të dhënave të marra.
/* Funksioni për dërgimin e një kërkese në një skedar në server r_method - lloji i kërkesës: GET ose POST r_path - rruga drejt skedarit r_args - argumente si a=1&b=2&c=3... r_handler - funksioni që trajton përgjigjen nga server */ funksioni SendRequest(r_method, r_path, r_args, r_handler) ( //Krijo një kërkesë var Request = CreateRequest(); //Kontrollo përsëri ekzistencën e kërkesës nëse (!Kërkesë) (kthim;) //Cakto një porosi handler Request.onreadystatechange = funksion() ( // Nëse shkëmbimi i të dhënave ka përfunduar nëse (Request.readyState == 4) ( //Kalo kontrollin te mbajtësi i përdoruesit r_handler(Kërkesë); ) ) //Kontrollo nëse është e nevojshme të bëni një kërkesë GET nëse (r_method.toLowerCase() == "merr" && r_args.length > 0) r_path += "?" + r_args; //Inicializoni lidhjen Request.open(r_method, r_path, true); nëse ( r_method.toLowerCase() == "post") ( //Nëse kjo është kërkesë POST //Vendos kokën Request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf- 8"); //Dërgo kërkesën Kërkesë.send(r_args); ) else ( //Nëse kjo është një kërkesë GET //Dërgo një kërkesë null Kërkesë.send(null); ) )
Krijimi i një kërkese është bërë shumë më i lehtë. Për shembull, le të shkruajmë një funksion që do të marrë përmbajtjen e një skedari në server dhe do ta nxjerrë atë në një kontejner.
Funksioni ReadFile(emri i skedarit, kontejneri) ( //Krijo një funksion mbajtës var Handler = funksion(Kërkesë) ( document.getElementById(container).innerHTML = Request.responseText; ) //Dërgo kërkesën SendRequest("GET",emri i skedarit," ", Trajtues);)
Kështu ndodh ndërveprimi me serverin.
Përpunimi i përgjigjesNë shembullin e mëparshëm, ne bëmë një funksion kërkesë në server. Por në thelb është i pasigurt, pasi ne nuk përpunojmë gjendjen e objektit dhe gjendjen e përgjigjes nga serveri.
Le t'i shtojmë kodit tonë në mënyrë që të mund të shfaqë një njoftim vizual për procesin e ngarkimit.
Request.onreadystatechange = funksion() ( //Nëse shkëmbimi i të dhënave ka përfunduar nëse (Request.readyState == 4) ( //Kaloni kontrollin te mbajtësi i përdoruesit r_handler(Kërkesë); ) else ( //Njoftoni përdoruesin për shkarkimin ) )...
Siç e dini tashmë, objekti XMLHttpRequest ju lejon të dini statusin e përgjigjes nga serveri. Le të përfitojmë nga kjo mundësi.
Request.onreadystatechange = funksion() ( //Nëse shkëmbimi i të dhënave është përfunduar nëse (Request.readyState == 4) ( if (Request.status == 200) ( //Kaloni kontrollin te mbajtësi i përdoruesit r_handler(Kërkesë); ) tjetër ( // Ne e njoftojmë përdoruesin për gabimin që ka ndodhur) ) tjetër ( //Njoftoni përdoruesin për shkarkimin) ) ...
Opsionet e përgjigjes së serveritJu mund të merrni disa lloje të dhënash nga serveri:
- Teksti i thjeshtë
JSONështë shënimi i objektit Javascript. Me ndihmën e tij, ju mund të përfaqësoni një objekt si një varg (këtu mund të jepni një analogji me funksionin e serializimit). Kur merrni të dhëna JSON, duhet t'i ekzekutoni ato për të marrë një objekt të plotë Javascript dhe për të kryer operacionet e nevojshme mbi të. Ju lutemi, kini parasysh se një transmetim dhe ekzekutim i tillë i të dhënave nuk është i sigurt. Ju duhet të mbani gjurmët e asaj që vjen për ekzekutim.
Shembull i kodit JSON:
( "të dhënat": ( "misc": [ ( "emri" : "elementi JSON një", "lloji" : "Nëntitulli 1" ), ( "emri" : "elementi JSON dy", "lloji" : " Nëntitulli 2 " ) ] ))
Kur merrni një kod të tillë, kryeni veprimet e mëposhtme:
Var Response Data = eval("(" + Request.responseText + ")")
Pas ekzekutimit të këtij kodi, objekti do të jetë i disponueshëm për ju të dhënat e përgjigjes.
Puna me gjuhë programimi nga ana e serveritKjo lloj pune nuk ndryshon nga puna e zakonshme. Për shembull, unë do të marr PHP si gjuhë të serverit. Asgjë nuk ka ndryshuar në anën e klientit, por ana e serverit tani përfaqësohet nga një skedar PHP.
Sipas traditës, le të fillojmë me përshëndetje për botën tonë të mrekullueshme:
Echo "Përshëndetje, Botë!";
Kur aksesoni këtë skedar, vargu Hello, World do t'i kthehet klientit. Siç mund ta imagjinoni, kjo paraqet mundësi të mëdha për ndërtimin e aplikacioneve. Duke kaluar argumente kur telefononi serverin duke përdorur XMLHttpRequest, mund të parametrizoni daljen, duke ofruar kështu funksionalitet të gjerë në aplikacionin Ueb.
Përveç PHP, ju mund të përdorni çdo gjuhë tjetër programimi nga ana e serverit.
Përditësimi i fundit: 1/11/2015
Teknologjia AJAX është një teknologji për ndërveprim asinkron me serverin. Falë kësaj teknologjie, ne mund të dërgojmë kërkesa te serveri dhe të marrim përgjigje prej tij pa e ringarkuar faqen në sfond, dhe të krijojmë aplikacione të pasura interaktive në internet, të tilla si bisedat në ueb.
Fillimisht, aftësia për të bashkëvepruar në mënyrë asinkrone me serverin u përdor në formën e një objekti ActiveX në Microsoft. Më pas, ideja e ndërveprimit asinkron u zgjodh nga kompani të tjera. Dhe aktualisht, funksionaliteti i kërkesave asinkrone në shfletues është i disponueshëm për zhvilluesit e uebit përmes objektit XMLHttpRequest.
Meqenëse ky artikull ka të bëjë me jQuery, nuk do të hyj në detaje rreth objektit XMLHttpRequest. Por unë do të tregoj shkurtimisht thelbin e përdorimit të tij.
Pra, para së gjithash, për të punuar me AJAX ne kemi nevojë për një web server. Kjo mund të jetë Node.js, IIS, Apache, nginx. Në të ardhmen do të përdor web serverin Apache.
Le të krijojmë një faqe interneti ku do të përdoret XMLHttpRequest:
Ngarko Nuk ka funksion lajmesh ajaxload())( var xhr=new XMLHttpRequest(); xhr.onreadystatechange=function())( if(this.readyState==4)( if(this.status >=200 && xhr.status< 300){ document.getElementById("news").innerHTML=this.responseText; } } } xhr.open("GET", "ajax.php"); xhr.send(); }
Për sa i përket shënimit, ne kemi dy elementë: një buton, kur klikohet, funksioni ajaxload ekzekutohet dhe një bllok div në të cilin do të ngarkohen të dhënat kur kërkohet.
I gjithë veprimi ynë kryesor ndodh në funksionin ajaxload. Së pari, ne krijojmë një objekt XMLHttpRequest: var xhr=new XMLHttpRequest(); .
Ne do të dërgojmë kërkesa përmes këtij objekti. Kur merret një përgjigje, ngjarja onreadystatechange do të aktivizohet. Dhe për të përpunuar këtë ngjarje, ne i caktojmë vetisë xhr.onreadystatechange një funksion të përpunimit të përgjigjes.
Në funksionin e përpunimit, fillimisht shikojmë gatishmërinë e përgjigjes përmes veçorisë readyState (gjendja this.readyState==4 do të thotë që kërkesa është përfunduar). Tjetra, ne kontrollojmë kodin e statusit të përgjigjes: nëse serveri ktheu një kod statusi nga 200 në 300, atëherë kërkesa ishte e suksesshme.
Dhe më pas tekstin e përgjigjes ia kalojmë div-së që kemi në faqe nëpërmjet vetisë answerText.
Në rreshtin xhr.open("GET", "ajax.php"); vendosim metodën e kërkesës dhe burimin tek i cili do të shkojë kërkesa.
Epo, me rreshtin e fundit xhr.send() dërgojmë kërkesën. Ne përfunduam duke shkruar shumë kod për të ekzekutuar një pyetje të thjeshtë.
Le të themi se kemi një mbajtës kërkesash në PHP në serverin tonë. Do ta bëj jashtëzakonisht të thjeshtë. Ai thjesht do të përgjigjet me shënimin html:
Tani, kur klikoni butonin, do të ndodhë një kërkesë Ajax, rezultatet e së cilës do të ngarkohen në faqe:
Tani le të rishkruajmë kodin e faqes duke përdorur jQuery:
Ngarkoni Asnjë lajm $(funksion())( $("button"). kliko(funksion())( $("#lajme").load("ajax.php"); )); ));
Kështu, kodi bëhet më i pastër dhe më i thjeshtë duke përdorur bibliotekën jQuery. Thjesht duhet të përdorim metodën e ngarkesës, duke kaluar adresën e burimit si parametër. Dhe rezultati përfundimtar do të jetë i njëjtë.
AJAX (Asynchronous JavaScript dhe XML) është një teknologji që ofron kërkesa dinamike në server, gjatë të cilave nuk ka nevojë të rifreskoni faqen. Faqja funksionon me një rend të madhësisë më shpejt, sepse e gjithë faqja nuk ka nevojë të përditësohet rregullisht, kështu që përdorimi i saj bëhet më i përshtatshëm për përdoruesit, por jo për motorët e kërkimit.
Një numër i madh i teknologjive të ngjashme filluan të përdoren në vitet e largëta '90 të shekullit të kaluar. Për shembull, në vitin 1996, elementi IFRAME HTML u prezantua në shfletuesin Internet Explorer 3, dhe dy vjet më vonë Microsoft zbatoi mekanizmin e Skriptimit në distancë.
Sidoqoftë, vetë termi "JavaScript asinkron dhe XML" u bë i njohur në botë vetëm në agimin e vitit 2005, kur Jesse Garrett publikoi një artikull me titull "Ajax: një qasje e re ndaj aplikacioneve në internet". Në materialin e tij, Garrett përshkroi në detaje se si krijohen aplikacionet e internetit për Google Maps dhe Gmail. Ai deklaroi me besim se ky ishte fillimi i një zhvillimi të shpejtë në aftësitë në dispozicion të përdoruesve në aplikacione.
Jesse James Garrett
Jesse Garrett i kushtoi vëmendje të veçantë teknologjisë AJAX, i dha një emër dhe e përshkroi trendin e ri në detaje. Por vlen të theksohet se ai nuk e shpiku këtë teknologji, ai i dha vetëm një emër.
Pas kësaj, fusha e zhvillimit të aplikacioneve në internet u bë shumë më e avancuar. Tani e tutje, përdoruesit mund të shohin rezultatet e shkëmbimit të të dhënave midis shfletuesit dhe serverit në ekranet e tyre.
Kur vizitoni një faqe interneti të caktuar, do të kuptoni menjëherë se ai përdor teknologjinë AJAX. Më parë, përdoruesit duhej të klikonin në butona të ndryshëm dhe të ndiqnin lidhjet për të konfirmuar veprimet e tyre. Sot, faqja e internetit pranon në mënyrë të pavarur të dhëna të reja në kohë reale pa ringarkuar nga ana e përdoruesit.
E gjithë kjo siguron një përdorim më të përshtatshëm të burimit në internet, pasi koha e caktuar për ndërveprim me të zvogëlohet ndjeshëm. Në thelb, ne fillojmë të komunikojmë me një aplikacion me shpejtësi të lartë. Dhe që ai të funksionojë plotësisht, ju duhet vetëm aksesi në internet, si dhe një shfletues që funksionon me JavaScript.
Si funksionon teknologjiaPër të kuptuar në mënyrë specifike se si funksionon AJAX, le të shohim 4 hapa kritikë:
Nëse shpjegojmë vizualisht thelbin e teknologjisë, atëherë në imazh ky proces do të duket kështu: 
Pa objektin XMLHttpReques, informacioni nuk mund të shkëmbehet, kështu që ai vendoset paraprakisht në vetë faqen. Objekti vepron si një lidhje midis serverit dhe shfletuesit të internetit. Vetë kërkesat kalojnë nga sistemi në server në formatin POST ose GET. Lloji GET në thelb i referohet një dokumenti të vendosur në server dhe merr adresën e faqes si argument. Për të parandaluar anulimin e kërkesës, është krijuar një funksion i fuqishëm JavaScript Escape për të parandaluar raste të tilla.
Nëse të dhënat transferohen në vëllime të mëdha, nuk mund të bëni pa funksionin POST. Serveri përpunon informacionin që merr dhe më pas, bazuar në të, gjeneron të dhëna të përditësuara që i dërgohen përdoruesit.
Qasja AJAX përfshin transferimin e informacionit në kohë të ndryshme. Falë këtij klienti, një sërë funksionesh janë të disponueshme gjatë transferimit të të dhënave "në sfond". Përdoruesi merr një mesazh në lidhje me procesin e transferimit të informacionit në mënyrë që ai të mos e konsiderojë atë të mbërthyer - kjo e lejon atë të mbahet në sit.
Për të dërguar përgjigjen, serveri përdor tekst standard JSON ose XML. Kur merrni një dokument JSON, ai shfaqet menjëherë në ekran. Por nga përdoruesi kërkohet gjithashtu të ekzekutojë kodin që merr, pas së cilës do të gjenerohet një objekt JavaScript. Dhe nëse teksti dërgohet në formatin XML, ai fillimisht duhet të zëvendësohet me HTML, dhe më pas të shfaqet në faqe.
Cilat janë avantazhet e AJAX?- Zvogëlon ngarkesën në server. Por kjo është e mundur vetëm nëse teknologjia përdoret siç duhet. Ju mund të përdorni një shabllon që do t'ju ndihmojë të krijoni elementë të përhershëm të një burimi në internet: meny, logo, kokë, etj. Dhe për të kënaqur kërkesat e vizitorëve, nuk ka nevojë të rifreskoni të gjithë faqen. Për shembull, keni krijuar një bllok me votim dhe vizitorit i kërkohet të zgjedhë opsionin që është optimal për të për të votuar. Sapo të shtypë butonin, informacioni do të shkojë menjëherë në server dhe më pas personi do të marrë një përgjigje. Dhe e gjithë kjo ndodh pa rifreskuar faqen.
- Përmirëson performancën e serverit. Sepse vetëm përmbajtja e faqes ngarkohet, dhe përdoruesit i marrin rezultatet e veprimeve të tyre shumë më shpejt.
- Redukton trafikun. Sasia e të dhënave kur punoni me aplikacione zvogëlohet ndjeshëm. Kjo sigurohet nga fakti që nuk ngarkohet e gjithë faqja, por vetëm elementët ose të dhënat e ndryshuara të saj. Më pas skripti ndryshon informacionin në faqen në shfletues.
- Hap një shumëllojshmëri të gjerë mundësish. Pasi të zgjidhni AJAX, do të keni në dispozicion një bollëk veprimesh. Kështu, kur regjistrohet në faqe, një vizitor, duke treguar një hyrje, menjëherë zbulon nëse është i zënë apo jo. Dhe kur futni një pyetje në shiritin e kërkimit të Google ose Yandex, pas çdo fjale ose shkronje të mëvonshme, opsionet e gatshme të pyetjeve shfaqen më poshtë. Sigurisht, kjo e bën detyrën shumë më të lehtë për përdoruesit e internetit.
- JavaScript duhet të aktivizohet në çdo kohë. Pa këtë mbështetje, teknologjia AJAX në faqet përkatëse është praktikisht e padobishme.
- Probleme me. Shpesh, përmbajtja e vendosur në mënyrë dinamike në faqe kalon pa u vënë re nga robotët e kërkimit. Për shkak të kësaj, rekomandohet që ngarkimi dinamik të aplikohet vetëm për pjesë të caktuara të përmbajtjes. Kjo është mënyra e vetme për të minimizuar ndikimin negativ të teknologjisë në promovimin e SEO.
- Nuk mund të kombinohet me mjetet e shfletuesit. Nëse krijoni faqe në mënyrë dinamike, shfletuesi nuk do t'i kujtojë ato dhe nuk do t'i shfaqë ato në histori, dhe për këtë arsye, kur klikoni në butonin "Kthehu", nuk do të ktheheni në faqen e vizituar më parë. Por problemi zgjidhet me skripta speciale. Gjithashtu nuk do të keni mundësinë të shënoni ndonjë përmbajtje.
- Mungesa e numrit të kërkesave. Për shkak të ngarkimit dinamik të materialeve, sistemi nuk mund të shfaqë me saktësi statistikat, sepse kur përdoruesi lundron nëpër faqe të ndryshme, ato nuk ringarkohen dhe numëruesi nuk i numëron këto kalime. Për shkak të kësaj, mund të lindin probleme gjatë vlerësimit të analitikës në sit.
- Niveli i sigurisë është ulur. Duke instaluar AJAX, çdo përdorues mund të shikojë kodin burimor të faqes dhe kjo nuk është e sigurt.
U tha tashmë më lart se faqet e bazuara në këtë teknologji janë të indeksuara shumë dobët. Për të shmangur këtë, është më mirë të siguroheni paraprakisht që të dhënat e ngarkuara në mënyrë dinamike të jenë të disponueshme edhe nëpërmjet lidhjeve. Duke pasur këtë mundësi, faqet e burimit të internetit do të shfaqen normalisht edhe për ata përdorues që përdorin një shfletues pa JavaScript.
Pronarët e faqeve ku përmbajtja ngarkohet në mënyrë dinamike duhet të sigurohen që robotët e motorëve të kërkimit, përveçse kuptojnë përmbajtjen e faqeve, të përcaktojnë saktë edhe rregullat për lundrimin në faqe.
Për të minimizuar ndikimin negativ të AJAX në promovimin e faqes në internet, ai duhet të optimizohet:
Shpesh, motorët e kërkimit i trajtojnë më keq burimet AJAX sesa faqet që nuk e përdorin këtë teknologji. Ka disa arsye për këtë:
- disa përmbajtje mund të mos indeksohen nga robotët;
- të gjitha faqet kanë të njëjtën url;
- Disa faqe mund të duken ndryshe për robotët e kërkimit sesa për përdoruesit.
Por nëse e përdorni teknologjinë AJAX me mençuri, domethënë e përdorni atë vetëm për fragmente të caktuara në sit, atëherë nuk do të keni probleme me indeksimin.
Unë nuk do të rekomandoja përdorimin e teknologjisë AJAX për të gjithë faqen; sajte të tilla janë të indeksuara dobët nga motorët e kërkimit. Por për disa elementë të përdoruesit (për shembull, sondazhet, shtimi i komenteve), kjo teknologji është e dobishme dhe, përkundrazi, mund të rrisë përdorshmërinë e projektit tuaj.
konkluzioniTeknologjia AJAX hap mundësi të mëdha për përdoruesit, e bën komunikimin me faqet e internetit shumë më të shpejtë dhe më të rehatshëm dhe rrit shpejtësinë e funksionimit të tyre. Por ka edhe disavantazhe të rëndësishme që mund të shmangen nëse përdoret siç duhet. Vetëm me një qasje kompetente faqja juaj e internetit do të ngrihet në pozita të larta në rezultatet e kërkimit dhe do të jetë në gjendje të mirë me motorët e kërkimit.
Shumica e faqeve moderne të internetit përdorin një teknologji të quajtur AJAX për të bashkëvepruar shpejt dhe me efikasitet me vizitorin. AJAX është bërë një metodë shumë e njohur për marrjen e të dhënave nga një server në sfond dhe përditësimin dinamik të faqes.
Zhvillimi i kodit JavaScript për të zbatuar AJAX nga e para është një proces që kërkon shumë kohë dhe i mundimshëm. Megjithatë, shumë biblioteka JavaScript, duke përfshirë jQuery, kanë zbatime të shkëlqyera të nivelit të lartë të AJAX në formën e një grupi metodash dhe funksionesh që e bëjnë ndërtimin e faqeve të internetit më të lehtë dhe më të shpejtë.
Në këtë seri mësimore, ne do të shikojmë bazat e ndërtimit të kërkesave AJAX duke përdorur jQuery. Do të trajtohen temat e mëposhtme:
- Çfarë është teknologjia AJAX? Si punon? Cilat janë avantazhet e tij?
- Si të bëni lloje të ndryshme kërkesash AJAX duke përdorur jQuery?
- Dërgimi i të dhënave në server duke përdorur kërkesat AJAX.
- Përpunimi dhe nxjerrja e të dhënave nga përgjigjet AJAX nga serveri.
- Si të personalizoni përpunimin AJAX në jQuery dhe të ndryshoni cilësimet e paracaktuara?
Shënim: Udhëzimet fokusohen në pjesën e anës së klientit të JavaScript. Por zhvillimi i anës së serverit është gjithashtu mjaft i thjeshtë. Për informacion më të plotë, duhet të studioni materiale në gjuhët e programimit të serverit, të tilla si PHP.
Çfarë është AJAX dhe si është i dobishëm?AJAX është një teknikë e zhvillimit të aplikacionit në internet në të cilën kodi JavaScript që ekzekutohet në shfletuesin e vizitorit komunikon me serverin e uebit në mënyrë asinkrone, domethënë në sfond. Dallimet nga aplikacionet e zakonshme në internet janë si më poshtë:
- Një faqe tipike ueb përmban lidhje ose forma që, kur klikohen ose dorëzohen, krijojnë një kërkesë për një URL të re në serverin e uebit. Serveri dërgon një faqe krejtësisht të re HTML, të cilën shfletuesi më pas e jep, duke zëvendësuar faqen origjinale. Kjo qasje kërkon shumë kohë dhe është e keqe për vizitorin, pasi ai duhet të presë që faqja e re të ngarkohet.
- Kur përdorni teknologjinë AJAX, kodi JavaScript bën një kërkesë për një URL në server. Kodi gjithashtu mund të dërgojë të dhëna së bashku me kërkesën. Kodi JavaScript më pas përpunon përgjigjen e serverit dhe vepron në përputhje me rrethanat. Për shembull, llogaritjet mund të bëhen me të dhënat e kthyera, mund të shtohet ose përditësohet një widget në faqe ose mund t'i dërgohet një mesazh vizitorit për përditësimin e bazës së të dhënave në server.
Për shkak se kërkesa AJAX ekzekutohet në sfond, kodi JavaScript (dhe vizitori) mund të vazhdojnë të ndërveprojnë me faqen ndërsa kërkesa përpunohet. Procesi është i fshehur nga vizitori, i cili nuk ka nevojë të largohet nga faqja që po shikon aktualisht. Kjo qasje i bën faqet AJAX shumë të këndshme për të punuar.
Pika themelore e AJAX është objekti JavaScript XMLHttpRequest. Ai siguron një sërë metodash si open() , send() dhe onreadystatechange() të cilat mund të përdoren kur dërgoni kërkesa AJAX në server dhe përpunoni përgjigjet në sfond.
Zhvillimi i kodit AJAX JavaScript me ndërshfletues mund të jetë një proces mjaft i mundimshëm. Për fat të mirë, jQuery ju jep disa metoda AJAX të lehta për t'u përdorur që ju lejojnë të abstraktoni shumë operacione të nivelit të ulët.
Për ata që janë më kureshtarë, fjala AJAX është një shkurtim i shkronjave të para të shprehjes në anglisht "A synchronous JavaScript A and X ML" (Asynchronous JavaScript and XML). Sidoqoftë, termi mund të jetë mashtrues - kërkesa nuk duhet të jetë asinkrone dhe nuk duhet të përdorë XML për të dërguar të dhënat.
Bërja e një kërkese GET duke përdorur $.get()Metoda jQuery $.get() ofron një mënyrë të lehtë dhe të përshtatshme për të bërë një kërkesë të thjeshtë AJAX. Ai e bën kërkesën duke përdorur metodën HTTP GET (përdoret për të tërhequr URL-të si faqet dhe imazhet), në vend të metodës POST (e cila përdoret tradicionalisht për të paraqitur të dhënat e formularit).
Në formën e saj më të thjeshtë, mund të telefononi një metodë si kjo:
Ku url është URL-ja e burimit nga i cili pritet përgjigja. Zakonisht ky është një skript nga ana e serverit që kryen disa veprime dhe mund të kthejë disa të dhëna:
$.get("http://example.com/getForecast.php");
Edhe pse mund të kërkoni gjithashtu një dokument statik:
$.get ("http://example.com/mypage.html");
Kur kërkoni një URL, mund të dërgoni të dhëna me kërkesën. Ju mund të kaloni të dhëna në vargun e pyetjeve, ashtu si me një kërkesë normale GET:
$.get("http://example.com/getForecast.php?city=rome&date=20120318");
Mënyra e saktë për të bërë të njëjtën gjë është kalimi i objektit të të dhënave si parametër i dytë në metodën $.get(). Objekti i të dhënave duhet të përmbajë informacion në formën e çifteve të emrit të pronës/vlerës së pronës. Për shembull:
Var data = (qyteti: "roma", data: "20120318" ); $.get("http://example.com/getForecast.php", të dhëna);
Përndryshe, ju mund t'i kaloni të dhënat metodës $.get() si një varg:
Var data = "qytet=roma&datë=20120318"; $.get("http://example.com/getForecast.php", të dhëna);
Marrja e të dhënave nga serveriDeri më tani, ne kemi parë shembuj të përdorimit të $.get() vetëm për të dërguar kërkesa në server, duke injoruar çdo përgjigje që mund të gjenerojë skripti nga ana e serverit. Por në shumicën e rasteve, kodi juaj JavaScript do të presë një përgjigje nga një skript nga ana e serverit dhe do të përpunojë të dhënat e marra.
Një kërkesë AJAX është asinkrone, që do të thotë se funksionon në sfond ndërsa pjesa tjetër e kodit JavaScript vazhdon të ekzekutohet. Atëherë, si të merrni një përgjigje nga serveri kur kërkesa të përfundojë?
Duhet të shkruani një funksion të kthimit të thirrjes që do të ekzekutohet automatikisht kur kërkesa AJAX të përfundojë dhe serveri të dërgojë një përgjigje. Së paku, funksioni juaj duhet të pranojë të dhënat e kthyera nga serveri si argumentin e tij të parë:
Funksioni myCallback(returnedData) ( // Ne përpunojmë të dhënat e kthyera të Dhënat )
Pasi të krijohet funksioni i kthimit të thirrjes, mund ta kaloni atë si argumentin e tretë në metodën $.get():
Var data = (qyteti: "roma", data: "20120318" ); $.get("http://example.com/getForecast.php", të dhëna, myCallback);
Përcaktimi i llojit të të dhënave të përgjigjesNë mënyrë tipike, ana e serverit dërgon të dhëna në një nga disa formate të zakonshme, duke përfshirë XML, JSON, JavaScript ose HTML. Si parazgjedhje, jQuery përpiqet të përcaktojë formatin më të përshtatshëm dhe të analizojë të dhënat në përputhje me rrethanat. Por është më mirë të përcaktohet në mënyrë eksplicite formati.
Për të specifikuar formatin, duhet të kaloni argumentin e katërt në metodën $.get(). Ky argument mund të jetë një varg nga lista e mëposhtme:
- "xml"
- "json"
- "script"
- "html"
Për shembull, nëse e dini se skripti i serverit kthen të dhëna në formatin JSON, atëherë ju thërrisni metodën $.get() si kjo:
$.get("http://example.com/getForecast.php", të dhëna, myCallback, "json");
Shembull i përdorimit të metodës $.get().Ja një shembull i krijimit të një kërkese AJAX duke përdorur metodën $.get() dhe thjesht përpunimin e përgjigjes. Që shembulli të funksionojë, duhet të krijoni një skedar teksti të thjeshtë në server të quajtur getForecast.txt që përmban tekstin e mëposhtëm:
( "qyteti": "Vasyuki", "data": "18 mars 2012", "parashikimi": "Shpërthimi i ftohtë dhe baltë", "maxTemp": +1 )
Ky skedar do të simulojë një përgjigje në formatin JSON që mund të gjenerohet nga një skenar i parashikimit të motit në server.
Më pas krijojmë faqen showForecast.html në të njëjtën dosje si getForecast.txt:
Parashikimi i motit $(function() ( $("#getForecast").click(function() ( var data = ( qyteti: "Vasyuki", data: "20120318" ); $.get("getForecast.txt", të dhëna , sukses, "json"); )); funksioni sukses(forecastData) (var parashikim = forecastData.city + " parashikimi për " + forecastData.date; parashikimi += ": " + forecastData.forecast + ". Temperatura maksimale: " + forecastData.maxTemp + "C"; alarm(parashikim); ) )); Merrni parashikimin e motit
Hapni showForecast.html në shfletues dhe klikoni butonin "Merr parashikimin e motit". Në dritaren e mesazheve do të marrim parashikimin e motit nga serveri ynë.
Ja se si funksionon kodi:
Një shembull i thjeshtë me pak rreshta tregon se si funksionon një kërkesë AJAX duke përdorur metodën $.get().
