Javascript.RU

Введение в Ajax

Update: Более новый материал по этой теме находится по адресу https://learn.javascript.ru/ajax-intro.

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

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

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

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

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

Vote

Здесь будет ответ сервера

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

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

<input value="Голосовать!" onclick="vote()" type="button" />

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

<div id="vote_status">Здесь будет ответ сервера</div>

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

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

function getXmlHttp(){
  var xmlhttp;
  try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    try {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
      xmlhttp = false;
    }
  }
  if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
    xmlhttp = new XMLHttpRequest();
  }
  return xmlhttp;
}

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

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

// javascript-код голосования из примера
function vote() {
	// (1) создать объект для запроса к серверу
	var req = getXmlHttp()  
       
        // (2)
	// span рядом с кнопкой
	// в нем будем отображать ход выполнения
	var statusElem = document.getElementById('vote_status') 
	
	req.onreadystatechange = function() {  
        // onreadystatechange активируется при получении ответа сервера

		if (req.readyState == 4) { 
            // если запрос закончил выполняться

			statusElem.innerHTML = req.statusText // показать статус (Not Found, ОК..)

			if(req.status == 200) { 
                 // если статус 200 (ОК) - выдать ответ пользователю
				alert("Ответ сервера: "+req.responseText);
			}
			// тут можно добавить else с обработкой ошибок запроса
		}

	}

       // (3) задать адрес подключения
	req.open('GET', '/ajax_intro/vote.php', true);  

	// объект запроса подготовлен: указан адрес и создана функция onreadystatechange
	// для обработки ответа сервера
	 
        // (4)
	req.send(null);  // отослать запрос
  
        // (5)
	statusElem.innerHTML = 'Ожидаю ответа сервера...' 
}

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

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

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

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

Пример: vote.php для примера с голосованием
<?php
sleep(3);
echo 'Ваш голос принят!';

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

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

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

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

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

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

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

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

Бесконечное дерево

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

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

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

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

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

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

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

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

  • Проверка ошибок ввода формы ДО сабмита
    На сервер передается имя пользователя, результат проверки возвращается на страницу.
  • "Мгновенная" загрузка
    Браузер обращается к серверу только за данными, а не обновляет весь громоздкий интерфейс
  • Автоматическая "доставка" писем в открытую папку
    Время от времени отправляется запрос на сервер и, если пришли новые письма, они появляются в браузере.
  • Автодополнение
    Достаточно ввести первые буквы имени адресата, и остальные дополняются автоматически, как в десктоп-приложениях.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В примере с drag'n'drop также затронута проблема "stale context" - устаревшего контекста.

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

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

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

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

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

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

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

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

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

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


Автор: Onis, дата: 15 июля, 2008 - 23:08
#permalink

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


Автор: Alexx (не зарегистрирован), дата: 22 мая, 2009 - 12:50
#permalink

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


Автор: Орёл, дата: 5 мая, 2010 - 22:35
#permalink

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


Автор: Гость (не зарегистрирован), дата: 13 апреля, 2011 - 13:40
#permalink

и теребиш и гладиш... ну ты понел

автору спасибо за статью.


Автор: Гость (не зарегистрирован), дата: 22 июля, 2008 - 13:09
#permalink

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


Автор: Илья Кантор, дата: 22 июля, 2008 - 16:27
#permalink

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


Автор: Гость (не зарегистрирован), дата: 26 марта, 2009 - 03:04
#permalink

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


Автор: AzriMan, дата: 26 марта, 2009 - 10:24
#permalink

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

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


Автор: Гость (не зарегистрирован), дата: 28 марта, 2009 - 00:24
#permalink

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


Автор: Илья Кантор, дата: 28 марта, 2009 - 13:59
#permalink

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

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

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

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


Автор: Гость (не зарегистрирован), дата: 29 марта, 2009 - 17:28
#permalink

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

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


