Ajax - voorbeelde. Ajax skrifte

Die Internet bied die besoeker die sigbaarheid van elke hulpbron wat bedryf word in 'n netwerk, en die leser - toegang via netwerk protokolle, oproep meganismes van individuele skrifte, oordrag / ontvangs van inligting. Stel van bladsye waaruit die webwerf, het 'n gemeenskaplike wortel - 'n unieke skakel (domein naam, 'n unieke node adres).

Dit maak nie saak die hulpbron reageer op staties of dinamies besoek genereer 'n reaksie. Selfs al is die vorm en inhoud van die bladsye is afhanklik van enige voorwaardes, onverdeelbare eenheid van kommunikasie bediener en die kliënt (browser) is die finale-HTML gekodeer dokument, beelde, style sheets, en ander lêers wat nodig inhoud en omgewing. As daar iets is verkeerd, die leser gee alles wat "bestuur" te kry ontleed en uit te voer.

Baie belowende tegnologie na vore gekom het vir 'n lang tyd, maar is onregverdig vergeet of nie behoorlik gebruik. Eerste AJAX (voorbeelde gebruik die XMLHttpRequest voorwerp) verskyn baie jare gelede, maar die sukses en roem het baie later.

Alle of net wat jy nodig het

In die klassieke weergawe van die werf - die naam, die IP-adres en 'n skakel (al sinonieme aanwysing van dieselfde punt in die Internet ruimte). Wat lê agter hierdie hoofblad - het gedink: op eie inisiatief 'n moderne "ontwerper", wat nie eens vra waarom dit so? Hoekom die webwerf is die hoofblad waaruit jy aan enige ander kan kry? Hierdie opsie - duidelik nie ideaal, dit is die spesifieke inhoud en die werklike funksie.

Eenvoudig gestel, indien 'n persoon se behoeftes 'n tandarts, dit is die regte adres vir 'n spesifieke doel, eerder as om die kombuis vir 'n operasie en nie aan die biblioteek vir konsultasie terapeut. Op die plek waar hierdie een blyk, sien hy, maar nie 'n tandheelkundige kliniek ontvang ten volle. Die beste wat 'n besoeker kan verwag - die register en die rigting (die presiese pad) na die dokter. En op die plek (by aankoms) kan verander as 'n dokter, en bestemming.

Maar hier is die webwerf gewoonlik altyd in volle ammunisie gelaai, verander niks aan die laai, met inagneming van die tyd dat iemand gekom het ... maar selfs in die geval waar dit 'n werklike lewe kliniek, die eerste keer dat jy 'n nuwe kliënt te besoek om genoeg inligting bladsy gee , kontakte, en ... die venster register kan dien verstande dat die besoek aan die terrein gedoen is tydens off-ure, soos voorgeskryf deur die dokter is nie beskikbaar, 'n tydelike aanstelling gedoen in 'n ander kantoor ...

Punt in die Internet ruimte

Die klassieke reaksie van die bron van die Internet ruimte - in reaksie op 'n versoek om 'n webwerf bladsy (gewoonlik huis), en dan die ander uit te reik, op versoek van die besoeker. Site Server bevat ook beelde, style, JavaScript-kode skrifte, PHP, ens Nie alle PHP-lêers te doen bladsye, sommige van hulle kan reageer op AJAX versoeke :. te ontvang, te verwerk en stuur inligting.

Skryf 'n script 'n sprong. Maar om tot op die punt van beheer in die internet ruimte, is dit onmoontlik om te bepaal wie en om watter rede aangespreek, wat geaktiveer is die naam, die IP-adres en 'n skakel. Enige beweging op die netwerk vind plaas in sagteware, hoofsaaklik deur middel van 'n leser nie, maar ook deur middel van die robots van verskillende herkoms en bestemming deur ander terreine van aksie.

Script, kry beheer, kan akkuraat net weet: 'n besoek deur die leser wat die besoeker het, met 'n verwysing waaruit IP-adresse, en die teenwoordigheid van koekies. Slegs laasgenoemde kan inligting verskaf oor die hoofblad vorm, maar slegs indien die besoeker reeds hier was. In alle ander gevalle is dit moontlik om net die algemene reaksie van die bediener te genereer. AJAX-voorbeelde wat maklik is om te vind op die internet is, moet versigtig gebruik word. Foute in die (gebruik) van die XMLHttpRequest voorwerp op te spoor is nie maklik nie.

