Primjeri su Ajax. Ajax skripte

Internet pruža posjetitelju vidljivost svakog resursa koji se nalazi na hostu na mreži, a preglednik - pristup mrežnim protokolima, mehanizmi za pozivanje pojedinačnih skripti, slanje / primanje informacija. Skup stranica koje čine web mjesto ima zajednički korijen - jedinstvenu vezu (naziv domene, jedinstvena adresa čvora).

Nije bitno ako resurs reagira statistički na posjet ili dinamički stvara odgovor. Čak i ako je oblik i sadržaj stranice ovisi o bilo kakvim uvjetima, nedjeljivu jedinicu komunikacijskog servera i klijenta (browser) je završio HTML-kodirani dokument, slike, stil listova i drugih datoteka potrebno sadržaj i okoliš. Ako ovdje nešto nije u redu, preglednik će prikazati sve što je "uspjelo" primati, analizirati i izvršiti.

Mnogo se obećavajućih tehnologija pojavilo dugo, ali su nezasluženo zaboravljene ili se nisu pravilno upotrebljavale. Prvo AJAX (primjeri koristiti XMLHttpZahtjev objekt) pojavila prije mnogo godina, ali uspjeh i slava došla mnogo kasnije.

Odjednom ili samo ono što vam treba

U klasičnoj verziji stranice - ime, IP-adresu i link (svi sinonimi označavaju istu točku u internetskom prostoru). Što se krije iza ovog glavnu stranicu - pomisli na vlastitu inicijativu moderan „dizajner”, koji nije ni pitati zašto je to tako? Zašto je stranica glavna stranica s koje možete doći do bilo kojeg drugog? Ova opcija očito nije idealan, ovo određenog sadržaja i stvarne funkcionalnosti.

Jednostavno rečeno, ako osoba treba stomatologa, odlazi na pravu adresu u određenu svrhu, a ne u kuhinju za kiruršku intervenciju, a ne u knjižnicu radi savjetovanja s terapeutom. Na mjestu gdje se to dogodilo, vidjet će, ali u potpunosti neće dobiti zubnu polikliniku. Najveći dopušteni broj posjetitelja je registar i smjer (točan put) do liječnika. I na licu mjesta (na dolasku) mogu se promijeniti i liječnik i odredište.

No, ovdje je stranica obično uvijek opterećen u punom streljiva, ništa se ne mijenja nakon učitavanja, uzimajući u obzir vrijeme koje je došao netko ... No, čak i u slučaju kada se radi o stvarnom životu klinika, prvi put kada posjetite novi klijent dati dovoljno informacija stranicu , kontakte i ... registar prozor može biti pod uvjetom da je posjet mjestu je učinjeno u off-sata, kao što je propisano od strane liječnika nije dostupan, privremeno imenovanje je napravljen na drugačiji uredu ...

Usmjerite na internetski prostor

Klasični odgovor resursom internetskom prostoru - kao odgovor na zahtjev za izdavanje stranicu web-mjesta (obično dom), a zatim s druge, na zahtjev posjetitelja. Site Server također sadrži slike, stilove, jаvascript kod skripte, PHP, i sl Nisu svi PHP-datoteke učiniti stranica, neke od njih mogu odgovoriti na AJAX zahtjeva :. primati, obrađivati ​​i slati podatke.

Nije teško napisati skriptu. Ali, uzimajući kontrolu nad određenom točkom u prostoru Interneta, nemoguće je odrediti tko i za koju prigodu upućuje, to jest, aktivira to ime, IP adresu i vezu. Bilo koji promet na mreži događa se programski, uglavnom putem preglednika, ali i preko robota različitih izvora i odredišta, putem akcija drugih web mjesta.

Skripta koja je dobila kontrolu može sigurno znati samo: vrijeme posjeta, putem kojeg je posjetitelj došao posjetitelj, od kojeg je veza, od kojeg IP adrese i prisutnosti kolačića. Samo potonji mogu dati informacije o tome kako oblikovati glavnu stranicu, ali samo ako je taj posjetitelj već bio ovdje. U svim drugim situacijama moguće je generirati samo opći odgovor poslužitelja. Primjeri AJAX-a koji se lako mogu pronaći na Internetu trebaju se pažljivo koristiti. Teško je pratiti pogreške u operaciji (upotreba) XMLHttpRequest objekta.

Zajednički odgovor i privatni dijalog

Ukupni odgovor od poslužitelja - zajednička stranica, naziva glavnice onoga što se zove indeks, a počinje sa stranice koja je u sukobu sa svojim linkovima na druge stranice na raspolaganju. Međutim, ako posjetitelj zna imena tih drugih stranica, oni u njegovom razumijevanju bit će manje važni od one koju je odredio razvojni programer. Tako izgleda kao klasični model, sve odjednom: opći dizajn i funkcionalnost, usmjereni na sve posjetitelje.

Privatni dijalog nastavak je prethodne sjednice posjetitelja. Web mjesto već zna što radi, ono što je zainteresirano, koje su stranice pregledane i stavljene u njegovu memoriju, napisali nešto u kolačićima preglednika.

Postoje dva osnovna zahtjeva poslužitelju za preuzimanje i rad s njim: POST i GET. Rezultat upita je cijela stranica. Na primljenoj stranici posjetitelj može aktivirati određene događaje konfigurirane za radnje na određenim elementima stranice.

Događaji elementa stranice

Stranica element može biti ključ za pronalaženje informacija, što znači - da se sadržaj tekstualnog polja i Smatraju da je to napisao posjetitelja. Događaj se može dogoditi na stavci izbornika, na slici i na tekstnom okviru. U svakom slučaju, pokrenut će se jаvascript funkcija koja može izvršiti AJAX zahtjev kako slijedi:

InitXML ( `../ Mphp / scSrvPhpWord.php? CTask = GoPage` + `= cOwnerCode` + cOwnerCode
+ `cSessionCode =` + cSessionCode + `cActiveItem =` + cActiveItem);

Funkcija InitXML () definirana je kako slijedi (varijabla var scXHR treba opisati izvan funkcije):

funkcija InitXML (scURL) {

scXHR = null-

ako (window.XMLHttpRequest)
{probati
{scXHR = novi XMLHttpRequest () -
} ulov (e) {}
} ostalo
ako (window.ActiveXObject)
{probati
{scXHR = novi ActiveXObject (`Msxml2.XMLHTTP`) -
} uhvatiti (e)
{probati
{scXHR = novi ActiveXObject (`Microsoft.XMLHTTP`) -
} ulov (e) {}
}
}
ako (scXHR)
{
scXHR.open (`GET`, scURL) -
scXHR.onreadystatechange = WaitReplySC-
scXHR.send (null) -
} -
}

Ova funkcija ima URL i inicira zahtjev za to. Asinkroni odgovor će doći čim se ispune skripti navedenoj u URL-u (u ovom slučaju - scSrvPhpWord.php, koji se nalazi u mapi ../Mphp/ u odnosu na korijen web stranice), a počet će WaitReplySC () funkciju, koja ide na ulaz poslužitelja XML-odgovor, uključujući naslov i sadržaj.

Odgovor poslužitelja

Sam poslužitelj je PHP skripta - program koji započinje instalacijom bitnih uvjeta, preuzimanjem potrebnih sadržaja, prethodnom obukom, što ovisi o ciljevima developera:

imenski prostor PhpOffice PhpWord-

ini_set (`display_errors`, 1) -
error_reporting (E_ALL ^ ​​E_NOTICE) -

ignore_user_abort (true) -
set_time_limit (12) -

koristite PhpOffice PhpWord MphpObj scDocuments-

require_once `PhpOffice / PhpWord / Autoloader.php`-
PhpOffice PhpWord Autoloader :: registriraj ();

Predstavljao početak Oznaka greške, zabranjuju zaustavljanje skriptu kad se korisnik prijavi se i postavlja vremensko ograničenje na obavljanje case petlje - 12 sekundi. Zatim je knjižnica PhpOffice PhpWord povezana s radom s dokumentima * .docx.

Kao što je prikazano gore AJAX-izazov ( `... cTask = GoPage` + `cOwnerCode =` + cOwnerCode + `cSessionCode =` + cSessionCode + `cActiveItem =` + cActiveItem) - to GET-četiri varijable koje se ne mogu biti trebali provjeriti svoje stvarne dostupnosti:

$ cTask = (isset ($ _ GET [`cTask`])))? $ _GET [`cTask`]: `` -
$ cOwnerCode = (isset ($ _ GET [`cOwnerCode`])))? $ _GET [`cOwnerCode`]: `` -
$ CSessionCode = (isset ($ _ GET [ `cSessionCode`]))? $ _GET [`cSessionCode`]: `` -
$ cActiveItem = (isset ($ _ GET [`cActiveItem`])))? $ _GET [`cActiveItem`]: ``;

Nakon provedbe pripremnih radnji, skripta donosi odluku:

prebaciti ($ cTask) {

slučaj `GoPage`: // (ovo je poziv na početku učitavanja ili osvježavanja stranice)

$ cOwnerCode = `cOwner`-
$ cSessionCode = `cSession`-
$ cContents = `cContents`-
$ cStatus = `cStatus`-
$ CHTML = iconv ( `UTF-8`, `CP1251`, "kodiranje elementa) -
$ cActiveItem = iconv (`UTF-8`, `CP1251`, `varijabilne vrijednosti`);

$ CReply = "scSrvRM | GoPage | set | {$ cOwnerCode} `{$ cSessionCode} | {$ cContents}` {$ cStatus} | {$ cHTML} | {$} cActiveItem" -

razbiti;

}

i završni dio skripte:

zaglavlja ("Vrsta sadržaja: tekst / xml-accept-charset = utf-8") -
zaglavlja ("Cache-Control: no-cache") -
echo `$ CReply = iconv ( `CP1251`, `UTF-8`, $ cReply) - // konverzija iz `` u CP1251 `UTF-8`
echo $ cReply;

Primanje odgovora od klijenta

Na stranici preuzetoj u pregledniku utvrđeno je da će, nakon što poslužitelj pripremi odgovor, obraditi funkcija WaitReplySC:

funkcija WaitReplySC () {

pokušajte {

ako (scXHR.readyState == 4) {
ako (scXHR.status == 200) {// rješava odgovor

var TestReply = scXHR.responseText-

ako ((TestReply.indexOf (`Parse error`)> 0) ||
(TestReply.indexOf (`Obavijest`)> 0)) upozorenje (scXHR.responseText) -

var cData = scXHR.responseText-
var aData = cData.split (`|`) -

var cCmd = aData [1] -
var cPos = aData [2] -
var aOwnerSession = aData [3] .split (```) -
cOwnerCode = aOwnerSession [0] -
var cSessionCode = aOwnerSession [1] -
var aContentStatus = aData [4] .split (```) -
var cContent = aContentStatus [0] -
var cStatus = aContentStatus [1] -
var cHTML = aData [5] - // HTML odgovor poslužitelja
var cVarValues ​​= aData [6] - // vrijednosti varijabli za obrasce

prekidač (cCmd) {

slučaj "GoPage":

var dTestLine = document.getElementById (`scTestLine`) -
dTestLine.innerHTML = `Odgovori = [` + cOwnerCode + `,`
+ cSessionCode + `,`
+ cContent + `,`
+ cStatus + `,`
+ cHTML + `,`
+ cVarValues ​​+ `]` -

BREAK-
}

} else {
document.getElementById (`scAreaStatus`). innerHTML = "Greška !!!" -
}
}
} ulov (e) {}

}

Stoga pomoću ovih AJAX primjera, prilikom učitavanja stranice u pregledniku, dobivamo (u elementu scTestLine):

Odgovor = [cOwner, cSession, cContents, cStatus, elementi koji kodira varijabli]

O poslanom kodu, jQuery i WordPress

Stranica u pregledniku i tekst skripte napisana su UTF-8 kodiranjem, stoga se funkcija iconv () koristi za pretvaranje ruskih slova. Inače, kostur prikazanog koda je vrlo jednostavan i lako se može ponoviti za bilo koju posebnu svrhu.

Samo za obradu odgovora poslužitelja u funkciji WaitReplySC () i stvarni kod skripti koji oblikuje taj odgovor podložni su promjenama. Pozivi na InitXML funkciju (za određenu scURL i odgovarajuće podatke) smještaju se u rukovatelje događaja na elementima stranice i određuju semantičko opterećenje tih elemenata.

Primljeni AJAX-primjeri usmjereni su na "ručnu" upotrebu tehnologije.

U različitim sustavima za upravljanje web stranicama (SMS) opisane su mogućnosti prikazane na različite načine, obično u stilu jedne ili druge specifičnosti. Na primjer, jQuery AJAX mogućnosti poziva su shvatili jQuery.ajax () funkcije u bilo na višoj razini: jQuery.get () i jQuery.post (). Parametar se prenosi na URL i postavke (skup parova ključeva i vrijednosti). jQuery.ajax () vraća XMLHttpRequest objekt.

Da biste pratili rezultat, jQuery nudi metode funkcije: XHR.done () - uspješno dovršavanje upita. XHR.fail () - rukovanje pogreškama.

Metoda jqXHR.done () je alternativa vodiču za uspješno dovršenje AJAX zahtjeva. Zamjenjuje zastarjelu metodu jqXHR.success ().

Slično tome, korištenje AJAX tehnologije na WordPressu. Ovdje je sve već ugrađeno u sam sustav upravljanja web stranicama, samo trebate koristiti predložene nacrte. U dokumentaciji se nudi detaljan opis.

Korištenje AJAX-a bitno ovisi o odabranom alatu, iako se ručna inačica može primijeniti paralelno ili pored odabranog sustava za upravljanje određenom verzijom jQuerya. Potonji je koristan za samostalan rad, jer ga gotovo svi moderni SMS upotrebljavaju, ali svaki na svoj način.

Klasičan primjer primjene

Jednostavna i uzorna primjena AJAXa je košarica za kupnju u online trgovini. Stranice trgovine uvijek su pune robe, iako u stvarnosti ne moraju biti. Ponovno podizanje sustava obično traje znatnu količinu vremena, no kada posjetitelj odabere proizvod, uvijek ga može odbiti ili promijeniti u drugu, što je uvijek poželjno prikazati na web-mjestu brzo.

Obično se to ostvaruje u obliku košarice i oznaka u blizini odabrane robe. Bez upotrebe AJAX-a, dinamička promjena u tim elementima je problematična.

AJAX skripte koje provode mehanizme dodavanja / uklanjanja robe u košaricu postale su de facto u mnogim SMS-ovima.

Za normalni prijenos podataka preko AJAX-a, obrazac se može izvršiti na uobičajeni način (za unos imena i lozinke):

Evo rukovatelja:

funkcija scfWelcomeGo () {

var cName = document.fWelcome.cName.value-
var cPass = document.fWelcome.cPass.value-

InitXML (`../ Mphp / scSrvPhpWord.php? CTASK = CheckWelcome`
+ `cName =` + cName
+ `cPass =` ​​+ cPass) -

}

šalje poslužitelju da potvrdi uneseno ime i lozinku posjetitelja. Skripta provjerava podatke primljene u korisničkom stola i šalje natrag odgovor na temelju kojih je mjerodavno skripta prikazuje poruku na stranici (vrši radnju) za registrirane korisnike ili izvješća da takav korisnik i moraju biti registrirane.