Автор: Гость (не зарегистрирован), дата: 29 марта, 2009 - 18:23
#permalink

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


Автор: Гость (не зарегистрирован), дата: 29 марта, 2009 - 18:35
#permalink

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


Автор: СергейС (не зарегистрирован), дата: 9 июля, 2011 - 04:24
#permalink

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


Автор: Гость (не зарегистрирован), дата: 14 августа, 2008 - 19:13
#permalink

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


Автор: palaga (не зарегистрирован), дата: 14 октября, 2008 - 22:43
#permalink

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


Автор: Гость (не зарегистрирован), дата: 20 ноября, 2008 - 13:35
#permalink

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


Автор: Охотник на зелёных (не зарегистрирован), дата: 1 декабря, 2008 - 18:59
#permalink

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


Автор: Irin7, дата: 25 декабря, 2008 - 19:45
#permalink

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


Автор: Webcaster (не зарегистрирован), дата: 18 декабря, 2008 - 12:38
#permalink

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


Автор: Илья Кантор, дата: 28 марта, 2009 - 15:30
#permalink

Интересный баг.

req.send(null); 
document.getElementById('vote_status').innerHTML = 'Ожидаю ответа сервера...'

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


Автор: Regtool (не зарегистрирован), дата: 29 декабря, 2008 - 15:28
#permalink

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


Автор: Valery (не зарегистрирован), дата: 11 апреля, 2011 - 12:19
#permalink

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


Автор: Гость (не зарегистрирован), дата: 11 января, 2009 - 12:33
#permalink

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


Автор: tref (не зарегистрирован), дата: 21 февраля, 2009 - 01:48
#permalink

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


Автор: Freeman (не зарегистрирован), дата: 13 марта, 2009 - 10:37
#permalink

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


Автор: Zed (не зарегистрирован), дата: 26 марта, 2009 - 13:05
#permalink

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


Автор: melki, дата: 1 апреля, 2009 - 21:04
#permalink

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


Автор: neznau (не зарегистрирован), дата: 6 апреля, 2009 - 15:06
#permalink

великолепно!))


Автор: rip_serj (не зарегистрирован), дата: 26 апреля, 2009 - 00:13
#permalink

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


Автор: Гость (не зарегистрирован), дата: 28 апреля, 2009 - 10:08
#permalink

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

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


Автор: Илья Кантор, дата: 28 апреля, 2009 - 11:09
#permalink

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


Автор: Катя (не зарегистрирован), дата: 18 мая, 2009 - 13:05
#permalink

Здравствуйте!

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

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


Автор: Илья Кантор, дата: 18 мая, 2009 - 16:22
#permalink

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


Автор: kamushek, дата: 20 августа, 2010 - 16:24
#permalink

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


Автор: Гость (не зарегистрирован), дата: 11 апреля, 2011 - 16:54
#permalink

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


Автор: Лаврентий (не зарегистрирован), дата: 19 июля, 2009 - 17:02
#permalink

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


Автор: Mars803145 (не зарегистрирован), дата: 16 августа, 2009 - 17:02
#permalink

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


Автор: Илья Кантор, дата: 16 августа, 2009 - 22:07
#permalink

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


Автор: Гость (не зарегистрирован), дата: 7 сентября, 2009 - 13:24
#permalink

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


Автор: Гость (не зарегистрирован), дата: 13 сентября, 2009 - 23:10
#permalink

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


Автор: Гость (не зарегистрирован), дата: 19 сентября, 2009 - 14:09
#permalink

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


Автор: Гость (не зарегистрирован), дата: 19 сентября, 2009 - 14:23
#permalink

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


Автор: Илья Кантор, дата: 5 октября, 2009 - 00:28
#permalink

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


Автор: Гость (не зарегистрирован), дата: 11 апреля, 2011 - 16:55
#permalink

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


Автор: dizelbox (не зарегистрирован), дата: 5 октября, 2009 - 00:25
#permalink

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


