Ajax - бұл мысалдар. Ajax сценарийлері

Интернетте келушілерге желіде орналасқан әрбір ресурстың көрінуі, ал браузер - желілік хаттамалар, жеке сценарийлерді шақыру тетіктері, ақпаратты жіберу / алу. Торапты құрайтын беттер жиынтығы жалпы түбірге ие - бірегей сілтеме (домен атауы, бірегей түйін мекенжайы).

Ресурс тұрақты статистикаға жауап берсе немесе жауапты динамикалық түрде жасаса маңызды емес. Беттің түрі мен мазмұны кез-келген жағдайға байланысты болса да, сервер мен клиент арасындағы (браузер) арасындағы бөлінбейтін байланыс бірлігі код, суреттер, мәнер парақтары, файлдар және басқа қажетті мазмұн мен қоршаған орта бар толық HTML құжаты болып табылады. Егер бірдеңе дұрыс болмаса, браузер оны қабылдау, талдау және орындау үшін «басқарылатын» барлық нәрсені көрсетеді.

Көптеген перспективалы технологиялар ұзақ уақыт бойы пайда болды, бірақ олар ұмытып кеткен немесе пайдаланылмаған. Алғашқы AJAX (XMLHttpRequest нысанын пайдалану мысалдары) бірнеше жыл бұрын пайда болды, бірақ табысы мен атағы көп кешікпей пайда болды.

Барлық бірден немесе сізге қажет нәрсе

Сайттың классикалық нұсқасында - аты, IP-адресі және сілтеме (бәрі синонимдер, Интернет-кеңістіктегі бір нүктені белгілейді). Бұл сайттың басты беті - өз бастамасы бойынша қазіргі «әзірлеуші» деп ойлайды, ол тіпті өзі туралы сұрамайды: неліктен? Неліктен сайт басқа кез келгенге қол жеткізуге болатын басты бет? Мұндай опция әбден анық емес , бұл нақты мазмұн және нақты функционал.

Басқаша айтқанда, егер адам тіс дәрігеріне қажет болса, терапевтің кеңесі үшін кітапханаға емес, хирургиялық араласу үшін ас үйге емес, белгілі бір мақсатқа дұрыс мекен-жайға барады. Бұл біреу болған жерде ол көреді, бірақ ол стоматологиялық поликлиниканы толық ала алмайды. Келушінің есепке алуы мүмкін максималды көрсеткіш - дәрігердің тізілімі және бағыты (нақты жолы). Ал жерде (келгенде) дәрігер мен тағайындалған пунктті өзгерте алады.

Бірақ мұнда сайт әдетте әрдайым толық оқ-дәрілерге жүктеледі, ол келген адамның уақытын ескере отырып жүктеу фактісімен ешнәрсе өзгермейді ... Егер тіпті нақты клиниканың ресурсы болса да, жаңа клиентке алғаш рет келгенде, ақпарат бетін , Байланыстар мен тізілім терезесі ... Сайтқа бару жұмыс уақытынан тыс жерде болғанын және тағайындалған дәрігердің болмағанын болжауға болады, қабылдау уақытша басқа бөлмеде жүргізіледі ...

Ғаламтор кеңістігінде

Ғаламтор кеңістігінің ресурсын классикалық түрде реакциялау - сайттың бетін (әдетте басты бетті) беру туралы өтінішке жауап ретінде, содан кейін басқалардың келушінің өтініші бойынша. Сондай-ақ, сайт сервері суреттерді, стильдерді, JavaScript код сценарийлерін, PHP және т.б. бар. PHP файлдарының барлығы бірдей беттер жасайды, олардың кейбіреулері AJAX сұрауларына жауап бере алады: ақпарат алу, өңдеу және жіберу.

Сценарий жазу қиын емес. Бірақ, ғаламтор кеңістігіндегі нүктеге бақылауды алу үшін кімге және қандай мәселеге қатысты екенін анықтау мүмкін емес, яғни бұл атауды, IP-адресті және сілтемесін белсендіріңіз. Желідегі кез-келген қозғалыс бағдарлама арқылы, негізінен браузер арқылы жүзеге асырылады, сонымен қатар басқа сайттардың әрекеттері арқылы әртүрлі түбірлер мен бағыттар роботтары арқылы жүзеге асырылады.

Бақылауды алған сценарий тек нақты білуі мүмкін: визитер келген браузер арқылы келу уақыты, оның IP-мекен-жайы мен куки-файлдардың болуы. Тек соңғысы негізгі бетті қалай қалыптастыру туралы ақпарат бере алады, бірақ тек егер бұл келуші бұл жерде болған болса ғана. Барлық қалған жағдайда ғана сервердің жалпы жауап беруі мүмкін. Интернетте оңай таба алатын AJAX-мысалдары мұқият пайдаланылуы керек. XMLHttpRequest нысанын пайдалануда (пайдалануда) қателер бақылауға қиын.

