Поиск с использованием AJAX.


Содержание

Пишем свой простой вариант «живого поиска».

Сегодня я напишу статью, о том как сделать простую версию так называемого «живого поиска». Для тех кто не в курсе, живой поиск — это когда при вводе искомого текста, появляется подсказка, с возможными вариантами. Примером тому служит Яндекс и Google.

По сути «живой поиск» это обычный AJAX скрипт, который обращается к базе данных, производит в ней поиск, и возвращает ответ скрипту. Для работы поиска я буду использовать Jquery.

Итак, создадим простую форму поиска:

Обратите внимание на autocomplete=»off» у input’а, это для того чтобы отключить подсказки браузера, которые он показывает при повторном наборе текста в форме.

Теперь займемся созданием javascript скрипта.

Я постарался описать этот скрипт по максимуму в комментариях. По сути скрипт делется на несколько частей:

  1. Считываем ввод с клавиатуры, получаем данные из базы данных и выводим их
  2. Делаем скрытие слоя с подсказками, при нажатии на Escape и Enter
  3. Делаем переход по слою с подсказками, через нажатие стрелок клавиатуры ( вверх и вниз)
  4. Скрытие слоя с подсказками при клике на поле сайта и открытие его при клике на input
  5. При клике на подсказку мы вписываем слово в input поиска и прячем форму подсказки.

Использование Ajax

В предыдущей статье мы познакомились с прямыми методами jQuery для работы с Ajax (такими как get(), post() и load()). В этой статье описан низкоуровневый программный интерфейс .

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

Простые Ajax-запросы

Создавать запросы с помощью низкоуровневого API не намного сложнее, чем с помощью прямых или вспомогательных методов. Разница состоит в том, что такой подход позволяет контролировать многие другие аспекты запроса и получать о выполняющемся запросе гораздо больше информации. Центральное место в низкоуровневом API занимает метод ajax(), простой пример использования которого приведен ниже (здесь используется исходный файл и файл mydata.json, описанные в предыдущей статье):

Аргументами метода ajax() являются запрашиваемый URL и объект отображения данных, свойства которого определяют набор пар «ключ-значение», каждая из которых определяет некий параметр запроса. Здесь передаваемый методу ajax() объект содержит только один параметр, success, задающий функцию, которая будет вызываться в случае успешного выполнения запроса.

В данном примере мы запрашиваем у сервера файл mydata.json и используем его вместе с шаблоном данных для создания элементов и вставки их в документ, как это делалось в предыдущей статье с помощью прямых методов. По умолчанию метод ajax() создает HTTP-запрос GET, т.е. данный пример эквивалентен использованию методов get() и getJSON().

Объект jqXHR

Метод ajax() возвращает объект jqXHR, который можно использовать для получения подробной информации о запросе и с которым можно взаимодействовать. Объект jqXHR представляет собой оболочку объекта XMLHttpRequest, составляющую фундамент браузерной поддержки Ajax.

При выполнении большинства операций Ajax объект jqXHR можно просто игнорировать, что я и рекомендую делать. Этот объект используется в тех случаях, когда необходимо получить более полную информацию об ответе сервера, чем та, которую удается получить иными способами. Кроме того, его можно использовать для настройки параметров Ajax-запроса, но это проще сделать, используя настройки, доступные для метода ajax(). Свойства и методы объекта jqXHR описаны в таблице ниже:

Свойства и методы объекта jqXHR

Свойство/метод Описание
readyState Возвращает индикатор хода выполнения запроса на протяжении всего его жизненного цикла, принимающий значения от 0 (запрос не отправлен) до 4 (запрос завершен)
status Возвращает код состояния HTTP, отправленный сервером
statusText Возвращает текстовое описание кода состояния
responseXML Возвращает ответ в виде XML (если он является XML-документом)
responseText Возвращает ответ в виде строки
setRequest(имя, значение) Возвращает заголовок запроса (это можно сделать проще с помощью параметра headers)
getAllResponseHeaders() Возвращает в виде строки все заголовки, содержащиеся в ответе
getResponseHeaders(имя) Возвращает значение указанного заголовка ответа
abort() Прерывает запрос

Объект jqXHR встречается в нескольких местах кода. Сначала он используется для сохранения результата, возвращаемого методом ajax(), как показано в примере ниже:

В этом примере мы сохраняем результат, возвращаемый методом ajax(), а затем используем метод setInterval() для вывода информации о запросе каждые 100 мс. Использование результата, возвращаемого методом ajax(), не изменяет того факта, что запрос выполняется асинхронно, поэтому при работе с объектом jqXHR необходимо соблюдать меры предосторожности. Для проверки состояния запроса мы используем свойство readyState (завершению запроса соответствует значение 4) и выводим ответ сервера на консоль.

Для данного сценария консольный вывод выглядит так (в вашем браузере он может выглядеть несколько иначе):

Я использую объект jqXHR лишь в редких случаях и не делаю этого вообще, если он представляет собой результат, возвращаемый методом ajax(). Библиотека jQuery автоматически запускает Ajax-запрос при вызове метода ajax(), и поэтому я не считаю возможность настройки параметров запроса сколько-нибудь полезной. Если я хочу работать с объектом jqXHR (как правило, для получения дополнительной информации об ответе сервера), то обычно делаю это через параметры обработчика событий, о которых мы поговорим далее. Они предоставляют мне информацию о состоянии запроса, что избавляет от необходимости выяснять его.

Задание URL-адреса запроса

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

Создание POST-запроса

Для задания требуемого типа запроса, который необходимо выполнить, используется параметр type. По умолчанию выполняются GET-запросы, как в предыдущем примере. Пример использования метода ajax() для создания POST-запроса и отправки данных формы на сервер приведен ниже:

Здесь я не буду подробно описывать этот пример, т.к. мы его рассмотрели подробно в предыдущей статье (только с использованием метода post()). Отмечу только, что здесь дополнительно к type мы использовали еще несколько параметров. Для указания цели POST-запроса используется описанный ранее параметр url. Пересылаемые данные указываются с помощью параметра data, значение которого устанавливается с помощью метода serialize(), описанного в предыдущей статье. Тип данных, получаемых от сервера указывается в параметре dataType.

Работа с событиями Ajax

Несколько параметров позволяют указывать функции для обработки событий, которые могут запускаться на протяжении жизненного цикла Ajax-запроса. Именно таким способом вы будете указывать функции обратного вызова, играющие столь важную роль в Ajax-запросах. С одной из них вы уже познакомились при рассмотрении параметра success в предыдущем примере. Список параметров, связанных с событиями, вместе с их краткими описаниями приведен в таблице ниже:

Параметры событий Ajax

Параметр Описание
beforeSend Задает функцию, которая будет вызываться перед запуском Ajax-запроса
complete Задает функцию, которая будет вызываться при успешном или неудачном завершении Ajax-запроса
error Задает функцию, которая будет вызываться при неудачном завершении запроса
success Задает функцию, которая будет вызываться при успешном выполнении запроса

Обработка успешных запросов

В примерах выше, при использовании параметра success, в вызове функции были опущены два аргумента — сообщение, описывающее результат запроса, и объект jqXHR. Пример использования функции, которая принимает эти аргументы, приведен ниже:

Аргумент status — это строка, описывающая исход запроса. Функция обратного вызова, которую мы задаем, используя параметр success, выполняется лишь для успешных запросов, и поэтому значением данного аргумента обычно является success. Исключением является случай, когда вы используете параметр ifModified, описанный далее.

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

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

В данном случае результат имеет следующий вид (в зависимости от того, какой сервер вы используете, у вас может быть другой набор заголовков):

Обработка ошибок

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

Здесь запрашивается отсутствующий на сервере файл NoSuchFile.json, и поэтому запрос заведомо не сможет быть выполнен, в результате чего будет вызвана функция, заданная с помощью параметра error. Аргументами этой функции являются объект jqXHR, а также сообщение о состоянии ошибки и сообщение об ошибке, полученное в ответе сервера. Внутри этой функции в документ добавляется элемент div, отображающий значения аргументов status и errorMsg, как показано на рисунке:

Настройка параметров запросов перед их отправкой

Параметр beforeSend позволяет задать функцию, которая будет вызываться перед отправкой запросов. Это позволяет сконфигурировать запрос в последнюю минуту, добавляя или заменяя параметры, переданные методу ajax() (что может быть особенно полезным, если для множества запросов используется один и тот же объект, содержащий необходимые значения параметров). Пример использования такого подхода представлен ниже:

Аргументами указанной функции являются объект jqXHR (который может пригодиться для настройки заголовков запроса или отмены запроса, прежде чем он будет отправлен) и объект, содержащий параметры, переданные методу ajax(). В данном примере URL-адрес для Ajax-запроса задается с помощью параметра beforeSend.

Задание нескольких обработчиков событий

В предыдущих примерах мы реагировали на наступление событий, связанных с Ajax-запросами, вызовом одной функции, но в параметрах success, error, complete и beforeSend можно задавать массив функций, каждая из которых будет выполняться при запуске соответствующего события. Простой пример этого приведен ниже:

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

Настройка контекста для событий

Параметр context позволяет указать элемент, который будет назначен переменной this, когда будет вызван обработчик события. Это может быть использовано для обращения к целевым элементам в документе без необходимости их выбора в функции-обработчике. Соответствующий пример приведен ниже:

Здесь параметр context устанавливается на объект jQuery, содержащий элементы h1 документа. В функции, определяемой параметром complete, мы выделяем рамкой выбранные элементы (в данном случае — элемент, поскольку в документе есть только один элемент h1) путем вызова метода css() для объекта jQuery (на который ссылаемся через this). Цвет рамки определяется на основании состояния запроса.

С помощью параметра context можно установить в качестве контекста любой объект, и ответственность за выполнение только допустимых для этого объекта операций лежит на вас. Например, если вы задаете в качестве контекста элемент HTMLElement, то до того, как вызывать для него какие-либо методы jQuery, вы должны передать этот объект функции $().

Настройка базовых параметров Ajax-запросов

Существует группа параметров, с помощью которых можно выполнить базовую настройку Ajax-запроса (некоторые из них, url и type, мы рассмотрели выше). Из всех доступных параметров они представляют наименьший интерес, и их имена в основном говорят сами за себя. Параметры, о которых идет речь, приведены в таблице ниже:

Базовые конфигурационные параметры Ajax-запроса

Параметр Описание
accepts Устанавливает для запроса значение заголовка Accept, который указывает MIME-типы, поддерживаемые браузером. По умолчанию это значение определяется параметром dataType
cache Значение false указывает на то, что содержимое запроса не должно кэшироваться сервером. По умолчанию кешируются все типы данных, кроме script и jsonp
contentType Устанавливает для запроса значение заголовка content-туре
dataType Указывает, какие типы данных ожидаются от сервера. Если используется этот параметр, то jQuery будет игнорировать информацию, предоставляемую сервером о типе запроса
headers Задает дополнительные заголовки и значения, которые должны включаться в запрос
jsonp Задает строку, которую следует использовать вместо функции обратного вызова при выполнении запросов JSONP (кроссдоменные запросы). Этот параметр требует согласования с сервером
jsonpCallback Задает имя функции обратного вызова, которое должно использоваться вместо автоматически сгенерированного случайного имени, используемого jQuery по умолчанию
password Задает пароль, который должен использоваться в запросе при прохождении процедуры аутентификации
scriptCharset Указывает jQuery, какой набор символов используется при кодировании запрашиваемого JavaScript-содержимого
timeout Задает длительность тайм-аута (в миллисекундах) для запроса
userName Задает имя пользователя, которое должно использоваться в запросе при прохождении процедуры аутентификации

Задание тайм-аутов и заголовков

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

В этом примере параметр timeout устанавливает максимальную длительность тайм-аута, равную 5 сек. Если запрос за это время не будет выполнен, то вызовется функция, заданная с помощью параметра error, и будет выведен код ошибки, определяемый параметром status.

Таймер запускается сразу же после передачи запроса браузеру, и большинство браузеров налагают ограничения на количество одновременно выполняющихся запросов. Это означает, что существует риск того, что к моменту истечения тайм-аута запрос даже не будет запущен. Чтобы избежать этого, необходимо располагать сведениями об ограничениях браузера, а также об объеме и ожидаемой длительности любых других выполняющихся Ajax-запросов.

Дополнительно в этом примере ниже используется параметр headers, с помощью которого в запрос добавляется заголовок. Для указания заголовков используется объект отображения данных. Используемый здесь заголовок может быть полезным для создания веб-приложений, поддерживающих архитектурный стиль REST, если только сервер правильно его распознает.

Использование дополнительных конфигурационных параметров

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

Создание синхронных запросов

Управление режимом выполнения запросов осуществляется с помощью параметра async. Значение true, используемое для этого параметра по умолчанию, означает, что запрос будет выполняться в асинхронном режиме, тогда как значению false соответствует синхронный режим.

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

Игнорирование данных, оставшихся неизменными

С помощью параметра ifModified можно обеспечить получение данных лишь в том случае, если с момента последнего запроса они были изменены. Такое поведение определяется заголовком Last-Modified. Благодаря этому удается избежать бесполезной пересылки данных, которая не даст пользователю никакой новой информации по сравнению с той, которой он уже располагает. По умолчанию параметр ifModified имеет значение false, указывающее jQuery на необходимость игнорирования заголовка Last-Modified и предоставления данных в любом случае.

Пример использования этого параметра приведен ниже:

В этом примере значение параметра ifModified устанавливается равным true. Функция success вызывается всегда, но если с того момента, когда содержимое запрашивалось в последний раз, оно не изменилось, то аргумент data будет иметь значение undefined, а аргумент status — значение notmodified.

В данном случае выполняемые действия определяются значением аргумента status. Если значением этого аргумента является success, то аргумент data используется для добавления элементов в документ. Если же аргумент status имеет значение notmodified, то мы используем метод css() для выделения рамкой элементов, которые уже имеются в документе.

В ответ на событие click, связанное с кнопкой, вызывается метод ajax(). Это дает возможность многократно повторять один и тот же запрос, чтобы продемонстрировать влияние параметра ifModified, как показано на рисунке:

Каким бы полезным ни был этот параметр, я рекомендую использовать его с осторожностью. Если отправка запроса является следствием действий пользователя (например, щелчка на кнопке), то существует вероятность того, что пользователь щелкнул на кнопке, поскольку предыдущий запрос не был выполнен так, как ожидалось.

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

Обработка кода ответа

Параметр statusCode позволяет выбирать варианты дальнейших действий в зависимости от кода ответов на HTTP-запросы. Его можно использовать либо вместо параметров success и error, либо в дополнение к ним. Пример самостоятельного использования параметра statusCode приведен ниже:

Здесь параметр statusCode задан в виде объекта, устанавливающего связь между кодами ответов на HTTP-запросы и соответствующими им функциями, которые должны быть выполнены на сервере. Какие именно аргументы передаются функциям, зависит от того, отражает ли код ответа успешное выполнение запроса или ошибку.

Если код (например, 200) соответствует успешному запросу, то аргументы совпадают с теми, которые передавались бы функции, определяемой параметром success. В противном случае (например, при коде ответа 404, означающем, что запрашиваемый файл не найден) аргументы совпадают с теми, которые передавались бы функции, определяемой параметром error.

Как видите, это средство не дает непосредственной информации о кодах ответа. Я часто пользуюсь им в процессе отладки взаимодействия браузера с сервером, обычно для того, чтобы выяснить, почему jQuery ведет себя не так, как мне хотелось бы. При этом я использую параметр statusCode в дополнение к параметрам success и error и вывожу информацию на консоль. Если эти параметры используются совместно, то сначала будут выполнены функции success и error, а затем уже — функции, определяемые параметром statusCode.

Предварительная очистка ответных данных

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

Это средство мне очень помогает при работе с серверами Microsoft ASP.NET, присоединяющими лишние данные к данным JSON. Удаление таких данных с помощью параметра dataFilter требует лишь минимальных усилий. Пример использования параметра dataFilter приведен ниже:

Функции передаются данные, полученные с сервера, и значение параметра dataType. Если параметр dataType не используется, то второму аргументу присваивается значение undefined. Ваша задача заключается в том, чтобы вернуть отфильтрованные данные. В этом примере предмет нашего внимания — данные в формате JSON:

Для повышения иллюстративности примера в нем выполняются некоторые дополнительные операции. Во-первых, данные JSON преобразуются в массив JavaScript с помощью метода jQuery parseJSON. Затем из массива удаляется первый элемент с помощью метода shift(), а порядок следования остальных его элементов обращается с помощью метода reverse().

Все, что требуется от функции, — вернуть строку, и поэтому мы вызываем метод JSON.stringify(), зная, что jQuery преобразует данные в объект JavaScript, прежде чем вызвать функцию success. В данном примере была продемонстрирована возможность удаления элемента из массива, однако, в зависимости от ситуации, мы могли бы выполнить любой другой вид обработки.

Конечный результат представлен на рисунке:

Управление преобразованием данных

Рассмотрение одной из самых любимых своих настроек я приберег напоследок. Должно быть, вы обратили внимание, что при получении определенных типов данных jQuery автоматически выполняет некоторые удобные преобразования. Например, получая данные JSON, jQuery предоставляет функцию success, использующую объект JavaScript, а не исходную необработанную строку JSON.

Для управления подобными преобразованиями используется параметр converters. Значением этого параметра является объект, устанавливающий соответствие между типами данных и функциями, используемыми для их обработки. В примере ниже показано, как использовать этот параметр для автоматического преобразования HTML-данных в объект jQuery:

В этом примере регистрируется функция для типа данных text html. Обратите внимание на пробел между компонентами указываемого MIME-типа (в отличие от формы записи text/html). Функция принимает данные, полученные от сервера, и возвращает преобразованные данные. В этом случае преобразование данных заключается в передаче HTML-фрагмента, содержащегося в файле flowers.html, функции $() и возврате результата. Отсюда следует, что к объекту, передаваемому в качестве аргумента data функции success, применимы обычные методы jQuery.

Работая с преобразователями данных, можно слишком увлечься. Я всегда стараюсь избегать соблазна делать с помощью этих функций больше, чем следует. Например, иногда меня так и тянет применить к данным JSON шаблон и передать обратно полученные в результате HTML-элементы. И хотя этот прием очень удобен, он сослужит плохую службу, если кто-то другой будет пытаться расширить ваш код или, например, вам самому впоследствии потребуется организовать интенсивную обработку данных для получения их в исходной форме.

Илон Маск рекомендует:  Справочник по системе программирования турбо ассемблер 2 0

Настройка и фильтрация Ajax-запросов

После того как вы познакомились с методом ajax() и доступными для работы с ним параметрами, мы можем рассмотреть несколько дополнительных методов, предоставляемых jQuery для упрощения настройки запросов.

Определение параметров, используемых по умолчанию

Метод ajaxSetup() позволяет установить значения параметров, которые будут применяться по умолчанию во всех Ajax-запросах, тем самым освобождая вас от необходимости настраивать параметры при каждом запросе. Пример использования этого метода приведен ниже:

Метод ajaxSetup() вызывается с помощью функции jQuery $ аналогично тому, как это делалось в случае вызова метода ajax(). Аргументом метода ajaxSetup() является объект, содержащий значения параметров, которые вы хотите использовать по умолчанию для всех Ajax-запросов. В этом примере мы устанавливаем значения по умолчанию для параметров timeout, global, error и converters.

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

Фильтрация запросов

Метод ajaxSetup() определяет базовые значения конфигурационных параметров, применимые ко всем запросам Ajax. Возможности динамической настройки параметров для отдельных Ajax-запросов обеспечиваются методом ajaxPrefilter(). Пример использования этого метода приведен ниже:

Указанная вами функция будет выполняться для каждого нового Ajax-запроса. Аргументами, передаваемыми функции, являются параметры запроса (включая любые значения по умолчанию, установленные вами с помощью метода ajaxSetup()), а также исходные параметры, переданные методу ajax() (исключая любые значения по умолчанию) и объекту jqXHR запроса.

Мы вносим изменения в объект, передаваемый в качестве первого аргумента, как показано в примере. В данном сценарии, если среди параметров, передаваемых методу ajax(), присутствует параметр dataType, то длительность тайм-аута устанавливается равной двум секундам. Чтобы предотвратить отправку всех остальных запросов, для объекта jqXHR вызывается метод abort().

Ajax-запрос к серверу через jQuery

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

Запрос html-данных с помощью функции Load

Это самый простой ajax-запрос через jQuery с получением html-данных и их вставкой в dom-элемент с (содержимое элемента заменяется):

Более продвинутый вариант использования load:

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

Ajax-запросы функциями GET и POST

Эти функции осуществляют отправку ajax запроса http-методами get и post. Приведу пару примеров их использования.

Передача данных не обязательна, как и выполнение каких-либо действий после получения ответа от сервера, т.е. в этом случае, строчки 3 и 4-6 можно удалить при необходимости и таким образом еще сократить код.

Тип получаемых от сервера данных можно указать, добавив dataType (см.ниже) — по-умолчанию определяется автоматически.

Использование post аналогично, но в следующем примере использую вызов функции после получения ответа от сервера.

На самом деле, функции get и post являются сокращенными вариантами функции ajax, которую рассмотрю ниже.

Получение json-данных с помощью getJSON

getJSON — укороченный вариант ajax-запроса методом GET и получением данных в виде json. Способ удобен, например, для получения какого-то массива с данными и последующей работы с ним.

На стороне сервера программа формирует массив и преобразовывает его в json-строку, например, так:

Точно так же можно передать с сервера и объекты stdClass, преобразовав их в json-строку.

Простой ajax-запрос через jQuery с помощью функции AJAX

Теперь приведу пример простого get запроса функцией ajax и получением html-данных.

Запрос к серверу происходит get-методом, т.к. параметр, отвечающий за тип запроса, type по-умолчанию равен GET.

Более сложный пример ajax-запроса через jQuery

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

Кнопка отправки данных:

В приведенном примере при нажатии на кнопку button, сначала меняется состояние кнопки (текст на ней меняется на «Отправка. » и она становится не активной), что делается при помощи параметра beforeSend. Затем происходит отправка запроса с передачей нужных данных. После того, как получен ответ от сервера состояние кнопки возвращается в прежнее (текст меняется на «Отправить», становится активной). Ответ получается в виде json-данных.

Коротко опишу параметры отправки ajax-запроса, которые чаще всего могут пригодиться:

url Адрес отправки ajax-запроса
type Способ отправки запроса GET или POST
data Отправляемые серверу данные. Может быть строка с параметрами и их значениями в формате par1=val1&par2=val2&. объект jQuery, например, $(‘input[type=»text»]’) или другие данные.
dataType Тип получаемых от сервера данных. Может быть html, json, text, script и xml.
cache Кэширование браузером запроса (false — не кэшировать).
async Асинхронное выполнение запроса, т.е. программа продолжает выполняться не дожидаясь ответа сервера. Если указать false, то запрос будет выполнен синхронно, при этом страница не будет ни на что реагировать, пока не будет получен ответ от сервера.
processData Преобразование отправляемых данных в url-формат. Если нужно чтобы данные не преобразовывались, установить в false. Например, при отправке изображения на сервер или xml-данных.
contentType Тип передаваемых данных, по умолчанию «application/x-www-form-urlencoded; charset=UTF-8». Если указать false, то в заголовке не будет передаваться тип, что может быть необходимо, например, при отправке изображения на сервер.
beforeSend Функция, выполняемая перед отправкой ajax-запроса.
complete Функция, выполняемая после получения ответа от сервера (любого, успешного или нет).
success Функция, выполняемая при удачном выполнении запроса.
error Функция, выполняемая в случае ошибки.

Ниже приведу еще несколько примеров использования ajax-запросов.

Отправка формы со всеми данными ajax-запросом через jQuery

Примерный код html-формы:

Для того чтобы страница не перезагружалась при нажатии на кнопку «submit», сначала отменяем стандартые действия браузера использовав e.preventDefaults() .

В параметре data мы передаем все поля формы использовав $(this).serialize() — эта функция преобразует все input-ы и select-ы в строку, пригодную для отправки на сервер.

Так же, здесь использован параметр async: false , чтобы пока форма не отправится на сервер больше ничего нельзя было нажать или сделать.

Отправка изображения или файла ajax-запросом через jQuery

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

html-код будет такой:

Суть идеи в том, что поверх кнопки выводится стандартный input для выбора файла, но он полностью прозрачен и имеет такие же размеры как кнопка. Таким образом, пользователь видит кнопку button, но когда наводит на нее курсор, фактически наводит на input. Соответственно, когда он нажимает на кнопку, на самом деле нажимается input выбора файла. Для того, чтобы не мигал курсор после выбора файла, размер шрифта задан 0px.

Теперь javascript код отправки файла на сервер с отображением прогресса:

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

Пример серверной части на php (по просьбе Евгения):

Информация о загруженном изображении будет содержаться в $_FILES[‘upload’] , т.к. скриптом файл добавлялся так: form.append(‘upload’, files[0]); Соответственно, всё что требуется от php-программы — это проверить что файл соответствует ожидаемым параметрам, перенести файл в нужную папку (в примере в папку files) под нужным именем (в примере newname_image) и вернуть в браузер ответ, который в моем примере просто выводится пользователю командой alert(message);

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

Поиск с использованием AJAX.

Поиск по сайту AJAX + PHP + MySQL (AJAX)

Доброго всем времени суток. Сегодня я рассмотрю оставшуюся часть связки AJAX+PHP+MySQL а именно AJAX.

В этой статье я расскажу как к поиску по сайту с использованием PHP + MySQL, рассмотренного в статье «Поиск по сайту AJAX + PHP + MySQL (PHP + MySQL)» придать динамизм и интерактивность, которую позволяет достичь технология AJAX.

Напомню, чего мы добиваемся:

Из поисковой формы с помощью технологии AJAX поисковый запрос передается на сервер, где в PHP скрипте происходит его обработка и формируется запрос к базе данных MySQL.

Получив ответ с результатами поиска скрипт PHP используя технологию AJAX передает его клиенту(браузеру), где он и отбражается.

На самом деле, сегодня я не расскажу вам ничего нового! Вы уже владеете всей необходимой информацией. Я просто объединю разрозненные ее части в одно целое.

Так, код JavaScript и HTML, с незначительными доработками, я возьму из статьи «Пример Ajax приложения — Телефонная книга (клиент)». А код PHP, опять таки с минимальными изменениями, из пред идущей статьи цикла — «Поиск по сайту AJAX + PHP + MySQL (PHP + MySQL)»

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

Поиск по сайту AJAX + PHP + MySQL (AJAX)

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

Вот уже знакомый вам код JavaScript:

Я поменял в нем всего одно слово. Найдете какое?

И код HTML:

Поиск по сайту AJAX + PHP + MySQL

А здесь я поменял только заголовки у формы

А вот вам и файл find.php:

Я немного подсократил его, да преобразовал данные полученные от сервера в объект с помощью функции mysql_fetch_object(), которая работает аналогично mysql_fetch_array(), с единственным отличием, что функция возвращает объект, вместо массива. Это, кроме всего прочего, означает, что вы получаете возможность работать с полями по имени колонок. Мне просто так привычнее.

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

А пока в следующей статье, которая пока имеет рабочее название: Поиск по сайту jQuery + PHP + MySQL я покажу вам как можно значительно сократить JavaScript код, используя библиотеку jQuery. Ну и конечно, просто таки назрела необходимость модернезировать результаты поисковой выдачи.
А на этом сегодня все. Как обычно, с удовольствием отвечу на ваши вопросы.

Автор: Сергей Зарубин

Дата: 2012-06-15

Колличество просмотров: 16057

Комментарии к заметке:

Комментарий добавил(а): Витя
Дата: 2012-06-27

Классный урок, очень помог, а как сделать поиск по параметрам используя этот скрипт? То-есть возраст, пол, вес. Нужно в форму добавить радио-кноки это я знаю но в php как сделать?

Комментарий добавил(а): Витя
Дата: 2012-06-27

К стати перелепил под себя скрипт — у меня экранит теги почему-то, то-есть По вашему запросу Марина найдено 1429 пользователей:

Комментарий добавил(а): Кирилл
Дата: 2012-06-27

Привет. Настроил. все работает. Но есть один нюанс. Можно ли как-то выводить html в поле под поиском? Почему-то не отображает html-теги :(

Комментарий добавил(а): Кирилл
Дата: 2012-06-27

Уточнение: хочу результаты поиска делать линками. В чем проблема может быть?

Комментарий добавил(а): Сергей Зарубин
Дата: 2012-06-28

Поиск по параметрам делается с помощью передачи этих параметров php скрипту.
Кто вам мешает добавить дополнительные параметры напрмер вот здесь:

Добавить HTML теги и сделать результаты выдачи ссылками конечное же можно.

Это и многое другое интересное я продемонстрирую в статье «Поиск по сайту jQuery + PHP + MySQL» , которую планирую выложить в самое ближайшее время.

Комментарий добавил(а): Витя
Дата: 2012-07-02

Ждем поиск по сайту с jQuery будет круто чувствую. Спасибо.

Комментарий добавил(а): Витя
Дата: 2012-07-05

Ждем поиск по сайту с jQuery будет круто чувствую.

Комментарий добавил(а): ML
Дата: 2012-07-20

При больших объемах данных скорей всего будет медленно работать, т.к. выборка осуществляется со словом «LIKE».

Комментарий добавил(а): Сергей Зарубин
Дата: 2012-07-21

Ну это при очень больших. Для работы среднего сайта этого вполне достаточно.
А вообще это только пример, не претендующий на истину в последней инстанции.
А ведь есть еще полнотекстовый поиск для MyISAM-таблиц, есть такие монстры как СФИНКС или Яндекс.Сервер.
Что выбрать решать только вам!

Комментарий добавил(а): Григорий
Дата: 2014-12-22

Как вставить ссылку в выводимый результат поиска. Так пробовал $end_result .= »
BOOKID.»‘>
«. $row->CHAPTERNO.»».$row->VERSETEXT.»\n»;
>

$text = $end_result;
и ссылка не работает — выводит теги как текст. Смысл в поиске пропадает из за этого.

Комментарий добавил(а): Василий
Дата: 2015-10-05

Будьте добры дайте базу для примеров на почту или прикрепите к теме admin@yargps.ru

Комментарий добавил(а): Саня
Дата: 2015-11-06

Для отображения html тегов замените строку
var searchString = «query=» + encodeURIComponent(title);
на
var searchString = «query=» + title;
а эту строку
addListItem(num[i]);
на document.getElementBy >
Кому потог можете сказать спасибо на R127868587732 ))))

Комментарий добавил(а): Алекс
Дата: 2020-08-20

Комментарий добавил(а): Ваня
Дата: 2020-08-31

Здравствуйте!
Заменил строки, как написано через сообщение выше. Теперь совсем ничего не выводится.

Примеры отправки AJAX JQuery

AJAX позволяет отправить и получить данные без перезагрузки страницы. Например, делать проверку форм, подгружать контент и т.д. А функции JQuery значительно упрощают работу.

Полное описание функции AJAX на jquery.com.

GET запрос

Запрос идет на index.php с параметром « text » и значением « Текст » через метод GET.
По сути это то же самое что перейти в браузере по адресу – http://site.com/index.php?text=Текст

В результате запроса index.php вернет строку «Данные приняты – Текст», которая будет выведена в сообщении alert.

Код можно сократить используя функцию $.get

Код файла index.php

GET запросы могут кэшироваться браузером или сервером, чтобы этого избежать нужно добавить в функцию параметр – cache: false .

POST запросы

Или сокращенная версия – функция $.post

Код файла index.php

POST запросы ни когда не кэшироваться.

Отправка формы через AJAX

При отправке формы применяется функция serialize() , подробнее на jquery.com.

Она обходит форму и собирает названия и заполненные пользователем значения полей и возвращает в виде массива – .

Часть 9. Использование Google Ajax Search API

Использование возможностей общедоступных API в асинхронных приложениях

Серия контента:

Этот контент является частью # из серии # статей: Освоение Ajax

Этот контент является частью серии: Освоение Ajax

Следите за выходом новых статей этой серии.

До сих пор в статьях данной серии упор делался исключительно на ситуации, в которых клиент отправляет запросы серверным сценариям и программам. Именно так работает от 80 до 90 процентов Ajax-приложений – асинхронных Web-приложений, использующих объект XMLHttpRequest . Однако при таком подходе вас ограничивают ваша изобретательность и ваше умение программировать, или, по крайней мере, изобретательность и умения вашей команды или специалистов вашей компании.

Наверняка бывают случаи, когда вы хотите что-то сделать, но вам не хватает необходимых технических знаний. Возможно, вы не знаете тонкостей синтаксиса или не умеете найти верный алгоритм. Может быть, вам не хватает для решения поставленной задачи данных или ресурсов (людей или информации). Именно в этих случаях возникает мысль: «Ах, если бы у меня был готовый код!». Эта статья написана именно для таких ситуаций.

Сценарии и программы с открытым кодом

Прежде чем я углублюсь в суть данной статьи, то есть в использование публичных API в вашем Web-приложении, следует упомянуть о существовании сценариев и программ с открытым кодом. Не вдаваясь в детали, открытым кодом называют код, который можно в определенной степени свободно использовать в своем собственном приложении. Более точную информацию можно получить по ссылкам, приведенным в разделе Ресурсы, но, говоря в целом, в большинстве случаев можно взять открытый код, написанный кем-то другим, и просто скопировать его в свою среду без всяких ограничений.

При использовании открытого кода вам, возможно, придется добавить к своему приложению дополнительную документацию или выложить сделанные вами изменения в открытый доступ. Вне зависимости от того, какую программу вы используете, смысл в следующем — вы можете использовать код, который вам либо просто не приходится писать самому, либо вы вообще не смогли бы его написать по причине отсутствия необходимых ресурсов. Проекты вроде Apache позволяют легко воспользоваться работой, сделанной другими. Не беспокойтесь, они сами хотят, чтобы вы использовали результаты их работы!

Онлайновые статьи и руководства

Было бы глупо в статье, опубликованной на сайте IBM developerWorks, не упомянуть о ценности различных онлайновых ресурсов, имеющихся в Интернете, начиная со статей и руководств и заканчивая техническими обзорами. В Интернете имеется буквально сотни тысяч учебных материалов, и среди них вы могли бы найти около тысячи статей об Ajax – я один уже написал почти десяток! Большинство из них содержат работающий код, примеры, файлы и много других полезных вещей.

Если у вас нет возможности написать код программы или сценарий для сервера или вы не можете найти программу с открытым кодом или сценарий, зайдите на Google и попробуйте набрать описание того, что вы ищете. Наверняка вы найдете статью, или подсказку, или какой-то фрагмент, который вам поможет. Либо зайдите на сайт developerWorks и сделайте то же самое – в большинстве случаев вы обнаружите необходимую часть кода или даже целый сценарий с полезными комментариями и описанием его работы.

Использование публичных API

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

В случаях, когда вы ограничены не техническими возможностями, а данными, решить проблему помогут публичные API. . Публичный API позволит вам использовать программу, которая размещена на другом компьютере или на чужом сервере и использует чужие данные. Сам по себе API определяет способ взаимодействия с этой программой. Например, публичный API к поисковой системе Google создает запросы на поиск, а код Google производит поиск по своим базам данных и возвращает результат в ваше приложение. Таким образом, вы используете в своих интересах не только чужие навыки написания программ, но и значительно большие хранилища данных, чем те, которые имеются в вашей компании.

Настройки для использования Google Ajax Search API

Google, вероятно, самое революционное приложение эпохи Интернета. Все, от мала до велика, знают о Google, даже если они ничего не понимают в его работе. Google — это не только сверхпопулярный и полезный механизм поиска. Компания настолько предана идее предоставления бесплатных (в большинстве своем) услуг, что не удивительно, что у нее также есть и публичный API, который вы можете использовать в своих программах. В этом разделе я расскажу вам о настройках, необходимых для использования Google API, и подготовлю почву для рассказа о том, как заставить ваше приложение асинхронно взаимодействовать с Google.

Получение ключа разработчика от Google

В данной статье наибольшее внимание уделяется Google Ajax Search API. Подробнее узнать об этом API можно, посетив страницу Google Ajax Search API, которая показана на рисунке 1 (см. ссылку в разделе Ресурсы).

Рисунок 1. Страница Google Ajax Search API

Сначала вы нажмете на ссылку Sign up for a Google AJAX Search API key. После этого откроется страница, на которой вы можете подписаться на использование Google API. Вам нужно будет принять несколько правил его использования (все они, на мой взгляд, совершенно безвредные) и разместить URL Web-сайта, на котором работает ваше приложение (см. рисунок 2).

Рисунок 2. Подписка на использование Google’s Ajax Search API
Какой URL мне следует использовать?

URL, который запрашивает у вас Google — это по сути домен, на котором находится ваш сайт. Если у вас есть собственный домен, как у меня, то вы можете использовать его. Только следует быть более точным, если ваш сайт использует субдомен или отдельный путь в пределах большого домена; в этом случае вам может понадобиться URL типа http://www.earthlink.net/

bmclaugh или http://brett.earthlink.net. За исключением этих случаев, не стоит слишком сильно конкретизировать URL — просто пошлите Google корневой URL, который вы используете для доступа ко всему своему сайту, и вы сможете использовать API везде в пределах этого URL.

КПосле того как вы прочитаете соглашение и поставите галочку, введите ваш URL, нажмите Generate API Key (сгенерировать API-ключ) и подождите секунду-две. Теперь вам нужно войти на сайт Google под своей учетной записью или создать новую учетную запись. Это достаточно стандартная процедура, и вы сумеете с ней справиться самостоятельно. Как только вы закончите, появится окошко, в котором будут показаны выданный вам ключ, ваш URL и пример страницы. Ключ будет выглядеть примерно так:

Документация по API от Google

Прежде чем использовать только что полученный ключ уделите немного времени изучению документации по Google API (внизу страницы с ключом будет ссылка на эту документацию, и она же есть в разделе Ресурсы). Хотя данная статья представляет собой неплохое введение, я считаю, что изучение документации по Google API будет вам полезно, и, возможно, оно натолкнет вас на интересные идеи о том, как использовать Google в приложениях на своем сайте.

Простейшее приложение с использованием поиска Google

Возьмем тестовую страницу, предложенную Google, немножко ее изменим и посмотрим, как она работает.

Создание окошка поиска

В листинге 1 показана достаточно простая Web-страница; скопируйте ее в ваш любимый редактор, сохраните и загрузите на домен или URL, который вы указали для Google в предыдущей главе.

Листинг 1. HTML для простого приложения с поиском Google

Не забудьте заменить выделенный текст своим ключом разработчика, полученным от Google. Когда вы загрузите эту страницу, то увидите что-то вроде следующего:

Рисунок 3. Простейшая поисковая форма для Google

Совсем немного, но за этой маленькой формой кроется вся мощь Google.

Запуск поиска

Наберите в поиске слово, нажмите Search, и пусть Google работает. Вы быстро увидите несколько результатов, как показано на рисунке 4.

Рисунок 4. Результаты поиска Google

Добавление предварительного поиска

Очевидно, с результатами поиска страница выглядит намного лучше – видео, блоги и результаты поиска придают странице более приятный вид. Вы можете включить предварительный поиск – заданное вами слово, результаты поиска по которому появятся, когда пользователь загрузит страницу в первый раз. Для этого надо всего лишь добавить выделенную в листинге 2 строку в ваш код JavaScript.

Листинг 2. Добавление предварительного поиска

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

Разбор JavaScript

Прежде чем я продолжу, взглянем на основные команды. Во-первых, создается новый GSearchControl, как показано в листинге 3. Это — конструкция, которая позволяет производить поиск:

Илон Маск рекомендует:  Что такое код swffont >getwidth
Листинг 3. Создание нового GSearchControl

Далее создается новый локальный поиск с использованием специальной конструкции Google GlocalSearch , которая позволяет выполнять поиск с привязкой к местоположению. Локальный поиск проиллюстрирован в листинге 4.

Листинг 4. Создание нового локального поиска

Все это становится достаточно очевидно после изучения методов и объектов, которые надо вызывать. Код в листинге 4 создает новый локальный поиск и затем задает центральную точку поиска.

В приведенном ниже листинге 5 содержатся несколько строк, которые сообщают элементу управления поиском, какие именно типы поиска ему следует выполнять.

Листинг 5. Возможные типы поиска

Вы можете найти полные описания большинства этих типов, я же приведу здесь краткие:

  • GwebSearch : модуль для поиска по интернету, благодаря которому Google, собственно, и известен.
  • GvideoSearch : этот модуль ищет видео по заданным ключевым словам поиска.
  • GblogSearch : этот модуль специализируется на поиске по блогам, которые структурированы и размечены несколько иначе, нежели Web-контент.

Вы уже видели, как задать предварительный поиск. Дело остается за малым – вызвать метод draw() , как показано в листинге 6. Используя данный метод, вы вызываете элемент DOM в своем HTML-файле (чтобы освежить в памяти информацию по DOM, обратитесь к предыдущим статьям из этой серии, ссылки на которые даны в разделе Ресурсы). Теперь готовый к использованию элемент управления чудесным образом появится в вашей форме.

