AJAX: çfarë është, ndikimi në SEO, avantazhet dhe disavantazhet e teknologjisë. Duke përdorur Ajax

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ë qenë rreth e rrotull për shumë kohë, dhe AJAX është një sintezë e këtyre teknologjive. AJAX lidhet më shpesh me termin Web 2.0 dhe shpallet si aplikacioni më i ri i Uebit.

Me AJAX, nuk ka nevojë të rifreskoni të gjithë faqen çdo herë, pasi përditësohet vetëm një pjesë specifike e saj. Është shumë më i përshtatshëm, pasi nuk duhet të prisni gjatë, dhe më ekonomik, pasi jo të gjithë kanë internet të pakufizuar. Vërtetë, në këtë rast, zhvilluesi duhet të sigurohet që përdoruesi është i vetëdijshëm për atë që po ndodh në faqe. Kjo mund të bëhet duke përdorur tregues të ngarkimit, mesazhe me tekst që tregojnë se të dhënat po shkëmbehen me serverin. Duhet të kuptohet gjithashtu 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ë abuzoni me përdorimin e teknologjisë dhe të përdorni metoda alternative të paraqitjes së informacionit në faqen e internetit.

Për të përmbledhur përfitimet e AJAX:

• Aftësia për të krijuar një ndërfaqe të përshtatshme në internet
• Ndërveprimi aktiv i përdoruesit
• Komoditeti i përdorimit

AJAX përdor dy metoda për të punuar me një faqe interneti: ndryshimin e faqes së internetit pa e ringarkuar atë dhe aksesin dinamik në server. E dyta mund të bëhet në disa mënyra, në veçanti, XMLHttpRequest, për të cilën do të flasim, dhe përdorimin e teknikës së kornizës së fshehur.

Shkëmbimi i të dhënave

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 shfletuesit të përdoruesit dhe serverit (Fig. 1). Duke përdorur XMLHttpRequest, ju mund të dërgoni një kërkesë në server, si dhe 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. Mënyra e parë është një kërkesë GET. Në këtë kërkesë, ju aksesoni një dokument në server duke i kaluar atij argumente nëpërmjet vetë URL-së. Në këtë rast, nga ana e klientit, do të jetë logjike të përdoret funksioni i escape 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ë ofrojë funksionalitetin e nevojshëm për të komunikuar në mënyrë të sigurt me serverin dhe të sigurojë metoda për shkëmbimin e të dhënave në ndonjë nga mënyrat e mësipërme. Ana e serverit duhet të përpunojë të dhënat hyrëse dhe në bazë të tyre të gjenerojë informacione të reja (për shembull, duke punuar me një bazë të dhënash) dhe t'ia kthejë 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 dhe të madhësisë së vogël, dhe 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 kjo lejon ju për të transferuar sasi të mëdha të dhënash.

Siç u tha tashmë, AJAX përdor transferimin asinkron të të dhënave. Kjo do të thotë që ndërsa transferimi i të dhënave është në proces, përdoruesi mund të kryejë veprime të tjera që i nevojiten. Në këtë kohë, ju duhet të njoftoni përdoruesin se një lloj shkëmbimi i të dhënave është në proces, përndryshe përdoruesi do të mendojë se diçka ka ndodhur gabim dhe mund të largohet nga faqja, ose të rithirrë funksionin, i cili, sipas mendimit të tij, është ". i ngrirë". Tregimi gjatë shkëmbimit të të dhënave 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ë rifreskimit 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 një përgjigje 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 merret një përgjigje XML, dokumenti XML që rezulton zakonisht përpunohet në anën e klientit dhe të dhënat konvertohen në (X) HTML. Kur merr një përgjigje JSON, klienti duhet vetëm të ekzekutojë kodin e marrë (funksioni eval i Javascript) për të marrë një objekt të plotë Javascript. Por këtu duhet të jeni të kujdesshëm dhe të merrni parasysh faktin se duke përdorur këtë teknologji, kodi me qëllim të keq mund të transmetohet, prandaj, përpara se të ekzekutoni kodin e marrë nga serveri, ai duhet të kontrollohet dhe përpunohet me kujdes. Ekziston një praktikë e tillë si një kërkesë "dummy", në të cilën nuk merret asnjë përgjigje nga serveri, por ndryshohen vetëm të dhënat në anën e serverit.

Ky objekt ka veti të ndryshme në shfletues të ndryshëm, por në përgjithësi është i njëjtë.

Metodat e objektit të kërkesës XMLHttp

Vini 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 titullin e specifikuar.

hapur ("lloj_kërkese", "url", "asinkron", "emri i përdoruesit", "fjalëkalimi")- inicializimi i një kërkese në server, një tregues i metodës së kërkesës. Lloji i kërkesës dhe URL-ja janë parametra të kërkuar. Argumenti i tretë është një vlerë boolean. Zakonisht ajo specifikohet gjithmonë si e vërtetë 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 çdo përdorues mund ta shikojë skriptin).

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 XMLHttpRequest

në gjendje të gatshme ndryshimështë një nga vetitë më të rëndësishme të objektit XMLHttpRequest. Me ndihmën e kësaj vetie vendoset një mbajtës, i cili 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- prezantimi i përgjigjes së serverit në formën e tekstit të thjeshtë (string).

përgjigjeXML- një objekt dokumenti në përputhje me DOM i marrë nga serveri.

statusi- gjendja e përgjigjes nga serveri.

statusTeksti- paraqitje tekstuale e gjendjes së 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ë i ngarkuar plotësisht, por mund të ndërveprojë me përdoruesin.
• 4 - Objekti është inicializuar plotësisht; mori një përgjigje nga serveri.

Bazohet në gjendjen e gatishmërisë së objektit që ju mund t'i jepni vizitorit informacion në lidhje me fazën në të cilën është procesi i shkëmbimit të të dhënave me serverin dhe, ndoshta, ta njoftoni për këtë vizualisht.

Krijimi i një objekti XMLHttpRequest

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, do të përdorni shprehjen e mëposhtme:

Var Kërkesë = ri XMLHttpRequest ();

Dhe për Internet Explorer, përdoret sa vijon:

Var Kërkesë = i ri ActiveXObject ("Microsoft.XMLHTTP");

Var Kërkesë = i ri ActiveXObject ("Msxml2.XMLHTTP");

Tani, për të arritur përputhshmërinë e ndër-shfletuesve, duhet të shtoni të gjitha funksionet në një:

Funksioni CreateRequest () (var Kërkesë = false; nëse (window.XMLHttpRequest) (// Shfletues të përputhshëm Gecko, Safari, Konqueror Request = XMLHttpRequest i ri ();) tjetër nëse (window.ActiveXObject) (// Provoni Internet Explorer (Kërkesë = i ri ActiveXObject ("Microsoft.XMLHTTP");) catch (CatchException) (Kërkesë = i ri ActiveXObject ("Msxml2.XMLHTTP");)) nëse (! Kërkesë) (lajmërim ("Nuk mund të krijohet XMLHttpRequest");) Kërkesë për kthim; )

Pas gjithë kësaj, ju mund ta krijoni këtë objekt dhe mos u shqetësoni për performancën në shfletuesit e njohur. Por ju mund të krijoni një objekt në vende të ndryshme. Nëse e krijoni globalisht, atëherë në një moment të caktuar kohor do të jetë e mundur vetëm një kërkesë për serverin. Është e mundur të krijohet një objekt sa herë që ka një kërkesë në server (kjo do ta zgjidhë pothuajse plotësisht problemin).

Kërkesa e serverit

Algoritmi për të kërkuar serverin duket si ky:

• Kontrollimi për ekzistencën e XMLHttpRequest.
• Inicializimi i lidhjes me serverin.
• Dërgimi i një kërkese në server.
• Përpunimi i të dhënave të marra.

Për të krijuar një kërkesë në server, ne do të krijojmë një funksion të vogël që do të kombinojë funksionalisht funksionet për kërkesat GET dhe POST.

/ * 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 një skedari r_args - argumentet e formës a = 1 & b = 2 & c = 3 ... r_handler - funksioni që trajton një përgjigje nga serveri * / funksioni SendRequest (r_method , r_path, r_args, r_handler) (// Krijo një kërkesë var Kërkesë = CreateRequest (); // Kontrollo përsëri ekzistencën e kërkesës nëse (! Kërkesë) (kthim; ) // Cakto një mbajtës të personalizuar Request.onreadystatechange = funksion () (// Nëse shkëmbimi i të dhënave është i plotë nëse (Request.readyState == 4) (// Transfero kontrollin te mbajtësi i përdoruesit r_handler (Kërkesë);)) // Kontrollo nëse kërkohet një kërkesë GET nëse (r_method.toLowerCase () == "get" && r_args.length> 0) r_path + = "?" + r_args; // Inicializoni lidhjen Request.open (r_method, r_path, true); if (r_method.toLowerCase () == "post") (// Nëse kjo është kërkesë POST // Vendosni Request.setRequestHeader ("Content-Type", "application / x-www-form-urlencoded; charset = utf -8"); // Dërgo m kërkesë Kërkesë.dërgoj (r_args); ) ndryshe (// Nëse kjo është një kërkesë GET // Dërgo një kërkesë null Kërkesë. dërgo (null);))

Është bërë shumë më e lehtë për të krijuar një kërkesë. 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 një kërkesë SendRequest ("GET", emri i skedarit, " ", Trajtues);)

Kështu ndodh ndërveprimi me serverin.

Trajtimi i përgjigjes

Në shembullin e mëparshëm, ne bëmë një funksion të kërkesës së serverit. Por në fakt është e pasigurt, pasi ne nuk e përpunojmë gjendjen e objektit dhe gjendjen e përgjigjes nga serveri.

Le të përditësojmë kodin 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 është i plotë nëse (Request.readyState == 4) (// Transferoni kontrollin te mbajtësi i përdoruesit r_handler (Kërkesë);) tjetër (// Njoftoni përdoruesin për ngarkimin)) ...

Siç e dini tashmë, objekti XMLHttpRequest ju lejon të dini statusin e përgjigjes nga serveri. Le ta shfrytëzojmë këtë mundësi.

Request.onreadystatechange = funksion () (// Nëse shkëmbimi i të dhënave është i plotë nëse (Request.readyState == 4) (if (Request.status == 200) (// Transfero kontrollin te mbajtësi i përdoruesit r_handler (Kërkesë);) tjetër (// Njoftoni përdoruesin për gabimin)) tjetër (// Njoftoni përdoruesin për shkarkimin)) ...

Opsionet e përgjigjes së serverit

Nga serveri mund të merren disa lloje të dhënash:

• Teksti i thjeshtë

Nëse merrni tekst të thjeshtë, atëherë mund ta dërgoni menjëherë në kontejner, domethënë në dalje. Kur merrni të dhëna si XML, duhet t'i përpunoni të dhënat duke përdorur funksionet DOM dhe të paraqisni rezultatin duke përdorur HTML.

Jsonështë shënimi i objektit Javascript. Mund të përdoret për të përfaqësuar një objekt si një varg (këtu është një analogji me një funksion serializimi). Kur merrni të dhëna JSON, duhet t'i ekzekutoni ato për të marrë një objekt Javascript të plotë dhe për të kryer operacionet e nevojshme në 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": "artikull JSON një", "lloji": "Nëntitulli 1"), ("emri": "artikull JSON dy", "lloji": " nëntitulli 2 ")]))

Pas marrjes së një kodi të tillë, ne kryejmë veprimin e mëposhtëm:

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 serverit

Kjo lloj pune nuk ndryshon nga ajo 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ë duke përshëndetur botën tonë të mrekullueshme:

Jehonë "Përshëndetje, Botë!";

Kur aksesohet ky skedar, klienti do të kthejë vargun Hello, World. Siç mund ta imagjinoni, kjo paraqet mundësitë më të gjera për ndërtimin e aplikacioneve. Duke kaluar argumente kur thirrni serverin duke përdorur XMLHttpRequest, mund të parametrizoni daljen, duke ofruar kështu funksionalitet të pasur për aplikacionin tuaj në ueb.

Përveç PHP, ju mund të përdorni çdo gjuhë tjetër programimi nga ana e serverit.

AJAX - Çfarë është ajo?

Kur mundësitë ekzistuese bëhen të pakta dhe nuk ka ku të përmirësohet ajo ekzistuese, atëherë ndodh një përparim teknologjik. Një zbulim i tillë është AJAX (JavaScript asinkron dhe XML) - një qasje për ndërtimin e ndërfaqeve të përdoruesit për aplikacionet në ueb, në të cilat një faqe ueb, pa ringarkim, ngarkon të dhënat që i nevojiten përdoruesit. AJAX është një nga komponentët e konceptit DHTML.

Çfarë na jep kjo teknologji? Aktualisht, zhvillimi i aplikacioneve WEB tenton të bëjë dallimin midis anës së klientit dhe anës së serverit, dhe kjo është arsyeja e përdorimit të gjerë të shablloneve si Smarty dhe XSLT. Tani projektet po bëhen më komplekse dhe ndërthurja e teknologjive të ndryshme po bëhet shumë e shtrenjtë për kohën e zhvilluesit. Kështu, për shembull, të gjitha stilet e formatimit kryhen në skedarët CSS ose XSL, të dhënat HTML ose XML ruhen në seksione të tjera, mbajtësit e serverëve në të tretën, bazat e të dhënave në të katërtin. Dhe nëse 5-6 vjet më parë pothuajse kudo mund të shihje gërshetim të gjithë kësaj në një skedar, tani ajo po bëhet gjithnjë e më e rrallë.

Kur zhvillohen projekte më komplekse, ekziston nevoja për strukturim dhe lexueshmëri të kodit. Ju nuk duhet të mbushni kodin e programuesit me kodin e projektuesit të faqosjes, dhe kodin e projektuesit të paraqitjes me modifikimet e projektuesit, e kështu me radhë.

Duhet të diferencohet puna. Kështu, për shembull, projektuesi do të bëjë punën e tij, projektuesi i faqosjes të tijën, programuesi të tijën, dhe askush nuk do të ndërhyjë me njëri-tjetrin. Si rezultat, çdo pjesëmarrës i projektit do të duhet vetëm të dijë të dhënat me të cilat do të duhet të punojë. Në këtë rast, produktiviteti i grupit dhe cilësia e projektit rriten ndjeshëm. Aktualisht, ky problem zgjidhet me sukses duke përdorur shabllone, por kjo gjithashtu krijon vështirësi të caktuara, pasi që, të themi, të lidhni Smarty, është e nevojshme të lidhni modulin e softuerit të përpunimit të shabllonit dhe ta lidhni atë qartë me strukturën e projektit. Dhe kjo nuk është gjithmonë e mundur dhe kërkon kosto të caktuara. Është pak më e lehtë kur përdorni paketat XML + XSL pasi ato ofrojnë më shumë opsione, por kjo është një alternativë, asgjë më shumë. Po sikur të shikoni drejt diçkaje rrënjësisht të re, e cila do t'ju mundësonte të kombinoni gjithçka më mirë, duke përdorur mundësitë e asaj që është? Mundohuni të imagjinoni JavaScript, i cili ka të gjitha aftësitë e PHP ose Perl, duke përfshirë grafika dhe bazat e të dhënave, i cili është shumë më i zgjerueshëm dhe i përdorshëm, dhe është gjithashtu ndër-platformë.

Pra, çfarë është saktësisht AJAX? Ajax u fol për herë të parë pas artikullit të shkurtit 2005 nga Jesse James Garrett "Një qasje e re ndaj aplikacioneve në ueb". Ajax nuk është një teknologji më vete. Kjo është një ide e bazuar në dy parime kryesore.

Përdorimi i DHTML për të ndryshuar në mënyrë dinamike përmbajtjen e faqes.

Përdorimi i XMLHttpRequest për të hyrë në server në fluturim.

Përdorimi i këtyre dy qasjeve ju lejon të krijoni ndërfaqe shumë më të përshtatshme për përdoruesit në WEB në ato faqe të sajteve ku kërkohet ndërveprimi aktiv i përdoruesit. Përdorimi i Ajax është bërë më i popullarizuar pasi Google filloi ta përdorë atë në mënyrë aktive në krijimin e faqeve të tyre, si Gmail, Google Maps dhe Google sugjeron. Krijimi i këtyre vendeve ka konfirmuar efektivitetin e kësaj qasjeje.

Pra, më në detaje: nëse merrni modelin klasik të një aplikacioni WEB:

Klienti, duke shtypur adresën e burimit me interes për të në shiritin e kërkimit, shkon te serveri dhe i bën një kërkesë. Serveri kryen llogaritjet në përputhje me kërkesën, hyn në bazën e të dhënave, e kështu me radhë, pas së cilës të dhënat e marra shkojnë te klienti dhe, nëse është e nevojshme, zëvendësohen në shabllone dhe përpunohen nga shfletuesi. Rezultati është faqja që ne shohim dhe të cilën 80% e popullsisë së vendit në WEB e quajnë internet. Ky është një model klasik që ka arritur të provojë veten dhe të fitojë një vend nderi në diell. Ky është modeli më i thjeshtë i ndërveprimit dhe, si pasojë, më i përhapuri. Megjithatë, ajo po bëhet gjithnjë e më e pamjaftueshme. Imagjinoni lojën on-line "Beteja e Detit", e cila luhet nga dy miq të thekur - një banor i Afrikës së Jugut dhe një banor i Japonisë. Si mund ta bëni lojën e tyre sa më të këndshme duke përdorur një model të tillë? Në çdo rast, të dhënat e anijeve të mbytura do të ruhen në server dhe për të kontrolluar nëse kundërshtari nuk i pëlqen, do të jetë e nevojshme të rifreskoni faqen çdo herë dhe të përditësoni të dhënat e vjetruara. "Por njerëzit shpikën caching" - thoni ju dhe do të keni absolutisht të drejtë, por kjo nuk e bën më të lehtë. Memoria e memories vetëm do të përshpejtojë kohën e ndërveprimit me serverin, por nuk do të eliminojë nevojën për të ringarkuar faqen. Përndryshe, mund të caktoni një kohë të caktuar të rifreskimit, por në këtë rast, faqja do të ringarkohet plotësisht.

Tani le të shohim modelin e ndërveprimit AJAX:

Sekuenca e veprimeve të klientit ruhet dhe ai, ka shumë të ngjarë, nuk do të kuptojë se çfarë do të ndodhë, dhe fjala AJAX do të lidhet vetëm me emrin e klubit të futbollit. Por gjërat duken ndryshe nga ana e serverit.

Kur kontaktoni serverin, krijohet një faqe që do t'i shfaqet përdoruesit dhe do t'i ofrohet atij të kryejë sekuencën e veprimeve për të cilat ai është i interesuar. Me një zgjedhje të vetëdijshme (edhe pse jo të nevojshme) të një klienti, kërkesa e tij do t'i referohet modulit AJAX, i cili do të kryejë të gjitha llogaritjet me interes për të dhe do të punojë me serverin si i tillë. Por cila është risia? Dallimi kryesor është se kjo metodë na lejon të aksesojmë në mënyrë dinamike serverin dhe të kryejmë veprimet me interes për ne. Për shembull, duhet të hyjmë në bazën e të dhënave dhe të marrim të dhënat që na interesojnë, të cilat më pas do t'i përdorim. Ne do t'i ruajmë të dhënat në një skedar XML që do të gjenerohet në mënyrë dinamike, kështu:

Krijo një objekt të ri JavaScript:

Var req = ActiveXObject i ri ("Microsoft.XMLHTTP"); (për IE) var req = new XMLHttpRequest (); (Për çdo gjë tjetër)

Pastaj shkruajmë një funksion duke përdorur këtë objekt

Var req; funksioni loadXMLDoc (url) (// dega për objektin vendas XMLHttpRequest if (window.XMLHttpRequest) (req = XMLHttpRequest i ri (); req.onreadystatechange = processReqChange; req.hap ("GET", url, e vërtetë); req.send ( null); // degë për versionin IE / Windows ActiveX) tjetër nëse (window.ActiveXObject) (req = ActiveXObject i ri ("Microsoft.XMLHTTP"); nëse (req) (req.onreadystatechange = processReqChange; req.hapur ("GET ", url, e vërtetë); kërko. dërgo ();)))

Në trupin e skedarit HTML, shkruani një skript që do të:

Emri i kontrollit të funksionit (hyrja, përgjigja) (nëse (përgjigja! = "") (// Mesazhi i modalitetit të përgjigjes = document.getElementById ("nameCheckFailed"); if (përgjigja == "1") (message.className = "gabim"; ) else (message.className = "i fshehur";)) else (// url i modalitetit të hyrjes = "http: //localhost/xml/checkUserName.php? q = \\ + hyrje; loadXMLDoc (url);))

Në skedarin localhost / xml / checkUserName.php, ne përpunojmë të dhënat e marra nga linja e komandës në këtë rast në variablin q. Dhe ne e ruajmë rezultatin në një strukturë XML, të cilën e ruajmë në të njëjtin skedar. Pra, ne mund të marrim dhe përpunojmë të dhënat e marra nga baza e të dhënave, ose çdo gjë tjetër që na nevojitet. Përveç kësaj, serveri do të përpunojë vetëm të dhënat që duhet të përditësojmë, dhe jo të gjithë faqen nëse ngarkohet përsëri.

Tani kthehemi te dy miqtë tanë - adhurues të luftimeve detare: duke pasur parasysh pamjen e kësaj risie, mund të bëjmë sa më poshtë: të vendosim një kontroll çdo tre sekonda të skedarit XML, ky kontroll nënkupton kontrollimin e bazës së të dhënave për një rekord të ri, që është, lëvizja e bërë nga kundërshtari. Nëse lëvizja është bërë, faqja fundos anijet pa ringarkuar, duke prishur kështu disponimin e pjesëmarrësve në betejat e ujit. Ky funksionalitet arrihet duke përdorur thjesht Javascript dhe fletë stilesh. Ky shembull është mjaft ilustrues, por larg të qenit i plotë, aplikimi i kësaj teknologjie është shumë më domethënës.

Megjithatë, jo gjithçka kaq e thjeshtë. Le të shohim tani tiparet negative.

Së pari, ne mund të transferojmë të dhëna vetëm duke përdorur metodën GET; prandaj, sasi të mëdha të dhënash do të duhet të lihen vetëm. Ky problem është ngritur tashmë më shumë se një herë në burime të ndryshme, por zotërinj, ka cookie që janë mjaft të pranueshme në rastet e transferimit të të dhënave të mëdha, të cilat mund të akomodojnë një kërkesë GET dhe Javascript, nga ana tjetër, ka funksione për të punuar me to.

Problemi i dytë është përputhshmëria e ndër-shfletuesve. Objekti XMLHttpRequest nuk është ende pjesë e ndonjë standardi (megjithëse diçka e ngjashme tashmë është propozuar në specifikimin e ngarkimit dhe ruajtjes së nivelit 3 të W3C DOM). Prandaj, ekzistojnë dy metoda të ndryshme për thirrjen e këtij objekti në kodin e skriptit. Në Internet Explorer, një objekt ActiveX thirret si kjo:

Var req = ActiveXObject i ri ("Microsoft.XMLHTTP");

Në Mozilla dhe Safari, kjo është më e lehtë (pasi është një objekt i ngulitur në JavaScript):

Var req = ri XMLHttpRequest ();

Të gjithë shfletuesit modernë e mbështesin këtë objekt dhe vetëm 1.8% e përdoruesve (sipas statistikave nga SpyLog) që përdorin versione shumë të vjetra të shfletuesve që nuk e mbështesin këtë objekt do të kenë probleme.

Dhe së fundi, siguria. Le të ndalemi në këtë në më shumë detaje. Problemi kryesor është se të gjitha të dhënat dhe kodi burimor i funksioneve JavaScript mund të shihen duke parë kodin burimor të faqes; në përputhje me rrethanat, një sulmues mund të gjurmojë logjikën e ekzekutimit të kërkesës dhe, në një grup të caktuar rrethanash, të ekzekutojë grupin. të komandave që i duhen. Kjo nuk luan një rol të veçantë kur kemi një krahasim të thjeshtë të të dhënave, por çfarë të bëjmë në situata më komplekse, për shembull, gjatë autorizimit dhe si, në këtë rast, të kalojmë fjalëkalimet. Siç u përmend më lart, Cookies vijnë në shpëtim. Të dhënat e nevojshme mund të dërgohen me ndihmën e tyre, si dhe të përpunohen. Le të marrim një shembull në të cilin një përdorues do të vërtetohet duke përdorur teknologjinë për të cilën bëhet fjalë.

Duke gjeneruar faqen, ne formojmë vlera unike, të cilat më pas i vendosim në variablat e serverit. Dhe në "Cookies" të shfletuesit, më pas me autorizimin, marrim emrin e përdoruesit dhe fjalëkalimin e tij, të cilat duhet t'i transferojmë në modulin e përpunimit në server.

Pasi përdoruesi të ketë futur të dhënat dhe të shtypë butonin Submit, fjalëkalimi i tij futet në Cookies dhe emri i përdoruesit transmetohet hapur - me një lidhje për shembull http://www.mubestajax.com/ajax.php?login=pupkin kur merr të dhëna, serveri para së gjithash verifikon të dhënat e marra. Meqenëse vlerat që kemi gjeneruar që nga fillimi i punës së serverit dhe më pas i kemi transferuar në variablat e serverit global dhe cookies duhet të përputhen, atëherë kur kontrolloni integritetin e të dhënave të transmetuara, nëse ka një mospërputhje, programi ndalon së punuari. Nëse gjithçka shkoi mirë, atëherë nxirren të gjitha të dhënat e nevojshme dhe kryhen llogaritjet dhe puna e nevojshme. Kjo metodë e mbrojtjes është mjaft e thjeshtë dhe efektive. Por për projekte të mëdha, nuk do të funksionojë.

Kur siguria vjen e para, është më mirë të përdorni zgjidhje më të sofistikuara dhe të besueshme. Por në shumicën e rasteve, këto masa paraprake do të jenë më se të mjaftueshme, pasi përdorimi i moduleve më komplekse përfshin përdorimin e teknologjive që nuk përfshihen gjithmonë në softuerin standard të serverëve modernë, tipari kryesor i të cilave është thjeshtësia. Kjo është arsyeja pse teknologjitë si MySQL dhe PHP janë bërë shumë të përhapura që nga ajo kohë ato ofrojnë lehtësi operimi me konsumin e tyre të ulët të burimeve dhe besueshmërinë e mjaftueshme. Dhe brenda kornizës së këtij softueri, zgjidhja e propozuar më sipër është më e përshtatshme.

Si përfundim, dua të them se AJAX, nga njëra anë, është një hap i madh në inxhinierinë WEB, por nga ana tjetër, është një fazë evolucioni e vonuar prej kohësh që hapi horizonte të reja në fushën e zhvillimit të softuerit. . Në të njëjtën kohë, kjo teknologji është ende mjaft "e lagësht", pasi përdorimi i saj për momentin është një përjashtim i këndshëm. Por jam i sigurt se të gjithë do të dëgjojnë për të më shumë se një herë.

Shumica e faqeve moderne të internetit përdorin një teknologji të quajtur AJAX për të bashkëvepruar me vizitorin shpejt dhe me efikasitet. AJAX është bërë një teknikë shumë e njohur për marrjen e të dhënave nga një server në sfond dhe rifreskimin dinamik të një faqeje.

Zhvillimi i kodit JavaScript për të zbatuar AJAX nga e para është një proces shumë i mundimshëm dhe i mundimshëm. Megjithatë, shumë biblioteka JavaScript, duke përfshirë jQuery, kanë zbatime të shkëlqyera të nivelit të lartë AJAX si një grup 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ë shqyrtojmë bazat e ndërtimit të kërkesave AJAX me jQuery. Temat e mëposhtme do të trajtohen:

• Çfarë është teknologjia AJAX? Si punon? Cilat janë avantazhet e tij?
• Si mund të bëj 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 mund ta personalizoj trajtimin AJAX të jQuery dhe të ndryshoj standardet?

Shënim: Tutorialët fokusohen në pjesën JavaScript nga ana e klientit. Por zhvillimi nga ana e serverit është gjithashtu mjaft i drejtpërdrejtë. Për më shumë informacion, duhet të studioni materialet në gjuhët e programimit nga ana e serverit, siç është PHP.

Çfarë është AJAX dhe si është i dobishëm?

AJAX është një teknikë e zhvillimit të aplikacioneve në internet në të cilën kodi JavaScript që ekzekutohet në shfletuesin e një vizitori komunikon me një server në internet në mënyrë asinkrone, domethënë në sfond. Dallimet nga aplikacionet e zakonshme të uebit janë si më poshtë:

• Uebfaqe e rregullt përmban lidhje ose forma që, kur klikohen ose dorëzohen, gjenerojnë 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 e shfaq më pas, duke zëvendësuar faqen origjinale. Kjo qasje kërkon kohë dhe ka një efekt të keq te vizitori, pasi duhet të presin 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ë kryhen me të dhënat e kthyera, mund të shtohet ose përditësohet një widget në faqe, mund t'i lëshohet 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, JavaScript (dhe vizitori) mund të vazhdojnë të ndërveprojnë me faqen ndërsa kërkesa është duke u përpunuar. Procesi fshihet nga vizitori i cili nuk ka nevojë të largohet nga faqja që po shikon në një moment të caktuar. Kjo qasje i bën faqet AJAX shumë të këndshme për të punuar.

Zemra e AJAX është objekti JavaScript XMLHttpRequest. Ai siguron një sërë metodash si open (), send (), dhe onreadystatechange () që 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 i lodhshëm. Për fat të mirë, jQuery ju jep disa metoda AJAX të thjeshta për t'u përdorur që abstragojnë shumë operacione të nivelit të ulët.

Për ata më kureshtarët, fjala AJAX është një shkurtim për shkronjat e para të një shprehjeje në anglisht " A sinkron J avaScript A nd X ML "(JavaScript asinkron dhe XML.) Megjithatë, termi mund të jetë mashtrues - kërkesa nuk duhet të jetë asinkrone dhe nuk është e nevojshme të përdoret XML për të paraqitur të dhënat.

Bërja e një kërkese GET me $ .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ë marrë URL 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 një përgjigje. Ky është zakonisht 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 është gjithashtu e mundur të kërkoni 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ë një varg pyetjesh, ashtu si një kërkesë normale GET:

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

Do të ishte e saktë të bënim të njëjtën gjë duke kaluar një objekt të dhënash si parametër të 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 & data = 20120318"; $ .get ("http://example.com/getForecast.php", të dhëna);

Ne marrim të dhëna nga serveri

Deri 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ë një skrip 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 ekzekutohet në sfond ndërsa pjesa tjetër e JavaScript vazhdon të ekzekutohet. Atëherë, si të merrni një përgjigje nga serveri kur kërkesa të përfundojë?

Ju duhet të shkruani funksioni i kthimit i cili 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 (të dhëna të kthyera) (// Kryeni përpunimin e të dhënave të kthyera)

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ërgjigjes

Në mënyrë tipike, ana e serverit transferon 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, 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 po kthen të dhëna në formatin JSON, atëherë thirrni metodën $ .get () si më poshtë:

$ .get ("http://example.com/getForecast.php", të dhëna, myCallback, "json");

Një 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 trajtimin e thjeshtë të përgjigjes. Që shembulli të funksionojë, duhet të krijoni një skedar teksti të thjeshtë në server me emrin getForecast.txt që përmban tekstin e mëposhtëm:

("qyteti": "Vasyuki", "data": "18 mars 2012", "parashikimi": "Ftohtë e ftohtë dhe baltë", "maxTemp": +1)

Ky skedar do të simulojë një përgjigje JSON që mund të jetë krijuar nga një skenar i parashikimit të motit në server.

Më pas krijojmë faqen showForecast.html në të njëjtën dosje si getForecast.txt:

Merrni parashikimin e motit

Hapni showForecast.html në një shfletues dhe klikoni butonin Merr parashikimin e motit. Në dritaren e mesazheve, ne do të marrim parashikimin e motit nga serveri ynë.

Kështu funksionon kodi i dhënë:

1. showForecast.html përmban një element butoni Merr Parashikimin e Motit me ID-në getForecast.
2. JavaScript në krye të faqes ekzekutohet sapo faqja të ngarkohet dhe DOM të jetë gati.
3. Kodi JavaScript lidh fillimisht një mbajtës të ngjarjeve të klikimeve me butonin #getPorecast. Ky mbajtës bën një kërkesë AJAX GET për getForecast.txt, duke kaluar emrin e qytetit dhe datën e parashikimit. Ai gjithashtu përcakton një funksion të kthimit të suksesshëm () që do të ekzekutohet kur kërkesa të përfundojë. Formati i të dhënave të kthyera nga serveri përcaktohet si JSON.
4. Skedari getForecast.txt kthen të dhënat e parashikimit në formatin JSON në shfletues.
5. Funksioni i suksesit () quhet. jQuery analizon të dhënat JSON të marra nga getForecast.txt, i konverton ato në një objekt JavaScript dhe ia kalon funksionit.
6. Funksioni kthen një objekt të dhënash forecastData dhe shfaq një mesazh që përmban disa veçori të objektit, duke përfshirë emrin e qytetit, parashikimin dhe temperaturën.

Një shembull i thjeshtë me pak rreshta tregon se si funksionon një kërkesë AJAX duke përdorur metodën $ .get ().

Pesë vjet më parë, ju ishit një rosë e shëmtuar (askush nuk foli me të) nëse nuk e dinit XML. Tetëmbëdhjetë muaj më parë, Ruby ishte në qendër të vëmendjes dhe programuesit që nuk dinin se çfarë po ndodhte me të nuk u ftuan në një rezervuar uji të ftohtë. Sot, nëse doni të shkoni në partinë e teknologjisë, ju duhet Ajax.

Megjithatë, Ajax është shumë larg jo thjesht një trill, por një qasje e fuqishme për ndërtimin e faqeve të internetit që nuk është aq e vështirë për t'u mësuar sa një gjuhë krejtësisht e re.

Para se të zhytem në detajet e Ajax-it, le të marrim disa minuta për të kuptuar se çfarë bën Ajax. Kur shkruani një aplikacion këto ditë, keni dy opsione kryesore:

• Aplikacione Desktop
• aplikacionet në ueb

Të dyja opsionet janë të njohura; Aplikacionet e desktopit zakonisht ofrohen në CD (ose ndonjëherë shkarkohen nga një faqe interneti) dhe instalohen tërësisht në kompjuterin tuaj. Ata mund të përdorin internetin për të shkarkuar përditësime, por kodi që ekzekuton këto aplikacione është në desktopin tuaj. Aplikacionet në ueb (jo çuditërisht) funksionojnë diku në një server në ueb dhe ju i aksesoni ato aplikacione përmes shfletuesit tuaj të internetit.

Më e rëndësishmja, vendi ku ekzekutohet kodi për këto aplikacione përcakton se si sillen dhe si ndërveproni me ta. Aplikacionet e desktopit janë zakonisht mjaft të shpejta (ato funksionojnë në kompjuterin tuaj; ju nuk prisni një lidhje interneti), kanë ndërfaqe të shkëlqyera përdoruesi (zakonisht ndërveprojnë me sistemin tuaj operativ) dhe janë tepër dinamikë. Mund të klikoni, të futni tekst, të përdorni menytë me zbritje dhe ato që shfaqen, të lundroni nëpër dritare praktikisht pa vonesë.

Nga ana tjetër, aplikacionet në ueb janë zakonisht më të fundit dhe ofrojnë aftësi që nuk do t'i kishit kurrë në kompjuterin tuaj (mendoni Amazon.com dhe eBay). Megjithatë, me fuqinë e Uebit vjen edhe pritja – duke pritur për një përgjigje nga serveri, duke pritur që një ekran të rifreskohet, duke pritur për një përgjigje ndaj një kërkese dhe një faqe e re duke u krijuar.

Është e qartë se ky është një thjeshtim, por ju merrni një ide të përgjithshme. Siç mund të dyshoni tashmë, Ajax përpiqet të kapërcejë hendekun midis funksionalitetit dhe interaktivitetit në një aplikacion desktop dhe një aplikacion uebi gjithmonë të përditësuar. Ju mund të përdorni ndërfaqe dinamike të përdoruesit të ngjashme me ato që gjenden në një aplikacion desktopi, por të disponueshme në një aplikacion ueb.

Pra, çfarë po presim? Le të fillojmë duke parë Ajax dhe se si mund t'i ktheni ndërfaqet tuaja të pakëndshme të Uebit në aplikacione të përgjegjshme Ajax.

Teknologji e vjetër, truke të reja

Për sa i përket Ajax-it, realiteti është se ai përfshin shumë teknologji - për ta zotëruar atë, duhet të thelloheni në disa teknologji të ndryshme (kjo është arsyeja pse unë do t'i ndaj artikujt e parë të kësaj serie në pjesë të pavarura). Lajmi i mirë është se ju tashmë mund të dini mjaftueshëm për shumë prej këtyre teknologjive - shumica e këtyre teknologjive individuale janë të lehta për t'u mësuar (padyshim jo aq e vështirë sa një gjuhë programimi e plotë si Java ose Ruby).

Përkufizimi i Ajax

Nga rruga, Ajax qëndron për JavaScript asinkron dhe XML (dhe DHTML, etj.). Fraza u krijua nga Jesse James Garrett nga Adaptive Path (shih pjesën) dhe, sipas Jesse, jo ishte menduar të ishte një akronim.

Teknologjitë kryesore të përfshira në aplikacionet Ajax janë:

• HTML përdoret për të krijuar formularë në ueb dhe për të specifikuar fushat për përdorim në aplikacionin tuaj.
• Kodi JavaScript është kodi kryesor që ekzekuton aplikacionet Ajax dhe siguron ndërveprim me aplikacionet e serverit.
• DHTML, ose HTML dinamike, ju ndihmon të përditësoni në mënyrë dinamike format. Ju do të përdorni div, span dhe elementë të tjerë dinamikë HTML për të shënuar HTML-në tuaj.
• DOM, modeli i objektit të dokumentit, do të përdoret (nëpërmjet JavaScript) për të manipuluar strukturën e HTML-së tuaj dhe (në disa raste) XML-në e marrë nga serveri.

Le t'i hedhim një vështrim të gjithë kësaj veçmas dhe të kuptojmë se çfarë bën secila prej këtyre teknologjive. Unë do të eksploroj secilën prej tyre në artikujt vijues; tani thjesht hidhini një vështrim më të afërt këtyre komponentëve dhe teknologjive. Sa më shumë të dini rreth tyre, aq më e lehtë është të kaloni nga njohuritë e rastësishme në zotërimin e secilës prej tyre (dhe të përmirësoni vërtet procesin e zhvillimit të aplikacioneve në ueb).

Objekti XMLHttpKërkesë

Objekti i parë për të cilin dëshironi të dini është ndoshta më i ri për ju; quhet XMLHttpRequest. Është një objekt JavaScript dhe është aq i lehtë për t'u krijuar siç tregohet në.

Listimi 1. Krijimi i një objekti të ri XMLHttpRequest

Do të hyj në më shumë detaje rreth këtij objekti në artikullin tjetër, por tani për tani, kuptoni se ky është objekti që kontrollon të gjithë ndërveprimin tuaj me serverin. Para se të shkoni më tej, ndaloni dhe mendoni për këtë - kjo është teknologjia JavaScript në objektin XMLHttpRequest që po flet me serverin. Ky nuk është rrjedha normale e një aplikacioni dhe këtu qëndron pothuajse e gjithë magjia e Ajax-it.

Në aplikacionet normale të internetit, përdoruesit plotësojnë fushat e formularit dhe klikojnë një buton Paraqisni(konfirmo). I gjithë formulari dërgohet më pas në server, serveri përpunon skriptin (zakonisht PHP ose Java, ndoshta një proces CGI ose diçka tjetër), dhe më pas dërgon të gjithë faqen e re. Kjo faqe mund të jetë një faqe HTML me një formë të re me disa të dhëna të plotësuara, ose një faqe konfirmimi, ose ndoshta një faqe me disa zgjedhje në varësi të të dhënave të futura në formularin origjinal. Natyrisht, derisa skripti ose programi në server të përpunohet dhe të kthehet një formë e re, përdoruesit duhet të presin. Ekranet e tyre do të pastrohen dhe do të rivizatohen ndërsa të dhënat e reja mbërrijnë nga serveri. Këtu vjen ndërveprimi i ulët - përdoruesit nuk marrin reagime të menjëhershme dhe definitivisht nuk ndihen si me aplikacionet e desktopit.

Ajax në thelb vendos teknologjinë JavaScript dhe objektin XMLHttpRequest ndërmjet formën dhe serverin tuaj të internetit. Kur përdoruesit plotësojnë formularët, të dhënat dërgohen në një lloj kodi JavaScript, jo drejtpërdrejt në server. Në vend të kësaj, kodi JavaScript mbledh të dhënat e formularit dhe ia paraqet kërkesën serverit. Ndërsa kjo po ndodh, formulari në ekranin e përdoruesit nuk dridhet, pulsohet, zhduket ose bllokohet. Me fjalë të tjera, kodi JavaScript e kalon kërkesën në sfond; përdoruesi as që vëren se ka një kërkesë për serverin. Për më tepër, kërkesa dërgohet në mënyrë asinkrone, që do të thotë se kodi juaj JavaScript (dhe përdoruesi) nuk është duke pritur për një përgjigje të serverit. Kjo do të thotë, përdoruesit mund të vazhdojnë të futin të dhëna, të lëvizin nëpër faqe dhe të përdorin aplikacionin.

Serveri më pas i kthen të dhënat në kodin tuaj JavaScript (ende në formën tuaj të internetit), i cili vendos se çfarë të bëjë me të dhënat. Mund të përditësojë fushat e formularit menjëherë, duke e bërë aplikacionin tuaj të menjëhershëm - përdoruesit marrin të dhëna të reja pa dorëzuar ose përditësuar formularët e tyre. Kodi JavaScript madje mund të marrë të dhëna, të kryejë disa llogaritje dhe të kalojë një kërkesë tjetër, të gjitha pa ndërhyrjen e përdoruesit! Kjo është fuqia e XMLHttpRequest. Ai mund të komunikojë me serverin sipas dëshirës, ​​dhe përdoruesi as nuk e di se çfarë po ndodh në të vërtetë. Si rezultat, marrim dinamizmin, ndjeshmërinë, interaktivitetin e lartë të aplikacionit desktop së bashku me të gjitha mundësitë e internetit.

Shtimi i kodit JavaScript

Pasi të kuptoni XMLHttpRequest, JavaScript e mbetur bëhet një punë e përditshme. Në fakt, ju do të përdorni JavaScript për një numër të vogël detyrash themelore:

Për të përmbushur dy detyrat e para, duhet të jeni shumë të njohur me metodën getElementById () të ofruar në.

Listimi 2. Mbledhja dhe vendosja e vlerave të fushës duke përdorur kodin JavaScript

// Merr vlerën e fushës "telefon" dhe shkruaje atë në variablin e telefonit var phone = document.getElementById ("telefon").Vlera; // Vendosni vlerat në formular duke përdorur grupin e përgjigjes document.getElementById ("porosi"). Vlera = përgjigje; document.getElementById ("adresa") vlera = përgjigje;

Nuk ka asgjë të veçantë këtu, gjë që është e mrekullueshme! Ju duhet të filloni të kuptoni se nuk ka asgjë tepër të komplikuar në të gjithë këtë. Pasi të ndiheni rehat me XMLHttpRequest, pjesa tjetër e aplikacionit tuaj Ajax do të jetë JavaScript e thjeshtë si ajo në, e përzier me HTML pak më të zgjuar. Plus, ka pak punë DOM herë pas here ... Pra, le t'i hedhim një sy kësaj.

Përfundimi me DOM

E fundit por jo më pak e rëndësishme është DOM, Modeli i Objektit të Dokumentit. Për disa prej jush, thashethemet rreth DOM-it mund të jenë pak frikësuese - nuk përdoret shpesh nga dizajnerët e HTML-së dhe madje paksa e pazakontë për koduesit JavaScript (nëse nuk trajtoni vërtet ndonjë detyrë programimi të nivelit të lartë). Ju mund të gjeni përdorim të gjerë të DOM-it në programet me peshë të rëndë të shkruar në Java dhe C / C ++; në fakt, kjo i ka fituar DOM-it një reputacion për të qenë i vështirë dhe i vështirë për t'u mësuar.

Për fat të mirë, përdorimi i DOM në teknologjinë JavaScript është i lehtë dhe kryesisht intuitiv. Tani për tani, ndoshta duhet t'ju tregoj se si të përdorni DOM-in, ose të paktën t'ju jap disa shembuj kodesh, por edhe kjo do t'ju çonte në rrugë të gabuar. Çështja është se ju mund të futeni shumë në Ajax pa pasur nevojë të përzieni në DOM këtu, dhe kjo është pikërisht mënyra se si dua t'ju tregoj. Do të kthehem te DOM në artikullin tjetër, por tani për tani, vetëm dije se është diku këtu. Ndërsa filloni të kaloni XML përpara dhe me radhë midis kodit tuaj JavaScript dhe ndryshimeve aktuale në formën HTML, do të zhyteni më thellë në DOM. Ndërkohë, ju mund të punoni në mënyrë efektive me Ajax pa DOM, kështu që le ta lëmë mënjanë për momentin.

Marrja e objektit të kërkesës

Të armatosur me këtë pasqyrë, ju jeni gati të hidhni një vështrim më të afërt. Meqenëse XMLHttpRequest është qendror për aplikacionet e Ajax (dhe ndoshta i ri për shumë prej jush), do të filloj me të. Siç e patë, krijimi i këtij objekti dhe përdorimi i tij duhet të jetë i lehtë, apo jo? Prit një minutë.

I mbani mend ato luftëra të tmerrshme të shfletuesve disa vite më parë dhe se si asgjë nuk funksionoi njësoj nëpër shfletues? Besoni apo jo, ato luftëra vazhdojnë edhe sot e kësaj dite, edhe pse në një shkallë shumë më të vogël. Dhe, habi: XMLHttpRequest është një nga viktimat e këtyre luftërave. Prandaj, duhet të ndërmerrni disa hapa të ndryshëm për të funksionuar XMLHttpRequest. Unë do t'ju tregoj se si ta bëni këtë hap pas hapi.

Puna me shfletuesit Microsoft

Microsoft Internet Explorer përdor analizuesin MSXML për të përpunuar XML (shih seksionin për lidhje me më shumë informacion mbi MSXML). Prandaj, kur shkruani aplikacione Ajax që duhet të ekzekutohen në Internet Explorer, duhet të krijoni objektin në një mënyrë të veçantë.

Megjithatë, nuk është aq e lehtë. Në fakt ekzistojnë dy versione të ndryshme të MSXML në përdorim. Versioni MSXML varet nga versioni i teknologjisë JavaScript të instaluar në Internet Explorer, kështu që ju duhet të shkruani kodin që funksionon për të dy versionet. Hidhni një sy se cili ofron kodin për krijimin e XMLHttpRequest në shfletuesit e Microsoft.

Listimi 3. Krijimi i një objekti XMLHttpRequest në shfletuesit Microsoft

var xmlHttp = false; provo (xmlHttp = ActiveXObject i ri ("Msxml2.XMLHTTP");) kap (e) (provo (xmlHttp = ActiveXObject i ri ("Microsoft.XMLHTTP");) kap (e2) (xmlHttp = false;))

E gjithë kjo mund të mos ketë ende kuptim, por kjo është në rregull. Ju do të gërmoni më thellë në programimin JavaScript, trajtimin e gabimeve, kompilimin e kushtëzuar dhe më shumë përpara fundit të këtij artikulli. Ndërkohë, duhet të shkruani dy rreshta kryesore në kokën tuaj:

xmlHttp = i ri ActiveXObject ("Msxml2.XMLHTTP");

xmlHttp = i ri ActiveXObject ("Microsoft.XMLHTTP"); ...

Me pak fjalë, ky kod përpiqet të krijojë një objekt duke përdorur një version të MSXML; nëse kjo dështon, krijohet një objekt për versionin e dytë. E këndshme, a? Nëse gjithçka tjetër dështon, ndryshorja xmlHttp vendoset në false për t'i treguar kodit tuaj se diçka nuk është në rregull. Në këtë rast, mund të jeni duke punuar me një shfletues jo-Microsoft dhe duhet të përdorni kode të ndryshme për të përfunduar punën.

Puna me shfletues Mozilla dhe jo-Microsoft

Nëse Internet Explorer nuk është shfletuesi juaj, ose jeni duke shkruar kod për shfletues që nuk janë të Microsoft, ju nevojitet kod tjetër. Në fakt, kjo është vija e thjeshtë që keni parë në:

var xmlHttp = objekt i ri XMLHttpRequest; ...

Kjo linjë shumë më e thjeshtë krijon një objekt XMLHttpRequest në Mozilla, Firefox, Safari, Opera dhe në një masë të madhe çdo shfletues jo-Microsoft që mbështet Ajax në çdo formë apo formë.

Një shoqatë

Ne duam të mbështesim të gjitha shfletuesit. Kush dëshiron të shkruajë një aplikacion që funksionon vetëm në Internet Explorer, ose një aplikacion që funksionon vetëm në të gjithë shfletuesit e tjerë? Edhe më keq, a doni ta shkruani aplikacionin tuaj dy herë? Sigurisht që jo! Pra, le të kombinojmë mbështetjen për Internet Explorer dhe për pjesën tjetër të shfletuesve. Këtu është kodi për ta bërë këtë.

Listimi 4. Krijimi i një objekti XMLHttpRequest për të gjithë shfletuesit

/ * Krijoni një objekt të ri XMLHttpRequest për të komunikuar me serverin në internet * / var xmlHttp = false; / * @ cc_on @ * / / * @ nëse (@_jscript_version> = 5) provo (xmlHttp = i ri ActiveXObject ("Msxml2.XMLHTTP");) kap (e) (provo (xmlHttp = i ri ActiveXObject ("Microsoft.XMLHTTP" );) kap (e2) (xmlHttp = false;)) @end @ * / nëse (! xmlHttp && typeof XMLHttpRequest! = "e pacaktuar") (xmlHttp = XMLHttpKërkesë e re ();)

Tani për tani, injoroni komentet dhe etiketat e paqarta si @cc_on; këto janë komanda të veçanta të përpiluesit JavaScript që do t'i shikojmë në detaje në artikullin tim të ardhshëm, i cili do të fokusohet plotësisht në XMLHttpRequest. Thelbi i këtij kodi mund të ndahet në tre hapa:

1. Krijoni një ndryshore xmlHttp për t'iu referuar objektit XMLHttpRequest që do të krijoni.
2. Në bllokun e provoni, krijoni një objekt në shfletuesit e Microsoft:
   • Në bllokun provo, krijoni një objekt duke përdorur objektin Msxml2.XMLHTTP.
   • Nëse kjo dështon, në bllokun e provoni, krijoni objektin duke përdorur objektin Microsoft.XMLHTTP.
3. Nëse xmlHttp nuk është ende i instaluar, krijoni një objekt për pjesën tjetër të shfletuesve.

Në fund të këtij procesi, xmlHttp duhet t'i referohet një objekti të vlefshëm XMLHttpRequest, pavarësisht nga shfletuesi i përdorur nga përdoruesi.

Disa fjalë për mbrojtjen

Po për mbrojtjen? Shfletuesit modernë u ofrojnë përdoruesve mundësinë për të përmirësuar sigurinë, për të çaktivizuar teknologjinë JavaScript dhe për të mos lejuar shumë cilësime në shfletuesit e tyre. Në këto situata, kodi juaj ndoshta nuk do të funksionojë në asnjë rrethanë. Për këto situata, ju duhet t'i zgjidhni problemet në mënyrë elegante - ka të paktën një artikull për këtë, dhe unë do ta shkruaj një më vonë (kjo ndoshta do të jetë një seri e gjatë, por mos u shqetësoni - do ta zotëroni para fundit të këtij seri artikujsh). Ndërkohë, ju po shkruani një kod të fortë, por jo të përsosur që është i shkëlqyeshëm për të mësuar Ajax. Më vonë do të ktheheni te kodi me cilësi më të lartë.

Kërkesë / përgjigje në botën e Ajax

Pra, ju tashmë jeni njohur me Ajax dhe keni një kuptim bazë të objektit XMLHttpRequest dhe si ta krijoni atë. Nëse lexoni me kujdes, madje do të kuptoni se është teknologjia JavaScript ajo që komunikon me çdo aplikacion Web në server, jo formulari juaj HTML, të cilin e keni dorëzuar drejtpërdrejt.

Çfarë na ka munguar? Si të përdorni në të vërtetë XMLHttpRequest. Meqenëse ky është kod kritik, do të përdorni disa forma çdo aplikacioni juaj Ajax, le të hedhim një vështrim të shpejtë se si duket modeli bazë i kërkesës/përgjigjes në Ajax.

Ekzekutimi i një kërkese

Ju keni objektin tuaj të ri të shkëlqyer XMLHttpRequest; le ta vëmë në lëvizje. Së pari, na duhet një metodë JavaScript që faqja juaj e internetit mund ta thërrasë (për shembull, kur një përdorues fut tekst ose zgjedh një opsion nga një meny). Pastaj, duhet të ndiqni të njëjtin model bazë në pothuajse të gjitha aplikacionet tuaja Ajax:

1. Merrni disa të dhëna nga një formular ueb.
2. Krijo një URL për t'u lidhur.
3. Hapni një lidhje me serverin.
4. Vendosni një funksion për serverin që do të ekzekutohet pas përgjigjes së tij.
5. Paraqisni kërkesën.

Listimi 6. Përpunimi i përgjigjes nga serveri

funksioni updatePage () (nëse (xmlHttp.readyState == 4) (var përgjigje = xmlHttp.responseText; document.getElementById ("zipCode"). vlera = përgjigje;))

Përsëri, kodi nuk është i vështirë apo kompleks. Ai pret që serveri ta thërrasë atë me gjendjen e dëshiruar të gatishmërisë dhe më pas përdor vlerën që serveri kthen (në këtë rast kodin ZIP për qytetin dhe shtetin e futur nga përdoruesi) për të vendosur një fushë tjetër formulari. Si rezultat, fusha zipCode shfaqet papritur me kodin ZIP, por përdoruesi nuk e klikove kurrë butonin! Kjo është sjellja e aplikacionit desktop për të cilin fola më herët. Efikasitet, ndjesi dinamizmi etj., dhe të gjitha me pak kod Ajax.

Lexuesit vëzhgues ndoshta do të vënë re se fusha zipCode është një fushë e rregullt teksti. Pasi serveri të kthejë kodin ZIP dhe të vendosë këtë fushë me metodën updatePage () në kodin ZIP të qytetit / shtetit, përdoruesit mund anashkaloni këtë vlerë. Kjo është e qëllimshme për dy arsye: për ta mbajtur këtë shembull të thjeshtë dhe për t'ju treguar se ndonjëherë dëshironi që përdoruesit të jenë në gjendje të anashkalojnë vlerat e kthyera nga serveri. Mbani mend të dyja pikat; ato janë të rëndësishme në dizajnimin e mirë të ndërfaqes së përdoruesit.

Përgjimi në Format e Uebit

Çfarë na ka mbetur? Në fakt, jo shumë. Ju keni një metodë JavaScript që mbledh informacionin e futur nga përdoruesi në një formular, ia kalon atë serverit, ofron një metodë tjetër JavaScript për të trajtuar përgjigjen dhe madje vendos një vlerë të fushës kur ajo përgjigje të arrijë. Gjithçka që mbetet në të vërtetë është për të thirrur kjo metodë e parë dhe ekzekutoni procesin e plotë. Padyshim që mund të shtoni një buton në formën tuaj HTML, por është i mirë i vitit 2001, apo jo? Le të përfitojmë nga teknologjia JavaScript, siç tregohet në.

Listimi 7. Fillimi i procesit Ajax

Qyteti: onChange = "callServer ();" />

Shteti: onChange = "callServer ();" />

Kodi Postal:

Nëse kjo duket si një pjesë tjetër rutinë, deri diku, kod - keni të drejtë, është! Kur përdoruesi fut një vlerë të re për ndonjë nga fushat e qytetit ose të shtetit, metoda callServer () aktivizohet dhe funksioni Ajax fillon. Mendoni se po filloni të kuptoni thelbin e gjërave? Mirë!

Së fundi

Në këtë pikë, mund të mos jeni gati të shkoni dhe të shkruani aplikacionin tuaj të parë Ajax, të paktën jo derisa të keni eksploruar seksionin. Sidoqoftë, tashmë mund të filloni të kuptoni idenë bazë se si funksionojnë aplikacione të tilla dhe çfarë është një objekt XMLHttpRequest. Në artikujt e ardhshëm, do të mësoni rreth këtij objekti, si të kontrolloni ndërveprimet JavaScript-në-server dhe si të punoni me format HTML dhe madje të kuptoni DOM-in.

Ndërkohë, merrni pak kohë për të menduar se sa të fuqishëm mund të jenë aplikacionet e Ajax. Imagjinoni një formë ueb që përgjigjet jo vetëm kur klikoni një buton, por edhe kur futni të dhëna në një fushë, kur zgjidhni një opsion nga një listë opsionesh dhe madje edhe kur lëvizni kursorin rreth ekranit. Mendoni se çfarë do të thotë në të vërtetë fjala asinkron... Mendoni për ekzekutimin e kodit JavaScript dhe duke mos pritur derisa serveri të kthejë përgjigjet ndaj kërkesave të tij. Çfarë problemesh mund të përballeni? Cilat janë gjërat me të cilat duhet pasur kujdes? Dhe si do të ndryshojë dizajni i formularëve tuaj me këtë qasje të re programuese?

Shpenzimi i ca kohësh në këto pika do t'ju japë më shumë vlerë sesa thjesht të merrni një kod që mund ta kopjoni dhe ngjitni në aplikacionin tuaj pa e kuptuar vërtet atë. Në artikullin vijues, do t'i vini në praktikë këto ide; Unë do të jap detaje mbi kodin që ju nevojitet për të funksionuar aplikacione të ngjashme. Deri atëherë, shijoni fuqinë e Ajax-it.

Burimet

Mësoni të

• Artikull origjinal.
• Adaptive Path është një nga kompanitë lider në fushën e dizajnit të ndërfaqes së përdoruesit. Ju mund të merrni shumë informacione mbi Ajax duke parë nga afër faqet e tyre. (zhvilluesiWorks, tetor 2005) demonstron pesë mënyra për të serializuar të dhënat në aplikacionet Ajax. (O "Reilly Media, Inc., Shkurt 2006) merr njohuritë e theksuara në këtë artikull dhe në të gjithë serinë dhe i sjell ato (dhe më shumë) tek ju në një format inovativ dhe më të avancuar Head-Up.
• JavaScript: Udhëzuesi i plotë Edicioni i 4-të (O "Reilly Media, Inc., Nëntor 2001) është një burim i shkëlqyer për JavaScript dhe faqet dinamike të internetit.

Diskutoni

• Ajax.NET Professional është një blog i shkëlqyeshëm për gjithçka që lidhet me Ajax.
• Përfshihuni në komunitetin e developerWorks duke marrë pjesë në.

Jeta jonë është e paqëndrueshme. Çdo gjë në këtë botë evoluon dhe ndryshon. Përfshirë realitetin virtual. Dhe një nga fjalët me të cilat lidhen këto ndryshime është AJAX. Jo vetëm programuesit e uebit, por edhe përdoruesit e zakonshëm kanë dëgjuar tashmë për AJAX. Çfarë fshihet në të vërtetë pas këtij akronimi magjik? Si mund ta përdor këtë në faqen time të internetit? Unë do të përpiqem t'u përgjigjem këtyre pyetjeve në këtë artikull.

Kam dëgjuar për herë të parë për AJAX këtë pranverë. Menjëherë u interesova për këtë teknologji dhe, siç duhej të ishte në raste të tilla, shkova në kërkim të artikujve që mund t'i përgjigjeshin pyetjeve të mia: "Çfarë është kjo? Si funksionon? Dhe cilat janë avantazhet? Çfarë duhet të jetë instaluar shtesë në server / klient për të punuar me AJAX? Si mund ta përdorni atë në faqen tuaj? ". Pasi lexova rreth një duzinë artikujsh, mora një përgjigje vetëm për dy pyetjet e para, por asnjëherë nuk e gjeta përgjigjen për të tjerat. Dhe vetëm pasi lexova disa botime në anglisht, më në fund kuptova se çfarë ishte. Kjo më shtyu të shkruaj këtë material.

Para së gjithash, artikulli u drejtohet njerëzve të trajnuar që shkruajnë programe për internet dhe janë të njohur me terma të tillë si "objekt", "metodë", "veti". Sidoqoftë, mund të jetë pjesërisht e dobishme për ata që thjesht janë të interesuar për këtë çështje. Lista e referencave përmban listën e nevojshme të referencave, duke përdorur të cilat është mjaft e mundur të zotëroni teknologjinë "nga e para".

Gjatë prezantimit, termi "shfletues" do të nënkuptojë shfletuesit: Internet Explorer 5.0+, Safari 1.3 dhe 2.0+, Netscape 7+, Opera 8.5+, Mozilla Firefox (plus do të thotë ky version dhe më i ri). Nëse flasim për versione të tjera, kjo do të përmendet veçmas. "Çfarë është? Si funksionon dhe cilat janë avantazhet?"

Për të kuptuar përfitimet e AJAX, duhet të dini se si funksionojnë aktualisht aplikacionet në ueb. Dhe ata punojnë duke përdorur teknologjinë klient-server (Fig. 1).

Përdoruesi hap një faqe në shfletues faqe... Faqja përmban hiperlidhje që çojnë në faqe të tjera. Kur klikoni në ndonjë prej tyre, shfletuesi dërgon një kërkesë Url te serveri me të cilin lidhet kjo lidhje. Nëse në natyrë nuk ka asnjë server të lidhur me këtë lidhje (për shembull, kur shkruani URL-në në shiritin e adresave, keni bërë një gabim kur shkruani emrin e burimit), ose ka probleme me lidhjen me internetin, atëherë shfletuesi do gjeneroni një faqe të ngjashme me atë të treguar në foto (kështu duket në Opera):

Nëse serveri ekziston, por dokumenti i specifikuar në kërkesë nuk ekziston në të, serveri vetë do të krijojë një faqe HTML me një përshkrim të gabimit. Për shembull, mund të jetë një gabim i njohur 404 (dokumenti nuk u gjet). Ose, nëse gjithçka është e saktë, serveri do të kthejë një faqe të re si përgjigje. Në çdo rast, një faqe e re do të ngarkohet në shfletues. faqja e re, edhe sikur të kenë ndryshuar vetëm disa fjalë nga e vjetra. Një disavantazh mjaft i rëndësishëm i kësaj teknologjie. Përveç kësaj, puna kryhet në një mënyrë sinkrone. Kjo do të thotë, pasi shfletuesi ka dërguar një kërkesë në server, ai pret një përgjigje prej tij dhe derisa të merret përgjigja, asgjë nuk do të bëhet. Dhe ndonjëherë përgjigjja dhe ngarkimi i një faqeje të re mund të zgjasë shumë. Aq gjatë sa përdoruesi nuk mund të presë që faqja të ngarkohet dhe thjesht ta mbyllë atë. Prandaj, programuesit e uebit përdorin disa truke.

VETITË:

Lexo vetem në gjendje të gatshme ndryshim funksionin

Përcakton një funksion të kthimit të thirrjes që do të thirret sa herë që ndryshon shtet i gatshëm prone. Përkundër faktit se funksioni thirret, parametrat nuk mund t'i kalojnë atij. Por më shumë për këtë më vonë në shembull.

Lexo vetem shtet i gatshëm numër i plotë

Statusi i kërkesës. Mund të marrë vlera:

• 0 - jo të panicializuara metodë (e uninializuar). hapur () ende nuk është thirrur;
• ende i pa thirrur;
• 2 - i ngarkuar metodë (e ngarkuar). dërgo () u thirr dhe titujt / statusi i përgjigjes (veti statusi) marrë;
• 3 - interaktive(interaktive), po merren të dhëna që janë të disponueshme përmes pronës Teksti i përgjigjes;
• 4 - përfunduar(e plotësuar), në përgjigje të kërkesës, jo vetëm që merren të gjitha titujt dhe statusi, por merren të gjitha të dhënat nga serveri, përgjigja është e plotë.

Lexo vetem Teksti i përgjigjes varg

Përgjigja e serverit në tekst të thjeshtë. Vetëm lexim.

Lexo vetem përgjigjeXML Objekt

Përgjigja e serverit si një objekt Dokumenti DOM. Përdoret nëse përgjigja e serverit është një dokument i vlefshëm XML. Nëse dokumenti nuk është i saktë, të dhënat nuk janë marrë ose nuk janë dërguar ende, atëherë prona është NULL. Vetëm lexim.

Lexo vetem statusi varg

Statusi i përgjigjes. Për shembull: 200 (OK), 404 (dokumenti nuk u gjet), 503 (mbingarkesa e përkohshme e serverit).

METODAT:

i pavlefshëm abort ()

Anulon një kërkesë HTTP ose marrjen e të dhënave. Pastron të gjitha vetitë e objektit që janë inicializuar. Metoda është e dobishme në lidhje me një kohëmatës, kur pas një kohe të caktuar nga momenti i kërkesës (jashtë kohës) nuk është marrë përgjigjja nga serveri.

varg getAllResponseHeaders ()

I kthen të gjitha titujt e përgjigjeve të serverit si një varg të formatuar. Çdo titull i ri fillon në një rresht të ri.

varg getResponseHeader(varg kokë)

Ktheni një kokë të quajtur header.

i pavlefshëm hapur(varg metodë, varg uri, [ logjike asinch])

Përgatit një kërkesë për uri duke përdorur metodën e metodës (POST ose GET) duke specifikuar modalitetin asinkron, modalitetin asinkron ose jo. Si rezultat i thirrjes së pronës shtet i gatshëm bëhet e barabartë me 1.

i pavlefshëm dërgoni(varg të dhëna)

Fillon një kërkesë në server. Të dhënat kalohen në të dhënat e kërkesës.

i pavlefshëm setHeader(varg kokë, varg vlera)

Cakton titullin me emrin header, vlerë. Mos harroni të telefononi hapur ()!

"Si mund ta përdorni këtë në faqen tuaj?"

Tani që kemi jo vetëm njohuritë e nevojshme teorike, por edhe një ide se çfarë bazohet praktikisht AJAX, ne mund të vazhdojmë me shkrimin e aplikacionit tonë. Më tej, jap një shembull nga momenti i formulimit të problemit deri në zbatimin e tij të plotë, në formën e një aplikacioni, duke shpjeguar disa nga hollësitë gjatë rrugës.

Pra, ne kemi një detyrë: duhet të implementojmë një bazë të dhënash (DB) të drejtuesve për pajisje të ndryshme. Në të njëjtën kohë, baza e të dhënave është aq e madhe sa nuk ka kuptim ta dërgoni atë në aplikacionin e klientit dhe të bëni një përzgjedhje prej tij duke përdorur JavaScript. Për shkak të ndryshimit të një vlere në faqe, është gjithashtu e padëshirueshme që të mbingarkohet. Personalisht, unë përdor PHP për skriptet e serverit për të përmbushur këtë detyrë dhe përdor një skedar XML për zbatimin e bazës së të dhënave.

Unë zgjedh strukturën e mëposhtme të bazës së të dhënave:

Listimi i skedarit DB të dhëna.xml: ATI 9600 128 DDR (128 bit) ATI 9600 256 DDR (128 bit) ATI 9600XT 256 DDR (128 bit) ATI X800GTO 256 DDR (256 bit) ATI X1300 5282 bit (128 bit) ATI X1300 5282 DDR01 (128 bit) ) ) NVidia 7800GS 256 DDR (256 bit) ATI X1300Pro 256 DDR (128 bit) ATI X1600Pro 256 DDR (128 bit) ATI X1800GTO 256 DDR (256 bit) ATI X2600 Pro 256 bit (128bit) NVidia 6600GT 128 DDR (128bit) ATI X1900XT 512 DDR (256bit) ATI X1900XTX 512 DDR (256bit) ATI X800 SilentPipe 128 DDR (256bit) Nvidia 6600GT 128 DDR (128bit) NVidia 6600GT PassiveHeatsink 128 DDR (128bit) X550 128 DDR (128 bit) PCI-E ATI X800GT Uniwise 256 DDR (256 bit) ATI X800GTO 256 DDR (128 bit) Audigy 2 6.1 Audigy 2 ZS 7.1 X-Fi Platinum Audiophile 192 Revolucion 5.1 Audiophile PMA60PIXD 100 Stylus Color C48 Stylus Color C87U DeskJet 1280 Des KJet 5443 Foto Smart 385 Laser Shot LBP2900 Laser Shot LBP3300 ML 1615 ML 2015 LaserJet 1018 LaserJet 2420 LaserJet 2420DN 4200F LiDE500F LiDE500F Perfection 094000

Si kërkon një person në këtë bazë të dhënash? Me shumë mundësi, ai do të ecë nga elementi rrënjë përgjatë pemës së dokumentit derisa të gjejë një lidhje në degën e dëshiruar ose të sigurohet që drejtuesi për këtë pajisje të mos jetë në bazën e të dhënave. Ne do të bëjmë të njëjtën gjë, duke përdorur shprehjet XPath për të gjetur nyjen e dëshiruar ose grupin e nyjeve.

Listimi i formularit për dërgimin e të dhënave indeks.htm:

Skaneri i printerit të kartës së zërit të kartës video

Ekzistojnë dy variabla në formë: rrugë dhe flamuri... E para ruan shtegun e kërkuar, i cili dërgohet në server. Meqenëse tashmë ka një element në formë, kjo ndryshore tashmë ka një vlerë fillestare. Ndryshorja e dytë përdoret për t'i thënë skriptit të serverit që të nxjerrë një element specifik nga dokumenti. Pajisja... Përveç kësaj, formati i të dhënave të kthyera nga serveri do të ndryshojë.

Tani le të hedhim një vështrim në motorin JS. Të gjitha funksionet nga ana e klientit janë mbledhur në një skript ajax.js: y = Objekti i ri (); funksioni httpRequest () (nëse (dritare.XMLHttpRequest) (// krijoni një objekt për të gjithë shfletuesit përveç IE requestObj = new XMLHttpRequest ();) tjetër nëse (window.ActiveXObject) (// për IE requestObj = new ActiveXObject ("Msxml2. XMLHTTP "); nëse (! requestObj) (requestObj = i ri ActiveXObject ("Microsoft.XMLHTTP"););); funksioni sendRequest (url, të dhëna) (httpRequest (); // përcaktimi i një funksioni të kthimit të thirrjes requestObj.onreadystatechange = answerServer; // përgatit të dhënat e dërgimit, gatiState = 1 requestObj.open ("POST", url, e vërtetë); / * T meqenëse të dhënat dërgohen me metodën POST, serveri duhet të dërgojë një kokë që e informon për të * / requestObj.setRequestHeader ("Content-Type", "application / x-www-form-urlencoded; charset = UTF-8 "); // dërgimi i të dhënave në server requestObj.send (të dhëna); funksioni answerServer () (if (requestObj.readyState == 4) (var status = requestObj.status; if (status == 200) (addSelect (y);) other if (status == 400) (alarm ("Kërkesë e pavlefshme ");) else if (status == 500) (lajmërim (" Gabim i brendshëm në server ");) tjetër nëse (status == 503) (var time = requestObj.getResponseHeader (" Riprovo-Pas ") * 1000; alert ("Serveri është i mbingarkuar. Kërkesa do të përsëritet në:" + koha + "sekonda"); setTimeout (sendRequest (url, shteg), koha);) else (alarm ("Përgjigje e gabuar e serverit"); );); funksioni sendData (obj) (var Elpath = document.form.path; var url = "index.php"; if (document.form.flag.value == "0") (var shteg = Elpath.value + "/" + obj.value;) else (var path = Elpath.value + "/ Device [" "+ obj.value +" "]"; / * duke përdorur metodën GET dërgoni informacionin e skriptit të serverit që nevojitet një element specifik i pajisjes * / url = "index.php? flamuri = 1";); // cakto vlerën e kërkesës aktuale në variablin e formës së rrugës Elpath.value = shteg; // kodo shtegun e vargut të transmetuar = "rruga =" + encodeURIcomponent (rruga);y = obj;sendKërkesë (url, shteg); funksioni addSelect (obj) (// përgjigja e serverit në tekst të thjeshtë var docTEXT = requestObj.responseText; obj.setAttribute ("disabled", e vërtetë); // krijoni një element div var div = document.createElement ("div"); / / shtoni përgjigjen e serverit në div div.innerHTML = docTEXT // shtoni përgjigjen e serverit div në pemën e dokumentit document.form.appendChild (div); rivendosja e funksionit () (document.form.path.value = "(! LANG: // Pajisjet"; document.form.flag.value="0"; var NodeListDiv = document.form.getElementsByTagName("div"); var length = NodeListDiv.length; if (length > 1) { while (NodeListDiv != undefined) { document.form.removeChild(NodeListDiv); }; }; document.form.Devices.removeAttribute("disabled"); };!}

Siç thashë më parë, në funksionin e pronës në gjendje të gatshme ndryshim parametrat nuk mund të kalohen. Më saktësisht, nuk mund të kaloni parametra që janë objekte. Prandaj, që në fillim, ne krijojmë një ndryshore në të cilën do të ruajmë një referencë për objektin që thirri funksionin. Meqenëse kjo variabël është në sferën globale të variablave, do të jetë e mundur të aksesohet nga çdo pjesë e programit. Për momentin, kjo është mënyra më e zgjuar për të kaluar parametrat e kthimit të thirrjes në funksionin e pronës. në gjendje të gatshme ndryshim Objekt.

Tani le të hedhim një vështrim se si funksionon motori.

Kur ndodh një ngjarje turbulloj(element zgjidhni fokusi i humbur) thirret funksioni dërgo të dhënat (), i cili përgatit të dhënat POST për dërgimin e kërkesës. Përveç kësaj, ai formon një shprehje XPath në varësi të vlerës së ndryshores. flamuri = 0(Për shembull, // Pajisjet / Kartat video) ose flamur = 1(Për shembull, // Pajisjet / Kartat video / AGP / Sapphire / Pajisje ["ATI 9600XT 256 DDR (128 bit)"]).

Më pas, ne e quajmë funksionin Dergo kerkesen (), në të cilin kalojmë URL-në e skriptit të serverit, si dhe një variabël të tipit string që përmban të dhënat e gatshme POST. Dhe gjëja e parë që bëjmë është të krijojmë XMLHttpKërkesë objektin, referencën të cilës e ruajmë në një variabël kërkesëObj... Funksioni httpKërkesë ()është ndër-shfletues dhe do të funksionojë në të gjithë shfletuesit.

Dikur thirrje funksioni httpKërkesë () E bëra menjëherë kur ngarkova faqen dhe nuk u krijua kurrë XMLHttpKërkesë nje objekt. Por siç doli, kjo funksionon për të gjithë shfletuesit përveç IE, i cili kërkon krijimin e një objekti të ri çdo herë. Prandaj, ky funksion thirret çdo herë përpara dërgimit të të dhënave.

Pas dërgimit të të dhënave, shfletuesi pret një përgjigje nga serveri. Çdo herë që prona ndryshon shtet i gatshëm do të thirret funksioni Serveri i përgjigjes ()... Nëse statusi i përgjigjes erdhi me kodin "200" (gjithçka është në rregull), atëherë funksioni do të thirret shtoniZgjidhni (), i cili do të shtojë të dhënat që rezultojnë në DOM të dokumentit aktual. Të gjithë shfletuesit do të presin për një përgjigje nga serveri. Sidoqoftë, pas një kohe të caktuar (time-out), do të detyrohet të caktohet XMLHttpRequest.readyState = 4 dhe ndaloni së prituri për një përgjigje nga serveri. Për shembull, Opera ka një vlerë kohore prej 10 sekondash. Duke përdorur statuse të tjera, mund të shtoni një mbajtës gabimi në motor në përgjigjet e serverit.

Funksioni shtoniZgjidh () shton një nyje tjetër në DOM të dokumentit aktual DIV, në të cilin vendos përgjigjen nga serveri. Dikush mund të pyesë veten pse prona po përdoret Teksti i përgjigjes, por jo përgjigjeXML? Dikush do të dëshirojë patjetër ta përdorë këtë veçori për të importuar përgjigjen e serverit (dhe skripti i serverit dërgon një dokument XML si përgjigje) direkt në DOM të dokumentit. Kishte një dëshirë të tillë për mua. Doja të importoja elementin rrënjë të skedarit të dërguar XML dhe të gjithë pasardhësit e tij duke përdorur metodën importNode... Por shfletuesi e importoi elementin pa fëmijë, edhe pse parametri i dytë i kësaj metode ishte vendosur në e vërtetë: importNode (Nyja e importuar e objektit, e vërtetë)... Prandaj, zbatimi i pasaktë i kësaj metode e përjashton ende përdorimin e saj.

Një zgjidhje ekuivalente u gjet duke përdorur innerHTML metoda e elementit.

Kjo përfundon punën e palës së klientit. Funksioni i mbetur i pashqyrtuar rivendos ()është krijuar për të kthyer DOM-in e dokumentit në formën e tij origjinale. Ju mund të arrini të njëjtën gjë duke rifreskuar faqen duke përdorur F5, por motori AJAX është shkruar për të shmangur ringarkimin e faqes. Prandaj, të gjithë elementët e shtuar në dokument nga skripti duhet të hiqen prej tij gjithashtu nga skripti.

Në përgjigje të kërkesës, skripti i serverit gjeneron të dhëna XML të formës: fëmijëtElementi_1 .... fëmijëtElementi_1

Nëse nyja e kërkuar ka një emër Pajisja, pastaj kthehet teksti i thjeshtë i formatuar. Skripti i serverit është shkruar në PHP V5 dhe nuk do të funksionojë në versionet e mëparshme të këtij përkthyesi, pasi zgjerimi DOM u prezantua në këtë gjuhë vetëm në versionin e pestë dhe zëvendësoi shtesën DOM XML, ndërfaqja e së cilës nuk korrespondonte me specifikimin. Tani le të shohim kodin e skriptit të serverit.

Listimi i skedarëve indeks.php : load ("data.xml"); // krijoni një objekt XPath $ DOMXPath = DOMXPath i ri ($ doc); $ DOMNodeList = $ DOMXPath -> pyetje ($ _ POST); // të marrë elementin e kërkuar sipas kërkesës $ DOMNode = $ DOMNodeList -> artikull (0); // krijoni një objekt dokumenti XML $ replyXML = DOMDocument i ri ("1.0", "windows-1251"); / * nëse flamuri nuk është i barabartë me një, atëherë elementi aktual nuk është një element i pajisjes dhe ju duhet të gjeni të gjithë elementët pasardhës të elementit aktual DOMNode * / nëse ($ _GET! = 1) (// merrni një listë të të gjithëve pasardhës të elementit $ childNodes = $ DOMNode -> childNodes; / * Meqenëse fëmijët mund të jenë jo vetëm elementë, por edhe nyje, ne krijojmë një grup indeksi që përmban vetëm elementë fëmijë * / foreach ($ childNodes si $ Node) (nëse ( $ Node-> nodeType == 1) ($ arrayNodes = $ Node;);); // krijoni elementin rrënjë të dokumentit XML $ root = $ replyXML-> createElement ("zgjedh"); $ optgroup = $ replyXML- > createElement ("optgroup"); / * nëse elementët janë pasardhës nuk janë Device, atëherë vendosim atributet për elementin rrënjë dhe elementin pasardhës të tij optgroup * / if ($ arrayNodes -> nodeName! = "Device") ($ root-> setAttribute ("emri", $ DOMNode-> nodeName); $ AttributeNode = $ arrayNodes-> getAttributeNode ("titull"); $ optgroup-> setAttribute ("label", $ AttributeNode-> vlera); $ root- > setAttribute ("onblur", "sendData (kjo) "); ) else (/ * përndryshe, krijoni një atribut me kodin JS i cili do t'i caktojë vlerën "1" ndryshores në formën e flamurit * / $ root-> setAttribute ("onblur", "document.form.flag.value = 1 dërgoni të dhëna (kjo); "); / * një lak që krijon elemente të reja opsioni për çdo element fëmijë; sa pasardhës, kaq shumë elementë * / foreach ($ arrayNodes si $ nyje) ($ opsion = $ replyXML-> createElement ("opsion"); $ setNode = $ Node-> nodeName; nëse ($ Node-> nodeName == " Pajisja ") ($ setNode = $ Node-> nodeValue;); $ option-> nodeValue = $ setNode; $ option-> setAttribute (" vlera ", $ setNode); $ optgroup-> appendChild (opsioni $);) ; // futni elementet që rezultojnë në dokumentin XML $ replyXML-> appendChild ($ root); $ root-> appendChild ($ optgroup); / * nëse flamuri = 1, atëherë elementi aktual është një element Device; elementet fëmijë nuk nevojiten, por nevojiten atributet e elementit aktual * /) tjetër (// krijoni elementin rrënjë $ root = $ replyXML-> createElement ("pre"); $ DOMText = DOMText i ri ("URL OS" ); $ root - > appendChild ($ DOMText); $ NamedNodeMapAttr = $ DOMNode-> atributet; $ i = 0; / * një lak që gjen të gjitha atributet e elementit Device dhe për secilin atribut krijon një linjë të dhënash me përmbajtjen lidhje * / ndërsa (($ NodeAttr = $ NamedNodeMapAttr -> artikulli ($ i))! = null) (nëse ($ NodeAttr-> emri! = "id") ($ DOMText = DOMText i ri ("$ NodeAttr-> emri"); $ DOMElement = $ replyXML-> createElement ("a"); $ DOMElement - > setAttribute ("href", $ NodeAttr-> vlera); $ DOMElement -> nodeValue = $ NodeAttr-> vlera; $ root -> appendChild ($ DOMText); $ root -> appendChild ($ DOMElement);); $ i ++ $ NodeAttr = artikull $ NamedNodeMapAttr-> ($ i); $ replyXML-> appendChild ($ root); ); // dërgoni një përgjigje tek klienti echo $ replyXML-> saveHTML (); ?>