Ajax - прыклады. Ajax скрыпты

Інтэрнэт забяспечвае наведвальніку бачнасць кожнага рэсурсу, які знаходзіцца на хостынгу ў сетцы, а браўзэру - доступ праз сеткавыя пратаколы, механізмы выкліку асобных скрыптоў, перадачу / атрыманне інфармацыі. Сукупнасць старонак, якія складаюць сайт, мае агульны root - унікальную спасылку (даменнае імя, унікальны адрас вузла).

Усё роўна, рэсурс рэагуе на наведванне статычна або стварае адказ дынамічна. Нават калі выгляд і змест старонкі залежаць ад якіх-небудзь умоў, непадзельнай адзінкай зносін сервера і кліента (браўзэра) з'яўляецца скончаны HTML-дакумент з кодам, малюначкамі, табліцамі стыляў, файламі і іншым неабходным утрыманнем і асяроддзем. Калі нешта тут не так, браўзэр адлюструе ўсе што «здолеў» атрымаць, разабраць і выканаць.

Многія перспектыўныя тэхналогіі з'явіліся вельмі даўно, але былі незаслужана забытыя або не выкарыстоўваліся належным чынам. Першыя AJAX (прыклады выкарыстання аб'екта XMLHttpRequest) з'явіліся шмат гадоў таму, але поспех і вядомасць прыйшлі значна пазней.

Усе адразу ці толькі тое, што трэба

У класічным варыянце сайт - імя, IP-адрас і спасылка (усё гэта сінонімы, якія абазначаюць адну і тую ж кропку ў інтэрнэт-прасторы). Тое, што за гэтым ляжыць галоўная старонка сайта - дадумаў па ўласнай ініцыятыве сучасны "распрацоўшчык", які нават не задаўся пытаннем: чаму менавіта так? Чаму сайт ёсць галоўная старонка, з якой можна трапіць на любую іншую? Такі варыянт - відавочна не ідэал, гэта канкрэтны змест і фактычны функцыянал.

Прасцей кажучы, калі чалавеку трэба да стаматолага, ён ідзе па патрэбным адрасе з канкрэтнай мэтай, а не на кухню за хірургічным умяшаннем і не ў бібліятэку па кансультацыю тэрапеўта. У месцы, дзе гэты хтосьці апынуўся, ён убачыць, але не атрымае стаматалагічную паліклініку ў поўным аб'ёме. Максімум, на што можа разлічваць наведвальнік - рэгістратура і кірунак (дакладны шлях) да ўрача. Прычым на месцы (па прыбыцці) можа змяніцца як лекар, так і месца прызначэння.

Але вось сайт звычайна заўсёды грузіцца ў поўным боекамплекце, нішто не змяняецца па факце загрузкі, з улікам часу таго, хто прыйшоў ... А бо нават у выпадку, калі ён ёсць рэсурс рэальнай паліклінікі, то пры першым наведванні новага кліента дастаткова даць старонку інфармацыі , кантактаў і акенца рэгістратуры ... Можна прадугледзець, што візіт на сайт быў нанесены ў непрацоўны час, а прызначаны лекар адсутнічае, прыём часова вырабляецца ў іншым кабінеце ...

Кропка ў інтэрнэт-прасторы

Класічная рэакцыя рэсурсу інтэрнэт-прасторы - у адказ на запыт выдаць старонку сайта (звычайна галоўную), а потым іншыя, па жаданні наведвальніка. Сервер сайта змяшчае таксама малюнкі, стылі, коды скрыптоў JavaScript, PHP і інш. Далёка не ўсе PHP-файлы робяць старонкі, некаторыя з іх могуць рэагаваць на AJAX запыты: прымаць, апрацоўваць і адпраўляць інфармацыю.

Напісаць скрыпт нескладана. Але, атрымліваючы кіраванне на кропцы ў інтэрнэт-прасторы, нельга вызначыць, хто і з якой нагоды звярнуўся, то ёсць актываваў гэтае імя, IP-адрас і спасылку. Любы рух па сетцы адбываецца праграмна, у асноўным праз браўзэр, але таксама праз робатаў рознага паходжання і прызначэння, з дапамогай дзеянняў іншых сайтаў.

