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

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

Інтернет забезпечує відвідувачу видимість кожного ресурсу, що знаходиться на хостингу в мережі, а браузеру - доступ через мережеві протоколи, механізми виклику окремих скриптів, передачу/отримання інформації. Сукупність сторінок, складових сайт, має спільний root - унікальне посилання (доменне ім 'я, унікальна адреса вузла).

Неважливо, ресурс реагує на відвідування статично або створює відповідь динамічно. Навіть якщо вигляд і зміст сторінки залежать від будь-яких умов, неподільною одиницею спілкування сервера і клієнта (браузера) є закінчений HTML-документ з кодом, картинками, таблицями стилів, файлами та іншим необхідним вмістом і оточенням. Якщо щось тут не так, браузер відобразить все що "зумів" отримати, розібрати і виконати.


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

Все відразу або тільки те, що потрібно

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

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

Але ось сайт зазвичай завжди вантажиться в повному боєкомплекті, ніщо не змінюється за фактом завантаження, з урахуванням часу того, хто прийшов... Адже навіть у випадку, коли він є ресурс реальної поліклініки, то при першому відвідуванні нового клієнта достатньо дати сторінку інформації, контактів і віконця реєстратури... Можна передбачити, що візит на сайт був нанесений в неробочий час, а призначений лікар відсутній, прийом тимчасово проводиться в іншому кабінеті...

Точка в інтернет-просторі

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

Написати скрипт нескладно. Але, отримуючи управління на точці в інтернет-просторі, не можна визначити, хто і з якого приводу звернувся, тобто активував це ім 'я, IP-адресу і посилання. Будь-який рух по мережі відбувається програмно, в основному через браузер, але також через роботів різного походження і призначення, за допомогою дій інших сайтів.


Скрипт, який отримав управління, може точно знати тільки: час відвідування, через який браузер зайшов відвідувач, з якого посилання, з якої IP-адреси і наявність cookies. Тільки останнє може дати інформацію, як сформувати головну сторінку, але тільки в тому випадку, якщо цей відвідувач вже був тут. У всіх інших ситуаціях можна створювати лише спільну відповідь сервера. AJAX-приклади, які легко знайти в Інтернеті, слід використовувати уважно. Помилки в роботі (використанні) об 'єкта 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 (), на вхід якої надійде X.

Відповідь сервера

Власне сервер являє собою PHP-скрипт - програму, яка починається з встановлення істотних умов, завантаження необхідних об 'єктів, попередньої підготовки, яка залежить від цілей розробника:

namespace PhpOffice\PhpWord;

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

ignore_user_abort(true);

 


 

 

 

}

 






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 форма може бути виконана звичайним чином (для введення імені і пароля):

<form name='fWelcome' action='index.php' method='post'>
<div id='scWelcomeLabel' style='left: 0px; top: 12px; "> Назва:</div>
<div id='scWelcomeLabel' style='left: 0px; top: 35px; "> Пароль:</div>
<input type='text' name='cName' value='' id='scWelcomeField' title='Имя' style='left: 56px; top: 8px;'>
<input type='text' name='cPass' value='' id='scWelcomeField' title='Пароль' style='left: 56px; top: 31px;'>
</form>
<div id='scWinClose' onclick='JavaScript: scfWelcomeCancel (); 'title =' Закрити вікно '> </div >
<div id='scWelcomeGo' onclick='JavaScript: scfWelcomeGo (); '> Вхід </div >

Тут обробник:

function scfWelcomeGo() {

var cName = document.fWelcome.cName.value;
var cPass = document.fWelcome.cPass.value;

InitXML('../Mphp/scSrvPhpWord.php?cTask=CheckWelcome'
+ '&cName=' + cName
+ '&cPass=' + cPass);

}

передає на сервер для перевірки введені відвідувачем ім 'я і пароль. Скрипт перевіряє наявність отриманої інформації в таблиці користувачів і надсилає назад відповідь, на підставі якої відповідний скрипт на сторінці виводить повідомлення (виконує дію) для зареєстрованого відвідувача або повідомляє, що такого користувача немає, і потрібно пройти процедуру реєстрації.