Автор: Иван Рожков (не зарегистрирован), дата: 10 октября, 2009 - 00:21
#permalink

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

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


Автор: LestaD (не зарегистрирован), дата: 24 июля, 2011 - 15:58
#permalink

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


Автор: HEX (не зарегистрирован), дата: 5 ноября, 2009 - 21:24
#permalink

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


Автор: lotusjs, дата: 12 ноября, 2009 - 23:24
#permalink

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


Автор: Zubik (не зарегистрирован), дата: 17 ноября, 2009 - 11:37
#permalink

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


Автор: Chaynik (не зарегистрирован), дата: 18 ноября, 2009 - 16:25
#permalink

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


Автор: Бобр, дата: 21 января, 2010 - 14:28
#permalink

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

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

req.open('GET', 'http://javascript.ru//ajax_intro/vote.php', true);

Правильный адрес?

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


Автор: Гость (не зарегистрирован), дата: 30 января, 2010 - 22:00
#permalink
if ($en == true) {echo 'privet';}
if ($en == false) {echo 'ghbdtn';}

Автор: Гость (не зарегистрирован), дата: 10 сентября, 2011 - 12:13
#permalink

$en ? echo 'privet' : echo 'paka';


Автор: Glinkz, дата: 31 января, 2010 - 13:30
#permalink

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

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


Автор: B@rmaley.e><e, дата: 31 января, 2010 - 18:31
#permalink

Отправить соответствующий заголовок.

header("Content-Type: text/html; charset=utf-8")

Автор: Glinkz, дата: 31 января, 2010 - 22:17
#permalink

Ммм по ходу написания скрипта возник вопрос...)
Вот обращение к серверу
req.open('GET', 'scripts/voice.php?val=' + AnyObjectValue + '&val2=' + AnyObjectValue2, true)

AnyObjectValue - это какое нибудь значение какой нибудь переменной

вопрос в том, какой код должен быть на стороне PHP скрипта...?


Автор: B@rmaley.e><e, дата: 31 января, 2010 - 23:48
#permalink

Смотря для чего. Значения переменных val и val2 будут доступны как соответствующие ключи супер-глобального массива $_GET.

$_GET['val']; // AnyObjectValue
$_GET['val2']; // AnyObjectValue2

Автор: Гость (не зарегистрирован), дата: 10 сентября, 2011 - 12:18
#permalink

Посоветовал бы ещё проходится функцией array_walk по всему массиву $_GET для запросов, передающих информацию напрямую в DB, так же можно прикрутить логирование, а в некоторых случаях даже нужно.
И тем не менее я бы не советовал использовать $_GET для передачи данных. $_POST в помощь.


Автор: Bumchik (не зарегистрирован), дата: 9 февраля, 2010 - 17:05
#permalink

Как в функцию, задаваемую для onreadystatechange передать параметр?


Автор: VadimQ, дата: 9 февраля, 2010 - 22:12
#permalink

А как передать данные используя метод POST?


Автор: Гость (не зарегистрирован), дата: 12 февраля, 2010 - 10:01
#permalink

да, как использовать метод POST


Автор: Гость (не зарегистрирован), дата: 4 марта, 2010 - 21:05
#permalink

Первая картинка на 1024 разрешении вылазит на список содержания...


Автор: Гость (не зарегистрирован), дата: 13 марта, 2010 - 11:44
#permalink

А где задается синхронный и асинхронный режимы? Третьим параметром функции open?

А статья так себе... Много воды, смысла мало...


Автор: Гость (не зарегистрирован), дата: 30 марта, 2010 - 05:58
#permalink

Автору спасибо.
Очень познавательный материал


Автор: Sniper, дата: 31 марта, 2010 - 20:00
#permalink

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


Автор: acso (не зарегистрирован), дата: 13 августа, 2010 - 12:56
#permalink

Видимо ответ кешируется.

Я использую такой прием:

xmlhttp.open("POST","some.php?r="+Math.random(), true);

В результате каждый вызов будет "уникальным" и будет возвращаться "некешированное" значение.


Автор: Sniper, дата: 3 апреля, 2010 - 16:10
#permalink

Нашел таки я решение данной проблемы =)

function call(instr)
{
	var stroka=""
    var req = getXmlHttp()
    var tmp =  document.getElementById('ppp')   
    req.onreadystatechange = function() {  
      
        if (req.readyState == 4) { 
   
            tmp.innerHTML = req.statusText 
 
            if(req.status == 200) {			
				stroka = stroka.concat(req.responseText)			
                tmp.innerHTML = stroka;				
            }
        } 
    }
	nocache = Math.random()
//Вот оно!!! добавляем в запрос рандомную переменную 
    req.open('GET', instr+'?nocahce='+nocache, true);  
    req.send(null); 
}

Автор: An43 (не зарегистрирован), дата: 1 июля, 2010 - 12:46
#permalink

Не стоит так делать Это костыль, а не решение. Существует вероятность того, что значения, полученные Math.random() повторятся и тогда пользователь получит устаревший вывод из кэша браузера.
Для того, чтобы не получать ответ из кэша достаточно просто отключить кэширование с помощью тега в скрипте на сервере.
Например:

<meta http-equiv="Pragma" content="no-cache"/>


Автор: An43 (не зарегистрирован), дата: 1 июля, 2010 - 13:27
#permalink

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


Автор: An43 (не зарегистрирован), дата: 1 июля, 2010 - 14:17
#permalink

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


Автор: Ajax (не зарегистрирован), дата: 3 апреля, 2010 - 20:06
#permalink

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


Автор: Dimitri (не зарегистрирован), дата: 15 апреля, 2010 - 17:47
#permalink

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

var xmlhttp = getXmlHttp()
xmlhttp.open("GET", uri, false); // синхронный запрос для примера
xmlhttp.send(null);
if(!xmlhttp.getResponseHeader("Date")) {  // 1
  var cached = xmlhttp;
  xmlhttp = getXmlHttp()
  var ifModifiedSince = cached.getResponseHeader("Last-Modified");
  ifModifiedSince = (ifModifiedSince) ? ifModifiedSince : new Date(0); // January 1, 1970
  xmlhttp.open("GET", uri, false);
  xmlhttp.setRequestHeader("If-Modified-Since", ifModifiedSince);
  xmlhttp.send(null);
  if(xmlhttp.status == 304)  {
    xmlhttp = cached;
  }
}

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


Автор: Гость (не зарегистрирован), дата: 27 мая, 2010 - 15:00
#permalink

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


Автор: Гость (не зарегистрирован), дата: 27 мая, 2010 - 15:25
#permalink

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


Автор: Красный (не зарегистрирован), дата: 14 июня, 2010 - 23:01
#permalink

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


Автор: Roan (не зарегистрирован), дата: 20 июня, 2010 - 15:58
#permalink

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


Автор: Гость (не зарегистрирован), дата: 30 июля, 2010 - 22:08
#permalink


Автор: Гость (не зарегистрирован), дата: 19 августа, 2010 - 16:39
#permalink

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


Автор: Гость, дата: 5 октября, 2010 - 13:40
#permalink

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


Автор: Sерг (не зарегистрирован), дата: 6 октября, 2010 - 00:11
#permalink

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

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


Автор: Кость (не зарегистрирован), дата: 23 октября, 2010 - 20:41
#permalink

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


Автор: Гость (не зарегистрирован), дата: 26 октября, 2010 - 13:25
#permalink

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

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

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

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

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


Автор: B@rmaley.e><e, дата: 26 октября, 2010 - 22:06
#permalink

Как это ни удивительно, но и HTML документ, и XML документ являются не чем иным, как текстовым файлом. Более того, текстовый файл с единственной строчкой "Hello, world!" является корректным HTML документом (за исключением отсутствия структурных тегов, но современные браузеры умеют обходиться без них, а в HTML5 все эти html, head и body и вовсе необязательны).

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

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


