Ajax sunt exemple. Scripturi Ajax

Internetul oferă vizitatorului vizibilitatea fiecărei resurse localizate pe gazdă în rețea, iar browserul - acces prin protocoale de rețea, mecanisme pentru apelarea scripturilor individuale, trimiterea / primirea de informații. Setul de pagini care alcătuiesc site-ul are o rădăcină comună - un link unic (nume de domeniu, adresa unică a nodului).

Nu contează dacă resursa reacționează în mod static la o vizită sau creează dinamic un răspuns. Chiar dacă tipul și conținutul paginii depind de orice condiții, o unitate indivizibilă de comunicare între server și client (browser) este un document HTML complet cu cod, imagini, foi de stil, fișiere și alt conținut și împrejurimi necesare. Dacă ceva nu este în regulă, browserul va afișa tot ceea ce a reușit să primească, să analizeze și să execute.

Multe tehnologii promițătoare au apărut de mult timp, dar au fost uitate nemărginit sau nefolosite în mod corespunzător. Primul AJAX (exemple de utilizare a obiectului XMLHttpRequest) a apărut cu mulți ani în urmă, dar succesul și faima au apărut mult mai târziu.

Toate câteodată sau doar ceea ce aveți nevoie

În versiunea clasică a site-ului - numele, adresa IP și link-ul (toate acestea sunt sinonime, care indică același punct în spațiul de Internet). Faptul că aceasta este pagina principală a site-ului - a crezut din proprie inițiativă un "dezvoltator" modern, care nu și-a pus chiar întrebarea: de ce? De ce site-ul este pagina principală din care puteți ajunge la oricare alta? Această opțiune nu este în mod clar ideal, asta conținut specific și funcționalitate reală.

Pur și simplu, dacă o persoană are nevoie de un dentist, el merge la adresa potrivită pentru un anumit scop, și nu la bucătărie pentru intervenții chirurgicale și nu la bibliotecă pentru a consulta un terapeut. Într-un loc în care se întâmpla cineva, el va vedea, dar nu va primi în totalitate o policlinică dentară. Maximul pe care vizitatorul îl poate baza este registrul și direcția (calea exactă) către medic. Și la fața locului (la sosire) puteți schimba atât medicul, cât și destinația.

Dar aici e site-ul, de obicei, întotdeauna încărcate în muniție completă, nimic nu se schimbă la încărcare, ținând cont de timpul care a venit cineva ... Dar, chiar și în cazul în care acesta este o clinica din viața reală, prima dată când vizitați un nou client pentru a oferi suficiente informații detaliate despre , contacte și ... registru fereastră poate fi cu condiția ca vizita la site-ul a fost realizat in afara orelor, așa cum prescris de medic nu este disponibil, o numire temporară este făcută într-un birou diferit ...

Punctați în spațiul de pe Internet

Reacția clasică a resurselor spațiului de internet - ca răspuns la o solicitare de a emite o pagină a site-ului (de obicei, pagina principală) și apoi a altora, la cererea vizitatorului. Serverul de site conține, de asemenea, imagini, stiluri, scripturi de cod jаvascript, PHP etc. Nu toate fișierele PHP fac pagini, unele dintre ele pot răspunde la solicitările AJAX: primesc, procesează și trimit informații.

Nu este greu să scrii un scenariu. Dar a ajunge la punctul de control din spațiul Internet, este imposibil să se determine cine și din ce motiv adresat, care este activat este numele, adresa IP și link-ul. Orice trafic pe rețea se produce programabil, în principal prin browser, dar și prin roboți de origini și destinații diferite, prin acțiunile altor site-uri.

Scriptul care a primit controlul poate cunoaște doar sigur: timpul vizitei, prin care browserul a venit vizitatorul, din care legătură, din care adresa IP și prezența cookie-urilor. Numai acesta din urmă poate oferi informații despre modul de formare a paginii principale, dar numai dacă acest vizitator a fost deja aici. În toate celelalte situații este posibil să se genereze numai răspunsul general al serverului. Exemplele AJAX care sunt ușor de găsit pe Internet trebuie utilizate cu atenție. Erori în operarea (utilizarea) obiectului XMLHttpRequest sunt greu de urmărit.

Răspuns comun și dialog privat

Răspunsul general al serverului este o pagină normală numită pagina principală a ceea ce se numește index și site-ul începe cu acesta, adică link-urile către alte pagini accesibile diferă de acesta. Cu toate acestea, dacă vizitatorul cunoaște numele acestor alte pagini, în înțelegerea sa nu va fi mai puțin importantă decât cea desemnată de dezvoltator. Deci, seamănă cu un model clasic, totul dintr-o dată: un design general și o funcționalitate, care vizează toți vizitatorii.

Dialogul privat este o continuare a sesiunii anterioare a vizitatorului. Site-ul știe deja ce face el, ceea ce el a fost interesat, ce pagini au fost văzute și le-a pus în memorie, a scris ceva în cookie-urile de browser.

Există două solicitări de bază pentru server pentru descărcarea site-ului și lucrul cu acesta: POST și GET. Rezultatul interogării este întreaga pagină. Pe pagina primită, vizitatorul poate activa anumite evenimente configurate pentru acțiuni asupra anumitor elemente ale paginii.

Evenimente element element pagină

Elementul de pagină poate fi un buton pentru găsirea informațiilor, adică - luați conținutul câmpului de text și aflați ce a scris vizitatorul în el. Un eveniment poate apărea pe un element de meniu, o imagine, o casetă de text. În orice caz, va fi lansată o funcție jаvascript care poate executa cererea AJAX după cum urmează:

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

Funcția InitXML () este definită după cum urmează (variabila var scXHR trebuie descrisă în afara funcției):

funcția InitXML (scURL) {

scXHR = null-

dacă (window.XMLHttpRequest)
{încercați
{scXHR = noul XMLHttpRequest () -
} captura (e) {}
} altceva
dacă (window.ActiveXObject)
{încercați
{scXHR = noul ActiveXObject ("Msxml2.XMLHTTP") -
} captură (e)
{încercați
{scXHR = noul ActiveXObject ("Microsoft.XMLHTTP") -
} captura (e) {}
}
}
dacă (scXHR)
{
scXHR.open (`GET`, scURL) -
scXHR.onreadystatechange = WaitReplySC-
scXHR.send (null) -
} -
}

Această funcție are o adresă URL și inițiază o cerere de ea. Răspuns asincronă va veni imediat ce va îndeplini script-ul specificat în URL-ul (în acest caz - scSrvPhpWord.php, situat în ../Mphp/ dosar în raport cu rădăcina site-ului), și va începe () funcție, WaitReplySC care se duce la intrarea XML server-răspuns, inclusiv titlul și conținutul.

Răspunsul serverului

Serverul în sine este un script PHP - un program care începe cu instalarea condițiilor esențiale, descărcarea facilităților necesare, pregătirea preliminară, care depinde de obiectivele dezvoltatorului:

namespace PhpOffice PhpWord-

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

ignore_user_abort (true) -
set_time_limit (12) -

utilizați PhpOffice PhpWord MphpObj scDocuments-

requ_once `PhpOffice / PhpWord / Autoloader.php`-
PhpOffice PhpWord Autoloader :: registru ();

Reprezentat începutul unei mărci care indică erori, interzice oprirea unui script atunci când utilizatorul se conectează și se stabilește o limită de timp pentru efectuarea buclei de caz - 12 secunde. Apoi, biblioteca PhpOffice PhpWord este conectată pentru a lucra cu documente * .docx.

Așa cum sa arătat mai sus AJAX-provocare ( `... cTask = GoPage` + `cOwnerCode =` + cOwnerCode + `cSessionCode =` + cSessionCode + `cActiveItem =` + cActiveItem) - acest GET-patru variabile, care nu pot fi ar trebui să verifice disponibilitatea lor reală:

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

După efectuarea acțiunilor pregătitoare, scenariul ia o decizie:

($ cTask) {

caz "GoPage": // (acesta este un apel atunci când pagina este inițial încărcată sau actualizată)

$ cOwnerCode = `cOwner`-
$ cSessionCode = `cSession`-
$ cContents = `cContents`-
$ cStatus = `cStatus`-
$ cHtml = iconv ("UTF-8", "CP1251", "codificare element") -
$ cActiveItem = iconv (`UTF-8`, `CP1251`, `valori variabile`);

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

pauză;

}

și partea finală a scenariului:

antet ("Content-Type: text / xml-accept-charset = utf-8") -
antet ("Cache-control: no-cache") -
echo "$ cReply = iconv (`CP1251`, `UTF-8`, $ cReply) - // conversie de la `CP1251` la `UTF-8`
echo $ cReply;

Primirea unui răspuns de la client

Pe pagina descărcată în browser, sa stabilit că odată ce serverul a pregătit un răspuns, acesta va fi procesat de funcția WaitReplySC:

funcția WaitReplySC () {

încercați {

dacă (scXHR.readyState == 4) {
dacă (scXHR.status == 200) {// gestionați răspunsul

var TestReply = scXHR.responseText-

dacă ((TestReply.indexOf (`Parse error`)> 0) ||
(TestReply.indexOf (`Observație`)> 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] - // răspunsul HTML al serverului
var cVarValues ​​= aData [6] - // valori ale variabilelor pentru formulare

comutator (cCmd) {

caz "GoPage":

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

BREAK-
}

} altceva {
document.getElementById (`scAreaStatus`) innerHTML = "Eroare !!!"
}
}
} captura (e) {}

}

Astfel, folosind aceste exemple AJAX, când încărcăm pagina în browser, obținem (în elementul scTestLine):

Răspuns = [cOwner, cSession, cContents, cStatus, codificare element, valori variabile]

Despre codul trimis, jQuery și WordPress

Pagina din browser și textul scriptului sunt scrise în codare UTF-8, prin urmare funcția iconv () este folosită pentru a converti litere rusești. În caz contrar, scheletul codului prezentat este foarte simplu și poate fi ușor repetat pentru un anumit scop.

Doar prelucrarea răspunsului la server în funcția WaitReplySC () și codul propriu script care formează acest răspuns pot fi modificate. Apelurile la funcția InitXML (pentru un scURL specific și datele corespunzătoare) sunt plasate în dispozitivele de manipulare a evenimentelor pe elementele paginii și determină încărcarea semantică a acestor elemente.

Exemplele prezentate de AJAX sunt axate pe utilizarea "manuală" a tehnologiei.

În diferitele sisteme de management al site-ului (SMS), oportunitățile descrise sunt prezentate în moduri diferite, de obicei în stilul uneia sau altei specificități. De exemplu, posibilitățile de apel jQuery AJAX sunt realizate jQuery.ajax () funcționează în fie un nivel superior: jQuery.get () și jQuery.post (). Parametrul este trecut la url și setări (un set de perechi cheie-valoare). jQuery.ajax () returnează un obiect XMLHttpRequest.

Pentru a urmări rezultatul, jQuery oferă metode funcționale: XHR.done () - finalizarea cu succes a interogării. XHR.fail () - tratarea erorilor.

Metoda jqXHR.done () este o alternativă la handler pentru finalizarea cu succes a cererii AJAX. Înlocuiește metoda depășită jqXHR.success ().

În mod similar, utilizarea tehnologiei AJAX pe WordPress. Aici totul este deja implantat în sistemul de management al site-ului în sine, trebuie doar să utilizați modelele propuse. Documentației i se oferă o descriere detaliată.

AJAX Aplicarea depinde în mod esențial de instrumentele alese, deși versiunea manuală poate fi utilizată în paralel sau în plus față de sistemul de management al conținutului selectat, una sau alta versiune de jQuery. Acesta din urmă este util pentru a lucra în mod independent, deoarece aproape toate SMS-urile moderne îl folosesc, dar fiecare în felul său.

Un exemplu clasic de aplicare

O aplicație simplă și exemplară a AJAX este un coș de cumpărături într-un magazin online. Paginile magazinului sunt întotdeauna umplute cu bunuri, deși, în realitate, ele nu pot fi. Reîncărcarea de obicei, durează mult timp, dar ca vizitator selectează un produs, el poate da întotdeauna doar pe el sau schimba cel ales, că site-ul este întotdeauna de dorit pentru a afișa rapid.

De obicei, acest lucru se realizează sub forma unui coș și marchează în apropierea mărfurilor selectate. Fără utilizarea AJAX, o schimbare dinamică a acestor elemente este problematică.

Scripturile AJAX care pun în aplicare mecanismele de adăugare / scoatere a mărfurilor în coș au devenit de facto în multe SMS-uri.

Pentru transferul normal de date prin AJAX, formularul poate fi executat în mod obișnuit (pentru introducerea unui nume și a unei parole):

Aici este manipulatorul:

funcția scfWelcomeGo () {

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

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

}

trimite pe server să verifice numele și parola introduse de vizitator. Script-ul verifică informațiile primite în tabelul de utilizator, și trimite înapoi un răspuns pe baza cărora script-ul relevant afișează un mesaj pe pagina (efectuează o acțiune) pentru utilizatorii înregistrați, sau rapoarte pe care nici un astfel de utilizator, și trebuie să fie înregistrate.