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

Содержание:

Anonim

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

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

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

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

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

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

Как создать приложение 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) "» выполняет функцию showName JavaScript каждый раз, когда в текстовое поле вводится ключ.

    Эта функция называется автозаполнением.

Шаг 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

Введите букву C в текстовое поле. Вы получите следующие результаты.

Приведенный выше пример демонстрирует концепцию AJAX и то, как он может помочь нам создавать приложения с богатым взаимодействием.

Резюме

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