Що таке Ajax?
Повна форма AJAX - це асинхронний JavaScript та XML. Це технологія, яка зменшує взаємодію між сервером та клієнтом. Це робиться шляхом оновлення лише частини веб-сторінки, а не всієї сторінки. Асинхронні взаємодії ініціюються JavaScript. Мета AJAX полягає в обміні невеликими обсягами даних із сервером без оновлення сторінки.
JavaScript - це мова сценаріїв на стороні клієнта. Він виконується на стороні клієнта веб-браузерами, які підтримують JavaScript. Код JavaScript працює лише у браузерах, у яких увімкнено JavaScript.
XML - абревіатура від Extensible Markup Language. Він використовується для кодування повідомлень як у зручному, так і в машиночитаному форматі. Це як HTML, але дозволяє створювати власні теги. Докладніше про XML див. У статті про XML
Навіщо використовувати AJAX?
- Це дозволяє розробляти багаті інтерактивні веб-програми, як і настільні програми.
- Перевірку можна здійснити, коли користувач заповнює форму, не подаючи її. Цього можна досягти за допомогою автозавершення. Слова, які вводить користувач, надсилаються на сервер для обробки. Сервер відповідає ключовими словами, які відповідають введеному користувачем.
- Він може бути використаний для заповнення випадаючого вікна залежно від значення іншого випадаючого вікна
- Дані можна отримати з сервера і оновити лише певну частину сторінки без завантаження цілої сторінки. Це дуже корисно для частин веб-сторінки, які завантажують такі речі
- Твіти
- Коменс
- Користувачі, які відвідують сайт тощо.
Як створити програму PHP Ajax
Ми створимо простий додаток, що дозволяє користувачам шукати популярні PHP MVC фреймворки.
У нашому додатку буде текстове поле, яке користувачі будуть вводити в імена фреймворку.
Потім ми будемо використовувати mvc AJAX для пошуку відповідності, а потім відображатимемо повне ім’я фреймворку безпосередньо під формою пошуку.
Крок 1) Створення індексної сторінки
Index.php
PHP MVC Frameworks - Search Engine PHP MVC Frameworks - Search Engine
Type the first letter of the PHP MVC Framework
Matches:
ТУТ,
-
“Onkeyup =" showName (this.value) "" виконує функцію JavaScript showName кожного разу, коли в текстовому полі вводиться ключ.
Ця функція називається автозавершенням
Крок 2) Створення сторінки фреймворків
frameworks.php
0) {$match = "";for ($i = 0; $i < count($frameworks); $i++) {if (strtolower($name) == strtolower(substr($frameworks[$i], 0, strlen($name)))) {if ($match == "") {$match = $frameworks[$i];} else {$match = $match . " , " . $frameworks[$i];}}}}echo ($match == "") ? 'no match found' : $match;?>
Крок 3) Створення сценарію JS
auto_complete.js
function showName(str){if (str.length == 0){ //exit function if nothing has been typed in the textboxdocument.getElementById("txtName").innerHTML; //clear previous resultsreturn;}if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();} else {// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange=function() {if (xmlhttp.readyState == 4 && xmlhttp.status == 200){document.getElementById("txtName").innerHTML=xmlhttp.responseText;}}xmlhttp.open("GET","frameworks.php?name="+str,true);xmlhttp.send();}
ТУТ,
- “If (str.length == 0)” перевірити довжину рядка. Якщо воно дорівнює 0, то інша частина сценарію не виконується.
- “If (window.XMLHttpRequest) ...” Internet Explorer версій 5 та 6 використовує ActiveXObject для реалізації AJAX. Інші версії та браузери, такі як Chrome, FireFox, використовують XMLHttpRequest. Цей код забезпечить, щоб наш додаток працював як в IE 5 & 6, так і в інших високих версіях IE та браузерах.
- “Xmlhttp.onreadystatechange = function ...” перевіряє, чи взаємодія AJAX завершена, а статус 200 - оновлює діапазон txtName із повернутими результатами.
Крок 4) Тестування нашої програми PHP Ajax
Припускаючи, що ви зберегли файл index.php У phututs / ajax перейдіть за URL-адресою http: //localhost/phptuts/ajax/index.php
Введіть букву С у текстовому полі Ви отримаєте такі результати.
Наведений приклад демонструє концепцію AJAX і те, як він може допомогти нам створити розширені програми для взаємодії.
Резюме
- AJAX - абревіатура від асинхронного JavaScript та XML
- AJAX - це технологія, що використовується для створення розширених програм для взаємодії, які зменшують взаємодію між клієнтом та сервером шляхом оновлення лише частин веб-сторінки.
- Internet Explorer версій 5 та 6 використовує ActiveXObject для реалізації операцій AJAX.
- Internet Explorer версії 7 і вище та браузери Chrome, Firefox, Opera та Safari використовують XMLHttpRequest.