Автор: Гость (не зарегистрирован), дата: 28 октября, 2010 - 12:58
#permalink

Проблема -- в том, что сам сервер конвертировать документы из CP1251 в UTF-8 не умеет.
А AJAX, соответственно -- не умеет ничего делать с текстами в CP1251.

Единственный выход, похоже -- перекодирование на сервере ("на лету").


Автор: AD (не зарегистрирован), дата: 23 ноября, 2010 - 20:10
#permalink

Лучше сначала пытаться определить XMLHttpRequest, а только по том ActiveXObject.
Потому что XMLHttpRequest встроен в IE версии >= 7.

function getXMLHttp()
{
	var XMLHttp = null;
	if(window.XMLHttpRequest)
	{
		try
		{
			XMLHttp = new XMLHttpRequest();
		}
		catch(e){}
	}
	else if(window.ActiveXObject)
	{
		try
		{
			XMLHttp = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch(e)
		{
			try
			{
				XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch(e){}
		}		
	}
	return XMLHttp;
}

Автор: Гость (не зарегистрирован), дата: 24 ноября, 2010 - 09:55
#permalink

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


Автор: nomen, дата: 30 ноября, 2010 - 13:36
#permalink

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

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

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


Автор: poorking, дата: 7 декабря, 2010 - 22:22
#permalink

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


Автор: Гость (не зарегистрирован), дата: 25 декабря, 2010 - 14:42
#permalink

Я тоже был на 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"]
выводится пустая строка ...


Автор: gyrdym, дата: 29 октября, 2012 - 02:25
#permalink

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


Автор: Гость (не зарегистрирован), дата: 4 февраля, 2011 - 10:30
#permalink

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


Автор: Гость (не зарегистрирован), дата: 5 февраля, 2011 - 06:38
#permalink

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


Автор: отдых в черногории (не зарегистрирован), дата: 10 апреля, 2011 - 19:43
#permalink

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


Автор: jeka (не зарегистрирован), дата: 11 апреля, 2011 - 17:42
#permalink

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


Автор: Гость (не зарегистрирован), дата: 12 сентября, 2011 - 18:35
#permalink

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


Автор: Гость (не зарегистрирован), дата: 1 ноября, 2011 - 16:21
#permalink

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


Автор: Гость (не зарегистрирован), дата: 7 ноября, 2011 - 18:03
#permalink

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

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

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


Автор: Ramzil_Nixon (не зарегистрирован), дата: 21 ноября, 2011 - 12:17
#permalink

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

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

Писал так:

function getXmlHttp()
{
	try
	{
		return new ActiveXObject("Msxml2.XMLHTTP");
	}
	catch (e)
	{
		try
		{
			return new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch (ee)
		{
		}
	}
	if (typeof XMLHttpRequest!='undefined')
	{
		return new XMLHttpRequest();
	}
}
function goajax()
{
	var start = getXmlHttp(); // Создаем отправку на сервер
	var inc = document.getElementById('incontent'); // Это у нас будет отображать ход выполнения
	start.open('GET', 'include.php', true); // Запрос подготовлен
	start.send(null); // Отправляем запрос в сервер
	inc.innerHTML = 'Ждем ответа сервера';
	start.onreadystatechange = function()
	{
		if(start.readyState == 4)
		{
			inc.innerHTML = '100% завершено';
			if(start.status == 200)
			{
				alert('Все работает '+inc.responseText);
			}
		}
	}
}

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

<?php
sleep(3);
echo 'Это ответ от сервера';
?>

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


Автор: snerf (не зарегистрирован), дата: 22 ноября, 2011 - 09:55
#permalink

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


Автор: Гость (не зарегистрирован), дата: 7 декабря, 2011 - 15:48
#permalink

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


Автор: Гость (не зарегистрирован), дата: 10 мая, 2012 - 11:29
#permalink

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


Автор: Гость (не зарегистрирован), дата: 10 декабря, 2011 - 17:24
#permalink

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


Автор: Niksik, дата: 16 января, 2012 - 22:02
#permalink

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

var req = Create();

function Create()
{
    if(navigator.appName == "Microsoft Internet Explorer")
    {
        req = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else
    {
        req = new XMLHttpRequest();
    }
return req;
}

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


Автор: Llirik812, дата: 11 февраля, 2012 - 09:57
#permalink

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

у Вас:

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


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


Автор: Гость (не зарегистрирован), дата: 22 февраля, 2012 - 16:19
#permalink

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

$(".status_bd").click(function(){

var bot = $(this);
var hide = $(this).attr('name');
var number_cat = $(this).attr('value');
$.ajax({
type: "POST",
cache :false,
url: "index.php?option=com_photogallery&task=ajaxstatus",
data: ({h : hide, num : number_cat}),
success: function(response)
{
data = eval("(" + response + ")");
id_cat = data.id_cat;
statys = data.hide;

if(statys ===0)
{
$('#'+id_cat).animate({ opacity: 0.4});
$(bot).text("show");;
$(bot).attr('name',0);

}
else
{
$('#'+id_cat).animate({ opacity: 1});
$(bot).text("hide");
$(bot).attr('name',1);

}

}
});

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


Автор: Дюк (не зарегистрирован), дата: 29 февраля, 2012 - 17:38
#permalink

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

echo 'Ваш голос принят!';

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


Автор: Вусал (не зарегистрирован), дата: 13 апреля, 2012 - 12:20
#permalink

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


Автор: zeran, дата: 27 мая, 2012 - 13:56
#permalink

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


Автор: Андрейя (не зарегистрирован), дата: 27 сентября, 2012 - 14:31
#permalink

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

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>

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


Автор: Андрейя (не зарегистрирован), дата: 27 сентября, 2012 - 17:46
#permalink

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


Автор: Гость (не зарегистрирован), дата: 29 сентября, 2012 - 19:45
#permalink


Автор: Ranerg, дата: 20 ноября, 2012 - 11:13
#permalink

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

if (req.readyState == 1) { alert(1);}

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


Автор: alex33 (не зарегистрирован), дата: 16 июля, 2013 - 09:45
#permalink
sleep(3)

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


Автор: alex33 (не зарегистрирован), дата: 19 июля, 2013 - 07:18
#permalink

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


Автор: Foka (не зарегистрирован), дата: 7 января, 2014 - 22:20
#permalink

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


Автор: Serhiy, дата: 8 января, 2014 - 19:49
#permalink

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


Автор: Гость (не зарегистрирован), дата: 6 марта, 2014 - 11:38
#permalink

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


Автор: Alex'S, дата: 15 марта, 2014 - 17:42
#permalink

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


Автор: alex33, дата: 15 марта, 2014 - 20:48
#permalink

if (req.readyState == 4) {
alert("Ответ сервера: "+req.responseText);
}


Автор: Alex'S, дата: 16 марта, 2014 - 06:37
#permalink

if(req.status == 200) {
// если статус 200 (ОК) - выдать ответ пользователю
alert("Ответ сервера: "+req.responseText);
}

Выводит: "Ответ сервера:"
req.responseText - пусто.
req.status == 4 - мимо проходит


Автор: CasperSKYS (не зарегистрирован), дата: 17 марта, 2014 - 05:15
#permalink

Ребят, есть проблемы с аяксом, пишите в аську 958849, или в скайп ArturBar84... помогу


Автор: Михаил111 (не зарегистрирован), дата: 17 сентября, 2014 - 08:31
#permalink

$(function(){
$("button").click(function(){
$.get("vote.php",function(result){
$("div").html(result);
})
})
});

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


Автор: Гость (не зарегистрирован), дата: 18 сентября, 2014 - 04:34
#permalink

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


Автор: Гость (не зарегистрирован), дата: 17 октября, 2014 - 11:45
#permalink

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


Автор: Гость (не зарегистрирован), дата: 28 октября, 2014 - 01:39
#permalink

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

Пример: vote.php для примера с голосованием
<?php
sleep(3);
echo 'Ваш голос принят!';


Автор: Дима (другой Дима) (не зарегистрирован), дата: 30 декабря, 2014 - 22:54
#permalink

> // span рядом с кнопкой

не span, а div


Автор: Гость (не зарегистрирован), дата: 2 марта, 2015 - 10:45
#permalink

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


Автор: Сара Lambart (не зарегистрирован), дата: 6 августа, 2015 - 02:10
#permalink

Мое свидетельство я Сара Lambart от единого государства, но я базируется в Испании. Живет в Испании в течение многих лет now.I никогда не верили во всех произнесения заклинаний были мошенническим путем многих разных людей я потерял надежду в них. Мой бывший ушел, а я был опустошен, я потерял свою работу Мой лучший друг увидел, что мой положение Тогда он познакомил меня с ДР. SAHID сказали его работа real.Never верил, пока я не вошел в контакт с ним, он заклинание для меня я восстановить все мои деньги и моя бывшая вернулся менее чем 72hrs.I был отозван на моем месте работы даже способствовало сразу Я не мог поверить, что это реальный заклинатель заклинание там, кто делает реальные заклинания я только платные в знак признательности после заклинание worked.He не взимает никого, пока заклинание не работает Вы не должны все быть обманутым все эти мошенничества что здесь за деньги. DR.SAHID не взимает можно платить только за предметы заклинание worked.Try его и посмотреть, что я говорю, что эти являются несколько вещей, он делает
* Его вернуть ПОТЕРЮ влюбленных в 24 часов. * Дистанционное управление ЛЮБИТЕЛЕЙ.
* ВСЕ ВИДЫ заклинаниями и VOODOO РАБОТНИКА.
* IS целитель твой длительные решить ваши проблемы? ЭТО ВАШ ШАНС помочь быстро.
* Получить поездку ЛЮБОГО колдовства невезения и проклятий.
* ЭКСПЕРТ на расстоянии исцеление.
* Судебные дела, даже если один осужден [ЕСЛИ Theres возможности обратиться]
* Некоторое тело, ревновать ваши отношения?
* Незавершенных РАБОТА другими врачами-если не устраивает, приходят ко мне.
* Вы вынуждены переходить РАЗВОД?
* Его ПРЕДОТВРАТИТЬ невезения и ревность.
* ВЫИГРАТЬ лошадей и азартные игры.
* Он может остановиться около одного вмешательства с вашей отношения.
* Вы хотите иметь детей по своему выбору.
* Вы хотите БЫСТРЫЙ предложение руки и сердца?
* Его можно очистить ЛЮДИ ДОМА предприятия и собственность ОТ невезения.
* Вы нужно чрезмерное сексуальную силу и сильные эрекции.
* Женщины приходят ДЛЯ тампон, это поможет вам не потерять ваше отношение КОРАБЛИ, что заставит вас сладким теплым и плотно.
Вы можете связаться с ним через этот адрес электронной почты}, ИЛИ ВЫ ЗВОНИТЕ


Автор: Reflective tape (не зарегистрирован), дата: 15 сентября, 2015 - 05:44
#permalink

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


Автор: Гость (не зарегистрирован), дата: 28 сентября, 2015 - 10:41
#permalink

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


Автор: Дмитрий Цечоев (не зарегистрирован), дата: 1 марта, 2016 - 11:16
#permalink

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


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

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
11 + 1 =
Введите результат. Например, для 1+3, введите 4.
 
Текущий раздел
Поиск по сайту
Реклама
Содержание

Учебник javascript

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

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

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Последние комментарии
Последние темы на форуме
Forum