Підручник PHP Ajax із прикладом

Автор: Фіона Браун Фіона Браун
Hours оновлений

Що таке Ajax?

AJAX повна форма – асинхронна JavaScript & XML. Це технологія, яка зменшує взаємодію між сервером і клієнтом. Це робиться шляхом оновлення лише частини веб-сторінки, а не всієї сторінки. Асинхронні взаємодії ініціюються JavaСценарій. Метою AJAX є обмін невеликими обсягами даних із сервером без оновлення сторінки.

JavaScript це мова сценаріїв на стороні клієнта. Він виконується на стороні клієнта веб-переглядачами, які підтримують JavaСценарій.JavaКод сценарію працює лише в браузерах, які мають JavaСценарій увімкнено.

XML це абревіатура від Extensible Markup Language. Він використовується для кодування повідомлень у форматах, які читаються людиною та машиною. Це як HTML, але дозволяє створювати власні теги. Додаткову інформацію про XML див. у статті XML

Навіщо використовувати AJAX?

  • Це дозволяє розробляти багатофункціональні інтерактивні веб-програми, як і настільні програми.
  • Перевірку можна виконати, коли користувач заповнює форму, не надсилаючи її. Цього можна досягти за допомогою автозаповнення. Слова, які вводить користувач, надсилаються на сервер для обробки. Сервер відповідає ключовими словами, які відповідають введеним користувачем.
  • Його можна використовувати для заповнення спадного списку залежно від значення іншого спадного списку
  • Дані можна отримати із сервера й оновити лише певну частину сторінки без завантаження всієї сторінки. Це дуже корисно для частин веб-сторінки, які завантажують такі речі, як
  • Tweets
  • Коментарі
  • Користувачі, які відвідують сайт тощо.

Як створити програму PHP Ajax

Ми створимо просту програму, яка дозволить користувачам шукати популярні фреймворки PHP MVC.

Наша програма матиме текстове поле, у якому користувачі вводитимуть назви фреймворку.

Потім ми використаємо mvc AJAX для пошуку відповідності, а потім відобразимо повну назву фреймворку під формою пошуку.

Крок 1) Створення індексної сторінки

index.php

<html>

    <head>

        <title>PHP MVC Frameworks - Search Engine</title>

        <script type="text/javascript" src="auto_complete.js"></script>

    </head>

    <body>

        <h2>PHP MVC Frameworks - Search Engine</h2>

        <p><b>Type the first letter of the PHP MVC Framework</b></p>

        <form method="POST" action="index.php">

            <p><input type="text" size="40" id="txtHint"  onkeyup="showName(this.value)"></p>

        </form>

        <p>Matches: <span id="txtName"></span></p>

    </body>

</html>

ТУТ,

  • “onkeyup=”showName(this.value)”” виконує JavaФункція сценарію showName щоразу, коли в текстовому полі вводиться клавіша. Ця функція називається автозаповненням

Крок 2) Створення сторінки фреймворків

frameworks.php

<?php

$frameworks = array("CodeIgniter","Zend Framework","Cake PHP","Kohana") ;

$name = $_GET["name"];

if (strlen($name) > 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 textbox

        document.getElementById("txtName").innerHTML=""; //clear previous results

        return;

    }

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari

        xmlhttp=new XMLHttpRequest();

    } else {// code for IE6, IE5

        xmlhttp=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

Тестування нашої програми PHP Ajax

Введіть літеру C у текстовому полі. Ви отримаєте такі результати.

Тестування нашої програми PHP Ajax

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

Підсумки

  • AJAX - це абревіатура від Asynchronous JavaScript і XML
  • AJAX — це технологія, яка використовується для створення додатків для багатофункціональної взаємодії, які зменшують взаємодію між клієнтом і сервером, оновлюючи лише частини веб-сторінки.
  • Internet Explorer версії 5 і 6 використовують ActiveXObject для реалізації операцій AJAX.
  • Internet Explorer версії 7 і вище та браузери Chrome, Firefox, Opera, і Safari використовують XMLHttpRequest.

Вам може сподобатися: