Посмотреть демо

В этом уроке мы создадим авторизацию с использованием асинхронной передачи данных в javascript.

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

После, если все поля заполнены, то без перезагрузки страницы отправит данные на проверку, и выведет полученные данные.

В php скрипте мы вытащим всех пользователей с логином и паролем, которые получим от javascript'a, и если такой пользователь будет, то создадим сессию и выведем информацию о успешном входе.

В javascript'e мы примем данные от скрипта и выведем их, так же будет кнопка моментального выхода, то-есть мы сможем без перезагрузки страницы выйти из нашего профиля.

Читать полностью »

В этом уроке мы рассмотрим выполнение действий в зависимости от ответа сервера. Например, если мы отправили запрос, и он удачный, то-есть скрипт-обработчик есть, и он получил запрос, то выводим полученный ответ.

Мы сегодня также рассмотрим создание рабочего скрипта, который будет

выводить случайные фразы по клику на кнопку, и всё это будет происходить

без перезагрузки страницы.

В php файл мы пишем наш код, только в этом коде должна быть одна функция echo. То-есть в нашем коде мы не должны выводить ничего лишнего, кроме того, что нам нужно получить от скрипта, например текст случайной фразы.

Чтобы узнать о удачной отправке запроса в javascript есть метод OnReadyStateChange.

Читать полностью »

Для получения ответа от сервера нужно использовать - responseText или responseXML свойства объекта XMLHttpRequest.

responseText несёт в себе данные в виде строки

responseXML несёт в себе данные ответа в виде данных XML

Свойство responseText

Если ответ от сервера не в виде XML данных, то для его получения нужно использовать responseText.

Свойство responseText возвращает ответ в виде строки, и поэтому его можно легко встроить в наш код! Например вставить его в текстовое поле, или если ответ в виде html кода, скажем список статей, то можно добавить его в соответствующий блок!

В примере, мы вставим в блок - mainDiv - полученный ответ от сервера:

document.getElementById("mainDiv").innerHTML=xmlhttp.responseText;

Читать полностью »

Сегодня мы научимся при помощи ajax отправлять запрос на сервер.

Для отправки запроса используются open (); и send (); методы объекта XMLHttpRequest.

Отправка запроса на сервер

Давайте отправим простой запрос к файлу на сервере, пускай это будет script.php:

xmlhttp.open ( "GET", "script.php", true );
xmlhttp.send ();

Подробно рассмотрим что мы здесь передаём:

open ( "метод передачи данных", url, "асинхронная передача" );

Этот метод задаёт тип запроса, url файла, тип передачи данных - асинхронная или синхронная.

Метод передачи данных: тип запроса - GET или POST

url: Адрес файла, расположенный на сервере, которому посылаем запрос

Читать полностью »

Объект XMLHttpRequest используется в ajax для обмена данными с сервером в фоновом режиме, то есть весь процесс будет скрыт от пользователя. Благодаря этому объекту можно обновлять данные на странице в определённом месте без перезагрузки всей страницы, и выполнять php функции не показывая сам процесс пользователю.

variable = new XMLHttpRequest();