Ajax - eksempler. Ajax skript

Internett gir den besøkende synligheten av hver ressurs som er vert i et nettverk, og nettleser - tilgang via nettverksprotokoller, anrops mekanismer for individuelle skript, sending / mottak av informasjon. Sett med sider som utgjør området, har en felles rot - en unik kobling (domenenavn, et unikt nodeadresse).

Uansett ressursen reagerer å besøke statisk eller dynamisk genererer et svar. Selv om form og innhold på sidene avhengig av noen forhold, udelelig enhet av kommunikasjon serveren og klienten (nettleseren) er det ferdige HTML-kodet dokument, bilder, stilark og andre filer nødvendig innhold og miljø. Hvis noe er galt, viser nettleseren er alt som er "klart" for å få analysere og utføre.

Mange lovende teknologiene har dukket opp i lang tid, men har blitt urettferdig glemt eller ikke har blitt brukt riktig. Først AJAX (eksempler bruke XMLHttpRequest objektet) dukket opp for mange år siden, men suksess og berømmelse kom mye senere.

Alt eller bare det du trenger

I den klassiske versjonen av nettstedet - navnet, IP-adresse og en link (alle synonymer designa samme punkt i Internet plass). Hva ligger bak denne hovedsiden - tenkte: på eget initiativ en moderne "designer", som ikke engang spørre hvorfor det er slik? Hvorfor nettstedet er hovedsiden som du kan få til noen andre? Dette alternativet - helt klart ikke ideelt, det er det konkrete innholdet og selve funksjonaliteten.

Enkelt sagt, hvis en person trenger en tannlege, er det riktig adresse for et bestemt formål, snarere enn til kjøkkenet for kirurgi og ikke til biblioteket for konsultasjon terapeut. På stedet hvor dette viste seg, ser han, men ikke får en tannklinikk i sin helhet. Det beste som kan forvente en besøkende - registeret og retningen (den nøyaktige banen) til legen. Og på stedet (ved ankomst) kan endre seg som lege, og destinasjon.

Men her er stedet som regel alltid lastet full ammunisjon, ingenting endres ved lasting, tar hensyn til den tiden som noen har kommet ... Men selv i tilfeller hvor det er en ekte liv klinikk, første gang du besøker en ny klient for å gi nok informasjon siden , kontakter og ... vinduet registret kan gis at besøket til området ble gjort i løpet av off-timer, som foreskrevet av legen ikke er tilgjengelig, en midlertidig avtale er gjort i et annet kontor ...

Punkt i Internet plass

Den klassiske svaret av ressursen av Internett plass - som svar på en forespørsel om å utstede et nettsted (vanligvis hjemme), og deretter den andre, på anmodning fra den besøkende. Site Server inneholder også bilder, stiler, Javascript-kode skript, PHP, etc. Ikke alle PHP-filer gjør sider, noen av dem kan svare på AJAX forespørsler :. å motta, behandle og sende informasjon.

Skrive et manus på et blunk. Men å komme til det punktet av kontroll i Internet plass, er det umulig å avgjøre hvem og hvorfor adressert, som aktiveres er navnet, IP-adresse og link. Enhver bevegelse på nettverket foregår i programvare, hovedsakelig gjennom en nettleser, men også gjennom roboter av ulik opprinnelse og destinasjon gjennom andre områder av handling.

Script, få kontroll, kan nøyaktig vet bare: et besøk gjennom hvilken nettleser den besøkende kom, med en henvisning fra hvilke IP-adresser, og tilstedeværelsen av cookies. Kun sistnevnte kan gi informasjon som danner hovedsiden, men bare hvis den besøkende allerede har vært her. I alle andre tilfeller er det mulig å generere bare den generelle svar fra serveren. AJAX-eksempler som er lette å finne på internett, bør brukes med forsiktighet. Feil i (bruk) av XMLHttpRequest objektet å spore er ikke lett.

Den generelle responsen og private dialog

Den generelle responsen fra serveren - en felles side, referert til som rektor ved det som kalles indeksen, og det begynner med et nettsted som er på kant med sine lenker til andre sider som er tilgjengelige. Men hvis de besøkende vet navnene på de andre sidene, de er i hans forståelse vil være ikke mindre viktig enn den angitte utbygger. Her er den klassiske modellen, alt på en gang: den generelle design og funksjonalitet som fokuserer på alle besøkende.

Private dialog - en videreføring av den forrige sesjonen av besøkende. Nettstedet vet allerede hva han gjorde, at han var interessert i hva som ble vist side og sette den i hans minne, skrev noe i informasjonskapsler.

Det brukes to grunnleggende forespørsel til serveren for å laste ned nettstedet og jobbe med ham: POST og GET. spørringen resultatet er en hel side. På siden som vises, kan den besøkende aktivere disse eller andre hendelser som er konfigurert på virkningen av visse sideelementer.

Hendelser sideelementer

side element kan være nøkkelen til å finne informasjon, mening - for å ta innholdet i et tekstfelt og finner ut at det skrev en besøkende. Arrangementet kan oppstå på et menyelement, bilde, tekstboks. I alle fall vil Javascript-funksjonen kjøres, som kan utføre AJAX-forespørsel som følger:

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

Således InitXML () er definert som følger (variabel Var scXHR beskrives utenfor funksjonen):

funksjon InitXML (scURL) {

scXHR = null;

if (window.XMLHttpRequest)
{prøve
{ScXHR = new XMLHttpRequest ();
} Catch (e) {}
} else
if (window.ActiveXObject)
{prøve
{ScXHR = new ActiveXObject ( 'Msxml2.XMLHTTP');
} Catch (e)
{prøve
{ScXHR = new ActiveXObject ( 'Microsoft.XMLHTTP');
} Catch (e) {}
}
}
if (scXHR)
{
scXHR.open ( 'får', scURL);
scXHR.onreadystatechange = WaitReplySC;
scXHR.send (null);
};
}

Denne funksjonen tar en nettadresse og initierer en forespørsel om det. Asynkron svaret vil komme så snart som vil oppfylle skriptet oppgitt i URL (i dette tilfellet - scSrvPhpWord.php, som ligger i ../Mphp/ mappen i forhold til roten av nettstedet), og vil begynne WaitReplySC () -funksjonen, som går til inngangen på serveren XML-respons, inkludert tittel og innhold.

server respons

Egentlig serveren er et PHP-skript - et program som begynner med installasjonen av de grunnleggende forholdene, laste ned de nødvendige fasiliteter, forbehandling, som avhenger av utbygger formål:

navne PhpOffice \ PhpWord;

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

ignore_user_abort (true);
set_time_limit (12);

bruke PhpOffice \ PhpWord \ MphpObj \ scDocuments;

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

Representert i begynnelsen av et merke som indikerer eventuelle feil, forbyr stoppe et skript når brukeren logger seg av og setter en frist på å utføre saken sløyfe - 12 sekunder. Neste link library PhpOffice \ PhpWord for dokumenter * .docx.

Som vist ovenfor Ajax-utfordring ( '... cTask = GoPage' + '& cOwnerCode =' + cOwnerCode + '& cSessionCode =' + cSessionCode + '& cActiveItem =' + cActiveItem) - de fire GET-variabler, som ikke nødvendigvis er bør sjekke deres faktiske tilgjengelighet:

$ CTask = (isset ($ _ GET [ 'cTask']))? $ _GET [ 'cTask']: '';
$ COwnerCode = (isset ($ _ GET [ 'cOwnerCode']))? $ _GET [ 'cOwnerCode']: '';
$ CSessionCode = (isset ($ _ GET [ 'cSessionCode']))? $ _GET [ 'cSessionCode']: '';
$ CActiveItem = (isset ($ _ GET [ 'cActiveItem']))? $ _GET [ 'cActiveItem']: '';

Etter å ha utført forberedende action script bestemmer:

bryter ($ cTask) {

case 'GoPage': // (dette er en utfordring i den første nedlastingen eller oppdatere siden)

$ COwnerCode = 'cOwner';
$ CSessionCode = 'cSession';
$ CContents = 'cContents';
$ CStatus = 'cStatus';
$ Chtml = iconv ( 'UTF-8', 'CP1251', 'kodingselement ");
$ CActiveItem = iconv ( 'UTF-8', 'CP1251', 'variable');

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

break;

}

og den siste delen av skriptet:

header ( "Content-Type: text / xml, akseptere-charset = utf-8");
header ( "Bufferkontroll: no-buffer");
echo '';
$ CReply = iconv ( 'CP1251', 'UTF-8', $ cReply); // konvertering fra 'CP1251' in 'UTF-8'
echo $ cReply;

Får kunderespons

På siden som lastes i nettleseren, ble det funnet at så snart serveren vil utarbeide et svar, vil det bli behandlet funksjon WaitReplySC:

funksjon WaitReplySC () {

try {

if (scXHR.readyState == 4) {
if (scXHR.status == 200) {// respons behandlingen

Var TestReply = scXHR.responseText;

if ((TestReply.indexOf (analysefeil)> 0) ||
(TestReply.indexOf ( 'Notice')> 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-respons
Var cVarValues = Adata [6]; // variabler for Forms

bryter (cCmd) {

case 'GoPage':

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

break;
}

} Else {
. Document.getElementById ( 'scAreaStatus') innerhtml = "Feil !!!";
}
}
} Catch (e) {}

}

Således, ved hjelp av Ajax-eksemplene, lastes siden inn i nett oppnå (i scTestLine element):

Svar = [cOwner, cSession, cContents, cStatus, elementer som koder for variable verdier]

På representasjon av koden, jQuery og WordPress

Siden i nettleseren, og manuset tekst skrevet i UTF-8, for bruk iconv () -funksjonen til å konvertere russiske tegn. Resten av skjelettet representert ved kode er svært enkel og lett kan gjentas for et bestemt formål.

Endres bare i behandlingen server respons WaitReplySC () funksjon og selve skriptkode som genererer respons. Anrop InitXML funksjon (for en bestemt scURL og relevante data til det) plasseres i hendelseshåndterere på sideelementer og definere meningen av disse elementer.

Presentert eksempler på AJAX-orientert "manuell" bruk av teknologi.

I ulike content management system (SMS) evner er beskrevet på forskjellige måter, som regel, i stil med en bestemt spesifisitet. For eksempel er jQuery Ajax anropsmuligheter realisert jQuery.ajax () funksjoner i enten et høyere nivå: jQuery.get () og jQuery.post (). Parameteren blir overført url og innstillinger (sett viktige + verdi-par). jQuery.ajax () returnerer XMLHttpRequest-objekt.

JQuery å spore resultatene av den foreslåtte funksjons-metoder: XHR.done () - vellykket fullføring av forespørselen. XHR.fail () - feilhåndtering.

jqXHR.done () -metoden yavlyatsya alternativ håndterer vellykket fullføring av Ajax-anmodning. Erstatter foreldet jqXHR.success () -metoden.

Tilsvarende er anvendelsen av på Wordpress Ajax-teknologi. Her har alt implantert seg i content management system, trenger du bare å bruke den foreslåtte struktur. Dokumentene gitt en detaljert beskrivelse.

Ajax søknad hovedsakelig avhenger av de valgte verktøy, selv om den manuelle versjonen kan anvendes i parallell eller i tillegg til det valgte innholdshåndteringssystem, en eller annen versjon av jQuery. Sistnevnte er nyttig å jobbe på egenhånd, fordi nesten alle moderne SMS bruker det, men hver på sin egen måte.

Et klassisk eksempel på søknad

Enkel og eksponentiell bruk av AJAX - Cart nettbutikk. lagre sider er alltid fylt med varer, men i virkeligheten er de kanskje ikke. Omlasting vanligvis tar mye tid, men når en besøkende velger et produkt, kan han alltid bare gi ham opp eller endre den utvalgte, at området er alltid ønskelig å vise raskt.

Vanligvis er det realisert i form av kurver og merker rundt utvalgte elementer. Uten bruk av Ajax dynamiske forandringer til disse elementene er problematisk.

AJAX-skript som implementerer mekanismer for å legge til / fjerne elementer i handlekurven, ble de facto i mange SMS.

For normal dataoverføring via Ajax form, kan utformes på konvensjonell måte (for å skrive inn og passord):