Ajax - esimerkkejä. ajax skriptit

Internet tarjoaa kävijälle näkyvyyttä kunkin resurssin, jota isännöi verkossa, ja selain - pääsy kautta verkkoprotokollia, puhelu mekanismeja yksittäisten skriptejä, lähetys / vastaanotto. Joukko sivuja, jotka muodostavat sivuston, on yhteinen root - ainutlaatuinen yhteys (verkkotunnus, yksilöllinen solmun osoite).

Ei ole väliä resurssi reagoi vierailla staattisesti tai dynaamisesti tuottaa vastauksen. Vaikka muotoa ja sisältöä sivuille riippuvat mitään ehtoja, jakamaton yksikkö viestintä palvelimen ja asiakkaan (selain) on valmista HTML-koodattu asiakirja, kuvia, tyylitiedostoja ja muut tarvittavat tiedostot sisältöä ja ympäristöä. Jos jotain on vialla, selain näyttää kaikki mitä "onnistui" saamaan jäsentää ja toteuttaa.

Monet lupaavien teknologioiden ovat syntyneet jo pitkään, mutta on epäoikeudenmukaisesti unohdettu tai niitä ei ole käytetty oikein. Ensimmäinen AJAX (esimerkeissä käytetään XMLHttpRequest objekti) ilmestyi vuosia sitten, mutta menestys ja maine tuli paljon myöhemmin.

Kaikki tai vain mitä tarvitset

Klassinen versio sivustosta - nimi, IP-osoitteen ja linkin (kaikki synonyymit liittyvät samaan kohtaan Internet tilaan). Mistä tämä johtuu etusivulle - ajatteli: omasta aloitteestaan moderni "suunnittelija", joka ei edes kysyä, miksi se on niin? Miksi sivusto on pääsivulla, josta pääsee muita? Tämä vaihtoehto - selvästikään ole paras mahdollinen, se on erityistä sisältöä ja toiminnallisuuden.

Yksinkertaisesti sanottuna, jos henkilö tarvitsee hammaslääkäri, se on oikea osoite tiettyä tarkoitusta varten, eikä keittiöön leikkaukseen eikä kirjaston kuulemista terapeutti. Paikassa, jossa tämä yksi osoittautui, hän näkee, mutta ei saa hammashoitola kokonaan. Parasta, mitä voidaan odottaa kävijä - rekisterin ja suunta (tarkka polku) lääkäriin. Ja paikan päällä (saapuessa) voi muuttua lääkäri, ja määränpää.

Mutta tässä on sivuston yleensä aina ladattu kokonaisuudessaan ammuksia, mikään ei muutu latauksella, ottaen huomioon ajan, että joku on tullut ... Mutta myös silloin kun se on tosielämän klinikka, ensimmäisen kerran käyt uusi asiakas riittää antamaan tietosivun , yhteystiedot ja ... ikkuna rekisterin voi olla järjestetty, että käyntiä tehtiin aikana off-tuntia, kuten lääkärin määräämiä ei ole käytettävissä, väliaikainen nimitys tehdään eri toimistossa ...

Piste Internet avaruudessa

Klassinen vastaus resurssin Internetin tila - vastauksena pyyntöön antaa sivuston etusivulle (yleensä kotona), ja sitten toinen, pyynnöstä vierailija. Site Server sisältää myös kuvia, tyylejä, JavaScript-koodi skriptit, PHP, jne Kaikkia PHP-tiedostot tehdä sivuja, joista osa voi vastata AJAX pyyntöjä :. vastaanottaa, käsitellä ja lähettää tietoa.

Kirjoita skripti helppoa. Mutta tulleet siihen pisteeseen valvonnan Internetissä tilaa, on mahdotonta päättää, kuka ja mistä syystä osoitettu, joka aktivoidaan on nimi, IP-osoitteen ja linkin. Liikkuneet verkossa tapahtuu ohjelmisto, pääasiassa selaimen kautta, mutta myös robotteja eri lähtö- ja pääteasema muiden sivustojen toimintaa.

Käsikirjoitus, vahvistuksen säätö, voi tarkasti tietää vain: vierailun kautta mitä selainta vierailija tuli, jossa maininta, jonka IP-osoitteita, ja läsnäolo evästeet. Vain jälkimmäinen voi antaa tietoja, että ne muodostavat pääsivulla, mutta vain jos vierailija on jo täällä. Kaikissa muissa tapauksissa on mahdollista tuottaa vain yleinen vastaus palvelimelta. AJAX-esimerkkejä, jotka on helppo löytää Internetistä, tulee käyttää huolellisesti. Virheet (käyttö) XMLHttpRequest objekti seurata ei ole helppoa.