Жалпы жауап және жеке диалог

Сервердің жалпы жауабы - бұл индекс деп аталатын басты бет деп аталатын қалыпты бет және оған сайт басталады, яғни басқа қолжетімді беттерге сілтемелер одан өзгеше болады. Алайда, егер келуші басқа беттердің атауын білсе, олар оны түсінгенде әзірлеуші белгілегеннен кем емес болады. Сонымен, классикалық модель, бірден барлығы: қарапайым дизайн және функционалдық, барлық келушілерге арналған.

Жеке сұхбат - келушінің өткен сессиясының жалғасы. Сайт қазірдің өзінде не істеп жатқанын, қандай қызығушылық танытқанын, қандай беттерді көріп, есіне түсіріп жатқанын біледі, шолғыш кукилерінде бір нәрсе жазады.

Сайтты жүктеу және онымен жұмыс істеу үшін серверге екі негізгі сұраныс бар: POST және GET. Сұраудың нәтижесі - бүкіл бет. Алынған бетте келушінің беттің кейбір элементтері бойынша әрекеттер үшін конфигурацияланған белгілі бір оқиғаларды іске қосуы мүмкін.

Бет элементтері оқиғалары

Бет элементі ақпарат іздеуге арналған түйме болуы мүмкін, яғни мәтіндік өрістің мазмұнын қабылдап, оған келушінің не жазғанын табу керек. Мәзір элементінде, сурет немесе мәтін жолында оқиға болуы мүмкін. Қалай болғанда да, AJAX сұрауын келесідей орындауға болатын JavaScript функциясы іске қосылады:

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

Бұл жағдайда InitXML () функциясы төмендегідей анықталады (айнымалы var scXHR функциядан тыс сипатталуы керек):

InitXML функциясы (scURL) {

ScXHR = null;

Егер (window.XMLHttpRequest)
{Сынап көріңіз
{ScXHR = жаңа XMLHttpRequest ();
} Catch (e) {}
} Else
Егер (window.ActiveXObject)
{Сынап көріңіз
{ScXHR = жаңа ActiveXObject ('Msxml2.XMLHTTP');
} Catch (e)
{Сынап көріңіз
{ScXHR = жаңа ActiveXObject ('Microsoft.XMLHTTP');
} Catch (e) {}
}
}
Егер (scXHR)
{
ScXHR.open ('GET', scURL);
ScXHR.onreadystatechange = WaitReplySC;
ScXHR.send (нөл);
};};
}

Бұл функция URL мекенжайын алады және оған сұрауды бастайды. URL мекенжайында көрсетілген сценарий орындалғанда (бұл жағдайда - сайттың түбіріне қатысты ../Mphp/ қалтасында орналасқан scSrvPhpWord.php) орындалады және WaitReplySC () функциясы іске қосылады, оның кірісі сервердің XML жауап болады, Тақырыпты және мазмұнды қамтитын.

Серверге жауап беру

Шын мәнінде бұл сервер PHP сценарийі болып табылады - қажетті шарттарды орнатудан басталады, қажетті заттарды жүктеп алу, алдын ала дайындық, ол әзірлеушінің мақсаттарына байланысты:

PhpOffice \ PhpWord ат кеңістігі;

Ini_set ('display_errors', 1);
Error_reporting (E_ALL ^ E_NOTICE);

Ignore_user_abort (шын);
Set_time_limit (12);

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) Олардың нақты қолжетімділігін тексеріңіз:

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

Дайындық іс-шараларын орындағаннан кейін сценарий:

Қосқыш ($ cTask) {

Case 'GoPage': // (бұл бет алдымен жүктелген немесе жаңартылғанда қоңырау)

$ COwnerCode = 'cOwner';
$ CSessionCode = 'cSession';
$ CContents = 'cContents';
$ CStatus = 'cStatus';
$ CHtml = iconv ('UTF-8', 'CP1251', 'элемент кодтау');
$ CActiveItem = iconv ('UTF-8', 'CP1251', 'айнымалы мәндер');

$ CRPly = «scSrvRM | GoPage | set | {$ cOwnerCode}: {$ cSessionCode} | {$ cContents} - {$ cStatus} | {$ cHtml} | {$ cActiveItem}»;

Үзіліс;

}

Сценарийдің соңғы бөлігі:

Тақырып («Content-Type: text / xml; accept-charset = utf-8»);
Тақырып («Кэш-бақылау: кэш-кэш»);
Echo '';
$ CReply = iconv ('CP1251', 'UTF-8', $ cReply); // 'CP1251' -ден 'UTF-8' -ге түрлендіру
Echo $ cReply;

Клиенттен жауап алу

Браузерге жүктелген бетте сервер жауапты дайындағаннан кейін, ол WaitReplySC функциясы арқылы өңделетінін анықтады:

