Учебное пособие по PHP Ajax с примером

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

Что такое Аякс?

AJAX полная форма — асинхронная JavaСценарий & XML. Это технология, которая уменьшает взаимодействие между сервером и клиентом. Она делает это путем обновления только части веб-страницы, а не всей страницы. Асинхронные взаимодействия инициируются JavaСкрипт. Целью AJAX является обмен небольшими объемами данных с сервером без обновления страницы.

JavaСценарий — это язык сценариев на стороне клиента. Он выполняется на стороне клиента веб-браузерами, поддерживающими JavaСценарий.JavaКод скрипта работает только в браузерах, в которых есть JavaСкрипт включен.

XML — это аббревиатура расширяемого языка разметки. Он используется для кодирования сообщений как в человеко-, так и в машиночитаемом формате. Это похоже на HTML, но позволяет создавать собственные теги. Более подробную информацию о XML см. в статье XML

Зачем использовать AJAX?

  • Это позволяет разрабатывать многофункциональные интерактивные веб-приложения, такие же, как настольные приложения.
  • Проверка может выполняться, когда пользователь заполняет форму, не отправляя ее. Этого можно добиться с помощью автозаполнения. Слова, которые вводит пользователь, передаются на сервер для обработки. Сервер отвечает ключевыми словами, которые соответствуют введенным пользователем.
  • Его можно использовать для заполнения раскрывающегося списка в зависимости от значения другого раскрывающегося списка.
  • Данные можно получить с сервера и обновить только определенную часть страницы, не загружая всю страницу. Это очень полезно для частей веб-страницы, которые загружают такие вещи, как
  • твиты
  • Комментарии
  • Пользователи, посещающие сайт и т. д.

Как создать приложение 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) Создание страницы фреймворков

framework.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 — это аббревиатура от асинхронного JavaСценарий и XML
  • AJAX — это технология, используемая для создания приложений с богатым взаимодействием, которые сокращают взаимодействие между клиентом и сервером за счет обновления только частей веб-страницы.
  • Internet Explorer версии 5 и 6 использует ActiveXObject для реализации операций AJAX.
  • Internet Explorer версии 7 и выше и браузеры Chrome, Firefox, Operaи Safari используют XMLHttpRequest.

Вы могли бы: