Ajax - primjeri. Ajax skripti

Internet pruža posjetitelj vidljivost svaki resurs koji je domaćin u mreži, i browser - pristup preko mrežnih protokola, mehanizmi poziv pojedinih skripti, prijenos / prijem informacija. Set stranice koje čine sajt, ima zajednički korijen - jedinstveni link (ime domena, jedinstvena čvor adresa).

Bez obzira na izvor odgovara da posjeti statički ili dinamički generira odgovor. Čak i ako se oblik i sadržaj stranice ovisi o svim uvjetima, nedjeljiva jedinica komunikacije server i klijent (browser) je gotov HTML-kodirani dokument, slike, stil listova i druge datoteke potreban sadržaj i okoliš. Ako nešto nije u redu, pretraživač prikazuje sve ono što je "uspio" da parsiranje i izvršiti.

Mnogi obećavajuće tehnologije pojavili su se već dugo vremena, ali su nepravedno zaboravljeni ili nisu pravilno koristi. Prva AJAX (primjeri uporabe XMLHttpRequest objekta) pojavio se prije mnogo godina, ali uspjeh i slavu stekao mnogo kasnije.

Sve ili samo ono što vam je potrebno

U klasičnoj verziji sajta - ime, IP-adresu i link (svi sinonimi označavaju istu stvar u Internet prostoru). Šta se krije iza ove glavne stranice - pomislio na vlastitu inicijativu moderan "dizajner", koji nije ni pitati zašto je to tako? Zašto je lokacija na glavnoj stranici sa koje možete dobiti na bilo koji drugi? Ova opcija - očito nije idealan, to je određeni sadržaj i stvarne funkcionalnosti.

Jednostavno rečeno, ako osoba treba stomatolog, to je prava adresa za određenu svrhu, a ne u kuhinju za operaciju, a ne u biblioteku za konsultacije terapeuta. Na mjestu gdje je ovaj ispao, on vidi, ali ne dobije stomatološku ordinaciju u potpunosti. Najbolje što mogu očekivati za posjetitelje - registar i pravac (tačan put) kod doktora. I na licu mjesta (na dan dolaska) može promijeniti kao lekar, i odredište.

Ali evo stranice obično uvijek ubačen u punom municije, ništa se ne mijenja pod opterećenjem, uzimajući u obzir vrijeme koje je došlo neko ... Ali, čak iu slučaju kada se radi o stvarnom životu kliniku, prvi put kada posjetite novog klijenta da daju dovoljno informacija stranici , kontakti i ... prozor registra može se, pod uslovom da posete sajt je učinjeno tijekom off-sati, kao što je propisano od strane liječnika nije dostupan, privremeni imenovanje je napravljen na drugačiji uredu ...

Point u Internet prostoru

Klasičan odgovor resursa Interneta prostora - kao odgovor na zahtjev za izdavanje stranice stranice (obično kući), a zatim i drugi, na zahtjev gosta. Site Server također sadrži slike, stilova, JavaScript kod skripte, PHP, itd Nisu svi PHP-files stranicama, neke od njih može da odgovori na AJAX zahtjeva :. za primanje, obradu i slanje informacija.

Napišite skriptu ugriz. Ali da se do tačke kontrole u Internet prostoru, nemoguće je utvrditi ko je i zbog čega se obratio, koji se aktivira je ime, IP-adresu i link. Svaki pokret na mreži odvija u softveru, uglavnom kroz browser, ali i kroz roboti različitog porijekla i destinacije kroz drugim lokacijama djelovanja.

Skripta, preuzme kontrolu, može precizno znati samo: posjetu kroz ono preglednika došao posjetitelj, uz pozivanje iz kojeg IP-adrese, i prisustvo kolačića. Samo ovaj drugi može pružiti informacije o tome da čine glavnu stranicu, ali samo ako posjetitelj je već ovdje. U svim drugim slučajevima moguće je generirati samo opšti odgovor od servera. AJAX-primere koji su lako pronaći na internetu, treba pažljivo koristiti. Greške u (upotreba) XMLHttpRequest objekta za praćenje nije lako.

Sveukupni odgovor i privatnog dijaloga

Sveukupni odgovor sa servera - zajedničku stranicu, nazivaju glavni onoga što se zove indeks, a počinje sa stranice koja je u suprotnosti sa svojim vezama sa drugim stranicama na raspolaganju. Međutim, ako posjetitelj zna imena drugim stranicama, oni su u njegovom razumijevanju neće biti ništa manje važna od one određene developer. Ovdje je klasični model, sve odjednom: cjelokupni dizajn i funkcionalnost koji se fokusira na sve posjetitelje.

Privatnog dijaloga - nastavak prethodne sjednice posjetitelja. Sajt već zna šta je uradio, da je bio zainteresovan za ono što je su stranicu i stavio ga u svoju memoriju, napisao nešto u pretraživaču kolačiće.

To se koristi dva osnovna zahtjeva na server za preuzimanje gradilišta i raditi s njim: POST i GET. rezultat upita je čitavu stranicu. Na rezultat stranici, posjetitelj može aktivirati ove ili drugih događaja koji su konfigurirani na akciju pojedinih elemenata stranica.

Događanja elemenata stranice

stranica element može biti ključ za pronalaženje informacija, što znači - da se sadržaj polja teksta i da je to napisao gost. Ovaj događaj se može pojaviti na stavku izbornika, slika, tekst. U svakom slučaju, JavaScript-funkcija će se pokrenuti, koji može obavljati AJAX-zahtjev kako slijedi:

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

Tako funkcija InitXML () definirana na sljedeći način (varijabla var scXHR može opisati izvan funkcije):

funkcija InitXML (scURL) {

scXHR = null;

if (window.XMLHttpRequest)
{pokušati
{ScXHR = new xmlHttpRequest ();
} Catch (e) {}
} else
if (window.ActiveXObject)
{pokušati
{ScXHR = new ActiveXObject ( 'Msxml2.XMLHTTP');
} Catch (e)
{pokušati
{ScXHR = new ActiveXObject ( 'Microsoft.XMLHTTP');
} Catch (e) {}
}
}
if (scXHR)
{
scXHR.open ( 'Get', scURL);
scXHR.onreadystatechange = WaitReplySC;
scXHR.send (null);
};
}

Ova funkcija uzima URL i inicira zahtjev za to. Asinkroni odgovor će doći čim će ispuniti skripti navedenoj u URL (u ovom slučaju - scSrvPhpWord.php, nalazi se u folderu ../Mphp/ u odnosu na korijen sajta), i da će početi WaitReplySC funkcija, () koji ide na ulaz servera XML-odgovor, uključujući naslov i sadržaj.

odgovor server

Zapravo je server PHP-skripta - program koji počinje sa instalacijom od bitnih uslova, preuzmite potrebnih sadržaja, pred-tretman, što zavisi od svrhe developer:

namespace PhpOffice \ PhpWord;

ini_set ( 'display_errors', 1);
error_reporting (E_ALL ^ E_NOTICE);

ignore_user_abort (true);
set_time_limit (12);

koristiti PhpOffice \ PhpWord \ MphpObj \ scDocuments;

require_once 'PhpOffice / PhpWord / Autoloader.php';
\ PhpOffice \ PhpWord \ Autoloader :: registar ();

Predstavlja početak znaka ukazuje na bilo kakve greške, zabranjuje zaustavljanje skriptu kada korisnik odjavi i postavlja vremensko ograničenje obavljanja slučaju petlji - 12 sekundi. Sljedećoj vezi biblioteke PhpOffice \ PhpWord za dokumente * .docx.

Kao što je prikazano gore AJAX-izazov ( '... cTask = GoPage' + '& cOwnerCode =' + cOwnerCode + '& cSessionCode =' + cSessionCode + '& cActiveItem =' + cActiveItem) - četiri GET-varijable, koji ne može biti treba provjeriti njihove 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 izvođenja pripremnih action script odlučuje:

switch ($ cTask) {

slučaju 'GoPage': // (to je izazov tokom početne preuzimanje ili osvježite stranicu)

$ COwnerCode = 'cOwner';
$ CSessionCode = 'cSession';
$ CContents = 'cContents';
$ CStatus = 'cStatus';
$ CHTML = iconv ( 'UTF-8', 'CP1251', 'kodiranje element ");
$ CActiveItem = iconv ( 'UTF-8', 'CP1251', 'varijable');

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

break;

}

i završni dio scenarija:

header ( "Content-Type: text / xml; prihvatiti-charset = UTF-8");
zaglavlje ( "Cache-Control: no-cache");
echo '';
$ CReply = iconv ( 'CP1251', 'UTF-8', $ cReply); // konverziju iz 'CP1251' u 'UTF-8'
echo $ cReply;

Getting odgovor kupaca

Na stranici koja se učitava u pretraživaču, utvrđeno je da čim će server pripremiti odgovor, to će biti obrađen funkcija WaitReplySC:

funkcionirati WaitReplySC () {

try {

if (scXHR.readyState == 4) {
if (scXHR.status == 200) {// obradu odgovor

var TestReply = scXHR.responseText;

if ((TestReply.indexOf ( 'raščlambe greška')> 0) ||
(TestReply.indexOf ( "Obavijest")> 0)) alert (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]; // server HTML-odgovor
var cVarValues = ADATA [6]; // varijable za obrasce

prekidač (cCmd) {

slučaju 'GoPage':

var dTestLine = document.getElementById ( 'scTestLine');
dTestLine.innerHTML = 'Odgovori = [' + cOwnerCode + ','
+ CSessionCode + ','
+ CContent + ','
+ CStatus + ','
+ CHTML + ','
+ CVarValues + ']';

break;
}

} Else {
. Document.getElementById ( 'scAreaStatus') innerHTML = "Greška !!!";
}
}
} Catch (e) {}

}

Na taj način, koristeći AJAX-primjera, se stranica učita u pretraživaču dobiti (u scTestLine element):

Odgovarati = [cOwner, cSession, cContents, cStatus, elementi koji kodira varijabla vrijednosti]

O zastupljenosti kod, jQuery i WordPress

Stranicu u browser i skripta tekst napisan u UTF-8, za funkciju upotrebu iconv () pretvoriti ruski znakova. Ostatak kostura predstavlja broj je vrlo jednostavna i može se lako ponoviti za bilo koju određenu svrhu.

Podložne promjenama samo u odgovoru na obradi server funkcija WaitReplySC () i stvarne skripta kod koji generira odgovor. Poziva InitXML funkcija (za određenu scURL i relevantnih podataka da) su smješteni u slučaju sirovina na stranici elemenata i definirati značenje tih elemenata.

Predstavio primjere AJAX-orijentiran na "manual" upotrebu tehnologije.

U raznim Content Management System (SMS) mogućnosti opisane su na različite načine, po pravilu, u stilu određene specifičnosti. Na primjer, mogućnosti jQuery AJAX poziv ostvaruju jQuery.ajax () funkcije u bilo viši nivo: jQuery.get () i jQuery.post (). Parametar se prenosi URL i postavki (set ključnih parova + vrijednosti). jQuery.ajax () vraća XMLHttpRequest-objekat.

JQuery za praćenje rezultata predloženih funkcija-metode: XHR.done () - uspješno okončanje zahtjeva. XHR.fail () - rukovanje greška.

jqXHR.done () metoda yavlyatsya alternativne kontejnera uspješnog završetka AJAX-zahtjeva. Zamjenjuje metoda zastarjela jqXHR.success ().

Slično tome, korištenje na Wordpress AJAX tehnologiji. Evo, sve je implantiran sebe u sistem za upravljanje sadržajem, samo trebate koristiti predložene strukture. Dostavljene dokumentacije detaljan opis.

AJAX aplikacije ovisi u osnovi na izabranog alata, iako je za upotrebu verzija se može koristiti paralelno ili kao dodatak izabrani sistem za upravljanje sadržajem, jedna ili druga verzija jQuery. Ovo drugo je korisno raditi sami, jer su gotovo sve moderne SMS ga koristi, ali svaki na svoj način.

Klasičan primjer primjene

Jednostavan i eksponencijalne korištenje AJAX - Cart online trgovine. store stranice su uvijek puni robe, iako u stvarnosti oni ne mogu biti. Pretovara obično traje dosta vremena, ali kada posjetilac bira proizvod, on može uvijek samo odustati od njega ili promijeniti izabrani, da je sajt uvijek poželjno da brzo prikazati.

Obično se ostvaruje u obliku košare i oznake oko odabrane stavke. Bez upotrebe AJAX dinamičke promjene ovih elemenata je problematična.

AJAX-skripte koje implementiraju mehanizme za dodati / ukloniti stavke u košaricu, postao je de facto u mnogim SMS-a.

Za može biti formirana normalan prijenos podataka putem AJAX formu na konvencionalan način (za ulazak u ime i lozinku):