WaitReplySC функциясы () {

{

Егер (scXHR.readyState == 4) {
Егер (scXHR.status == 200) {// жауапты реттеңіз

Var TestReply = scXHR.responseText;

Егер ((TestReply.indexOf ('Қатені талдау')> 0) ||
(TestReply.indexOf ('Ескерту')> 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]; // пішіндерге айнымалылар мәндері

Қосқыш (cCmd) {

«GoPage» оқиғасы:

Var dTestLine = document.getElementById ('scTestLine');
DTestLine.innerHTML = 'Жауап = [' + cOwnerCode + ','
+ CSessionCode + ','
+ CContent + ','
+ CStatus + ','
+ CHTML + ','
+ CVarValues + ']';

Үзіліс;
}

} Else {
Document.getElementById ('scAreaStatus'). InnerHTML = «Қате !!!»;
}
}
} Catch (e) {}

}

Осылайша, осы AJAX мысалдарын пайдаланып, браузерде бетті жүктеген кезде біз (scTestLine элементінде) аламыз:

Жауап = [cOwner, cSession, cContents, cStatus, элементті кодтау, айнымалы мәндер]

Ұсынылған код, jQuery және WordPress туралы

Браузердегі бет және сценарий мәтіні UTF-8 кодтауында жазылған, сондықтан iconv () функциясы орыс әріптерін айырбастау үшін пайдаланылады. Әйтпесе, ұсынылған кодтың қаңқасы өте қарапайым және кез-келген мақсат үшін оңай қайталануы мүмкін.

WaitReplySC () функциясында сервер жауаптарын өңдеу және бұл жауапты қалыптастыратын нақты сценарий коды өзгеруі мүмкін. InitXML функциясына (белгілі бір scURL және сәйкес деректер үшін) қоңыраулар оқиғалар өңдегіштерінде бет элементтерінде орналастырылады және осы элементтердің семантикалық жүктемесін анықтайды.

Ұсынылған AJAX-мысалдары технологияларды «қолмен» қолдануды қарастырады.

Әртүрлі сайтты басқару жүйесінде (SMS) сипатталған функциялар әртүрлі жолдармен ұсынылады, әдетте бір немесе басқа ерекшеліктердің стилінде. Мысалы, jQuery AJAX мүмкіндіктері jQuery.ajax () немесе жоғары деңгейге қоңырау шалу арқылы орындалады: jQuery.get () және jQuery.post (). Параметр url және параметрлерге ауысады (кілт-мән жұптарының жиынтығы). JQuery.ajax () XMLHttpRequest нысанын қайтарады.

Нәтижені қадағалау үшін, jQuery функция әдістерін ұсынады: XHR.done () - сұрауды табысты аяқтау. XHR.fail () - қателерді өңдеу.

JqXHR.done () әдісі AJAX сұранымын сәтті аяқтау үшін өңдегішінің баламасы болып табылады. Ескірген әдісті jqXHR.success () ауыстырады.

Сондай-ақ, AJAX технологиясын WordPress-те пайдалану. Мұнда бәрі сайттың басқару жүйесін өзінде енгізілген, сіз тек ұсынылған конструкцияларды пайдалануыңыз қажет. Құжаттамаға толық сипаттама беріледі.

AJAX-ны пайдалану таңдалған құрал-жабдыққа байланысты болады, дегенмен қолмен нұсқасы параллельді немесе таңдалған сайтты басқару жүйесіне қосымша jQuery нұсқасын қолдануға болады. Соңғысы өздігінен жұмыс істеуге пайдалы, өйткені барлық заманауи SMS-лер оны пайдаланады, бірақ әрқайсысы өз бетімен.

Қолданбаның классикалық үлгісі

AJAX-нің қарапайым және көрнекі қолданылуы - интернет-дүкендегі сауда қоржыны. Дүкеннің парақтары әрдайым тауарлармен толтырылады, бірақ шын мәнінде олар болмауы мүмкін. Әдетте қайта жүктеу әдетте үлкен уақытты талап етеді, бірақ келуші өнім таңдағанда, ол әрқашан бірден бас тарта алады немесе оны басқа сайтқа ауыстыра алады, бұл әрқашан сайтта көрсетілуге жақсырақ.

Әдетте бұл себет түрінде жүзеге асырылады және таңдалған тауарлардың жанында таңбаланған. AJAX қолданбастан, осы элементтердің динамикалық өзгерісі проблемалы болып табылады.

Тауарларды себетке қосу / жою механизмдерін іске асыратын AJAX сценарийлері көптеген SMS-да іс жүзінде болды.

AJAX арқылы қалыпты деректерді беру үшін, пішін кәдімгі түрде орындалуы мүмкін (атын және паролін енгізу үшін):

<Пішін атауы = 'fWelcome' action = 'index.php' method = 'post'>