Скрыпт, які атрымаў кіраванне, можа дакладна ведаць толькі: час наведвання, праз які браўзэр зайшоў наведвальнік, з якой спасылкі, з якога IP-адрасы і наяўнасць cookies. Толькі апошняе можа даць інфармацыю, як сфармаваць галоўную старонку, але толькі ў тым выпадку, калі гэты наведвальнік ўжо быў тут. Ва ўсіх астатніх сітуацыях магчыма генераваць толькі агульны адказ сервера. AJAX-прыклады, якія лёгка знайсці ў Інтэрнэце, варта выкарыстоўваць ўважліва. Памылкі ў працы (выкарыстаннi) аб'екта XMLHttpRequest адсачыць няпроста.

Агульны адказ і прыватны дыялог

Агульны адказ сервера - звычайная старонка, названая галоўнай ад таго, што называецца index і з яе пачынаецца сайт, гэта значыць з яе разыходзяцца спасылкі на іншыя даступныя старонкі. Зрэшты, калі наведвальнік ведае імёны гэтых іншых старонак, яны ў яго разуменні будуць не менш галоўнымі, чым тая, якую пазначыў распрацоўшчык. Так выглядае класічная мадэль, адразу ўсё: агульны дызайн і функцыянал, арыентаваны на ўсіх наведвальнікаў.

Прыватны дыялог - гэта працяг папярэдняй сесіі наведвальніка. Сайт ужо ведае, што ён рабіў, што яго цікавіла, якія былі прагледжаныя старонкі і адклаў гэта ў сваёй памяці, нешта запісаў у cookies браўзэра.

Выкарыстоўваецца два асноўных запыту да сервера для загрузкі сайта і працы з ім: POST і GET. Вынікам запыту з'яўляецца старонка цалкам. На атрыманай старонцы наведвальнік можа актываваць тыя ці іншыя падзеі, настроеныя на дзеянні над пэўнымі элементамі старонкі.

Падзеі элементаў старонкі

Элемент старонкі можа быць кнопкай пошуку інфармацыі, якая азначае - узяць змесціва тэкставага поля і знайсці тое, што ў ёй напісаў наведвальнік. Падзея можа ўзнікнуць на элеменце меню, малюнку, тэкставым полі. У любым выпадку будзе запушчана JavaScript-функцыя, якая можа выканаць AJAX-запыт наступным чынам:

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

Пры гэтым функцыя InitXML () вызначана так (зменная var scXHR павінна быць апісана за межамі функцыі):

function InitXML (scURL) {

scXHR = null;

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

Гэта функцыя атрымлівае URL і ініцыюе запыт па ім. Асінхронны адказ прыйдзе, як толькі адпрацуе скрыпт, які ўказаны ў URL (у дадзеным выпадку - scSrvPhpWord.php, размешчаны ў тэчцы ../Mphp/ адносна root сайта), і запусціцца функцыя WaitReplySC (), на ўваход якой паступіць XML-адказ сервера, уключаючы загаловак і змест.

адказ сервера

Уласна сервер ўяўляе сабой PHP-скрыпт - праграму, якая пачынаецца з ўстаноўкі істотных умоў, загрузкі неабходных аб'ектаў, папярэдняй падрыхтоўкі, якая залежыць ад мэтаў распрацоўніка:

namespace PhpOffice \ PhpWord;

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

ignore_user_abort (true);
set_time_limit (12);

use PhpOffice \ PhpWord \ MphpObj \ scDocuments;

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

Прадстаўленае пачатак паказвае на адзнаку ўсіх памылак, забараняе спыняць скрыпт пры адключэнні карыстальніка і ўстанаўлівае ліміты выкананьня на выпадак зацыклення - 12 секунд. Далей падключаецца бібліятэка PhpOffice \ PhpWord для працы з дакументамі * .docx.

Паколькі паказаны вышэй AJAX-выклік ( '... cTask = GoPage' + '& cOwnerCode =' + cOwnerCode + '& cSessionCode =' + cSessionCode + '& cActiveItem =' + cActiveItem) - гэта чатыры GET-зменныя, якіх можа і не быць, варта праверыць іх фактычнае наяўнасць:

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

Пасля выканання падрыхтоўчых дзеянняў скрыпт прымае рашэнне:

switch ($ cTask) {

case 'GoPage': // (гэта выклік пры першапачатковай загрузцы або абнаўленні старонкі)

$ COwnerCode = 'cOwner';
$ CSessionCode = 'cSession';
$ CContents = 'cContents';
$ CStatus = 'cStatus';
$ CHtml = iconv ( 'UTF-8', 'CP1251', 'кадоўка элемента');
$ CActiveItem = iconv ( 'UTF-8', 'CP1251', 'значэння зменных');

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

break;

}

і заключная частка скрыпту:

header ( "Content-Type: text / xml; accept-charset = utf-8");
header ( "Cache-Control: no-cache");
echo '';
$ CReply = iconv ( 'CP1251', 'UTF-8', $ cReply); // пераўтварэнне з 'CP1251' ў 'UTF-8'
echo $ cReply;

Атрыманне адказу кліентам

На старонцы, загружанай ў браўзэр, было ўстаноўлена, што як толькі сервер падрыхтуе адказ, ён будзе апрацаваны функцыяй WaitReplySC:

function WaitReplySC () {

try {

if (scXHR.readyState == 4) {
if (scXHR.status == 200) {// апрацоўка адказу

var TestReply = scXHR.responseText;

if ((TestReply.indexOf ( 'Parse error')> 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]; // HTML-адказ сервера
var cVarValues = aData [6]; // значэння зменных для формаў

switch (cCmd) {

case 'GoPage':

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

break;
}

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

}

Такім чынам, выкарыстоўваючы гэтыя AJAX-прыклады, пры загрузцы старонкі ў браўзэры атрымаем (у элеменце scTestLine):

Reply = [cOwner, cSession, cContents, cStatus, кадоўка элемента, значэнні зменных]

Аб прадстаўленым кодзе, jQuery і WordPress

Старонка ў браўзэры і тэкст скрыпту запісаныя ў кадоўцы UTF-8, таму выкарыстоўваецца функцыя iconv () для пераўтварэння рускіх літар. У астатнім шкілет прадстаўленага кода вельмі просты і лёгка можа быць паўтораны для любой канкрэтнай мэты.

Змене падлягае толькі апрацоўка адказу сервера ў функцыі WaitReplySC () і ўласна код скрыпту, які фармуе гэты адказ. Выклікі функцыі InitXML (для канкрэтнага scURL і адпаведных яму дадзеных) размяшчаюцца ў апрацоўшчык падзей на элементах старонкі і вызначаюць сэнсавую нагрузку гэтых элементаў.

Прадстаўленыя AJAX-прыклады арыентаваны на «ручное» выкарыстанне тэхналогіі.

У розных сістэма кіравання сайтамі (СМС) апісаныя магчымасці прадстаўлены па-рознаму, як правіла, у стылі той ці іншай спецыфікі. Напрыклад, магчымасці jQuery AJAX рэалізуюцца выклікамі функцый jQuery.ajax () альбо больш высокі ўзровень: jQuery.get () і jQuery.post (). У якасці параметру перадаецца url і settings (набор пар ключ + значэнне). jQuery.ajax () вяртае XMLHttpRequest-аб'ект.

Для адсочвання выніку jQuery прапануе функцыю-метады: XHR.done () - паспяховае завяршэнне запыту. XHR.fail () - апрацоўка памылкі.

Метад jqXHR.done () з'яўляцца альтэрнатывай апрацоўшчыка паспяховага завяршэння AJAX-запыту. Замяняе састарэлы метад jqXHR.success ().

Аналагічна выкарыстанне на Wordpress AJAX-тэхналогіі. Тут усё ўжо імплантавана ў саму сістэму кіравання сайтам, трэба толькі выкарыстоўваць прапанаваныя канструкцыі. У дакументацыя прапануецца падрабязнае апісанне.

Прымяненне AJAX істотна залежыць ад абранага інструментара, хоць ручной варыянт можа быць ужыты паралельна або ў дадатак да абранай сістэме кіравання сайтам, той ці іншай версіі jQuery. Апошнюю карысна адпрацаваць самастойна, паколькі практычна ўсе сучасныя СМС выкарыстоўваюць яе, але кожная па свойму.

Класічны прыклад прымянення

Простае і паказальнае прымяненне AJAX - кошык у інтэрнэт-краме. Старонкі крамы заўсёды напоўнены таварамі, хоць у рэальнасці іх можа і не быць. Перазагрузка звычайна займае істотнае час, але калі наведвальнік выбірае тавар, ён можа заўсёды ад яго адразу адмовіцца альбо змяніць абраны іншым, што на сайце заўсёды пажадана адлюстроўваць хутка.

Звычайна гэта рэалізуецца ў выглядзе кошыка і паметак каля выбраных тавараў. Без выкарыстання AJAX дынамічная змена гэтых элементаў праблематычна.

AJAX-скрыпты, якія рэалізуюць механізмы дадання / выдалення тавараў у кошык, сталі дэ факта ў многіх СМС.

Для звычайнай перадачы дадзеных праз AJAX форма можа быць выканана звычайнай выявай (для ўводу імя і пароля):