Как заставить AJAX читать между строк


Оглавление (нажмите, чтобы открыть):

Пример работы Ajax и txt-файла

После пройденных уроков пора перейти и к примерам! В этом уроке рассмотрим примеры работы асинхронной и синхронной передачи данных в Ajax на примере txt-файлов.

Пример синхронной передачи данных в Ajax + TXT

Скажу сразу — для создания примера достаточно создать два файла (ajax.txt и index.html) и вставить в них содержимое, указанное ниже. Итак, делаем по шагам:

1. Создаём самый обычный txt-файл.
2. Назовём его ajax.txt
3. Вставляем в него любой текст, который вы хотите увидеть, а затем сохраняем.

Текст в ajax.txt (в качестве примера)

4. Создаём html-файл.
5. Назовём его index.html
6. Вставляем код указанный ниже (надеюсь, что после предыдущих уроков понятно, что в нём и к чему. Если есть вопросы, то просмотрите последние 2-3 урока).

Код HTML и JS (файла index.html)

Пример асинхронной передачи данных в Ajax + TXT

1. Используем созданный в первом примере файл ajax.txt. Содержимое можно не менять:

Текст в ajax.txt (в качестве примера)

2. Создаём html-файл.
3. Назовём его index.html
4. Вставляем код указанный ниже (надеюсь, что после предыдущих уроков понятно, что в нём и к чему. Если есть вопросы, то просмотрите последние 2-3 урока).

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

Спасибо за внимание! Переходим к более сложным примерам!

Как выводить html с помощью AJAX

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

Вообще есть два способа вывода контента: либо через JavaScript, либо через AJAX. Мое мнение, что лучше использовать AJAX, чем JS, но почему лучше — спросите Вы? Ведь обе технологии прячут текст в отдельных файлах. А ответ в том, что поисковые системы дошли до очень высокого уровня и уже в состоянии определять ссылки, которые содержатся в яваскрипте. Например, Google уже заявил об этом, видимо скоро и Яндекс так же заявит об этом достижении.

Инструкция по выводу контента через AJAX

1. Добавить в заголовочную директорию следующий скрипт:

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

2. Создайте html или php документ с кодом, который нужно выводить через AJAX . Например, создадим файл text-dlya-ajax.html и пропишем в нем:

3. Создайте отдельный файл JavaScript (.js). Обычно я его называю ajax.js , чтобы сразу понять его содержимое. Добавьте в него следующий код:

Теперь blockajax будет характеризоваться файлом text-dlya-ajax.html .

Если нужно вывести много таких привязок «блок» = «html-код», то можно прописать сколь угодно много различных соответствий:

4. Подключите файл ajax.js к документу через заголовочный тег :

Важно, чтобы сначала подключалась библиотека jquery.min.js, а уже потом файл ajax.js. Иначе работать не будет. Должно быть так:

5. В месте где нужно вывести html-текст файла text-dlya-ajax.html напишите:

Больше делать ничего не требуется. Теперь Вы можете легко выводить контент через AJAX .

Вы можете скачать выше описанный пример по следующей ссылке: ajax.rar

Кстати, через AJAX также можно выводить и интерпретировать PHP-код. А это открывает огромные возможности перед Вами.

Зачем нужно выводить html с помощью AJAX (3 причины)
1. Если быть очень кратким, то это нужно для продвижения сайта в поисковых системах. Дело в том, что ссылки внутри сайта как бы передают вес между собой. Те страницы на кого ссылаются чаще, имеют больший вес. Поэтому чтобы более равномерно распределить вес сайта между страницами (а не сливать его весь по сквозным ссылкам) нужно как-то сделать так, чтобы эти сквозные ссылки не учитывались поисковыми машинами.

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

Конечно, можно закрыть все ссылки в метках в rel=»nofollow», однако исследования показали, что таким способом теряется вес на сайте, т.е. этот вес никому не передается, он как бы просто испаряется (звучит странно, но это так).

2. Второй причиной использования выводить html через AJAX является уменьшение кода на странице сайта. Опять таки это нужно для поисковых систем. Например, футер сайта постоянно дублирует один и тот же код, который только отнимает лишний вес со страницы, поэтому было бы хорошо этот код убрать, но футер оставить. Аякс идеально подходит для решения этой проблемы.

3. Страница с использованием AJAX грузится поблочно, то есть каждый элемент как бы грузиться синхронно и не зависит от других. Таким образом «тяжелые» элементы на сайте не будут тормозить загрузку других частей сайта. Это более удобно для пользователя, поскольку он видит, что сайт грузится и чувствует себя более спокойно, нежели когда загрузка сайта на чем-то застопорилась.

AJAX и jQuery. Динамическое обновление контента. Основы (изменения от 03.01.2012)

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

jQuery — JavaScript-framework, библиотека, позволяющая более удобно использовать некоторые возможность Javascript, такие как: создание визуальных эффектов, обработка событий, работа с DOM и поддержка AJAX.

Скачать последнюю версию jQuery и подробно ознакомиться со всеми возможностями можно на сайте разработчика: http://www.jquery.com/

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

Перейдем к рассмотрению примеров.

Важно!
Для того, чтобы примеры работали корректно, необходимо:
1. Все файлы должны быть записаны в кодировке UTF-8.
2. Скрипты должны выполняться на веб-сервере, а не запускаться в браузере, как файл.

Пример 1. Динамическое обновление контента по таймеру

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

Содержимое файла index.html.

В коде имеются несколько особенностей, поясним их.

1. Подключение библиотеки jQuery происходит в заголовке HTML файла, для этого записана данная строка.
Сам файл jquery.js — находится в той же папке, что и файлы примера.

2. В теле документа создается контейнер, в который мы будем загружать контент.

3. Странная, на первый взгляд, функция $(document).ready() требуется для корректной работы jQuery, к тому же в ней мы можем выполнить все приготовления к работе программы. В нашем случае мы вызываем функцию show(), в которой прописан механизм получения контента из другого файла, и настраиваем таймер, так, чтобы функция show() вызывалась один раз в секунду.

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

Рассмотрим используемые параметры функции $.ajax().

Обращается к файлу time.php для получения контента.

Результаты запросов не кэшируются.

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

Содержимое файла time.php.

Смысл работы файла time.php — выводим текущее время на экран.

Пример 2. Динамическое обновление контента по выбору пользователя

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


Содержимое файла index.html.

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

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

Событие нажатия на кнопку «Страница 1» обрабатывается функцией $(‘#btn1’).click(), а событие нажатия на кнопку «Страница 2» обрабатывается функцией $(‘#btn2’).click().

Содержимое файлов page1.html и page2.html, которые загружаются в область контента динамически, представляет собой простые HTML-страницы или текстовые файлы с контентом.

Пример 3. Отправка данных на сервер в фоновом режиме и получение контента

Рассмотрим пример, отправляющий введенное имя пользователя на сервер. Сервер при получении имени выдает приветствие и подсчитывает количество символов в введенном имени.

Содержимое файла index.html.

В теле документа создана форма для ввода имени пользователя. И контейнер для загрузки динамического контента.

Заметим, что сама форма не имеет привычных полей action и method. В качестве обработчика события нажатия на кнопку «Отправить», выступает функция $(‘#myForm’).submit(). Рассмотрим эту функцию.

Как мы видим, основная работа опять связана с функцией $.ajax(). В этот раз появляются дополнительные параметры, не рассмотренные в примерах 1 и 2. А именно:

Тип передачи данных.

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

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

Содержимое файла greetings.php.

Выводим на экран приветствие и подсчитываем количество символов в имени.

В качестве еще одного примера использования AJAX и jQuery можно посмотреть гостевую книгу из статьи
«Гостевая книга своими руками на PHP и MySQL. Добавляем динамизма. AJAX + jQuery».

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

1. На страницах с динамическим обновлением контента, кнопка «Назад» в браузере не работает корректно.

2. Страницы с динамическим обновлением контента не меняют URL, в зависимости от своего содержимого, поэтому не могут быть добавлены в закладки.

3. Страницы с динамическим обновлением контента не индексируются поисковыми системами, т.к. они не выполняют команды JavaScript.

От приведенных недостатов можно избавиться программным путем. В данной статье такие способы не рассматриваются.

Знакомство с AJAX для Front-End дизайнеров. Основы AJAX

Дата публикации: 2020-02-15

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

Приступим! Обратите внимание: предполагается, что вы уже знаете базовые front-end технологии, такие как HTML и CSS.

Что такое AJAX?

AJAX расшифровывается как «Асинхронный JavaScript и XML». Под AJAX понимается не одна технология, и она не является новой. На самом деле это группа технологий (HTML, CSS, Javascript, XML, и т.д.), которые связываются вместе для создания современных веб-приложений.

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

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

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

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

«JavaScript» это язык программирования, который используется для создания объекта запроса AJAX, парсинга этого ответа и обновления DOM страницы.

Для отправки запроса на сервер клиент использует XMLHttpRequest или XHR API. API (программный интерфейс) это набор методов, которые задают правила общения между двумя заинтересованными сторонами. Тем не менее, приходящие из AJAX запроса данные могут быть в любом формате, а не только в XML.

Как работает AJAX

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

На картинке описан стандартный AJAX сценарий:

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

Запрос посылается на сервер. С запросом можно передать различные данные. Запрос может посылаться в статический файл (к примеру, example.php), хранящийся на сервере. Также можно выполнять динамические скрипты (functions.php), на каждом этапе которых будет происходить общение с базой данных (или другой системой) для извлечения необходимой информации.

База данных отсылает обратно запрошенные статьи на сервер. А сервер посылает их в браузер.

JavaScript парсит ответ и обновляет часть DOM (структура страницы). В нашем примере обновится только сайдбар. Остальные части страницы не меняются.

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

Живой пример на AJAX

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

Сперва рассмотрим принципы работы Facebook и Twitter. При прокрутке страницы вниз AJAX подгружает новый контент. Также если вы ставите лайк или дизлайк вопросам и ответам на Stack Overflow, опять же срабатывает AJAX. Как только вы вбиваете в строку поиска что-то в Google или Youtube, срабатывают множественные запросы AJAX.

Более того, если мы захотим, то сможем отслеживать данные запросы. К примеру, в консоли Chrome это можно сделать, кликнув правой кнопкой мыши и активировав функцию Log XMLHttpRequests.

Как создать запрос

Выше мы уже говорили, что для создания запроса используется XMLHttpRequest API. Кроме того в jQuery, самой популярной JS библиотеке есть различные Ajax функции и методы. В серии статей мы рассмотрим различные примеры на чистом JS и JQuery для отправки запросов на сервер.

Управление запросами

Вытаскиваемые данные с сервера могут храниться в различных форматах. XML, JSON, JSONP, обычный текст и HTML.

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

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

XML (Расширяемый язык разметки) – один из самых популярных форматов для обмена данными между приложениями. Формат похож на HTML, и в качестве структуры используются теги. Однако в XML нет готовых тегов, мы сами задаем их. Пример структуры ниже:

AJAX с помощью jQuery. Руководство для начинающих. Часть 1

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

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

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


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

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

Мастер Йода рекомендует:  10 советов как подтянуть разговорный английский язык

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

jQuery — Использование сокращённых AJAX методов (с примерами)

В этой статье познакомимся с сокращёнными AJAX методами jQuery: load, get, getJSON, getScript и post. Эти методы позволяют очень просто осуществлять необходимые AJAX запросы и в отличие от функции ajax, для их написания требуется меньшее количество строчек кода.

jQuery — метод load

Метод load предназначен для получения данных с сервера по указанному адресу URL и помещения их в один или несколько выбранных элементов.

Метод load имеет следующий синтаксис:

В большинстве случаев для отправки запроса метод load использует GET. Но он также может использовать и метод POST. Это происходит только тогда, когда данные для отправки на сервер указываются не в формате строки, а посредством объекта.

Примеры использования метода load

1. Вставить содержимое файла asidenav.tpl в блок c после загрузки DOM страницы:


2. Загрузить часть файла demo.html в элемент при клике по кнопке, расположенной в нём:

Контент файла demo.html :

3. Загрузить в элемент, имеющий ответ content.php . Данный ответ будет зависеть от значения атрибута data-content , которое имеет кнопка, пославшая AJAX-запрос на сервер.

На сервере (файл content.php ):

4. Рассмотрим вышеприведённый пример, в котором передавать данные будем не в формате строки, а посредством объекта. Кроме этого выведем в консоль браузера дополнительные данные, такие как ответ сервера, статус ответа и объект XMLHTTPRequest.

На сервере (файл content.php ):

jQuery — функция get

Функция get предназначена для загрузки данных с сервера посредством HTTP GET запроса.

Синтаксис функции get :

По умолчанию функция get пытается автоматически определить формат полученных с сервера данных (xml, json, script, text или html). Осуществляет она это на основании MIME-типа ответа.

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

В jQuery обработать отложенные события AJAX можно также с помощью Promise методов done (при успешном ответе), fail (при ошибке), always (при успешном ответе или при ошибке).

Примеры использования функции get

1. Подгрузим в HTML элемент после загрузки страницы содержимое файла content.tpl :

2. AJAX получение каждые 5 секунд нового изображения (URL) из определённой директории на сервере и отображения её на странице (вместо предыдущей картинки).

Содержимое фала random-image.php :

3. Пример, в котором реализуем AJAX подгрузку контента.

Данные для загрузки представим на сервере в виде массива $contents . Количество загружаемых данных и позицию смещения будем определять соответственно с помощью значений переменных count и offset . Обработку полученных с сервера данных будем осуществлять посредством Promise метода done .

Содержимое файла contents.php :

jQuery — функция getJSON

Функция getJSON предназначена для загрузки JSON-кодированных данных с сервера посредством HTTP GET запроса.

Функция getJSON — идентична get , у которой в качестве значения параметра dataType установлено значение «json».

Синтаксис функции getJSON :

Пример c использованием функции getJSON

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

Содержимое файла pages.json :

jQuery — функция getScript

Функция getScript предназначена для загрузки JavaScript файла с сервера посредством HTTP GET запроса и его последующего выполнения.

Синтаксис функции getScript :

Пример c использованием функции getScript

После загрузки страницы получим с помощью AJAX запроса скрипт и выполним его:

Содержимое скрипта script.js :

jQuery — функция post

Функция post предназначена для загрузки данных с сервера посредством HTTP POST запроса.

Синтаксис функции post :

Применение post ничем не отличается от использования jQuery-функции get . Единственное отличие между ними — это метод, с помощью которого они отправляют данные на сервер. Функция post отправляет данные в составе тела запроса (метод POST), а get — в составе URL (метод GET).

Примеры c использованием функции post

1. Пример, в котором пользователю предложим угадать наш цвет. Для этого ему на выбор предоставим несколько цветов с помощью радиокнопок и кнопку «Угадать». Отправку выбранного цвета на сервер будем осуществлять посредством функции jQuery post . На сервере осуществлять сравнивание «нашего цвета» и цвета, который выбрал пользователь, будем с помощью условия. В зависимости от того равны ли названия цветов, будем возвращать в качестве ответа значение success или error . На клиенте (в браузере) после получения ответа от сервера и в зависимости от его результата, будем выполнять те или иные действия. А именно, при получении ответа success , будем скрывать элементы управления, и выводить сообщение: «Да, вы угадали наш цвет!». В противном случае будем просто выводить текст: «Нет, наш цвет другой!».

Содержимое файла guess-color.php :

2. Пример, в котором реализуем систему приветствия пользователя. Пока пользователь не введёт своё имя, будем приветствовать его как гостя. Определять имеет ли текущий пользователь имя, а также его отправку на сервер будем через AJAX (jQuery функцию post ). На стороне сервера сохранять имя пользователя будем посредством ссесий.

Почему не работает javascript после ajax получения ответа?

На странице реализована фильтрация товаров через ajax.
После получения ответа от сервера и его вставки на страницу перестает работать скрипт с ховер эффектом.

Скрипт подключен в head

Код отправки ajax запроса и обработка ответа

Пробовала строку
$(«#sectionproducts»).empty().append(content);
заменить на
$(«#sectionproducts»).empty().html(content);
Результат не меняется

Как можно решить проблему работы скриптов после отправки ajax запроса?

  • Вопрос задан более трёх лет назад
  • 25520 просмотров

Решено! JQuery обработчики, такие как hover(), click(), bind(), on() и т.д. обрабатывают элементы только при загрузке.
Чтобы они реагировали на подгруженный ajax’ом контент, есть несколько решений:

  1. Загрузить ajax’ом скрипт заново(не лучший вариант). Но работает.
  2. Использовать обработчик live(). Но с версии >= JQuery 1.9 его убрали и перенесли в обработчик on(), в котором объединили и bind(), и delegate().
  3. На мой взгляд, самый лучший. Для тега установить атрибут onClick, установить ему значение функции, например:
    а в скрипте переделать обработчики в функцию.
    Вместо:

Т.е. у тэга div при нажатии атрибут onClick вызывает эту функции. И тут без разницы, подгружен контент ajax’ом или нет.
Если хотите в функции использовать значение $(this), то задайте в атрибуте у функции onClick=»function_name(this);», а в скрипте в функции задайте событие для этого значения

Надеюсь, кому-то будет полезно 🙂

Добрый день.
Может это конечно и некропост, но все же я хотел написать по поводу 2го пункта, про событие jQuery.on().
Везде написано

Но более точное и правильное я нашел в сети, чтобы скрипт отрабатывал именно на подгруженных ajax элементах:

Почему такой вариант не рассматривается?

Я так пользуюсь давно. сам когда-то натыкался на это, но так же быстро решил. оказывается это прям ВОПРОС))


Форум

Справочник

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

Введение в 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%, чтобы неуспев дописать вопрос, юзверь получал ответ 😀

в примере, который указан выше есть все ответы.
запрос отсылается на «/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?
Буду очень признателен вам за помощь в данном вопросе.

Решил протестировать один пример в денвере с сайта
w3schools.com

И тут такая ситуация: меняю содержимое файла ajax_info.txt
но через браузер раз за разом выдаётся прежнее содержимое. Так и должно быть, и нормально ли, что оно кэшируется? Спасибо заранее.

Ответ нашёл у вас же. Спасибо

Почему когда я делаю вот так

То есть ставлю в событие условие обработки первого состояние запроса, Internet Explorer и FireFox запускают эту функцию два раза.
Помогите мне. Я уже целый день вожусь с этим.

, а я то думаю, что он не сразу реагирует.

Круто, эта функция (XmlHttp) работает даже в телефонах, проверялось на Samsung, Nokia и Apple iPhone 4.
А я сначала думал что ajax только для компов.

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

начал изучать AJAX, разбирался с данным кодом. все понял. но код у меня не работает.
метод sleep из рнр запускается. но сообщение из echo не выводится. уже сто раз все пересмотрел и не понимаю в чем проблема.

Спасибо, начал работать с javascript, понадобился ajax , хороший пример.

alert(«Ответ сервера: «+req.responseText);
req.responseText — пустая строка, хоть убей!

if (req.readyState == 4) <
alert(«Ответ сервера: «+req.responseText);
>

if(req.status == 200) <
// если статус 200 (ОК) — выдать ответ пользователю
alert(«Ответ сервера: «+req.responseText);
>
Выводит: «Ответ сервера:»
req.responseText — пусто.
req.status == 4 — мимо проходит

P.S. Как то у вас всё сложно.

Для того чтобы сделать запрос тянешь jquery? Молодец.

Для того чтобы сделать запрос тянешь jquery? Молодец. ответ

хороший текст. спасибо!

Alex’S, возможно в php файле возвращаешь через return, а нужно echo.

Пример: vote.php для примера с голосованием
// span рядом с кнопкой

Асинхронность — это, конечно, хорошо, но иногда нужно без нее. Ну, например, по результатам одного запроса нужно сделать следующий, а по результатам того — еще один. Матрешку из обработчиков городить? Существует какой-либо способ вернуться из callback, кроме очевидного и глупого — гонять в основной программе цикл, ожидая установки флага.

Хорошая должность. Спасибо, что поделился.

Скажите пожалуйста, почему не работает постраничная навигация после ajax запроса

Спасибо за статью. С Ajax имею мало опыта, и Ваша помощь оказалась весьма актуальной.

Еще можно почитать о разработке интересные статьи на eqsash.

Искал эту информацию. Замечательная информация Я проверю для получения дополнительной информации. mobile legend bang bang game

Хорошая должность. Спасибо, что поделился. Домашнее

alert(«Ответ сервера: «+req.responseText);
req.responseText — пустая строка, хоть убей!
ado stunt cars 2

Отправить комментарий

Текущий раздел
  • Введение в Ajax
  • Ajax и Rich Client
  • Ajax и клиент-серверная архитектура.
  • Способы общения с сервером
  • COMET
  • Форматы данных для AJAX
  • Обмен данными для документов с разных доменов
  • Обмен данными между доменами. Часть 2.
Поиск по сайту
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Последние комментарии
  • Комментарий
    22 часа 31 минута назад
  • A very nice blog, I like the way you.
    2 дня 8 часов назад
  • This is a great thing, I think everyone.
    2 дня 8 часов назад

  • It is wonderful to be here with.
    2 дня 8 часов назад
  • Download and play DOM Level 0 — это.
    2 дня 13 часов назад
  • We are the children
    3 дня 13 часов назад
  • function firstUniqLiter(str) <
    3 дня 21 час назад
  • Великие посты! Я на самом деле.
    4 дня 15 часов назад
  • artical is really informative and.
    5 дней 5 часов назад
  • Вы не можете найти себя, уходя в.
    6 дней 11 часов назад
Последние темы на форуме

Заголовок первого блока

  • Пункт #1 Пункт #1 Пункт #1 Пункт #1 Пункт #1 Пункт #1
  • Пункт #2
  • Пункт #3
  • Пункт #4 Пункт #4 Пункт #4 Пункт #4 Пункт #4 Пункт #4 Пункт #4 Пункт #4 Пункт #4
  • Пункт #5
  • Пункт #6
  • Пункт #7
    • Пункт #7.1
    • Пункт #7.2
    • Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3
    • Пункт #7.4
    • Пункт #7.5
  • Пункт #8
    • Пункт #8.1 Пункт #8.1 Пункт #8.1 Пункт #8.1 Пункт #8.1
    • Пункт #8.2
    • Пункт #8.3
  • Пункт #9
  • Пункт #10
  • Пункт #11 Пункт #11 Пункт #11 Пункт #11 Пункт #11
    • Пункт #11.1
    • Пункт #11.2
    • Пункт #11.3
    • Пункт #11.4
    • Пункт #11.5
    • Пункт #11.6
  • Пункт #12 Пункт #12 Пункт #12 Пункт #12 Пункт #12 Пункт #12 Пункт #12 Пункт #12 Пункт #12
  • Пункт #13
  • Пункт #14
  • Пункт #15
  • Пункт #16
  • Пункт #14 Пункт #14 Пункт #14 Пункт #14 Пункт #14 Пункт #14 Пункт #14 Пункт #14 Пункт #14
  • Пункт #15
  • Пункт #16

Заголовок второго блока

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Пример работы Ajax и txt-файла

После пройденных уроков пора перейти и к примерам! В этом уроке рассмотрим примеры работы асинхронной и синхронной передачи данных в Ajax на примере txt-файлов.

Пример синхронной передачи данных в Ajax + TXT

Скажу сразу — для создания примера достаточно создать два файла (ajax.txt и index.html) и вставить в них содержимое, указанное ниже. Итак, делаем по шагам:

1. Создаём самый обычный txt-файл.
2. Назовём его ajax.txt
3. Вставляем в него любой текст, который вы хотите увидеть, а затем сохраняем.

Текст в ajax.txt (в качестве примера)

4. Создаём html-файл.
5. Назовём его index.html
6. Вставляем код указанный ниже (надеюсь, что после предыдущих уроков понятно, что в нём и к чему. Если есть вопросы, то просмотрите последние 2-3 урока).

Код HTML и JS (файла index.html)

Пример асинхронной передачи данных в Ajax + TXT

1. Используем созданный в первом примере файл ajax.txt. Содержимое можно не менять:

Текст в ajax.txt (в качестве примера)

2. Создаём html-файл.
3. Назовём его index.html
4. Вставляем код указанный ниже (надеюсь, что после предыдущих уроков понятно, что в нём и к чему. Если есть вопросы, то просмотрите последние 2-3 урока).

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

Спасибо за внимание! Переходим к более сложным примерам!

Как выводить html с помощью AJAX

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

Вообще есть два способа вывода контента: либо через JavaScript, либо через AJAX. Мое мнение, что лучше использовать AJAX, чем JS, но почему лучше — спросите Вы? Ведь обе технологии прячут текст в отдельных файлах. А ответ в том, что поисковые системы дошли до очень высокого уровня и уже в состоянии определять ссылки, которые содержатся в яваскрипте. Например, Google уже заявил об этом, видимо скоро и Яндекс так же заявит об этом достижении.

Инструкция по выводу контента через AJAX

1. Добавить в заголовочную директорию следующий скрипт:

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

2. Создайте html или php документ с кодом, который нужно выводить через AJAX . Например, создадим файл text-dlya-ajax.html и пропишем в нем:

3. Создайте отдельный файл JavaScript (.js). Обычно я его называю ajax.js , чтобы сразу понять его содержимое. Добавьте в него следующий код:

Теперь blockajax будет характеризоваться файлом text-dlya-ajax.html .

Если нужно вывести много таких привязок «блок» = «html-код», то можно прописать сколь угодно много различных соответствий:

4. Подключите файл ajax.js к документу через заголовочный тег :

Важно, чтобы сначала подключалась библиотека jquery.min.js, а уже потом файл ajax.js. Иначе работать не будет. Должно быть так:

5. В месте где нужно вывести html-текст файла text-dlya-ajax.html напишите:

Больше делать ничего не требуется. Теперь Вы можете легко выводить контент через AJAX .

Вы можете скачать выше описанный пример по следующей ссылке: ajax.rar

Кстати, через AJAX также можно выводить и интерпретировать PHP-код. А это открывает огромные возможности перед Вами.

Зачем нужно выводить html с помощью AJAX (3 причины)
1. Если быть очень кратким, то это нужно для продвижения сайта в поисковых системах. Дело в том, что ссылки внутри сайта как бы передают вес между собой. Те страницы на кого ссылаются чаще, имеют больший вес. Поэтому чтобы более равномерно распределить вес сайта между страницами (а не сливать его весь по сквозным ссылкам) нужно как-то сделать так, чтобы эти сквозные ссылки не учитывались поисковыми машинами.

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

Конечно, можно закрыть все ссылки в метках в rel=»nofollow», однако исследования показали, что таким способом теряется вес на сайте, т.е. этот вес никому не передается, он как бы просто испаряется (звучит странно, но это так).

2. Второй причиной использования выводить html через AJAX является уменьшение кода на странице сайта. Опять таки это нужно для поисковых систем. Например, футер сайта постоянно дублирует один и тот же код, который только отнимает лишний вес со страницы, поэтому было бы хорошо этот код убрать, но футер оставить. Аякс идеально подходит для решения этой проблемы.

3. Страница с использованием AJAX грузится поблочно, то есть каждый элемент как бы грузиться синхронно и не зависит от других. Таким образом «тяжелые» элементы на сайте не будут тормозить загрузку других частей сайта. Это более удобно для пользователя, поскольку он видит, что сайт грузится и чувствует себя более спокойно, нежели когда загрузка сайта на чем-то застопорилась.

Добавить комментарий