Die algehele reaksie en die private dialoog

Die algehele reaksie van die bediener - 'n gemeenskaplike bladsy, waarna verwys word as die skoolhoof van wat die indeks genoem, en dit begin met 'n webwerf wat is in stryd met sy skakels na die ander bladsye beskikbaar. Maar, as die besoeker weet die name van die ander bladsye, hulle is in sy verstand sal nie minder belangrik as die een aangewys ontwikkelaar wees. Hier is die klassieke model, alles op een slag: die algehele ontwerp en funksies wat fokus op alle besoekers.

Private dialoog - 'n voortsetting van die vorige sitting van die besoeker. Die webwerf weet reeds wat hy gedoen het, dat hy belangstel in wat beskou bladsy en sit dit in sy geheue, het iets in die leser koekies.

Dit gebruik twee basiese versoek om die bediener op die blad af te laai en saam met hom: POST en GET. die soektog resultaat is 'n hele bladsy. Op die volgende bladsy, kan die besoeker hierdie of ander gebeure wat ingestel op die optrede van sekere bladsy elemente te aktiveer.

Gebeure bladsy elemente

bladsy element kan sleutel wees tot inligting, betekenis te vind - om die inhoud van 'n teks veld te neem en uit te vind wat dit geskryf het 'n besoeker. Die geleentheid kan voorkom op 'n menu-item, beeld, teks boks. In elk geval, sal JavaScript-funksie uitgevoer word, wat AJAX-aanvraag kan verrig soos volg:

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

So InitXML () funksie word soos volg gedefinieer (veranderlike var scXHR beskryf word buite die funksie):

funksie InitXML (scURL) {

scXHR = null;

indien (window.XMLHttpRequest)
{probeer
{ScXHR = nuwe XMLHttpRequest ();
} Vangs (e) {}
} anders
indien (window.ActiveXObject)
{probeer
{ScXHR = nuwe ActiveXObject ( 'Msxml2.XMLHTTP');
} Vangs (e)
{probeer
{ScXHR = nuwe ActiveXObject ( 'Microsoft.XMLHTTP');
} Vangs (e) {}
}
}
indien (scXHR)
{
scXHR.open ( 'kry, scURL);
scXHR.onreadystatechange = WaitReplySC;
scXHR.send (nul);
};
}

Hierdie funksie neem 'n URL en inisieer 'n versoek dat hierdie bladsy. Asynchrone antwoord sal so gou kom as die skrip soos gespesifiseer in die URL sal vervul (in hierdie geval - scSrvPhpWord.php, geleë in ../Mphp/ gids met betrekking tot die wortel van die terrein), en sal begin WaitReplySC () funksie, wat gaan na die insette van die bediener XML-reaksie, insluitend die titel en inhoud.

bediener antwoord

Eintlik die bediener is 'n PHP-script - 'n program wat begin met die installasie van die noodsaaklike voorwaardes, laai die nodige fasiliteite, pre-behandeling, wat afhanklik is van die ontwikkelaar doeleindes:

naamruimte PhpOffice \ PhpWord;

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

ignore_user_abort (ware);
set_time_limit (12);

gebruik PhpOffice \ PhpWord \ MphpObj \ scDocuments;

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

Verteenwoordig die begin van 'n punt aan te dui enige foute, verbied stop 'n script as jy die gebruiker te skakel en stel die tyd limiet vir implementering in die geval lus - 12 sekondes. Volgende skakel biblioteek PhpOffice \ PhpWord vir dokumente * Docx.

Soos hierbo AJAX-oproep getoon ( '... cTask = GoPage' + '& cOwnerCode =' + cOwnerCode + '& cSessionCode =' + cSessionCode + '& cActiveItem =' + cActiveItem) - die vier AOO-veranderlikes, wat mag of nie mag nie, moet hul werklike beskikbaarheid check:

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

Na die uitvoering van die voorbereidende aksie script besluit:

skakelaar ($ cTask) {

geval 'GoPage': // (dit is 'n uitdaging tydens die aanvanklike aflaai of verfris die bladsy)

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

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

breek;

}

en die laaste deel van die script:

header ( "Content-Type: text / xml; aanvaar-charset = utf-8");
header ( "Cache-beheer: no-kas");
eggo '';
$ CReply = iconv ( 'CP1251 "," UTF-8 ", $ cReply); // omskakeling van 'CP1251' in 'UTF-8 "
eggo $ cReply;

Kry reaksie kliënt

Op die bladsy wat in die leser gelaai, is daar gevind dat sodra die bediener n reaksie sal voorberei, sal dit verwerk funksie WaitReplySC:

funksioneer WaitReplySC () {

probeer {

indien (scXHR.readyState == 4) {
indien (scXHR.status == 200) {// reaksie verwerking

var TestReply = scXHR.responseText;

indien ((TestReply.indexOf ( 'Parseerfout')> 0) ||
(TestReply.indexOf ( 'Kennisgewing')> 0)) waarskuwing (scXHR.responseText);

var CDATA = scXHR.responseText;
var aData = cData.split ( '|');

var cCmd = aData [1];
var opdragte vir onteigening = 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]; // bediener HTML-reaksie
var cVarValues = aData [6]; // veranderlikes vir Vorms

skakelaar (cCmd) {

geval 'GoPage':

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

breek;
}

} Else {
. Document.getElementById ( 'scAreaStatus') innerHTML = "Fout !!!";
}
}
} Vangs (e) {}

}

Dus, met behulp van die AJAX-voorbeelde, die bladsy laai in die leser te verkry (in scTestLine element):

Antwoord = [cOwner, cSession, cContents, cStatus, elemente kodering veranderlike waardes]

Op die verteenwoordiging van kode, jQuery en WordPress

Page in die leser en die teks teks geskryf in UTF-8, vir gebruik iconv () funksie om Russiese karakters omskep. Die res van die geraamte verteenwoordig deur kode is baie eenvoudig en maklik herhaal word vir 'n spesifieke doel.

Onderhewig aan net in die verwerking bediener antwoord WaitReplySC () funksie en die werklike script kode wat die reaksie genereer verander. Noem InitXML funksie (vir 'n bepaalde scURL en relevante data te) geplaas word in geval hanteerders op die bladsy elemente en definieer die betekenis van hierdie elemente.

Aangebied voorbeelde van AJAX-georiënteerde na "handleiding" die gebruik van tegnologie.

In verskeie content management system (SMS) vermoëns word beskryf in verskillende maniere, as 'n reël, in die styl van 'n bepaalde spesifisiteit. Byvoorbeeld, jQuery AJAX oproep moontlikhede realiseer jQuery.ajax () funksies in óf 'n hoër vlak: jQuery.get () en jQuery.post (). As 'n parameter geslaag om die url en instellings (set van pare sleutel + waarde). jQuery.ajax () gee terug XMLHttpRequest-objek.

JQuery om die resultate van die voorgestelde funksie-metodes te spoor: XHR.done () - die suksesvolle voltooiing van die versoek. XHR.fail () - fout hantering.

jqXHR.done () metode yavlyatsya alternatiewe hanteerder suksesvolle voltooiing van AJAX-versoek. Vervang verouderde metode jqXHR.success ().

Net so, die gebruik van op Wordpress AJAX-tegnologie. Hier het alles self ingeplant in die content management system, hoef jy net die voorgestelde struktuur gebruik. Die dokumente wat 'n gedetailleerde beskrywing.

AJAX Aansoek hang in wese op die gekose instrumente, hoewel die handleiding weergawe kan gebruik word in parallel of bykomend tot die geselekteerde content management system, een of ander weergawe van jQuery. Laasgenoemde is nuttig om te werk op hul eie, omdat byna al die moderne SMS gebruik dit, maar elkeen op sy eie manier.

'N Klassieke voorbeeld van toepassing

Eenvoudige en eksponensiële gebruik van AJAX - Cart aanlyn winkel. winkel bladsye is altyd gevul met goedere, maar in werklikheid kan hulle nie wees nie. Herlaai gewoonlik neem baie tyd, maar wanneer 'n besoeker kies 'n produk, kan hy altyd net moed opgee nie op hom of verander die gekose een, wat die terrein is altyd wenslik om vinnig te vertoon.

Gewoonlik is dit gerealiseer word in die vorm van mandjies en punte rondom geselekteerde items. Sonder die gebruik van AJAX dinamiese veranderinge aan hierdie elemente is problematies.

AJAX-skrifte wat implementeer meganismes om byvoeg / verwyder items om jou wa, het de facto in baie SMS.

Vir normale data-oordrag deur AJAX vorm kan gevorm word in 'n konvensionele wyse (vir toetrede tot die naam en wagwoord):