Ajax примеры для начинающих

Что такое jQuery?

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 .

Шаг 2: Создайте details.php и расположите в нем следующий код:

В приведенном выше коде мы получаем адрес студента с помощью порядкового номера и его имени.

Для данного примера вам понадобится создать базу данных school и таблицу students . Таблица student содержит поля с именами, порядковым номером и адресом.

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

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

В данной серии уроков мы рассмотрим основы построения запросов AJAX с помощью jQuery. Будут раскрыты следующие темы:

• Что такое технология AJAX? Как она работает? В чем ее преимущества?
• Как выполнить различные типы запросов AJAX с помощью jQuery?
• Отправка данных на сервер с помощью запросов AJAX.
• Обработка и выделение данных из ответов AJAX с сервера.
• Как настроить обработку AJAX в jQuery и изменить установки по умолчанию?

Примечание: Уроки сконцентрированы на части JavaScript клиентской стороны. Но разработка серверной части также достаточно проста. Для более полной информации следует изучить материалы по языкам программирования серверной стороны, например PHP.

Что такое AJAX и чем он полезен?

AJAX является техникой разработки веб приложений, в которых JavaScript код, выполняющийся в браузере посетителя, связывается с веб сервером асинхронно , то есть в фоновом режиме. Отличие от обычных веб приложений заключаются в следующем:

• Обычная веб страница содержит ссылки или формы, которые при нажатии или отправке создают запрос к новому адресу URL на веб сервере. Сервер отправляет полностью новую страницу HTML, которую затем выводит браузер, заменяя оригинальную страницу. Такой подход занимает много времени и плохо действует на посетителя, так как тому приходится ждать загрузки новой страницы.
• При использовании технологии AJAX, JavaScript код делает запрос к URL на сервере. Код также может отправить данные вместе с запросом. Затем JavaScript код обрабатывает ответ сервера и действует соответствующим образом. Например, могут быть произведены вычисления с возвращаемыми данными, добавлен или обновлен виджет на странице, выдано сообщение посетителю об обновлении базы данных на сервере.

Так как запрос AJAX выполняется в фоновом режиме, то код JavaScript (и посетитель) может продолжать работу со страницей во время обработки запроса. Процесс скрыт от посетителя, которому не нужно покидать страницу, которую он просматривает в данный момент времени. Такой подход делает страницы с AJAX очень приятными в работе.

Фундаментальным моментом AJAX является объект JavaScript XMLHttpRequest . Он предоставляет ряд методов, таких как open() , send() и onreadystatechange() , которые могут быть использованы при отправке запросов AJAX на сервер и обработке ответов в фоновом режиме.

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

Для тех кто более любопытен, слово AJAX является аббревиатурой из первых букв выражения на английском языке "Asynchronous JavaScript And XML" (Асинхронный JavaScript и XML). Однако, термин может ввести в заблуждение — запрос не обязательно должен быть асинхронным и необязательно использовать XML для отправки данных.

Делаем запрос GET с помощью $.get()

Метод jQuery $.get() предоставляет легкий и удобный способ сделать простой запрос AJAX. Он выполняет запрос с помощью метода HTTP GET (используется для получения URL, например страниц и изображений), вместо метода POST (который традиционно используется для отправки данных формы).

В простейшей форме можно вызвать метод так:

. где url является адресом URL ресурса, от которого ожидается ответ. Обычно это скрипт на стороне сервера, который выполняет какие-нибудь действия и может возвращать некие данные:

. хотя можно также запросить статический документ:

При запросе URL, вы можете отправить данные с запросом. Вы можете передать данные в строке запроса, так же как и при обычном запросе GET:

Корректно будет сделать то же самое передав объект данных в качестве второго параметра методу $.get() . Объект данных должен содержать информацию в виде пар имя свойства/значение свойства. Например:

В качестве альтернативы вы можете передать данные методу $.get() как строку:

Получаем данные с сервера

До сих пор мы рассматривали примеры использования $.get() только для отправки запросов на сервер, игнорируя любой ответ, который может сформировать скрипт на серверной стороне. Но в большинстве случаев ваш JavaScript код будет ожидать ответ от скрипта на серверной стороне и обрабатывать полученные данные.

AJAX запрос — асинхронный , что означет его выполнение в фоновом режиме, когда остальной код JavaScript продолжает действовать. Как же в таком случае получать ответ от сервера, когда завершится запрос?

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

Как только возвратная функция создана, вы можете передать ее в качестве третьего аргумента в метод $.get() :

Определяем тип данных ответа

Обычно, серверная сторона передает данные в одном из нескольких типовых форматов, включая XML, JSON, JavaScript, или HTML. По умолчанию jQuery пытается определить наиболее подходящий формат и разобрать данные соответствующим образом. Но лучше явно определить формат.

Для указания формата надо передать четвертый аргумент методу $.get() . Данный аргумент может быть строкой из следующего списка:

Например, если вы знаете, что скрипт сервера возвращает данные в формате JSON, то вызываете метод $.get() следующим образом:

Пример использования метода $.get()

Здесь приводится пример создания запроса AJAX с помощью метода $.get() и простая обработка ответа. Для работы примера нужно на сервере создать простой текстовый файл с именем getForecast.txt , содержащий следующий текст:

Данный файл будет имитировать ответ в формате JSON, который мог быть сформирован скриптом прогноза погоды на сервере.

Затем создаем страницу showForecast.html в той же папке что и getForecast.txt :

Открываем showForecast.html в браузере и нажимаем кнопку "Получить прогноз погоды". В окне сообщения получим прогноз погоды с нашего сервера.

Вот как работает данный код:

1. showForecast.html содержит элемент button "Получить прогноз погоды" с ID getForecast .
2. JavaScript вверху страницы выполняется как только страница будет загружена и DOM окажется в состоянии готовности.
3. Код JavaScript сначала привязывает обработчик события click к кнопке #getForecast . Данный обработчик выполняет AJAX запрос GET к getForecast.txt , передавая название города и дату для прогноза. Также определяется возвратная функция success(), которая будет выполняться по завершению запроса. Формат возвращаемых сервером данных определяется как JSON.
4. Файл getForecast.txt возвращает браузеру данные прогноза в формате JSON.
5. Вызывается функция success() . jQuery разбирает данные JSON, полученные от getForecast.txt , конвертирует их в объект JavaScript, и передает их в функцию.
6. Функция возвращает объект данных forecastData и выводит сообщение, которое содержит несколько свойств объекта, включая название города, прогноз и температуру.

Простой пример в несколько строк демонстрирует работу запроса AJAX с использованием метода $.get() .

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.elated.com/articles/ajax-with-jquery-a-beginners-guide/
Перевел: Сергей Фастунов
Урок создан: 5 Марта 2012
Просмотров: 162954
Правила перепечатки

5 последних уроков рубрики "jQuery"

• 

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

Здравствуйте, уважаемые читатели блога LifeExample, наконец-то меня посетило вдохновение и я готов порадовать вас новым, большим и полезным материалом для начинающих web-мастеров. В этой статье речь пойдет о золотой технологии AJAX и примерах скриптов, написанных на её основе.

Сегодня я сделаю упор на работу с XML данными, т.к. пытаясь разобраться с технологией AJAX, мне попадались лишь примеры работы с JSON форматом. О работе с ним читайте в продолжении к данному материалу, которое скоро будет подготовлено и опубликовано.

Предупреждаю! Эта публикация будет очень объемной, поэтому запаситесь терпением и приготовьтесь внимать смыслу рассматриваемых в ней примеров:

1. Технология AJAX пример №1 — наипростейший пример, для ознакомления с азами AJAX.
2. Технология AJAX пример №2 — отправка данных на сервер средствами AJAX.
3. Технология AJAX пример №3 — отправка структуры данных с сервера в виде XML и работа с ними на стороне клиента.

Совместив все эти AJAX примеры воедино, мы получим реализацию обмена данными по AJAX технологии с форматом XML.

Давайте приступим к большой и трудоемкой работе. Но сначала ознакомьтесь с небольшим введением.

За интерактивностью будущее!

Все больше появляется пользователей, приходящих на наши веб-ресурсы, не желающих наблюдать перезагрузку страницы, при каждом их действии. Сегодня мы можем встретить много примеров работы сервисов, вышедших из каменного века перезагрузки страниц. К ним можно отнести наши разнообразные социальные сети, или всевозможные сервисы для веб-мастеров.

Дать пользователю свободу действий – и не перезагружать страницу, стало возможным с развитием и внедрением AJAX технологии.

Концепция технологии AJAX

Как вы уже поняли, эта "золотая" технология позволяет нам обмениваться данными меду браузером и сервером в фоновом режиме, не обновляя страницу. Говоря по-умному, сей обмен является асинхронным.

Под асинхронностью в программировании я понимаю процесс выполнения второстепенного действия, не прекращая основное.

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

Итак, концепция такова: между браузером и сервером не переставая происходит обмен данными, которые:

1. Вводятся в браузер средствами пользовательского интерфейса;
2. Отправляются на сервер;
3. Обрабатываются на сервере, возможно, заносятся в БД;
4. В это время браузер ожидает возвращение ответа;
5. Пока браузер ждет, он не прекращает работу пользователя;
6. Дождавшись данных от сервера в определенном формате, обрабатывает их и выводит в контент HTML страницы.

Вы можете пронаблюдать представленный процесс на схематической иллюстрации работы описываемой технологии.

Осталось упомянуть важный момент: данные циркулирующие между сервером и браузером, должны отвечать определённым правилам форматирования. Такие правила обычно описывают два формата:

1. XML(eXtensible Markup Language) — расширяемый язык разметки;
2. JSON(JavaScript Object Notation) —текстовый формат основанный на JavaScript.

В редких случаях можно обойтись свободным текстовым форматом передачи данных, но это скорее исключение.

Технология AJAX расшифровывается как (Asynchronous JavaScript and XML), из этого можно сделать вывод, что разработчики в первую очередь предполагают использование формата XML. Но на деле, как показывает практика все чаще используется формат JSON, в силу своего минимализма. Другими словами – работать с обоими форматами можно одинаково хорошо, но один и тот же набор данных, представленный в JSON и XML, в первом будет иметь меньший размер. Следовательно, если JSON имеет меньший размер, то и передаваться он будет быстрее, чем XML.

XML для AJAX

Чуть позже мы рассмотрим работу AJAX, с использованием данных в формате XML. А пока давайте разберемся, что же такое XML формат.

Во-первых, надо четко понимать, что данный формат является текстовым и его можно запросто создать собственноручно, с помощью notepad++ любого другого текстового редактора.

Во-вторых, синтаксис XML очень похож на всем нам известный HTML.

Вот пример HTML разметки:

Мы видим, что любой открытый тег имеет свой закрывающий эквивалент. Также некоторые из тегов имеют атрибуты. Тут я никому Америку не открыл, и все понимают, что этот HTML документ будет интерпретирован браузером, который вместо тегов применит соответствующие им стили для текста.

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

Пример структуры в формате XML

Такими произвольными тегами и атрибутами как в этом примере можно запросто описать карточку пользователя, системы.

Запомните! Вся работа приложения на основе технологии AJAX сводится к обмену сложными структурами данных между клиентом (браузер), и сервером (web сервер).

Замечание 1: Можно, но совершенно не обязательно писать парсер самостоятельно ведь разработчики PHP создали все необходимые универсальные функции ("XML Parser Functions") для работы с XML форматом. Чтобы разобраться с ними нужно начать копать в сторону xml_parser_create().

Замечание 2: Технологией AJAX, тоже предусмотрен механизм отправки пользовательских данных.

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

Отлично, теперь мы представляем, что такое XML формат, и понимаем, что назначением его является передача сложных структур данных между сервером и клиентом. Следовательно, можем двигаться дальше.

AJAX пример №1 (Начало работы)

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

Исходный код HTML документа:

script type = "text/javascript" >
function startAjax ( url ) <
var request ;
if ( window. XMLHttpRequest ) <
request = new XMLHttpRequest ( ) ;
> else if ( window. ActiveXObject ) <
request = new ActiveXObject ( "Microsoft.XMLHTTP" ) ;
> else <
return ;
>

request. onreadystatechange = function ( ) <
switch ( request. readyState ) <
case 1 : print_console ( "
1: Подготовка к отправке. " ) ; break
case 2 : print_console ( "
2: Отправлен. " ) ; break
case 3 : print_console ( "
3: Идет обмен.." ) ; break
case 4 : <
if ( request. status == 200 ) <
print_console ( "
4: Обмен завершен." ) ;
document. getElementById ( "printResult" ) . innerHTML = "" + request. responseText + "" ;
> else if ( request. status == 404 ) <
alert ( "Ошибка: запрашиваемый скрипт не найден!" ) ;
>
else alert ( "Ошибка: сервер вернул статус: " + request. status ) ;

break
>
>
>
request. open ( ‘GET’ , url , true ) ;
request. send ( » ) ;
>
function print_console ( text ) <
document. getElementById ( "console" ) . innerHTML += text ;
>
script >

В коде HTML страницы мы создаем функцию startAjax() на языке JavaScript, позволяющую реализовать задуманные действия с AJAX’ом. Кстати, о действиях, во-первых мы хотим увидеть, как отрабатывает php скрипт, находящийся на сервере. Во-вторых, как возвращенная им информация появляется на страничке, без перезагрузки. Для этого в коде мы предусмотрели ссылку, по нажатию на которую запустится процесс всей демонстрации, консоль вывода действий JavaScript скрипта, а также блок для вывода результата.

Так вот, вернемся к создаваемой нами функции startAjax(), по строчкам я все описывать не стану, выделю лишь основные моменты, требуемые для представления происходящего.

• Создаем объект XMLHttpRequest позволяющий получать данные с сервера в фоновом режиме.
• Если используется IE (Браузер — Internet Explorer) тогда вместо вышеупомянутого объекта XMLHttpRequest, создаем объект ActiveXObject, смысл у них единый, отличие только в индивидуальности для IE.
• Обрабатываем все 4-ре статуса состояния запроса. Созданный запрос он же объект request, в процессе отправкиполучения данных может принимать четыре состояния (1 — подготовка к отправке, 2 — отправлен, 3 — идет обмен, 4 — получен ответ.)
• В случае 4-го статуса, при получении ответа от сервера, происходит проверка на тип ответа 200 — "OK" или 404 — "Not Found".
• Событие request.open() — открывает соединение с сервером с указанием метода передачи данных, адресом запроса, и флагом асинхронности. Указав флаг как false, мы получим в результате обычную перезагрузку страницы.

Кликнув на ссылку, мы пронаблюдаем успешное выполнение простого AJAX запроса.

Разумеется, такое сообщение мы получим только после того как разместим на сервере, в той же папке, что и саму html страничку, скрипт handler_script.php:

Скрипт не мудрый, тем не менее, его содержимого достаточно для демонстрации.

Ну вот, с азами разобрались, перейдем от простого к сложному. Рассмотрим пример использования технологии AJAX по прямому её назначению, а именно с пересылкой данных в виде XML.

AJAX пример №2 — отправка POST запроса на сервер

Переходя ко второму примеру, давайте уясним тот факт, что любой из запросов, отправляющийся на сервер, может иметь один из таких типов данных:

• GET — передаёт пользовательских данные заданному ресурсу по URI.
• POST — передаёт пользовательских данные заданному ресурсу по протоколу.
• HEAD — аналогичен методу GET, за исключением того, что сервер ничего не посылает в информационной части ответа.
• TRACE — возвращает всё, что было введено при запросе, включая HTTP-заголовки.
• DELETE — Удаляет указанный ресурс.
• PUT — загружает содержимого запроса на указанный в запросе URI.

Причем это относится не только к технологии AJAX, а в принципе ко всему протоколу HTTP. Самыми распространенными являются два типа GET и POST, как правило, они широко используемы в отправке данных на сервер посредствам HTML элемента form. Именно с этими типами запроса я и приведу примеры работы веб приложения на АЯКСЕ.

Для того чтобы с помощью АЯКС технологии отправить POST запрос, нужно использовать три метода объекта request:

• open – открывает соединение с сервером с указанием метода передачи данных.
• setRequestHeader — устанавливает заголовок запроса.
• send — отправляет запрос.

Откройте код примера №1 и замените в нем строки: