Ajax - exempel. Ajax skript

Internet ger besökaren synligheten för varje resurs som är värd i ett nätverk, och browser - Tillgång via nätverksprotokoll, samtals mekanismer för enskilda skript, sändning / mottagning av information. Uppsättning sidor som utgör platsen, har en gemensam rot - en unik länk (domännamn, en unik nodadress).

Oavsett resursen svarar att besöka statiskt eller dynamiskt genererar ett svar. Även om formen och innehållet på sidorna beror på några villkor, odelbar enhet av kommunikationsserver och klienten (webbläsaren) är den färdiga HTML-kodade dokument, bilder, formatmallar och andra filer som krävs innehåll och miljö. Om något är fel, visar webbläsaren allt som "lyckats" för att få tolka och köra.

Många lovande teknik har vuxit fram under lång tid, men har blivit orättvist bortglömda eller inte har använts på rätt sätt. Första AJAX (exempel använder XMLHttpRequest objektet) verkade för många år sedan, men framgång och berömmelse kom långt senare.

Alla eller bara det du behöver

I den klassiska versionen av webbplatsen - namn, IP-adress och en länk (alla synonymer designerar samma punkt i Internet rymden). Vad ligger bakom denna huvudsidan - tänkte: på eget initiativ en modern "designer", som inte ens fråga varför det är så? Varför platsen är huvudsidan som du kan komma till någon annan? Detta alternativ - uppenbarligen inte idealiskt, är det det specifika innehållet och den faktiska funktionalitet.

Enkelt uttryckt, om en person behöver en tandläkare, det är den rätta adressen för ett specifikt ändamål, snarare än till köket för operation och inte till biblioteket för samråd terapeut. På den plats där detta visade sig, ser han, men inte får en tandklinik i sin helhet. Det bästa som kan förvänta sig en besökare - registret och riktningen (den exakta sökvägen) till läkaren. Och på plats (vid ankomst) kan förändras som läkare, och destination.

Men här är platsen brukar alltid laddad med full ammunition, ingenting förändras på laddning, med hänsyn till den tid som någon har kommit ... Men även i de fall där det är en verklig klinik, första gången du besöker en ny kund för att ge tillräckligt med information sida , kontakter och ... fönstret registret kan under förutsättning att besök på plats gjordes under off-timmar, som ordinerats av läkare inte är tillgänglig, en tillfällig anställning görs på ett annat kontor ...

Punkt i Internet rymden

Den klassiska svaret av resursen av Internet rymden - som svar på en begäran om att utfärda en webbplats sida (vanligtvis hem), och sedan den andra, på begäran av besökaren. Site Server innehåller också bilder, stilar, JavaScript-kod skript, PHP, etc. Inte alla PHP-filer gör sidor kan en del av dem svara på AJAX förfrågningar :. ta emot, bearbeta och skicka information.

Skriv ett manus på ett kick. Men att få till den grad av kontroll på Internet rymden, är det omöjligt att avgöra vem och varför upp, som aktiveras är namn, IP-adress och länken. Varje rörelse i nätverket sker i mjukvara, i huvudsak via en webbläsare, men också genom robotar av olika ursprung och destination genom andra platser av åtgärder.

Script, få kontroll, kan exakt vet bara: ett besök genom vilken webbläsare besökaren kom, med en referens från vilken IP-adresser, och förekomsten av cookies. Endast de senare kan ge information för att bilda huvudsidan, men bara om besökaren redan har varit här. I alla andra fall är det möjligt att generera bara den allmänna svar från servern. AJAX-exempel som är lätta att hitta på Internet, bör användas försiktigt. Fel i (användning) av XMLHttpRequest objektet för att spåra är inte lätt.

Den övergripande respons och den privata dialog

Den övergripande svar från servern - en gemensam sida, kallad rektor för vad som kallas index, och det börjar med en webbplats som står i strid med dess kopplingar till andra sidor tillgängliga. Men om besökaren vet namnen på de andra sidor, de är i hans förståelse blir inte mindre viktigt än det utsedda utvecklare. Här är den klassiska modellen, allt på en gång: den övergripande design och funktionalitet som fokuserar på alla besökare.

Privat dialog - en fortsättning på den tidigare session besökaren. Sajten redan vet vad han gjorde, att han var intresserad av vad som visade sidan och lägga den i hans minne, skrev något i cookies.

Det brukade två grundläggande begäran till servern för att ladda ner sajten och arbeta med honom: POST och GET. frågeresultatet är en hel sida. På den sida som kan besökaren aktivera dessa eller andra händelser som är konfigurerade på effekten av vissa sidelement.

Händelser sidelement

Sidelement kan vara nyckeln hämtning, mening - för att ta innehållet i ett textfält och upptäcker att det skrev en besökare. Händelsen kan inträffa på ett menyalternativ, bild, textruta. I vilket fall som helst kommer JavaScript-funktionen köras, som kan utföra AJAX-förfrågan enligt följande:

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

Sålunda InitXML funktion () definieras enligt följande (variabeln var scXHR att beskrivas utanför funktionen):

funktion InitXML (scURL) {

scXHR = null;

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

Denna funktion tar en webbadress och initierar en begäran om det. Asynkron svar kommer så snart som kommer att uppfylla skriptet som anges i URL (i detta fall - scSrvPhpWord.php, som ligger i ../Mphp/ mapp i förhållande till roten på plats), och kommer att börja WaitReplySC () funktion, som går till ingången på servern XML-svar inklusive titel och innehåll.

serversvar

Egentligen servern är en PHP-skript - ett program som börjar med installationen av de nödvändiga villkoren, ladda ner de nödvändiga faciliteter, förbehandlings, som beror på utvecklare syften:

namespace PhpOffice \ PhpWord;

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

ignore_user_abort (true);
set_time_limit (12);

Använd PhpOffice \ PhpWord \ MphpObj \ scDocuments;

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

Representerade i början av ett märke som anger eventuella fel, förbjudet att stoppa ett skript när användaren loggar ut och sätter en tidsgräns för att utföra fall loop - 12 sekunder. Nästa länk bibliotek PhpOffice \ PhpWord för dokument * .docx.

Som framgått ovan AJAX-utmaning ( '... cTask = GåSida' + '& cOwnerCode =' + cOwnerCode + '& cSessionCode =' + cSessionCode + '& cActiveItem =' + cActiveItem) - de fyra GET-variabler som kanske inte är bör kontrollera deras faktiska tillgängligheten:

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

Efter att ha utfört den förberedande åtgärden script beslutar:

omkopplare ($ cTask) {

fall 'GåSida': // (detta är en utmaning under den inledande nedladdningen eller uppdatera sidan)

$ COwnerCode = 'cOwner';
$ CSessionCode = 'cSession';
$ CContents = 'cContents';
$ CStatus = 'cStatus';
$ CHtml = iconv ( 'UTF-8', 'CP1251', 'kodande elementet ");
$ CActiveItem = iconv ( 'UTF-8', 'CP1251', 'variabler');

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

break;

}

och den sista delen av skriptet:

header ( "Content-Type: text / xml; acceptera-charset = utf-8");
header ( "Cache-Control: no-cache");
echo '';
$ CReply = iconv ( 'CP1251', 'UTF-8', $ cReply); // omvandling från 'CP1251' i 'UTF-8'
echo $ cReply;

Att få kunden svar

På sidan som laddas i webbläsaren, konstaterades det att så snart som servern kommer att förbereda ett svar kommer det att behandlas funktion WaitReplySC:

fungera WaitReplySC () {

try {

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

var TestReply = scXHR.responseText;

if ((TestReply.indexOf ( 'Tolkningsfel') 0>) ||
(TestReply.indexOf ( 'Observera')> 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-svar
Var cVarValues = ADATA [6]; // variabler for Forms

omkopplare (CCMD) {

fall 'GåSida':

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

break;
}

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

}

Sålunda, med användning av de AJAX-examples, att sidan laddas i webbläsaren erhålla (i scTestLine elementet):

Svara = [cOwner, cSession, cContents, cStatus, element som kodar för variabla värden]

På representation av kod, jQuery och Wordpress

Page i webbläsaren och manuset text skriven i UTF-8, för användning iconv () för att konvertera ryska tecken. Resten av skelettet som representeras av koden är mycket enkel och kan lätt upprepas för något särskilt ändamål.

Med reservation för ändringar endast i behandlingen serversvar WaitReplySC () och den verkliga skriptkod som genererar svaret. Funktionsanrop InitXML (för en speciell scURL och dess motsvarande data) placeras i händelsehanterare på de delar av sidan och definiera betydelsen av dessa element.

Presenterade exempel på AJAX-orienterade "manual" användning av teknik.

I olika content management system (SMS) funktioner beskrivs på olika sätt, som regel, i stil med en viss specificitet. Till exempel, är jQuery AJAX samtals möjligheter realiseras jQuery.ajax () fungerar i antingen en högre nivå: jQuery.get () och jQuery.post (). Parametern överförs url och inställningar (uppsättning nyckelpar + värde). jQuery.ajax () returnerar XMLHttpRequest-objektet.

JQuery att spåra resultaten av de föreslagna funktions metoder: XHR.done () - det framgångsrika slutförandet av begäran. XHR.fail () - felhantering.

jqXHR.done () -metoden yavlyatsya alternativ hanterare framgångsrikt slutförande av AJAX-begäran. Ersätter föråldrade jqXHR.success () metoden.

På samma sätt användningen av på Wordpress AJAX-teknik. Här har allt implanterat sig i content management system, behöver du bara använda den föreslagna strukturen. Dokumenten tillhandahålls en detaljerad beskrivning.

AJAX Application beror i huvudsak på de valda verktygen, även om den manuella versionen kan användas parallellt eller i tillägg till det valda content management system, en eller annan version av jQuery. Den senare är användbar för att arbeta på egen hand, eftersom nästan alla moderna SMS använda det, men var och en på sitt eget sätt.

Ett klassiskt exempel på tillämpning

Enkelt och exponentiell användning av AJAX - Cart onlinebutik. lagra sidor alltid fylld med varor, men i själva verket inte kan vara. Omlastning vanligtvis tar lång tid, men när en besökare väljer en produkt, kan han alltid bara ge upp på honom eller ändra utvalde, att platsen är alltid önskvärt att visa snabbt.

Vanligtvis realiseras i form av korgar och märken runt markerade objekt. Utan användning av AJAX dynamiska förändringar till dessa element är problematisk.

AJAX-skript som implementerar mekanismer för att lägga till / ta bort objekt till din vagn, blev de facto i många SMS.

För normal dataöverföring via AJAX formen kan bildas på konventionellt sätt (för att ange namn och lösenord):