Листинг 6. Создание элемента управления поиском

Но где же здесь Ajax?

Конечно, далеко не очевидно, где в простом блоке поиска асинхронность. Здорово, что вы можете добавить блок Google-поиска в свое Web-приложение, но это серия о приложениях Ajax, а не о Google-поиске. Так где же здесь Ajax?

Введите ключевое слово для поиска, нажмите кнопку Search, и вы увидите поведение, свойственное Ajax: результаты поиска появляются без перезагрузки страницы. Это отличительный знак большинства приложений Ajax – видимое содержание страницы изменяется без ее перезагрузки. Ясно, что происходит что-то выходящее за рамки нормальной модели «запрос/ответ». Но где XMLHttpRequest ? Где объект request , о котором вы читали в предыдущих статьях, где DOM и управление страницей? Все это включено в две строчки в вашем HTML.

Google берет JavaScript на себя

Самое главное, о чем я еще не говорил, показано в листинге 7.

Листинг 7. Крайне важный файл JavaScript

Синтаксис здесь не особо интересен, самое главное заключается в файле uds.js, в котором находятся все сценарии JavaScript, необходимые для функционирования блока поиска. Это использование чужого кода в самом правильном смысле – свободный доступ к коду, использующемуся в приложении. Это очень важно, потому что Google обеспечивает поддержку пользователей, и когда компания производит обновление файла с JavaScript, вы получаете его автоматически. Google не поменяет API, не сообщив вам об этом, поэтому ваш код будет продолжать работать, даже если этот JavaScript изменится.

Объект GSearchControl

Есть еще одна скрытая вещь – код для объекта GSearchControl , который создается в JavaScript-функции onLoad() . Чтобы создать этот объект, вам нужно просто вызвать код, показанный в листинге 8.

Листинг 8. Создание объекта GSearchControl

Необходимый HTML-код тоже достаточно прост: нужен только тег div с ID, на который может ссылаться JavaScript, как показано в листинге 9.

Листинг 9. HTML, необходимый для создания поискового элемента управления
Как выглядит JavaScript от Google?

Понять используемый Google JavaScript не так-то просто. Сначала JavaScript-файл uds.js вычисляет некоторые настройки lzk конкретного местоположения, выполняет специфические для Google действия, проверяет ваш ключ, а затем загружает два других сценария http://www.google.com/uds/js/locale/en/uistrings.js и http://www.google.com/uds/js/uds_compiled.js. Вы можете загрузить эти два файла и просмотреть их, если вам это интересно, но имейте в виду: код очень сложен, а форматирование просто ужасное! Для большинства из вас цель — узнать, как использовать эти файлы, а не понять, что они делают строчка за строчкой.

И снова код Google делает все сам. Создает текстовые поля, графику и кнопки, которые вызывают функции JavaScript. Так что вы бесплатно получаете множество инструментов; и пока вы в общих чертах понимаете, как это работает, вы легко можете использовать этот код и успешно применять его в своем приложении.

Ajax – это больше, чем просто код

Создание Ajax-приложений заключается не только в XmlHttpRequest ; но и в способах обращения с Web-приложениями, а они основаны на асинхронности. И хотя вы сами не писали никакого специального Ajax-кода, вы уже создали приложение Ajax. За это спасибо Google – он сделал большую часть работы за вас!

Идем дальше

Теперь можно проделать все эти же шаги для своего приложения. В простейшем случае можно просто перетащить div на вашу Web-страницу, добавить JavaScript, показанный в листинге 1,- и вы получите готовый к использованию поиск Google.

Но праздник на этом не заканчивается. Можно не ограничивать себя определенным набором опций и элементов управления. Поэкспериментируйте с Web-результатами, результатами поиска по блогам, видео и интегрируйте их в свои Web-приложения, где это уместно. Вы можете создать несколько элементов управления поиском, каждый из которых будет ориентирован на определенный тип результата. Вы можете включить элемент управления Google-поиска в элемент span, прямо в середину содержимого вашего приложения, а не с краю, как в div . В любом случае важно, чтобы поиск Google был адаптирован под ваши потребности, а не вы переделывали свое приложение под Google.

Заключение

Совсем несложно построить приложение, основываясь на том, что вы узнали из данной статьи, и добавить блоки поиска Google и другие полезные вещи из Google API в свое Ajax-приложение. Гораздо важнее, что вы теперь имеете представление об использовании публичных API вообще. Например, Amazon.com предоставляет публичный API, который позволяет выполнять такие же типы поиска, что и Google, по книгам и другим товарам магазина Amazon. Вы можете собрать коллекцию интересных вам публичных API и продвинуться настолько далеко, насколько позволят ваши умения. Фактически вы можете с легкостью создать сайт, интегрированный с Google, Amazon, Flickr и др.

Поэтому, хотя важно научиться использовать Google — из-за поисковых алгоритмов и огромного количества данных, предоставляемых Google, — еще важнее научиться использовать любые публичные API. Также стоит начать думать о приложении не только как о воплощении вашего опыта программирования; в действительности оно может представлять собой шлюз к различным массивам данных. Эти данные могут храниться на серверах Google, Amazon.com, del.icio.us или еще где-нибудь. Добавьте к этому свои бизнес-подходы и проектные идеи, и вы получите мощное и надежное решение, превосходящие то, что вы могли бы запрограммировать самостоятельно.

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

jQuery функция $.ajax()

Определение и применение

jQuery функция $.ajax() позволяет выполнить асинхронный AJAX запрос. AJAX (от англ. Asynchronous Javascript and XML — «асинхронный JavaScript и XML») — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером.

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

jQuery синтаксис:

jQuery функция $.ajax() лежит в основе всех AJAX запросов, отправленных с использованием jQuery. Не смотря на то, что функция $.ajax() может использоваться более гибко, в большинстве случаев в этом нет необходимости. В jQuery существуют такие альтернативные методы как $.get() и .load() , которые проще в использовании.

В самом простом виде функция $.ajax() может быть вызвана без параметров:

Обращаю Ваше внимание, что параметры по умолчанию могут быть установлены глобально с использованием jQuery функции $.ajaxSetup(). В этом примере функция $.ajax() используется без параметров и просто загружает содержимое текущей страницы, но ничего не делает с результатом. Чтобы использовать результат, вы можете определить одну из функций обратного вызова.

Добавлен в версии jQuery

Значения параметров


Параметр Описание
url Строка, содержащая URL адрес, на который отправляется запрос.
settings Набор пар ключ/значение, которые настраивают запрос AJAX. Все параметры являются необязательными. Допускается, но не рекомендовано установить значение по умолчанию для любого параметра с использованием метода $.ajaxSetup().
Метод $.ajax() поддерживает следующие параметры:

accepts (по умолчанию: зависит от dataType).

Тип: PlainObject .
Набор пар ключ/значение, которые отправляется в Accept заголовка запроса. Этот заголовок сообщает серверу, какой ответ запрос будет принимать в ответ. Обратите внимание, что значение параметра, указанного в dataType (тип данных, которые мы ожидаем от сервера) сопоставляется с указанным в параметре. Кроме того, для корректной обработки ответа от сервера необходимо в параметре converters указать функцию, которая возвращает преобразованное значение ответа. Например:

async (по умолчанию: true ).

Тип: Boolean .
По умолчанию, все запросы отправляются асинхронно, если вам необходимо организовать синхронные запросы, то установите этот параметр в false . Обратите внимание, что кроссдоменные запросы и элемент, параметр dataType которого имеет значение «jsonp» не поддерживают запросы в синхронном режиме. Учтите, что используя синхронные запросы вы можете временно заблокировать браузер отключив какие-либо действия пока запрос будет активен.

Тип: Function ( jqXHR jqXHR, PlainObject settings ).
Функция обратного вызова, которая будет вызвана перед осуществлением AJAX запроса. Функция позволяет изменить объект jqXHR (в jQuery 1.4.х объект XMLHTTPRequest ) до его отправки. Объект jqXHR это надстройка расширяющая объект XMLHttpRequest , объект содержит множество свойств и методов, которые позволяет получить более полную информацию об ответе сервера, а так же объект содержит Promise методы. Если функция beforeSend возвращает false , то AJAX запрос будет отменен. Начиная с версии jQuery 1.5 функция beforeSend будет вызываться независимо от типа запроса.

cache (по умолчанию: true , для dataType «script» и «jsonp» false ).

Тип: Boolean .
Если задано значение false , то это заставит запрашиваемые страницы не кэшироваться браузером. Обратите внимание, что значение false будет правильно работать только с HEAD и GET запросами.

Тип: Function ( jqXHR jqXHR, String textStatus ).
Функция, которая вызывается, когда запрос заканчивается (функция выполняется после AJAX событий «success» или «error»). В функцию передаются два параметра: jqXHR (в jQuery 1.4.х объект XMLHTTPRequest) и строка соответствующая статусу запроса («success», «notmodified», «nocontent», «error», «timeout», «abort», или «parsererror»). Начиная с версии jQuery 1.5 параметр complete может принимать массив из функций, которые будут вызываться по очереди.

Тип: PlainObject .
Объект состоящий из пар строка/регулярное выражение, определяющих, как jQuery будет обрабатывать (парсить) ответ в зависимости от типа содержимого. Добавлен в версии jQuery 1.5.

contentType (по умолчанию: «application/x-www-form-urlencoded; charset=UTF-8»).

Тип: Boolean , или String .
Определяет тип содержимого, которое указывается в запросе при передаче данных на сервер. С версии с jQuery 1.6 допускается указать значение false , в этом случае jQuery не передает в заголовке поле Content-Type совсем.

Тип: PlainObject .
При выполнении AJAX функций обратного вызова контекстом их выполнения является объект window . Параметр context позволяет настроить контекст исполнения функции таким образом, что $( this ) будет ссылаться на определенный DOM элемент, или объект. Например:

Значения по умолчанию:
Тип: PlainObject .
Объект, содержащий тип данных для конвертации и способ его преобразования. Значение каждого преобразователя является функцией, которая возвращает преобразованное значение ответа. Добавлен в версии jQuery 1.5.

crossDomain (по умолчанию: false для запросов внутри того же домена, true для кроссдоменных запросов).

Тип: Boolean .
Если вы хотите сделать кроссдоменный запрос находясь на том же домене (например jsonp-запрос), то установите этот параметр в true . Это позволит, к примеру, сделать перенаправление запроса на другой домен с вашего сервера. Добавлен в версии jQuery 1.5.

Тип: PlainObject , или String , или Array .
Данные, которые будут отправлены на сервер. Если они не является строкой, то преобразуются в строку запроса. Для GET запросов строка будет добавлена к URL. Для того, чтобы предотвратить автоматическую обработку вы можете воспользоваться параметром processData со значением false . Если данные передаются в составе объекта, то он должен состоять из пар ключ/значение. Если значение является массивом, то jQuery сериализует несколько значений с одним и тем же ключом (в зависимости от значения параметра traditional, который позволяет задействовать традиционный тип сериализации основанный на методе $.param ).

Тип: Function ( String data, String type ) => Anything .
Функция вызывается после успешного выполнения AJAX запроса и позволяет обработать «сырые» данные, полученные из ответа сервера. Возврат данных должен происходить сразу после их обработки. Функция принимает два аргумента: data — данные полученные от сервера в виде строки и type — тип этих данных (значение параметра dataType).

dataType (по умолчанию: xml, json, script, или html ).

Основные типы (результат передается в качестве первого аргумента в функцию обратного вызова success):

  • «xml» — возвращает XML документ, который может быть обработан с помощью jQuery.
  • «html» — возвращает HTML как обычный текст, теги Клик

Форум

Справочник

Поиск по форуму
Расширенный поиск
К странице.

Введение в Ajax

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

Надеюсь, она будет полезна для понимания, что такое AJAX и с чем его едят.

Что такое AJAX ? Пример реализации.

AJAX, или, более длинно, Asynchronous Javascript And Xml — технология для взаимодействия с сервером без перезагрузки страниц.

За счет этого уменьшается время отклика и веб-приложение по интерактивности больше напоминает десктоп.

Например, при нажатии кнопки голосовать — из браузера на сервер будет отправлено сообщение, а сервер ответит браузеру, что голос принят.

Технология AJAX, как указывает первая буква A в ее названии — асинхронна, т.е браузер, отослав запрос, может делать что угодно, например, показать сообщение
об ожидании ответа, прокручивать страницу, и т.п.

Вот код кнопки в примере выше:

При нажатии она вызывает функцию vote , которая отправляет запрос на сервер, ждет ответа, а затем показывает сообщение об этом в div ‘е под кнопкой:

Далее мы разберем, как она работает, более подробно.

Для обмена данными с сервером используется специальный объект XmlHttpRequest , который умеет отправлять запрос и получать ответ с сервера. Кроссбраузерно создать такой объект можно, например, так:

Более подробно о деталях реализации AJAX с использованием XmlHttpRequest и других транспортов можно почитать в разделе про общение с сервером.

Здесь мы не будем на этом останавливаться и перейдем сразу к функции vote :

Поток выполнения, использованный vote, довольно типичен и выглядит так:

  1. Функция создает объект XmlHttpRequest
  2. назначает обработчик ответа сервера onreadystatechange
  3. открывает соединение open
  4. отправляет запрос вызовом send (ответ сервера принимается срабатывающей в асинхронном режиме функцией onreadystatechange )
  5. показывает посетителю индикатор состояния процесса

Серверный обработчик, к которому обращен AJAX-запрос (в примере это vote.php) по сути ничем не отличается от обычной страницы. AJAX-запрос, отправляемый XmlHttpRequest , ничем не отличается от обычного запроса.

Просто текст, который возвращает сервер, не показывается как HTML, а читается и обрабатывается функцией onreadystatechange .

Смысл AJAX — в интеграции технологий

Технология AJAX использует комбинацию:

  • (X)HTML, CSS для подачи и стилизации информации
  • DOM-модель, операции над которой производятся javascript на стороне клиента, чтобы обеспечить динамическое отображение и взаимодействие с информацией
  • XMLHttpRequest для асинхронного обмена данными с веб-сервером. В некоторых AJAX-фреймворках и в некоторых ситуациях, вместо XMLHttpRequest используется IFrame, SCRIPT-тег или другой аналогичный транспорт .
  • JSON часто используется для обмена данными, однако любой формат подойдет, включая форматированный HTML, текст, XML и даже какой-нибудь EBML

Типичное AJAX-приложение состоит как минимум из двух частей.

Первая выполняется в браузере и написана, как правило, на JavaScript, а вторая — находится на сервере и написана, например, на Ruby, Java или PHP .

Между этими двумя частями происходит обмен данными через XMLHttpRequest(или другой транспорт).

Что я могу сделать с помощью AJAX ?

Смысл AJAX — в интерактивности и быстром времени отклика.

Небольшие элементы управления

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

Динамическая подгрузка данных с сервера.

Например, дерево, узлы которого подгружаются по мере раскрытия.

Незаметные для пользователя действия.

Например, при редактировании статьи — каждые 10 минут результаты автосохраняются на сервере.

Непрерывная подзагрузка информации с сервера.

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

Существуют другие предложения подобного рода, например, отображающие биржевые котировки в реальном времени.

Пример. Google suggest.

Google — одна из первых систем, которая предложила «живой поиск», live search. Пользователь печатает поисковую фразу, а система автодополняет ее, получая
список самых вероятных дополнений с сервера.

Код, который это обеспечивает, работает следующим образом.

  • Активируется примерно при каждом нажатии клавиши
    • Время посылки последнего запроса отслеживается
    • Для «обычной» скорости печати — запрос отсылается при каждом нажатии
    • Для «программистской» скорости — каждые несколько нажатий
  • Создается скрытый DIV, который показывается при начале печати
  • DIV заполняется ответом сервера
    • Текущий результат подсвечен, можно перемещаться и выбирать
    • При нажатии правой стрелки, поиск в подрезультатах
  • Результаты кэшируются
    • при нажатии на «удалить», обращения к серверу не происходит
  • Время на осуществление запроса отслеживается для управления частотой запросов к серверу
    • Обычный модем будет обращаться к серверу меньше,
    • Подключение по выделенной линии — запросы идут чаще.

Пример. Gmail.

Раз уж взялись за Google — рассмотрим почтовый сервис той же компании, http://gmail.com.

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

    Проверка ошибок ввода формы ДО сабмита

Результат: обширная популярность, высокий спрос на account’ы с момента открытия.

Синхронная модель VS Асинхронная модель

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

Условно говоря, мы действуем так:

  1. закидываем удочку
  2. ждем, когда клюнет
  3. клюнуло — включаем подтяжку спиннинга

При асинхронном подходе мы:

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

Т.е, в синхронном случае удочка постоянно приковывает наше внимание. Ловля рыбы — последовательный процесс.

В асинхронном варианте — мы сначала задали программу, что делать при клеве, а затем опустили удочку ловить и занялись другими делами.
Например, поставили еще 5 таких удочек.

Асинхронное программирование сложнее, чем синхронное, и поначалу непривычно, т.к в нем заранее задается то, что сработает после.
Т.е, программу «что делать, когда клюнет» нужно задать до того, как клюнуло, и вообще неизвестно, есть ли в водоеме рыба.

Существуют приемы, облегчающие асинхронное программирование, например, отложенный объект Deferred (Twisted,Dojo,Mochikit), но об этом — в отдельной статье.

Синхронная и асинхронная модель в AJAX

Вернемся к нашим баранам: браузеру, серверу и, скажем, базе данных.

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

Все процессы выполняются последовательно, один за другим.

Сетевые задержки включены во время ожидания, обозначенное на схеме серым цветом.

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

В асинхронной модели запрос отсылается («удочка поставлена»), и можно заняться чем-то другим. Когда запрос выполнился («клюнуло») — запускается заранее
подготовленная программистом функция («подтянуть спиннинг») показа сообщения сервера.

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

Пользователь может написать комментарии, заполнить и отослать форму и т.п: Могут производиться новые асинхронные запросы.

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

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

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

Особенно в случае нескольких одновременных асинхронных запросов, нужно заботиться об очередности выполнения и ответа (race-conditions) и, в случае ошибки, оставлять приложение в целостном (consistent) состоянии.

Особенности асинхронной модели

  • Сложность в реализации
    • Недостаточные возможности браузера (javascript)
    • Асинхронная модель сложнее для отладки
  • Race conditions
    • Неопределена последовательность выполнения
    • Можно делать много одновременных задач («удочек»), но задача, начатая первой, может окончиться последней.
  • Реакция тут же, но неизвестно, какой будет результат. Усложнена обработка ошибок
    • Ошибок коммуникации — разрыв связи, и т.п.
    • Пользовательских ошибок — например, не хватило привилегий
  • Контроль целостности (bugproof)
    • Например, редактор отправил асинхронный запрос на удаление ветки дерева. Добавление в нее нужно отключить, пока не придет ответ сервера. Если вдруг не хватило привилегий, то операция не удалась.
  • Интерактивность
  • Быстрый интерфейс

Плюсов всего два, зато какие! Овчинка стоит выделки.

Асинхронный drag’n’drop.

Иногда для асинхронных операций необходимо делать различные «финты ушами». Например, хочется сделать drag’n’drop в дереве, т.е перетаскивать статьи из одного раздела в другой мышкой, и чтобы они на сервере в базе данных меняли родителя.

Drag’n’drop — это «взял мышей объект — положил куда надо — готово». Но в асинхронной модели не может быть все прям сразу «готово».
Надо проверить привилегии на сервере, проверить, существует ли еще объект, вдруг его удалил другой пользователь.

Надо как-то показать, что процесс пошел, но результат «ща будет..». А как? В асинхронной модели указатель мыши не может просто так зависнуть над объектом, превратившись в часики.

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

Stale context, устаревший контекст

В примере с drag’n’drop также затронута проблема «stale context» — устаревшего контекста.

Веб — многопользовательская среда. Если для навигации используется,
скажем, дерево статей, то над ним работают много человек. Один из них может удалить ветку дерева, над которой работает другой: конфликт.

Как правило, для преодоления таких казусов используются следующие средства:

Политика редактирования

Это когда все знают кто чего делает и на уровне деления полномочий и личного общения такие удаления согласовывают. Вариант заведомо небезопасный, но обычно работающий.

Локинг и/или версионный контроль

Локинг — блокирование редактируемых документов.

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

Более подробно о локинге и версионности можно почитать, например, в документации к системе версионного контроля Subversion.

Автообновление контекста

Проблема устаревшего контента может быть на 99% решена при помощи мгновенного автообновления.

Браузер держит постоянное соединение с сервером (или делает время от времени корректирующие запросы) — и нужные изменения отсылаются по этому каналу.

Например, в раскрытую ветку дерева иногда подгружаются новые статьи, в открытый почтовый интерфейс — новые письма.

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

Всё это уже знал, но статья так легко и интересно написана что прочел еще раз =) 5+

Все это конечно интересно, но где взять конкретные примеры допустим ajax авторизации?

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

Я знаю для чего нужен Ajax! Вот только не знаю с чего начать его изучение!

А что Вы хотите научиться делать? Поконкретнее, если можно.

Интересует очевидное — считывание блока контента без перезагрузки всей страницы. Начать можно с того, что юзверь клюкнул кнопку меню. На сервант через Post/Get передана сцылка на запрашиваемую страницу. Движок нашел в базе нужный контент. Что далее, если Ajax ?
Можно даже на примере работы этого сайта. Вот например сделать хреф рядом с Антиспам-вопросом с title=’не знаю ответа’ . Чтобы при нажатии его, с серванта подгружался калькулятор. А на стороне браузера — выводить его в , а то ведь не все помнят математику (ещё бы интегралов понаписали).
ЗЫ Ещё можно отправлять текст модеру сайта, по мере заполнения текстареа свыше 80%, чтобы неуспев дописать вопрос, юзверь получал ответ :-D

в примере, который указан выше есть все ответы.
запрос отсылается на «/ajax_intro/vote.html»
результат req.responseText можно вставлять куда угодно, хоть в statusElem.innerHTML

или Вы не об этом?

1. Содержимое файла «/ajax_intro/vote.html» ?
2. Можно догадаться, что на событии onClick кнопки Submit подвешена функция Vote() . Вот с этого места поподробнее, если можно.
3. Где вообще форма? Или её отменили в Ajax?
Если был источник, пож укажите.

1. По этому адресу находится серверный скрипт, который засчитывает голос и выдает текст ответа. Текст ответа можно получить в responseText.

2. Да, на клик подвешена функция vote. При клике она вызывается, передает голос на сервер и возвращает ответ.

3. Формы никакой нет, и самбита нет. Есть вызов сервера через XmlHttpRequest.

По поводу источника — вы читаете оригинал статьи.

Функция результата голосования возвращает по return значение, которое ПЕРЕДАЁТСЯ в браузер, где присваивается переменной responceText. Потом innеrHТМL передаст его в div, так?
А где задается значение «Ожидается ответ сервера»?

PS. Не спорю, что в Вашем варианте оно работает «без гвоздей». А у меня движок, в котором кое-как сваяли модуль поддержки Ajax.

Не заметил сразу прямую выдачу в div через innerHТМL — прошу прощения

Спасибо, все фукционирует

А например кнопку подгружаемую по условию можно сделать ?

// создать объект для запроса к серверу, функция getXmlHttp будет дана ниже
напишите пожалуйста getXmlHttp. а может я просто неувидел?
заранее спасибо

«Вешаем на удило специальный детектор клева»
Я плачу Браво )))

все прекрасно понятно =)
только вот чего начать изучение?
допустим php . поставь apache+mysql+php = изучай а тут не пойму с чего начинать =( что ставить?

Я так подозреваю, что для самого конкретно AJAX`a вообще ничего ставить не нужно. Просто нужен какой-нить блокнот с подсветкой синтаксиса. Ну а для серверной части подойдёт Denwer, но это как вы уже сказали (apache+mysql+php).

оч клево написано

Класс, изучаю вот. Только если нажать на голосовать второй раз (подождав от первого прилично), то ответ придет от сервера настолько быстро, что в итоге у вас залипает фраза «Ожидаю ответа сервера. «. Это можно решить как-то?

Единственный вариант, который приходит в голову — send(null) вернуло закешированный ответ, который тут же обработался — и все это до 2й строки.. Но это очень странно, получается что запрос обработался фактически синхронно.

Классно всё расписано . а где взять пример аякса для генерации дерева ?

Примеры дерева — в программе Visual DataFlex 16.1 — после установки и загрузки библиотеки AJAX Library 2.3 — есть примеры в директории Examples

Спасибо за статью. Но вот на мне тоже хотелось бы посмотреть на пример дерева. Ну или отпишите плиз коды функций по обавлению и удалению веток дерева.
Заранее спасибо

Классно написано, автору респект!

Хорошая статья мне понравилось и про ajax теперь все ясно стало

Зе бест!
Суть аякса я понял.
теперь думается — нужно разобраться с синтаксисом языка и попробовать сделать замену фрэймов.

Вопрос-уточнение! я нуб! Если я хочу скачать контент с конкретного сайта, используя свою html-форму (то есть ту, которая на моем компе), а не форму этого сайта, то это подпадает под кросс-доменный скриптинг? или это можно закрыть типовым XmlHttpRequest.

Спасибо за статью!
Отлично разжеванный материал, наконец-то мне стало все ясно с этим аяксом

Очень хорошая статья, но у меня возник вопрос, если надо передать не null запрос а например ассоциотивный массив
ну как blablabla.ru/test.php?key1=var1&key2=var2

как тогда строить req.send
?

В данном случае просто делаешь URL: /test.php?key1=var1&key2=var2

Первая выполняется в браузере и написана, как правило, на JavaScript, а вторая — находится на сервере и написана, например, на Ruby, Java или PHP.

А не могли бы написать для примера с голосованием скрипт PHP? Я поняла, что отправка идет методом GET, а вот как это «ловить» на сервере…
Спасибо

Направлять запрос соответствующему скрипту и в нем все делать. Скажем, /ajax/vote.php

То есть используем метод POST или Get указывая скрипт обработки на сервере там он как то преобразовует данные с ajax в php и тут php связываеться с бд. Так получаеться?

Убейся, что ты здесь вообще делаешь??

Чудесная статья . Все понял, кроме одного момента: что на ходится в файле vote.php? Там функция вызывается или что? И как аякс понимает что сервер что то вернул? return или что то другое? Хотелось бы поподробнее.

Присоединяюсь к предыдущему вопросу

Добавил в статью информацию, содержащую ответ на ваш вопрос.

У автора статьи есть чувство юмора)

Спасибо за статью. Все бы так писали. Надо ещё разок почитать. хочется влезть в детали.

А как решать проблему с кодировками? Мне требуется посылать ответ написанный кирилицей. В этом случае браузеры отображают билеберду.

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

XmlHttpRequest всегда приходит в UTF. Тут уж ничего не поделаешь — либо переходить на UTF-8, либо перегонять iconv .

В php.ini
default_character_set=cp1251
подобная строчка должна быть где-то в файле.

Все преимущества использования AJAX на лицо. Очень хорошо статья написана.

день добрый, а как можно реализовать прогрузку контента с помощью ajax, если:
Станичка использует фрэймвок mootools.
На ней разные эффекты, соответственно.
Есть, допустим, место —

А туда нужно ajax’oм подгрузить не просто текст, а несколько «виджетов» mootools, которые после подгрузки связались бы с фрэймвоком и стали бы работать.

Передай вместо тек4ста ссылки на виджеты с параметрами

Давно искал пример проверки логина при регистрации без перезагрузки страницы. Нигде не мог найти внятного обьяснения или рабочего примера. Сделал по типу описаного тут голосования, всё заработало. Короч, наманая статья

В чем суть Ajax? Вижу только конструкции явыскрипт и пиашпи!

Отличная статья! Спасибо автору

ajax все больше укрепляет свои позиции в реализации интерактивности сайта
Статья 5+

Скопировал ваш код с кнопкой «Голосовать», на страничку, которая у меня на винчестере. Запустил — надпись «ОК» в теге появилась, но никакой alert не появляется. Стал изучать, оказывается req.status равно нулю. Почему? Что не так?

Я изменил строчку адреса на такую:

Или что я не правильно делаю?

$en ? echo ‘privet’ : echo ‘paka’;

У меня вопрос. как изменить кодировку сообщения, приходящего с сервера.
Все вроде бы нормально, но ответ, который потом выдается Alert-ом содержит в себе «Сервер ответил: (тут куча непонятных иероглифов)»

p.s. все файлы сохранены в кодировке Windows-1251

Извиняюсь, так не получится.

Хотя, если посылать заголовок скриптом, то прекрасно работает

всё крута) пасиба) счаЗ буду делать вход на сайт через
Ajax
)
можно сделать кнопку Просмотр в диве через Ajax)

Sniper
внимательно вчитываемся ‘частые проблемы > кеширование’ на xmlhttprequest.ru
там описан еще один вариант обхода кеша, немного больше кода зато больше эффективности

там же, чуть ниже, можно посмотреть разбор кода

а почему если нажать на кнопку Голосовать в начале статьи ВТОРОЙ раз то логика нарушается: сначала возникает алерт что типа все ок а потом Ожидаю ответа сервера. и тишина.

отвте как увидел позже есть))

Используйте запросы POST, потому что браузер их не кеширует и они более защищены!

Статья самодостаточна! Кратко и в то же время объемно. Теперь ясно, что Ajax — это ни удочка, ни сети, ни гарпун, а только способ пользоваться всем этим барахлом. И очевидно, что этот способ — для профессионалов рыбной ловли :-)

почему не вылетает alert .

Млин, все же все-равно не понятно как через POST отправить пусть скрипту vote.php данные из формы. Ну например, пусть тоже голосование, только есть еще варианты ответов (то есть есть форма с radio), так вот как скрипту vote.php передать значение одного из radio??

Вы пишете «Браузер держит постоянное соединение с сервером (или делает время от времени корректирующие запросы) — и нужные изменения отсылаются по этому каналу»

Можно поподробнее, что значит «держит постоянное соединение»? Ведь наскольо мне известно браузер сокетное соединение не устанавливает, и все реал-тайм обновление через ajax — это просто запросы, отсылаемые серверу автоматически с некой периодичностью. Или я не прав?

Не понял юмора насчет проблем со «старым контентом». Технологии распределенных баз данных насчитывают уже десятки лет. Неужели пользователи аяхи избавлены от этого накопленного опыта и знаний?

Здравствуйте! Прежде всего, спасибо за крайне полезный цикл статей.

Есть, однако вопрос.
А можно ли через XMLHttpRequest получить с сервера простой текстовый файл (не HTML, XML и пр.) в кодировке cp1251?

До сих пор пробовал — он его читает, но упорно пытается вернуть в utf8. Соотв., вместо русских букв получается абракадабра.

Как решить проблему с использованием серверных компонент (на сервере крутится ASP) — примерно представляю. Интересно, решаема ли она без (т.е. исключительно на стороне клиента).

Буду ОЧЕНЬ признателен, если кто подскажет!

Спасибо большое. Перелистав почти десяток «учебников» только на этой статье наконец «въехал» в технологию.

Ам.. не понятно откуда берутся вот эти цифры?

if (req.readyState == 4)
.
if(req.status == 200)

пардон, вопрос снят )) У кого будут такие же глупые вопросы, смотреть http://xmlhttprequest.ru/

Я тоже не понял как отправлять данные методом POST. Точнее понятно, но какой индекс тогда будет у массива $_POST с тем что я отправил? если бы я отправлял кнопкой submit через форму, в которой поле ввода, например с аттрибутом name=»test», то в скрипте бы я обратился $_POST[«test»]. А с XMLHttpRequest так не работает. ЗЫ только что со страницы http://xmlhttprequest.ru/, там тоже ничего не сказано

Я тоже был на http://xmlhttprequest.ru/
читаем внимательнее:

send()
Отсылает запрос. Аргумент — тело запроса. Например, GET-запроса тела нет, поэтому используется send(null), а для POST-запросов тело содержит параметры запроса.

// Пример с POST
.
var params = ‘name=’ + encodeURIComponent(name) + ‘&surname=’ + encodeURIComponent(surname)
xmlhttp.open(«POST», ‘script.php’, true)
.
xmlhttp.send(params)

Вопрос только в том остался, что когда я в script.php
выполняю
echo $_POST[«name»]
выводится пустая строка .

установи http-заголовок вот так вот: req.setRequestHeader(‘Content-Type’,’application/x-www-form-urlencoded’);

Есть вопрос, ajax-технология базируется на языке Java Script, что будет если пользователь отключит у себя в браузере Java Script? Я так понимаю ajax-отвалится и весь труд накроется медным тазом( а чтобы такого не случилось надо писать запасной код который сработает в любом случае ). Я правильно понимаю?

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

у меня вот тоже такая же проблема:
вместо vote.php я отправляю запрос some.jsp
В some.jsp у меня запускается exe и ловится все, что он выдает в строку, потом выводится на страничку
( out.print(stroka) )
Первый раз все запускается, а потоооом.
Почемуто ответ приходит моментально и содержит результат предыдущего вызова some.jsp .

Не подскажите,как мне при помощи ajax сделать, чтобы при нажатии ссылки в меню слева(меню новостей например), новость отображалась в главной таблице

Отличная статья! Спасибо!

Автор, большое спасибо за чудесную статью! Всё очень толково разьяснено. Респект

> Пример. Google suggest.
DIV заполняется ответом сервера

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

Как перехватывать нажатия клавиш? В строке поиска Яндекса так же можно перемещаться по выданным возможным вариантам с помощью клавиш курсора. Но я никак не могу разобраться как это реализовано? Подскажите в каком направлении копать.

Вот у меня такой вопос.

Я все сделал, работает супер! но есть одна фигня. Текст с сервера не выводиться. в вместо него одно слово: undefined.

В сервере содержиться:

Не подскажет, где я ошибся?

Ошибся почти в каждом предложении:

«не выводиться»;
«содержиться».

Может сначала в школу, а потом текст с сервера выводить?

помоему респонс текст должен идти со стартом, а не с инком

Отличная статья!
«Смысл AJAX — в интерактивности и быстром времени отклика.»
Подскажите пожалуйста, насколько быстро работает AJAX? Можно ли с помощью данной технологии создать динамичную онлайн-игру?

Думаю скомпилированные приложения все равно будут работать быстрее (Flash)

Не работает(((
Скопировал даже код предпредыдущего сообщения, на что IE выдал:
Сведения об ошибке на веб-странице
Сообщение: ‘null’ — есть null или не является объектом
Строка: 35
Символ: 5
Код: 0

Вот тебе по легче,тоже создаём XMLHttpRequest

А вообще статья чёткая,понравилась 5+

Ramzil_Nixon, я статью еще не доконца прочел, пока разбираюсь. Мне показалось что правильней назначать обработчик перед отправкой запроса:

у Вас:

start.send(null); // Отправляем запрос в сервер
inc.innerHTML = ‘Ждем ответа сервера’;
start.onreadystatechange = function() .

Мне кажется, лучше так:
start.onreadystatechange = function() .
start.send(null); // Отправляем запрос в сервер
inc.innerHTML = ‘Ждем ответа сервера’;

Подскажите пожалуйста, не работает в ИЕ8 (у меня такая стоит в других не проверял). В остальных браузерах все нормально.

срабатывает изменение в БД но нет анимации. В шаблоне прописал стили которые проверяют значение в БД и соответственно при нажатии F5 если элемент заблокирован то он остается в полупрозрачном виде. Так вот в ИЕ при нажатии кнопки + потом F5 элемент полувиден, а вот обратно не работает и анимации нет. Спасибо

Илья, сделайте, пожалуйста, учебник по AJAX более подробным, так сказать «для начинающих». После прочтения учебника по JS этот материал кажется слишком сжатым и «не измельченным», непонятным. Стоит добавить больше примеров, расписать более подробно. Например, в каких случаях нужно использовать GET, а в каких POST? Какой вариант транспорта выбрать, если у меня на странице есть форма для выставления рейтинга, а на другой — большая HTML-форма из 50 разных элементов (поля, списки, флажки. ) для загрузки на сервер? Как взаимодействовать с БД, например, с mySQL + php ? На этой странице хотелось бы увидеть пример не с примитивным

а с ветвлением на стороне сервера, например, та же голосовалка: выбираешь «5», сервер возвращает «Вы выбрали 5» и т.д.

Здравствуйте, а как ajax применять в ASP.NET, не MVC? Что служит обработчиком, вместо страница.php?

Доброго времени суток, Илья. Хочу обратиться к Вам за разъяснениями по поводу XMLHttpRequest, т.к. в интернете не нашел ответ на свой опрос (может и не правильно искал).
Суть вопроса такова, примерно:
есть функция, которая возвращает объект xhr (кроссбраузерно). При этом я написал ее таким образом, что если уже есть готовый объект она возвращает его. Но тут возникли проблемы — если первый запрос еще не отработал и создавать второй, то первый абортится (Aborted), печально ((
Решил переделать ф-кцию, чтоб возвращала всегда новый объект XMLHttpRequest, но тут возник вопрос, а не будет ли утекать память. Что происходит с объектом XMLHttpRequest после того как он отработал.
Может, после обработки результата от запроса объект XMLHttpRequest нужно явно удалять при помощи delete?
Буду очень признателен вам за помощь в данном вопросе.

AJAX поиск для WordPress

Вы обращали внимание на AJAX поиск на сайтах, которые Вы посещаете? А хотели бы добавить на свой сайт подобный поиск именно в том виде, в котором хотите именно Вы?

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

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

Поиски статей на эту тему в интернете принесли неудовлетворительные результаты. Большинство предлагало использовать плагины, другие были слишком сложными, а третьи вообще незаконченными (работали не совсем корректно). Отсюда было решено описать мой вариант AJAX поиска.

Как это работает?

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

Наш поиск будет срабатывать при вводе более 2-х символов и выводить результаты в соответствующий блок. При нажатии кнопки Enter, как и раньше, пользователь будет перемещаться на страницу результатов поиска.

Итак, в нужное место добавьте форму поиска:

В файле functions.php Вашей темы добавьте следующий фильтр, чтобы переопределить шаблон вывода формы:

С помощью фильтра мы изменяем форму стандартного поиска WordPress так, как нужно именно нам. Здесь мы убрали кнопку поиска, оставив только поле ввода, а также добавили пустой блок, в который будем выводить результаты поиска.

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

Внешний вид

Теперь давайте добавим некоторое оформление, чтобы всё красиво смотрелось:

Обратите внимание на блок, который оборачивает весь наш поиск, он имеет свойство position: relative; а сам блок результатов — абсолютное позиционирование. В основном всё оформление зависит исключительно от Вас, главное обратите внимание на позиционирование и на то, какие блоки скрыты.

Отправка данных с помощью AJAX

Создайте файл search.js и добавьте в него следующий скрипт:

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

После этого мы проверяем, чтобы в поле поиска было более 2-х символов. Функция $.trim(); позволяет нам удалить пробелы вначале и конце строки, что опять таки позволит предотвратить отправку формы, если пользователь просто ввел много пробелов.

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

Остальной код прокомментирован, так что останавливаться не будем.

Живой поиск для сайта. Часть 2

Дата публикации: 2020-10-25

От автора: приветствую вас друзья. В этой статье мы с вами продолжим реализацию живого поиска для сайта. Что такое живой поиск? Вы с ним сталкиваетесь постоянно, когда что-то ищете в Гугле или Яндексе. Как только вы начинаете набирать поисковый запрос, поисковик тут же начинает предлагать вам варианты, из которых вам остается лишь выбрать наиболее подходящий. Удобная штука, не так ли? Попробуем и мы реализовать нечто подобное.

Исходные файлы текущей статьи вы можете скачать по ссылке. Первую часть статьи вы можете найти по ссылке.

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

Прежде всего укажем для виджета другой источник данных, это будет, скажем, файл search.php, который нам необходимо также создать.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

В файле search.php я напишу простейший код, выводящий приветствие:

Теперь наберу любой символ в поле поиска и посмотрю, что происходит при этом в консоли браузера.

Как видим, отправляется GET запрос с параметром term, значением которого является строка, набранная в поле поиска. При этом все происходит асинхронно, без перезагрузки страницы, т.е. используется AJAX.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Отлично, теперь остается лишь принять поступивший поисковый запрос и выдать ответ на него. Для этого потребуется организовать подключение к серверу БД и написать несложный код, получающий данные из БД по запросу. Код файл search.php будет примерно таким:

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

Остается проверить работу нашего живого поиска. Для этого, как и в прошлый раз, наберем всего одну букву — a:

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

Вот, собственно, и все, живой поиск работает. Что еще можно сделать? Во-первых, я бы ограничил отправляемые ajax запросы, чтобы снизить нагрузку на сервер. Сейчас запросы отправляются, начиная с первой введенной буквы. Я бы начинал, скажем, с третьей буквы. Это можно сделать с помощью опции minLength. Также при выборе варианта необходимо отправлять запрос на сервер, который вытащит всю информацию по выбранному варианту. Это поможет сделать опция select:

Илон Маск рекомендует:  Что такое код asp getlistcount
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL