Ajax примеры на JavaScript. Простой пример использования PHP и AJAX Получить изображение через ajax запрос
В данной статье поговорим о взаимодействии ajax с php. Как связать работу ajax скрипта и php кода? Как применить ajax в веб разработке? Если вас интересуют такие вопросы, вы найдете на них ответы в нашей статье. А также примеры ajax php кода.
Применение ajax + phpДля того, чтобы понять, нужен ли нам вообще ajax с php, давайте разберемся для чего он может быть полезен. Применение ajax+ php может быть разнообразным, единственное, то что, нельзя конструировать элементы страницы с помощью данной технологии, которые несут в себе релевантность для поисковых систем. Потому что ajax подгружает элементы страницы после ее загрузки при вызове js событий, но как нам известно, поисковые системы не умеют читать javascript кода, поэтому нужно тщательно выбирать где нужно, а где не нужно применять ajax с php.
Где можно применить ajax + php?
1. Добавление нового комментария
4. Организация поиска на сайте (автозавершение)
5. Пошаговая регистрация пользователя на сайте
6. Подписка на e-mail
7. Просмотр фотографий
И другие…
Как видите вариантов применения ajax + php масса. То есть, можно применить там, где перезагрузка страницы будет не уместной, где нужно просто обменяться данными с сервером.
Где не стоит применять ajax + php
Мое мнение объективное, может вы думаете иначе, но полагаясь на мой опыт скажу что ajax + php не стоит применять:
1. Для реализации меню
2. Реализации вкладок на странице (Например: когда в интернет магазине на странице товара вы видите обзор, информация, комментарии, фото, видео … не нужно делать загрузку данных при переключении данных вкладок.)
И другие негативные примеры, которые могут навредить лучшему ранжированию вашей страницы.
Взаимодействие ajax с phpПо сути, технология ajax не может существовать без php скриптов, так как ajax, только отправляет данные на сервер и принимает обратный ответ, при этом не перезагружая страницы. Поэтому правильнее задать вопрос, как связать работу ajax и php. Но об этом мы поговорим в следующем пункте статьи (ajax php пример), а сейчас разберемся с спецификой работы ajax.
Для отправки данных на сервер, нужно создать объект XMLHTTPRequest. С помощью него открыть url (php скрипт), послать на него данные (POST или GET метод), получить ответ, и средствами знаний языка js вывести полученный ответ сервера на монитор (ответом может быть любой фрагмент или элемент страницы сайта).
Для прояснения посмотрите ниже предоставленную схему иллюстрирующую взаимодействие ajax с php.
Для примера взаимодействия ajax с php, создадим два файла:
1. ajax_page.html
2. get_ajax.php
Сначала рассмотрим пользовательскую сторону приложения, то есть ajax_ page. html :
Ajax + PHP: пример | сайт
function XmlHttp()
{
var xmlhttp;
try{xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");}
catch(e)
{
try {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
catch (E) {xmlhttp = false;}
}
if (!xmlhttp && typeof XMLHttpRequest!="undefined")
{
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function ajax(param)
{
if (window.XMLHttpRequest) req = new XmlHttp();
method=(!param.method ? "POST" : param.method.toUpperCase());
if(method=="GET")
{
send=null;
param.url=param.url+"&ajax=true";
}
else
{
send="";
for (var i in param.data) send+= i+"="+param.data[i]+"&";
send=send+"ajax=true";
}
req.open(method, param.url, true);
if(param.statbox)document.getElementById(param.statbox).innerHTML = "
";
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(send);
req.onreadystatechange = function()
{
if (req.readyState == 4 && req.status == 200) //если ответ положительный
{
if(param.success)param.success(req.responseText);
}
}
}
Здесь будем принимать отчеты о работе ajax приложения и ответ сервера.
Поле ввода 1
Введите свой текст.!
Поле ввода 2
Произвольный текст... Я тащусь от этой статьи, и хочу подписаться на RSS, что-бы читать такие статьи почаще!!!
ajax_page.html:
Разберем javascript сторону данного примера:
XmlHttp() – функция которая создает объект XMLHttpRequest(), она написана максимально компактно и кроссбраузерно.
ajax(param) – наш обработчик при вызове событий (onclick), принимает в массиве paramнеобходимые данные:
url – куда отсылать данные, причем он может быть в таком виде page. php? parameter= value , то есть информация может передаваться по методу GET.
statbox – ид html блока который будет принимать результаты работы ajax + php приложения.
method – метод отправки данных, может быть POST или GET. В нашем примере мы используем POST метод, но в то же время через url можно передавать информацию GET методом.
data – массив передаваемых данных. В нашем примере, данные автоматически берутся из поля 1 и 2, хотя можно просто писать data: {name: "value"}.
success – имя функции или сама функция, которая будет обрабатывать полученные данные (текст).
Вызов функции ajax как вы видите сделан событием onclick=ajax().
Теперь разберем серверную сторону ajax + php приложения, то есть файл get_ ajax. php:
Здесь все гораздо проще. Сначала устанавливаем кодировку выходящих данных, с помощью header. Устанавливаем запрет на кеширование данных. sleep(2) – приостанавливает работу скрипта на 2 секунды, это для того, что бы увидеть анимацию ожидания wait.gif. Выводим полученные данные, при этом читая все элементы массива $_POST и преобразуя их в нужную кодировку (для кириллицы).
Для запуска нашего ajax php приложения загружаем в браузер страничку ajax_page.html
Вот что у меня получилось при нажатии кнопки TEST AJAX:
Это ответ, полученный от файла get_ajax.php:
Остались еще вопросы по поводу ajax + php? Задайте их в комментариях ниже…
1.1 Особенности технологии AJAXAJAX (Asynchronous JavaScript And XML - асинхронный JavaScript и XML)
представляет собой технологию, позволяющую при необходимости в фоновом режиме
(не прерывая работы пользователя и незаметно для него) выполнять запросы к
серверу и получать дополнительные данные для обновления отдельных частей
Web-страницы, тем самым исключая необходимость повторной загрузки страницы.
Например, выполнять на стороне сервера проверку правильности заполнения данных
пользоваетелем по мере их ввода.
Без
использования технологии AJAX для решения этой
задачи имеются такие возможности:
- выполнять проверку на стороне сервера, но в этом случае необходимо формировать новую Web-страниц, что увеличивает загрузку сети и увеличивает время ожидания клиента;
- выполнять проверку на стороне клиенте, но при этом зачастую необходимо хранить большой объем информации на компьютере клиента.
Для применения AJAX необходимы следующие компоненты:
- JavaScript (основной компонент);
- объект XMLHttpRequest;
- серверные технологии (например, PHP).
Первоначально технологию AJAX разработала фирма Microsoft как объект ActiveX
для браузера Internet Explorer. Затем фирма Mozilla создала объект
XMLHttpRequest с (почти) идентичными API, который в настоящее время
поддерживается всеми современными браузерами.
Рекомендации
организации W3C аналогичной
функциональности пока не применены ни в одном браузере.
Объект XMLHttpRequest дает возможность отправлять асинхронные HTTP-запросы из кода JavaScript серверу, принимать от него ответы и обновлять отдельные части Web-страницы, не прерывая работу пользователя. Имеет следующие методы и свойства:
- abort() - останавливает выполнение текущего запроса;
- getAllResponseHeaders() - возвращает все HTTP-заголовки ответа в виде строки;
- getResponseHeader(header) - возвращает указанный HTTP-заголовок ответа в виде строки;
- open(method, URL [, async_flag [, userName [. password ]]])
-
инициализирует параметры запроса, где:
- method - один из методов обмена данными с сервером: наиболее часто используются GET и POST, но разрешены также методы HEAD, PUT или DELETE;
- URL - абсолютный или относительный URL-адрес сервера;
- async_flag (необязательнлый параметр) - значение true означает асинхронный режим работы с сервером: скрипт, послав запрос серверу, продолжает свою работу (значение по умолчанию), значение false означает синхронный режим работы с сервером: скрипт, послав запрос серверу, приостанавливает свою работу, ожидая ответа от сервера;
- userName (необязательнлый параметр) - имя пользователя для аутентификации, если параметр равен Null или "" и сайт требует аутентификации, то появляется окно login;
- password (необязательнлый параметр) - пароль пользователя для аутентификации, если равен Null или "", то игнорируется;
- send(data) - выполняет запрос, данные указываются только для методов POST или PUT;
- setRequestHeader(level, value) - указывает имя и значение HTTP-заголовка в запросе;
- onreadystatechange - используется для установки функции обратного вызова, которая будет обслуживать изменения состояния запроса;
- readyState
- возвращает состояние запроса:
- 0 - не инициализирован;
- 1 - выполняется подготовка запроса;
- 2 - запрос отправлен;
- 3 - выполняется обмен;
- 4 - обмен завершен.
- responseText - возвращает ответ сервера в виде строки;
- responseXML - возвращает ответ сервера в формате XML;
- responseStream - возвращает ответ сервера в виде двоичных данных;
- status - возвращает HTTP-код состояния запроса;
- statusText - возвращает сообщение о состоянии запроса.
Использование методов и свойств объекта XMLHttpRequest приведено в примере , в котором выполняется получение текстовых данных из локального сервера, и в примере , в котором выполняется получение случайных чисел из удаленного сервера. В этих примерах осуществляется:
- создание объекта xmlHttp;
- формирование запроса к серверу;
- получение данных из сервера.
Создание объекта xmlHttp осуществляется с помощью функции createxmlHttp() . Поскольку объект xmlHttp создается в обоих примерах ( и ), оператор присвоения, вызывающий функцию createxmlHttp() и сама функция описаны во внешнем файле ajax.js :
xmlHttp=createxmlHttp();
function createxmlHttp()
{
try
{
var xmlHttp=new XMLHttpRequest(); //var делает переменную локальльной
}
catch(e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHttp");
}
if(!xmlHttp) alert("Объект xmlHttp не создан");
else return xmlHttp;
}
Функция createxmlHttp() содержит конструкцию try/catch , которая используется для проверки того, выполняется ли некоторый код JavaScpipt без ошибок:
try
{
// Проверяемый код
}
catch(e)
{
// Обработка ошибки
}
Проверяемый код помещается в блок try{}
. Если при
выполнении кода произошла ошибка (возникла исключительная ситуация), то
управление передается блоку catch(e){}
, который
перехватывает возникшее исключение и обрабатывает ошибку. При этом исключение
не доходит до интерпретатора JavaScpipt и поэтому не сообщается пользователю.
Если в блоке try{}
код выполняется без ошибок, то
блок catch(e){}
управление не получает вовсе.
Как
отмечалось выше, современные браузеры
поддерживают работу с XMLHttpRequest
. Однако это не
относится к браузерам IE версии 6 и ниже. Поэтому функция
createxnlHttp()
сначала пытается создать объект
xmlHttp
с помощью класса
XMLHttpRequest
(блок try{}
).
Если при этом возникает исключительлная ситуация, управление передается в блок
catch(e){}
, где делается попытка создать объект
xmlHttp
уже с помощью объекта
ActiveXObject
.
Если
объект и при этом создать не удается, то
выводится сообщение о том, что объект xmlHttp
не
создан.
После создания объекта xmlHttp можно использовать его методы и свойства для организации запроса к серверу. Это делается с помощью функции process() , которая как и функция createxnlHttp() используется в примерах
и и хранится в файле ajax.js :function process()
{
if(xmlHttp)
{
try
{
xmlHttp.open("GET",serverAddr+serverPar,true);
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.send(null);
}
catch(e)
{
alert("Невозможно соединится с сервером:\n"+e.toString()+
"\n"+e.description);
}
}
}
Функция process() сначала проверяет, создан ли объект xmlHttp . Если создан, то выполняются следующие действия:
- С помощью метода open()
задаются значения
параметров соединения с сервером:
- метод - GET;
- адрес сервера и передаваемые параметры указываются с помощью переменных serverAddr и serverPar;
- режим обмена - асинхронный.
- С помощью свойства onreadystatechange указывается обработчик изменений состояния запроса - функция handleStateChange;
- С помощью метода send() посылается запрос на сервер;
- С помощью конструкции try{}/catch(e){} проверяется, не возникла ли ошибка при выполнении вышеописанных действий по созданию и отправлению запроса на сервер.
При возникновении исключительной ситуации на экран выводится сообщение
о невозможности соединения с сервером, к которому добавляется перехваченное
сообщение e
, преобразованное в строку.
Имеется
две возможности преобразования
e
:
- с помощью метода toString();
- с помощью свойства description.
Функция process() использует обе эти возможности. При этом в случае, например, неправильного задания URL-адреса сервера на экране появляются следующие сообщения:
Невозможно соединится с сервером
Отказано в доступе
Ajax скрипты получение данных из сервера выполняется по разному в примере
и в примере
, поэтому будет рассмотрено
отдельно.
Чтение текста из сервера с помощью AJAX
serverAddr="http://zykov/data.txt";
serverPar="";
function handleStateChange()
{
myDiv=document.getElementById("div");
if(xmlHttp.readyState==1)
{
myDiv.innerHTML+="Состояние запроса:1 (подготовка к отправлению)";
"; }
catch(e) { myDiv.innerHTML+="
"; }
}
else
{
if(xmlHttp.readyState==2)
{
myDiv.innerHTML+="Состояние запроса:2 (отправлен)";
try { myDiv.innerHTML+=", статус: "+xmlHttp.statusText+"
"; }
catch(e) { myDiv.innerHTML+="
"; }
}
else
{
if(xmlHttp.readyState==3)
{
myDiv.innerHTML+="Состояние запроса:3 (идет обмен)";
try { myDiv.innerHTML+=", статус: "+xmlHttp.statusText+"
"; }
catch(e) { myDiv.innerHTML+="
"; }
}
else
{
if(xmlHttp.readyState==4)
{
myDiv.innerHTML+="Состояние запроса:4 (обмен завершен)";
try { myDiv.innerHTML+=", статус: "+xmlHttp.statusText+"
"; }
catch(e) { myDiv.innerHTML+="
"; }
if(xmlHttp.status==200)
{
try
{
resp=xmlHttp.responseText;
myDiv.innerHTML+="
Сервер передал:"+resp;
}
catch(e) { alert("Ошибка чтения ответа: "+e.description); }
}
else { alert("Ошибка получения данных\n статус: "+xmlHttp.statusText);}
}
}
}
}
}
Поскольку технология AJAX требует использования Web-сервера, он должен быть запущен до выполнения примера.
Необходимо
также отметить, что текстовые данные, если
они являются кириллицей, должны быть сохранены на сервере в кодировке UTF-8.
Фукция handleStateChange()
с помощью свойства readyState
проверяет
текущее состояние запроса и при его изменении выводит на экран в тэг
с помощью свойства innerHTML
такие данные: номер
состояния, его текстовое значение и статус. Текстовое значение статуса
определяется с помощью свойства statusText
объекта
xmlHttp
. Поскольку не для всех состояний запроса оно
доступно, применяется конструкция try/catch(e)
.
Вывод
всех состояний запроса сделан с учебной
целью. Для получения данных достаточно проанализировать состояние 4 ("обемен
данными завершен"), что и сделано в Ajax примере
.
Затем в состоянии 4 с помощью свойства status определяется, нормально ли закончился обмен данными с сервером. Если статус равен 200 (текстовое значение "OK"), что означает, что операции с сервером закончились успешно, делается попытка чтение данных, возвращенных сервером. Если ошибки нет - данные выводятся на экран, в виде свойства innerText тэга .
В
случае возникновения ошибки на экран выводится
сообщение "Ошибка чтения ответа" с указанием дополнительных данных с помощью
свойства e.description
.
Если
сервер передает другое значение статуса, что
означает, что обмен произошел с ошибками, на экран выводится соответствующее
сообщение с указанием статуса ошибки в текстовом виде.
При выполнении всех операций в примере без ошибок на экран будут выведены следующие данные:
cостояние запроса:1 (подготовка к отправлению)
Состояние запроса:2 (отправлен), статус: OK
Состояние запроса:3 (идет обмен), статус: OK
Состояние запроса:4 (обмен завершен), статус: OK
Если необходимо осуществить чтение данных, находящихся на сервере в формате XML, например, из файла data.xml содержащего такие данные:
Robert Sheckly,
необходимо, помимо указания нового адреса файла - serverAddr ="http://zykov/data.xml", заменить в функции
handleStateChange()
resp=xmlHttp.responseText;
resp=xmlHttp.responseXML.getElementsByTagName("name").firstChild.data;
Тогда вместо сообщения
Сервер передал: Привет, клиент!
появится сообщение
Сервер передал: Robert Sheckly
AJAX - это аббревиатура, которая означает Asynchronous Javascript and XML. На самом деле, AJAX не является новой технологией, так как и Javascript, и XML существуют уже довольно продолжительное время, а AJAX - это синтез обозначенных технологий. AJAX чаще всего ассоцириуется с термином Web 2.0 и преподносится как новейшее Web-приложение.
При использовании AJAX нет необходимости обновлять каждый раз всю страницу, так как обновляется только ее конкретная часть. Это намного удобнее, так как не приходится долго ждать, и экономичнее, так как не все обладают безлимитным интернетом. Правда в этом случае, разработчику необходимо следить, чтобы пользователь был в курсе того, что происходит на странице. Это можно реализовать с использованием индикаторов загрузки, текстовых сообщений о том, что идёт обмен данными с сервером. Необходимо также понимать, что не все браузеры поддерживают AJAX (старые версии браузеров и текстовые браузеры). Плюс Javascript может быть отключен пользователем. Поэтому, не следует злоупотреблять использованием технологии и прибегать к альтернативным методам представления информации на Web-сайте.
Обобщим достоинства AJAX:
- Возможность создания удобного Web-интерфейса
- Активное взаимодействие с пользователем
- Удобство использования
Для того, чтобы осуществлять обмен данными, на странице должен быть создан объект XMLHttpRequest, который является своеобразным посредником между Браузером пользователя и сервером (рис. 1). С помощью XMLHttpRequest можно отправить запрос на сервер, а также получить ответ в виде различного рода данных.
Обмениваться данными с сервером можно двумя способами. Первый способ - это GET-запрос. В этом запросе вы обращаетесь к документу на сервере, передавая ему аргументы через сам URL. При этом на стороне клиента будет логично использовать функция Javascript`а escape для того, чтобы некоторые данные не прервали запрос.
Клиент часть, написанная на Javascript, должна обеспечивать необходимую функциональность для безопасного обмена с сервером и предоставлять методы для обмена данными любым из вышеперечисленных способов. Серверная часть должна обрабатывать входные данные, и на основе их генерировать новую информацию (например, работая с базой данных), и отдавать ее обратно клиенту. Например, для запроса информации с сервера можно использовать обычный GET-запрос с передачей нескольких и небольших по размеру параметров, а для обновления информации, или добавления новой информации потребуется использовать уже POST-запрос, так как он позволяет передавать большие объемы данных.
Как уже было сказано, AJAX использует асинхронную передачу данных. Это значит, что пока идёт передача данных, пользователь может совершать другие, необходимые ему действия. В это время следует оповестить пользователя о том, что идёт какой-либо обмен данными, иначе пользователь подумает, что произошло что-то не то и может покинуть сайт, или повторно вызвать «зависшую», по его мнению, функцию. Индикация во время обмена данными в приложении Web 2.0 играет очень важную роль: посетители могли еще не привыкнуть к таким способам обновления страницы.
Ответ от сервера может быть не только XML, как следует из названия технологии. Помимо XML, можно получить ответ в виде обычного текста, или же JSON (Javascript Object Notation). Если ответ был получен простым текстом, то его можно сразу вывести в контейнер на странице. При получении ответа в виде XML, обычно происходит обработка полученного XML документа на стороне клиента и преобразование данных к (X)HTML. При получении ответа в формате JSON клиент должен лишь выполнить полученный код (функция Javascript`а eval) для получения полноценного объекта Javascript. Но здесь нужно быть осторожным и учитывать тот факт, что с использованием этой технологии может быть передан вредоносный код, поэтому перед выполнением полученного с сервера кода следует его тщательно проверить и обработать. Существует такая практика, как «холостой» запрос, при котором никакой ответ от сервера не приходит, лишь изменяются данные на стороне сервера.
В разных браузерах данный объект обладает разными свойствами, но в целом он совпадает.
Методы объекта XMLHttpRequestЗаметьте, что названия методов записаны в том же стиле (Camel-style), что и другие функции Javascript. Будьте внимательны при их использовании.
abort() - отмена текущего запроса к серверу.
getAllResponseHeaders() - получить все заголовки ответа от сервера.
getResponseHeader(«имя_заголовка») - получить указаный заголовок.
open(«тип_запроса»,«URL»,«асинхронный»,«имя_пользователя»,«пароль») - инициализация запроса к серверу, указание метода запроса. Тип запроса и URL - обязательные параметры. Третий аргумент - булево значение. Обычно всегда указывается true или не указывается вообще (по умолчанию - true). Четвертый и пятый аргументы используются для аутентификации (это очень небезопасно, хранить данные об аутентификации в скрипте, так как скрипт может посмотреть любой пользователь).
send(«содержимое») - послать HTTP запрос на сервер и получить ответ.
setRequestHeader(«имя_заголовка»,«значение») - установить значения заголовка запроса.
Свойства объекта XMLHttpRequestonreadystatechange - одно из самых главных свойств объекта XMLHttpRequest. С помощью этого свойства задаётся обработчик, который вызывается всякий раз при смене статуса объекта.
readyState - число, обозначающее статус объекта.
responseText - представление ответа сервера в виде обычного текста (строки).
responseXML - объект документа, совместимый с DOM, полученного от сервера.
status - состояние ответа от сервера.
statusText - текстовое представление состояния ответа от сервера.
Следует подробнее расммотреть свойство readyState:
- 0 - Объект не инициализирован.
- 1 - Объект загружает данные.
- 2 - Объект загрузил свои данные.
- 3 - Объек не полностью загружен, но может взаимодействовать с пользователем.
- 4 - Объект полностью инициализирован; получен ответ от сервера.
Как уже говорилось выше, создание данного объекта для каждого типа браузера - уникальный процесс.
Например, для создания объекта в Gecko-совместимых браузерах, Konqueror`е и Safari, нужно использовать следующее выражение:
Var Request = new XMLHttpRequest();
А для Internet Explorer`а используется следующее:
Var Request = new ActiveXObject("Microsoft.XMLHTTP");
Var Request = new ActiveXObject("Msxml2.XMLHTTP");
Теперь, чтобы добиться кроссбраузерности, необходимо сложить все функции в одну:
Function CreateRequest() { var Request = false; if (window.XMLHttpRequest) { //Gecko-совместимые браузеры, Safari, Konqueror Request = new XMLHttpRequest(); } else if (window.ActiveXObject) { //Internet explorer try { Request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (CatchException) { Request = new ActiveXObject("Msxml2.XMLHTTP"); } } if (!Request) { alert("Невозможно создать XMLHttpRequest"); } return Request; }
После всего этого можно создавать данный объект и не беспокоится за работоспособность на популярных браузерах. Но создать объект можно в разных местах. Если создать его глобально, то в определенный момент времени возможен будет только один запрос к серверу. Можно создавать объект всякий раз, как происходит запрос к серверу (это почти полностью решит проблему).
Запрос к серверуАлгоритм запроса к серверу выглядит так:
- Проверка существования XMLHttpRequest.
- Инициализация соединения с сервером.
- Посылка запрса серверу.
- Обработка полученных данных.
/* Функция посылки запроса к файлу на сервере r_method - тип запроса: GET или POST r_path - путь к файлу r_args - аргументы вида a=1&b=2&c=3... r_handler - функция-обработчик ответа от сервера */ function SendRequest(r_method, r_path, r_args, r_handler) { //Создаём запрос var Request = CreateRequest(); //Проверяем существование запроса еще раз if (!Request) { return; } //Назначаем пользовательский обработчик Request.onreadystatechange = function() { //Если обмен данными завершен if (Request.readyState == 4) { //Передаем управление обработчику пользователя r_handler(Request); } } //Проверяем, если требуется сделать GET-запрос if (r_method.toLowerCase() == "get" && r_args.length > 0) r_path += "?" + r_args; //Инициализируем соединение Request.open(r_method, r_path, true); if (r_method.toLowerCase() == "post") { //Если это POST-запрос //Устанавливаем заголовок Request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf-8"); //Посылаем запрос Request.send(r_args); } else { //Если это GET-запрос //Посылаем нуль-запрос Request.send(null); } }
Создавать запрос стало намного проще. Для примера напишем функцию, которая будет получать содержимое файла на сервере и выводить его в контейнер.
Function ReadFile(filename, container) { //Создаем функцию обработчик var Handler = function(Request) { document.getElementById(container).innerHTML = Request.responseText; } //Отправляем запрос SendRequest("GET",filename,"",Handler); }
Именно таким образом происходит взаимодействие с сервером.
Обработка ответаВ предыдущем примере мы сделали функцию запроса к серверу. Но она, по сути, небезопасна, так как мы не обрабатываем состояния объекта и состояния ответа от сервера.
Дополним наш код, чтобы он смог выводить визуальное оповещение о процессе загрузки.
Request.onreadystatechange = function() { //Если обмен данными завершен if (Request.readyState == 4) { //Передаем управление обработчику пользователя r_handler(Request); } else { //Оповещаем пользователя о загрузке } } ...
Как вы уже знаете, объект XMLHttpRequest позволяет узнать статус ответа от сервера. Воспользуемся этой возможностью.
Request.onreadystatechange = function() { //Если обмен данными завершен if (Request.readyState == 4) { if (Request.status == 200) { //Передаем управление обработчику пользователя r_handler(Request); } else { //Оповещаем пользователя о произошедшей ошибке } } else { //Оповещаем пользователя о загрузке } } ...
Варианты ответа от сервераОт сервера можно получить данные нескольких видов:
- Обычный текст
JSON - это объектная нотация Javascript. С ее помощью можно представить объект в виде строки (здесь можно привести аналогию с функцией сериализации). При получении JSON-данных вы должны выполнить их, чтобы получить полноценный объект Javascript и произвести с ним необходимые операции. Помните, что такая передача данных и выполнение их не являются безопасными. Вы должны следить за тем, что поступает на исполнение.
Пример кода JSON:
{
"data":
{
"misc":
[
{
"name" : "JSON-элемент один",
"type" : "Подзаголовок 1"
},
{
"name" : "JSON-элемент два",
"type" : "Подзаголовок 2"
}
]
}
}
При получении такого кода, производим следующее действие:
Var responsedata = eval("(" + Request.responseText + ")")
После выполнения данного кода вам будет доступен объект responsedata .
Работа с серверными языками программированияТакая работа ничем не отличается от обычной. Для примеров я возьму PHP в качестве серверного языка. В клиентской части ничего не изменилось, но серверная часть теперь представлена PHP-файлом.
По традиции, начнем с приветствия нашему замечательному миру:
Echo "Hello, World!";
При обращении к этому файлу клиенту вернется строка Hello, World. Как вы понимаете, это представляет широчайшие возможности для построения приложений. На основе передачи аргументов при вызове сервера с помощью XMLHttpRequest можно сделать параметризацию вывода, тем самым обеспечив обширную функциональность Web-приложения.
Помимо PHP, можно использовать любой другой серверный язык программирования.
JQuery это библиотека javascript, цель которой "пиши меньше, делай больше". jQuery легко подключить к сайту и начать использовать. С помощью jQuery становится намного проще использовать javascript на вашем сайте.
jQuery устраняет целую прорву строк кода javascript, и позволяет реализовать эту прорву строк всего одним методом.
Что такое AJAX?AJAX - это асинхронный (т.е. браузер, отослав запрос, может делать что угодно, например, показать сообщение об ожидании ответа, прокручивать страницу, и т.п.) JavaScript и XML. Он используется для создания динамических и быстрых веб-страниц. AJAX позволяет нам обновлять часть веб-страницы без перезагрузки страницы целиком.
Что насчет jQuery и AJAX?Комбинация jQuery и AJAX обеспечивают мощную функциональность. С помощью jquery и ajax вы можете сделать запрос и получить информацию в различных форматах, включая XML, HTML и даже обычный текст. Для обмена данными можно использовать формат JSON. Данные полученные по ajax запросу мы можем использовать в нашей html странице.
jQuery делает существующий браузерный Ajax API мощнее и проще в использовании. Создавать вызовы ajax обычным способом, используя javascript, немного затруднительно: так как вы должны учитывать, что для различных браузеров требуются разные подходы к созданию объекта XMLHttpRequest . Кроме того отправлять данные, например, из форм, становится сложнее, если вы используете обычный javascript для вызова ajax.
jQuery обеспечивает простую и мощную функциональность, которая расширяет javascript AJAX методы и обеспечивает более гибкий подход.
В этой небольшой статье я покажу вам, как использовать jQuery и AJAX в простой php форме . Давайте начнем... Чтобы использовать jQuery и AJAX нам потребуются два файла, в первом файле будет находиться код html/php, посредством которого и будет составляться ajax запрос. Во втором файле мы будет обрабатывать ajax запрос и возвращать результат на первую страницу.
Шаг 1. Создайте файл school.php и вставьте в него следующий код:В приведенном выше коде мы получаем имя и номер студента и, используя jquery и ajax, отсылаем их в details.php .
function getdetails(){ var name = $("#name").val(); var rno = $("#rno").val(); $.ajax({ type: "POST", url: "details.php", data: {fname:name, id:rno} }).done(function(result) { $("#msg").html(" Address of Roll no " +rno +" is "+result); }); }
| Your Name: | ||
| Roll Number: | ||
В приведенном выше коде мы получаем адрес студента с помощью порядкового номера и его имени.
Для данного примера вам понадобится создать базу данных school и таблицу students . Таблица student содержит поля с именами, порядковым номером и адресом.
Надеюсь, эта статья будет вам полезна.
Урок, в котором на примерах рассмотрим создание простых асинхронных AJAX запросов к серверу. В качестве метода передачи запросов будем использовать как метод GET, так и метод POST. На сервере обработку запросов выполним с помощью скриптов PHP.
Что такое асинхронный запрос AJAX?Технология AJAX в основном используется для создания асинхронных запросов к серверу. Асинхронный запрос - это такой запрос, который выполняется в фоновом режиме и не мешает пользователю взаимодействовать со страницей.
При отправке асинхронного запроса, браузер (страница) не "замораживается", т.е. с ней, как и прежде, можно работать. Но тогда как узнать, когда придёт ответ с сервера. Чтобы это определить, необходимо отслеживать свойство браузера readyState (состояние готовности). Данное свойство содержит число, по значению которого можно судить о том, в какой стадии находится запрос. В следующей таблице приведены основные значения свойства readyState и соответствующие им состояния.
Т.е. получается, что нам необходимо отследить, когда значение у свойства readyState будет равно 4. Это будет означать то, что на отправленный запрос, пришёл ответ с сервера. Остальные значения на практике используются довольно редко, и некоторые браузеры могут их не поддерживать.
Для того чтобы определить на какой стадии находится запрос, необходимо использовать событие объекта XMLHttpRequest onreadystatechange . Данное событие происходит каждый раз, когда изменяется значение свойства readyState . Следовательно, в обработчике этого события (неименованной или именованной функции) можно прописать действия, которые будут проверять равно ли данное свойство 4 и если равно, то например, вывести ответ сервера на страницу.
Создание асинхронного AJAX запроса (метод GET)Рассмотрим создание асинхронного AJAX запроса на примере, который будет после загрузки страницы приветствовать пользователя и отображать его IP-адрес.
Для этого необходимо создать на сервере 2 файла в одном каталоге:
Рассмотрим последовательность действий, которые необходимо выполнить на стороне клиента (в коде JavaScript):
Подготовим данные, необходимые для выполнения запроса на сервере. Если для выполнения запроса на сервере данные никакие не нужны, то данный этап можно пропустить.
Создадим переменную, которая будет содержать экземпляр объекта XHR (XMLHttpRequest).
Настроим запрос с помощью метода open() .
Указываются следующие параметры:
- Метод, с помощью которого будет посылаться запрос на сервер (GET, POST).
- URL-адрес, который будет обрабатывать запрос на сервере.
- Тип запроса: синхронный (false) или асинхронный (true).
- Имя и пароль при необходимости.
Подпишемся на событие onreadystatechange объекта XHR и укажем обработчик в виде анонимной или именованной функции. После этого создадим код внутри этой функции, который будет проверять состояние ответа, и выполнять определённые действия на странице. Ответ, который приходит с сервера, всегда находится в свойстве responseText .
Дополнительно с проверкой значения свойства readyState числу 4, можно проверять и значение свойства status . Данное свойство определяет статус запроса. Если оно равно 200, то всё OK . А иначе произошла ошибка (например, 404 – URL не найден).
Отправим запрос на сервер с помощью метода send() .
Если используем для отправки запроса метод GET, то передавать данные в параметр данного метода не надо. Они передаются в составе URL.
Если используем для отправки запроса метод POST, то данные необходимо передать в качестве параметра методу send() . Кроме этого, перед вызовом данного метода необходимо установить заголовок Content-Type, чтобы сервер знал в какой кодировке пришёл к нему запрос и смог его расшифровать.
Содержимое элемента script:
// 2. Создание переменной request var request = new XMLHttpRequest(); // 3. Настройка запроса request.open("GET","processing.php",true); // 4. Подписка на событие onreadystatechange и обработка его с помощью анонимной функции request.addEventListener("readystatechange", function() { // если состояния запроса 4 и статус запроса 200 (OK) if ((request.readyState==4) && (request.status==200)) { // например, выведем объект XHR в консоль браузера console.log(request); // и ответ (текст), пришедший с сервера в окне alert console.log(request.responseText); // получить элемент c id = welcome var welcome = document.getElementById("welcome"); // заменить содержимое элемента ответом, пришедшим с сервера welcome.innerHTML = request.responseText; } }); // 5. Отправка запроса на сервер request.send();
В итоге файл welcome.html будет иметь следующий код:
Пример работы AJAX Пример работы AJAX window.addEventListener("load",function() { var request = new XMLHttpRequest(); request.open("GET","processing.php",true); request.addEventListener("readystatechange", function() { if ((request.readyState==4) && (request.status==200)) { var welcome = document.getElementById("welcome"); welcome.innerHTML = request.responseText; } }); request.send(); });
На сервере (с помощью php):