Yleinen vastaus ja yksityisen sektorin välistä vuoropuhelua

Yleinen vastaus palvelimelta - yhteinen sivu, jota kutsutaan rehtori mitä kutsutaan indeksi, ja se alkaa sivusto, joka on ristiriidassa sen linkit muille sivuille käytettävissä. Jos kävijä tuntee nimet muille sivuille, ne ovat hänen käsityksensä on aivan yhtä tärkeä kuin yksi nimetty kehittäjä. Tässä on klassinen malli, kaikki kerralla: yleinen suunnittelu ja toiminnallisuus, joka keskittyy kaikille kävijöille.

Yksityinen vuoropuhelu - jatkoa edellisen istunnon kävijä. Sivusto tietää jo, mitä hän teki, että hän oli kiinnostunut siitä, mitä nähtiin sivulle ja laittoi sen muistiin, kirjoitti jotain selaimen evästeet.

Sitä käytetään kahta perustyyppiä pyynnön palvelimelle ladata sivuston ja työskennellä hänen: POST ja GET. kyselyn tulos on koko sivun. Tulevalla sivulla, vierailija voi aktivoida näitä tai muita tapahtumia, jotka on määritetty toiminnan tietyn sivun elementtejä.

Tapahtumat sivuelementtejä

sivu elementti voi olla avain löytää tietoa, merkitys - ottaa sisällön tekstikenttään ja huomaavat, että se kirjoitti vierailija. Tapahtumassa voi tapahtua valikkokohdan, kuva, teksti-ruutuun. Joka tapauksessa, JavaScript-toiminto tulee toimimaan, joka voi suorittaa AJAX-pyynnön seuraavasti:

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

Toiminto InitXML () on määritelty (muuttuja var scXHR kuvataan funktion ulkopuolella):

toiminto InitXML (scURL) {

scXHR = null;

jos (window.XMLHttpRequest)
{try
{ScXHR = uusi XMLHttpRequest ();
} Saalis (e) {}
} else
jos (window.ActiveXObject)
{kokeilla
{ScXHR = uusi ActiveXObject (Msxml2.XMLHTTP ');
} Saalis (e)
{try
{ScXHR = uusi ActiveXObject (Microsoft.XMLHTTP ');
} Saalis (e) {}
}
}
jos (scXHR)
{
scXHR.open ( 'GET', scURL);
scXHR.onreadystatechange = WaitReplySC;
scXHR.send (null);
};
}

Tämä toiminto URL ja aloittaa pyynnön siihen. Asynkroninen vastaus tulee heti täyttää käsikirjoituksen määritetty URL (tässä tapauksessa - scSrvPhpWord.php, kansiosta ../Mphp/ suhteellisen juureen sivuston), ja toiminto käynnistyy WaitReplySC (), joiden sisäänmenona menee XML-vastaus-palvelin, mukaan lukien otsikko ja sisällön.

palvelimen vastaus

Oikeastaan palvelin on PHP-skripti - ohjelma, joka alkaa asennuksen perusedellytyksistä, lataa tarvittavat tilat, esikäsittely, joka riippuu tavoitteista:

nimiavaruutta PhpOffice \ PhpWord;

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

ignore_user_abort (tosi);
set_time_limit (12);

Käytä PhpOffice \ PhpWord \ MphpObj \ scDocuments;

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

Edusti tavaramerkin alkuun ilmoittaa mahdollisista virheistä, kielletään pysäyttäminen käsikirjoituksen jos poistat käyttäjä ja asettaa määräaika täytäntöönpanolle, jos silmukka - 12 sekuntia. Seuraava linkkikirjasto PhpOffice \ PhpWord asiakirjoille * .docx.

Kuten edellä on esitetty AJAX-haaste ( '... cTask = GoPage' + '& cOwnerCode =' + cOwnerCode + '& cSessionCode =' + cSessionCode + '& cActiveItem =' + cActiveItem) - neljä GET-muuttujaa, joka ei voi olla tulisi tarkistaa todellista tilaa:

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

Suorittamisen jälkeen -valmistelutoimesta käsikirjoitus päättää:

kytkin ($ cTask) {

tapaus 'GoPage': // (tämä on haaste aikana lataamisen tai päivittää sivu)

$ COwnerCode = 'cOwner';
$ CSessionCode = 'cSession';
$ CContents = 'cContents';
$ CStatus = 'cStatus';
$ CHTML = iconv (UTF-8 ", 'CP1251', 'koodaava osa');
$ CActiveItem = iconv (UTF-8 ', 'CP1251', 'muuttujat');

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

break;

}

ja viimeinen osa käsikirjoitus:

header ( "Content-Type: text / xml, accept-charset = UTF-8");
header ( "Cache-Control: no-cache");
echo '';
$ CReply = iconv (CP1251 ', 'UTF-8', $ cReply); // muunnos 'CP1251' in 'UTF-8'
echo $ cReply;

Getting asiakaspalautteen

Sivulla, joka on ladattuna selaimessa, todettiin, että heti kun palvelin valmistelee vastausta, se käsitellään toiminto WaitReplySC:

toimiakseen WaitReplySC () {

try {

jos (scXHR.readyState == 4) {
jos (scXHR.status == 200) {// vastaus käsittely

var TestReply = scXHR.responseText;

if ((TestReply.indexOf (Jäsennysvirhe)> 0) ||
(TestReply.indexOf (tiedonanto)> 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-vaste
var cVarValues = ADATA [6]; // muuttujia Lomakkeet

kytkin (CCMD) {

tapaus 'GoPage':

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

break;
}

} Else {
document.getElementById ( 'scAreaStatus'). innerHTML = "Virhe !!!";
}
}
} Saalis (e) {}

}

Siten käyttäen AJAX-esimerkeistä, sivu ladataan selaimessa saamiseksi (in scTestLine elementti):

Vastaus = [cOwner, cSession, cContents, cStatus, koodaavien elementtien muuttujien arvot]

Edustuksesta koodin jQuery ja WordPress

Sivu selaimessa ja käsikirjoitus kirjoitettu teksti UTF-8, käytettäväksi iconv () toiminto muuntaa venäläisiä kirjaimia. Loput luuranko, jota edustaa koodi on hyvin yksinkertainen ja se voidaan helposti toistaa minkä tahansa tiettyyn tarkoitukseen.

Voidaan muuttaa vain käsittelyn palvelimen vastaus WaitReplySC () funktio ja todellisen script koodin, joka luo vastauksen. Kutsuu InitXML toiminto (tietylle scURL ja merkityksellisiä tietoja sen) sijoittuvat tapahtumankäsittelijät sivulla elementtejä ja merkitystä määritellään näiden elementtien.

Esitellään esimerkkejä AJAX-suuntautunut "käsin" tekniikan käytössä.

Eri content management system (SMS) ominaisuudet on kuvattu eri tavoin, pääsääntöisesti tyyliin tietyn spesifisyyden. Esimerkiksi, jQuery AJAX puhelu mahdollisuudet toteutetaan jQuery.ajax () toimii joko korkeammalla tasolla: jQuery.get () ja jQuery.post (). Parametri välitetään url ja asetukset (joukko paria avaimen + arvo). jQuery.ajax () palauttaa XMLHttpRequest-objektin.

JQuery seurata tuloksia aiottu toiminta-menetelmiä: XHR.done () - onnistuneesti loppuun pyynnön. XHR.fail () - virheenkäsittely.

jqXHR.done () menetelmä yavlyatsya vaihtoehto käsittelijä onnistuneesti päätökseen AJAX-pyynnön. Korvaa vanhentuneen jqXHR.success () menetelmä.

Samoin, käyttämällä Wordpress AJAX-tekniikkaa. Täällä kaikki on istutettu itsensä content management system, sinun tarvitsee vain käyttää ehdotettua rakennetta. Toimittamien asiakirjojen yksityiskohtaisen kuvauksen.

AJAX Application riippuu oleellisesti valitusta työkaluja, vaikka manuaalinen versio voidaan käyttää rinnakkain tai lisäksi valitun sisällön hallintajärjestelmä, yksi tai toinen versio jQuery. Jälkimmäinen on hyvä työskennellä yksin, koska lähes kaikki nykyaikaiset SMS käyttävät sitä, mutta jokainen omalla tavallaan.

Klassinen esimerkki sovelluksen

Yksinkertainen ja eksponentiaalinen käyttö AJAX - Cart verkkokaupasta. tallentaa sivut ovat aina täynnä tavaroita, vaikka todellisuudessa ne eivät voi olla. Uudelleenlastaus kestää yleensä paljon aikaa, mutta kun kävijä valitsee tuotteen, hän voi aina vain antaa periksi hänelle tai muuttaa valinnut yhden, että sivusto on aina toivottavaa näyttää nopeasti.

Yleensä se on toteutettu muodossa korit ja merkkien ympärille valitut kohteet. Ilman AJAX dynaamisia muutoksia nämä elementit on ongelmallista.

AJAX-skriptejä, jotka toteuttavat mekanismeja lisätä / poistaa kohteita ostoskoriisi tuli käytännössä monissa tekstiviestillä.

Normaalin tiedonsiirron kautta AJAX muoto voi olla muodostettu tavanomaisella tavalla (syöttämistä varten ja salasana):