В этой статье AJAX описывается на уровне возможностей и примеров. Рассмотрены особенности асинхронного взаимодействия и примеры использования, но с минимумом технических деталей.
Надеюсь, она будет полезна для понимания, что такое AJAX и с чем его едят.
AJAX, или, более длинно, Asynchronous Javascript And Xml - технология для взаимодействия с сервером без перезагрузки страниц.
За счет этого уменьшается время отклика и веб-приложение по интерактивности больше напоминает десктоп.
Например, при нажатии кнопки голосовать - из браузера на сервер будет отправлено сообщение, а сервер ответит браузеру, что голос принят.
Здесь будет ответ сервера
Технология AJAX, как указывает первая буква A в ее названии - асинхронна, т.е браузер, отослав запрос, может делать что угодно, например, показать сообщение
об ожидании ответа, прокручивать страницу, и т.п.
При нажатии она вызывает функцию 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, довольно типичен и выглядит так:
отправляет запрос вызовом send (ответ сервера принимается срабатывающей в асинхронном режиме функцией onreadystatechange)
показывает посетителю индикатор состояния процесса
Серверный обработчик, к которому обращен AJAX-запрос (в примере это vote.php) по сути ничем не отличается от обычной страницы. AJAX-запрос, отправляемый XmlHttpRequest, ничем не отличается от обычного запроса.
Просто текст, который возвращает сервер, не показывается как HTML, а читается и обрабатывается функцией onreadystatechange.
DOM-модель, операции над которой производятся javascript на стороне клиента, чтобы обеспечить динамическое отображение и взаимодействие с информацией
XMLHttpRequest для асинхронного обмена данными с веб-сервером. В некоторых AJAX-фреймворках и в некоторых ситуациях, вместо XMLHttpRequest используется IFrame, SCRIPT-тег или другой аналогичный транспорт.
JSON часто используется для обмена данными, однако любой формат подойдет, включая форматированный HTML, текст, XML и даже какой-нибудь EBML
Типичное AJAX-приложение состоит как минимум из двух частей.
Первая выполняется в браузере и написана, как правило, на JavaScript, а вторая - находится на сервере и написана, например, на Ruby, Java или PHP .
Между этими двумя частями происходит обмен данными через XMLHttpRequest(или другой транспорт).
Самый типичный пример - чат. В окошко постоянно поступают все новые сообщения, непрерывно подгружаемые с сервера. И, опять же, через AJAX, без перезагрузки страницы, пользователь может
отсылать сообщения на сервер.
Существуют другие предложения подобного рода, например, отображающие биржевые котировки в реальном времени.
Google - одна из первых систем, которая предложила "живой поиск", live search. Пользователь печатает поисковую фразу, а система автодополняет ее, получая
список самых вероятных дополнений с сервера.
Код, который это обеспечивает, работает следующим образом.
Активируется примерно при каждом нажатии клавиши
Время посылки последнего запроса отслеживается
Для "обычной" скорости печати - запрос отсылается при каждом нажатии
Для "программистской" скорости - каждые несколько нажатий
Создается скрытый DIV, который показывается при начале печати
DIV заполняется ответом сервера
Текущий результат подсвечен, можно перемещаться и выбирать
При нажатии правой стрелки, поиск в подрезультатах
Результаты кэшируются
при нажатии на "удалить", обращения к серверу не происходит
Время на осуществление запроса отслеживается для управления частотой запросов к серверу
Обычный модем будет обращаться к серверу меньше,
Подключение по выделенной линии - запросы идут чаще.
Т.е, в синхронном случае удочка постоянно приковывает наше внимание. Ловля рыбы - последовательный процесс.
В асинхронном варианте - мы сначала задали программу, что делать при клеве, а затем опустили удочку ловить и занялись другими делами.
Например, поставили еще 5 таких удочек.
Асинхронное программирование сложнее, чем синхронное, и поначалу непривычно, т.к в нем заранее задается то, что сработает после.
Т.е, программу "что делать, когда клюнет" нужно задать до того, как клюнуло, и вообще неизвестно, есть ли в водоеме рыба.
Существуют приемы, облегчающие асинхронное программирование, например, отложенный объект Deferred (Twisted,Dojo,Mochikit), но об этом - в отдельной статье.
Вернемся к нашим баранам: браузеру, серверу и, скажем, базе данных.
В синхронной модели браузер отправляет запрос на сервер и висит, ждет, пока тот совершит всю необходимую работу. Сервер выполняет запросы к базе данных, заворачивает ответ в необходимый формат и выводит его. Браузер. получив ответ, вызывает функцию показа.
Все процессы выполняются последовательно, один за другим.
Сетевые задержки включены во время ожидания, обозначенное на схеме серым цветом.
Пользователь не может заниматься чем-то другим на этой же странице, пока происходит синхронный обмен данными.
В асинхронной модели запрос отсылается ("удочка поставлена"), и можно заняться чем-то другим. Когда запрос выполнился ("клюнуло") - запускается заранее
подготовленная программистом функция ("подтянуть спиннинг") показа сообщения сервера.
Здесь сервер сразу же уведомляет браузер о том, что запрос принят в обработку и освобождает его для дальнейшей работы. Когда ответ будет готов - сервер перешлет его, и на браузере будет вызвана соответствующая функция показа, но пока этот ответ формируется и пересылается - браузер свободен.
Пользователь может написать комментарии, заполнить и отослать форму и т.п: Могут производиться новые асинхронные запросы.
Асинхронная модель характеризуется почти мгновенной реакцией на действия пользователя, так что создается впечатление удобного и быстрого приложения.
Например, в примере с голосованием выше - кнопка срабатывает сразу, хотя реальный учет голоса происходит позднее, после обработки сообщения сервером.
Из-за такого разрыва между действием и реальным результатом приложение становится гораздо более чувствительно к ошибкам.
Особенно в случае нескольких одновременных асинхронных запросов, нужно заботиться об очередности выполнения и ответа (race-conditions) и, в случае ошибки, оставлять приложение в целостном (consistent) состоянии.
Можно делать много одновременных задач ("удочек"), но задача, начатая первой, может окончиться последней.
Реакция тут же, но неизвестно, какой будет результат. Усложнена обработка ошибок
Ошибок коммуникации - разрыв связи, и т.п.
Пользовательских ошибок - например, не хватило привилегий
Контроль целостности (bugproof)
Например, редактор отправил асинхронный запрос на удаление ветки дерева. Добавление в нее нужно отключить, пока не придет ответ сервера. Если вдруг не хватило привилегий, то операция не удалась.
Интерактивность
Быстрый интерфейс
Плюсов всего два, зато какие! Овчинка стоит выделки.
Иногда для асинхронных операций необходимо делать различные "финты ушами". Например, хочется сделать drag'n'drop в дереве, т.е перетаскивать статьи из одного раздела в другой мышкой, и чтобы они на сервере в базе данных меняли родителя.
Drag'n'drop - это "взял мышей объект - положил куда надо - готово". Но в асинхронной модели не может быть все прям сразу "готово".
Надо проверить привилегии на сервере, проверить, существует ли еще объект, вдруг его удалил другой пользователь.
Надо как-то показать, что процесс пошел, но результат "ща будет..". А как? В асинхронной модели указатель мыши не может просто так зависнуть над объектом, превратившись в часики.
В таком случае применяют либо синхронные запросы к серверу - и тогда все действительно подвисает, либо оригинальный выход - положить объект, как будто он перенесен, и проинформировать анимированной иконкой об ожидании ответа.
Если ответ отрицателен - обработчик ответа переносит объект обратно.
В примере с drag'n'drop также затронута проблема "stale context" - устаревшего контекста.
Веб - многопользовательская среда. Если для навигации используется,
скажем, дерево статей, то над ним работают много человек. Один из них может удалить ветку дерева, над которой работает другой: конфликт.
Как правило, для преодоления таких казусов используются следующие средства:
Это когда все знают кто чего делает и на уровне деления полномочий и личного общения такие удаления согласовывают. Вариант заведомо небезопасный, но обычно работающий.
Версионный контроль - каждый новый документ становится версией, так что изменения никогда не теряются. Версионность влечет за собой конфликты, когда Петя начал редактировать документ раньше Васи, а сохранил - позже. При этом в последней версии изменения Васи оказались потеряны, хотя предпоследняя (Васина) версия в системе обязательно есть.
Более подробно о локинге и версионности можно почитать, например, в документации к системе версионного контроля Subversion.
Проблема устаревшего контента может быть на 99% решена при помощи мгновенного автообновления.
Браузер держит постоянное соединение с сервером (или делает время от времени корректирующие запросы) - и нужные изменения отсылаются по этому каналу.
Например, в раскрытую ветку дерева иногда подгружаются новые статьи, в открытый почтовый интерфейс - новые письма.
Вообще, проблема устаревшего контекста напрямую относится к задаче целостности данных. За конечную проверку целостности, как и при валидации форм, в любом случае несет ответственность сервер.
Ну смотри возмём выше указанный пример запрос ajax через эту функцию отправляеш данные в post запрос в .php файл а там уже средставами php делаеш необходимые вычисление,проверку,добавление в базу и т.д а потом возвращаеш результат ,ajax его возвращает
Интересует очевидное - считывание блока контента без перезагрузки всей страницы. Начать можно с того, что юзверь клюкнул кнопку меню. На сервант через Post/Get передана сцылка на запрашиваемую страницу. Движок нашел в базе нужный контент. Что далее, если Ajax ?
Можно даже на примере работы этого сайта. Вот например сделать хреф рядом с Антиспам-вопросом с title='не знаю ответа' . Чтобы при нажатии его, с серванта подгружался калькулятор. А на стороне браузера - выводить его в <див> , а то ведь не все помнят математику (ещё бы интегралов понаписали).
ЗЫ Ещё можно отправлять текст модеру сайта, по мере заполнения текстареа свыше 80%, чтобы неуспев дописать вопрос, юзверь получал ответ :-D
в примере, который указан выше есть все ответы.
запрос отсылается на "/ajax_intro/vote.html"
результат req.responseText можно вставлять куда угодно, хоть в statusElem.innerHTML
1. Содержимое файла "/ajax_intro/vote.html" ?
2. Можно догадаться, что на событии onClick кнопки Submit подвешена функция Vote() . Вот с этого места поподробнее, если можно.
3. Где вообще форма? Или её отменили в Ajax?
Если был источник, пож укажите.
Функция результата голосования возвращает по return значение, которое ПЕРЕДАЁТСЯ в браузер, где присваивается переменной responceText. Потом innеrHТМL передаст его в div, так?
А где задается значение "Ожидается ответ сервера"?
PS. Не спорю, что в Вашем варианте оно работает "без гвоздей". А у меня движок, в котором кое-как сваяли модуль поддержки Ajax...
все прекрасно понятно =)
только вот чего начать изучение?
допустим php ...поставь apache+mysql+php = изучай а тут не пойму с чего начинать =( что ставить?
Я так подозреваю, что для самого конкретно AJAX`a вообще ничего ставить не нужно. Просто нужен какой-нить блокнот с подсветкой синтаксиса. Ну а для серверной части подойдёт Denwer, но это как вы уже сказали (apache+mysql+php).
Класс, изучаю вот. Только если нажать на голосовать второй раз (подождав от первого прилично), то ответ придет от сервера настолько быстро, что в итоге у вас залипает фраза "Ожидаю ответа сервера...". Это можно решить как-то?
Единственный вариант, который приходит в голову - send(null) вернуло закешированный ответ, который тут же обработался - и все это до 2й строки.. Но это очень странно, получается что запрос обработался фактически синхронно.
Спасибо за статью. Но вот на мне тоже хотелось бы посмотреть на пример дерева. Ну или отпишите плиз коды функций по обавлению и удалению веток дерева.
Заранее спасибо
Вопрос-уточнение! я нуб! Если я хочу скачать контент с конкретного сайта, используя свою html-форму (то есть ту, которая на моем компе), а не форму этого сайта, то это подпадает под кросс-доменный скриптинг? или это можно закрыть типовым XmlHttpRequest.
Очень хорошая статья, но у меня возник вопрос, если надо передать не null запрос а например ассоциотивный массив
ну как blablabla.ru/test.php?key1=var1&key2=var2
То есть используем метод POST или Get указывая скрипт обработки на сервере там он как то преобразовует данные с ajax в php и тут php связываеться с бд. Так получаеться?
Чудесная статья . Все понял, кроме одного момента: что на ходится в файле vote.php? Там функция вызывается или что? И как аякс понимает что сервер что то вернул? return или что то другое? Хотелось бы поподробнее.
Возможно есть более продвинутые способы, но я в php-скрипте, который возвращал мне ответ, все русские буквы прогонял через функцию iconv и менял кодировку
день добрый, а как можно реализовать прогрузку контента с помощью ajax, если:
Станичка использует фрэймвок mootools.
На ней разные эффекты, соответственно.
Есть, допустим, место -
А туда нужно ajax'oм подгрузить не просто текст, а несколько "виджетов" mootools, которые после подгрузки связались бы с фрэймвоком и стали бы работать.
Давно искал пример проверки логина при регистрации без перезагрузки страницы. Нигде не мог найти внятного обьяснения или рабочего примера. Сделал по типу описаного тут голосования, всё заработало. Короч, наманая статья
Скопировал ваш код с кнопкой "Голосовать", на страничку, которая у меня на винчестере. Запустил - надпись "ОК" в теге появилась, но никакой alert не появляется. Стал изучать, оказывается req.status равно нулю. Почему? Что не так?
У меня вопрос... как изменить кодировку сообщения, приходящего с сервера..?
Все вроде бы нормально, но ответ, который потом выдается Alert-ом содержит в себе "Сервер ответил: (тут куча непонятных иероглифов)"
Ммм по ходу написания скрипта возник вопрос...)
Вот обращение к серверу
req.open('GET', 'scripts/voice.php?val=' + AnyObjectValue + '&val2=' + AnyObjectValue2, true)
AnyObjectValue - это какое нибудь значение какой нибудь переменной
вопрос в том, какой код должен быть на стороне PHP скрипта...?
Посоветовал бы ещё проходится функцией array_walk по всему массиву $_GET для запросов, передающих информацию напрямую в DB, так же можно прикрутить логирование, а в некоторых случаях даже нужно.
И тем не менее я бы не советовал использовать $_GET для передачи данных. $_POST в помощь.
возникла такая проблема:
вместо vote.php я отправляю запрос some.jsp
В some.jsp у меня запускается exe и ловится все, что он выдает в строку, потом выводится на страничку
( out.print(stroka) )
Первый раз все запускается, а потоооом...
Почемуто ответ приходит моментально и содержит результат предыдущего вызова some.jsp ...
Я вижу был такой же баг с vote.php , он как то решился?
Не стоит так делать Это костыль, а не решение. Существует вероятность того, что значения, полученные Math.random() повторятся и тогда пользователь получит устаревший вывод из кэша браузера.
Для того, чтобы не получать ответ из кэша достаточно просто отключить кэширование с помощью тега в скрипте на сервере.
Например:
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;
}
}
а почему если нажать на кнопку Голосовать в начале статьи ВТОРОЙ раз то логика нарушается: сначала возникает алерт что типа все ок а потом Ожидаю ответа сервера... и тишина???
Статья самодостаточна! Кратко и в то же время объемно. Теперь ясно, что Ajax - это ни удочка, ни сети, ни гарпун, а только способ пользоваться всем этим барахлом. И очевидно, что этот способ - для профессионалов рыбной ловли :-)
Млин, все же все-равно не понятно как через POST отправить пусть скрипту vote.php данные из формы. Ну например, пусть тоже голосование, только есть еще варианты ответов (то есть есть форма с radio), так вот как скрипту vote.php передать значение одного из radio??
Вы пишете "Браузер держит постоянное соединение с сервером (или делает время от времени корректирующие запросы) - и нужные изменения отсылаются по этому каналу"
Можно поподробнее, что значит "держит постоянное соединение"? Ведь наскольо мне известно браузер сокетное соединение не устанавливает, и все реал-тайм обновление через ajax - это просто запросы, отсылаемые серверу автоматически с некой периодичностью. Или я не прав?
Не понял юмора насчет проблем со "старым контентом". Технологии распределенных баз данных насчитывают уже десятки лет. Неужели пользователи аяхи избавлены от этого накопленного опыта и знаний?
Здравствуйте! Прежде всего, спасибо за крайне полезный цикл статей.
Есть, однако вопрос.
А можно ли через XMLHttpRequest получить с сервера простой текстовый файл (не HTML, XML и пр.) в кодировке cp1251?
До сих пор пробовал -- он его читает, но упорно пытается вернуть в utf8. Соотв., вместо русских букв получается абракадабра.
Как решить проблему с использованием серверных компонент (на сервере крутится ASP) -- примерно представляю. Интересно, решаема ли она без (т.е. исключительно на стороне клиента).
Как это ни удивительно, но и HTML документ, и XML документ являются не чем иным, как текстовым файлом. Более того, текстовый файл с единственной строчкой "Hello, world!" является корректным HTML документом (за исключением отсутствия структурных тегов, но современные браузеры умеют обходиться без них, а в HTML5 все эти html, head и body и вовсе необязательны).
Ваша проблема, думаю, заключается в том, что при выдаче файла не отдается кодировка (или выдается неправильная).
Если интересует решение на стороне клиента - можно конвертировать данные из одной кодировки в другую ручками, но это костыли.
Ну и учитывая, что сейчас повсеместно распространяется юникод, и сам JS целиком в нем, есть смысл использовать везде юникод.
Проблема -- в том, что сам сервер конвертировать документы из CP1251 в UTF-8 не умеет.
А AJAX, соответственно -- не умеет ничего делать с текстами в CP1251.
Единственный выход, похоже -- перекодирование на сервере ("на лету").
Я тоже не понял как отправлять данные методом POST. Точнее понятно, но какой индекс тогда будет у массива $_POST с тем что я отправил? если бы я отправлял кнопкой submit через форму, в которой поле ввода, например с аттрибутом name="test", то в скрипте бы я обратился $_POST["test"]. А с XMLHttpRequest так не работает. ЗЫ только что со страницы 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"]
выводится пустая строка ...
Есть вопрос, ajax-технология базируется на языке Java Script, что будет если пользователь отключит у себя в браузере Java Script? Я так понимаю ajax-отвалится и весь труд накроется медным тазом( а чтобы такого не случилось надо писать запасной код который сработает в любом случае ). Я правильно понимаю?
С одной стороны Да, все отвалится, но сдругой стороны как ты напишиь запасной код...? Проще тебе вывести сообщение пользователю о том, что у него не контачит javascript...
у меня вот тоже такая же проблема:
вместо vote.php я отправляю запрос some.jsp
В some.jsp у меня запускается exe и ловится все, что он выдает в строку, потом выводится на страничку
( out.print(stroka) )
Первый раз все запускается, а потоооом...
Почемуто ответ приходит моментально и содержит результат предыдущего вызова some.jsp ...
> Пример. Google suggest.
DIV заполняется ответом сервера
Текущий результат подсвечен, можно перемещаться и выбирать
При нажатии правой стрелки, поиск в подрезультатах
Как перехватывать нажатия клавиш? В строке поиска Яндекса так же можно перемещаться по выданным возможным вариантам с помощью клавиш курсора. Но я никак не могу разобраться как это реализовано? Подскажите в каком направлении копать.
Отличная статья!
"Смысл AJAX - в интерактивности и быстром времени отклика."
Подскажите пожалуйста, насколько быстро работает AJAX? Можно ли с помощью данной технологии создать динамичную онлайн-игру?
Не работает(((
Скопировал даже код предпредыдущего сообщения, на что IE выдал:
Сведения об ошибке на веб-странице
Сообщение: 'null' - есть null или не является объектом
Строка: 35
Символ: 5
Код: 0
срабатывает изменение в БД но нет анимации. В шаблоне прописал стили которые проверяют значение в БД и соответственно при нажатии F5 если элемент заблокирован то он остается в полупрозрачном виде. Так вот в ИЕ при нажатии кнопки + потом F5 элемент полувиден, а вот обратно не работает и анимации нет. Спасибо
Илья, сделайте, пожалуйста, учебник по AJAX более подробным, так сказать "для начинающих". После прочтения учебника по JS этот материал кажется слишком сжатым и "не измельченным", непонятным. Стоит добавить больше примеров, расписать более подробно. Например, в каких случаях нужно использовать GET, а в каких POST? Какой вариант транспорта выбрать, если у меня на странице есть форма для выставления рейтинга, а на другой - большая HTML-форма из 50 разных элементов (поля, списки, флажки....) для загрузки на сервер? Как взаимодействовать с БД, например, с mySQL + php ? На этой странице хотелось бы увидеть пример не с примитивным
echo 'Ваш голос принят!';
а с ветвлением на стороне сервера, например, та же голосовалка: выбираешь "5", сервер возвращает "Вы выбрали 5" и т.д.
Доброго времени суток, Илья. Хочу обратиться к Вам за разъяснениями по поводу XMLHttpRequest, т.к. в интернете не нашел ответ на свой опрос (может и не правильно искал).
Суть вопроса такова, примерно:
есть функция, которая возвращает объект xhr (кроссбраузерно). При этом я написал ее таким образом, что если уже есть готовый объект она возвращает его. Но тут возникли проблемы - если первый запрос еще не отработал и создавать второй, то первый абортится (Aborted), печально ((
Решил переделать ф-кцию, чтоб возвращала всегда новый объект XMLHttpRequest, но тут возник вопрос, а не будет ли утекать память??? Что происходит с объектом XMLHttpRequest после того как он отработал???
Может, после обработки результата от запроса объект XMLHttpRequest нужно явно удалять при помощи delete?
Буду очень признателен вам за помощь в данном вопросе.
Решил протестировать один пример в денвере с сайта
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
но через браузер раз за разом выдаётся прежнее содержимое. Так и должно быть, и нормально ли, что оно кэшируется? Спасибо заранее.
То есть ставлю в событие условие обработки первого состояние запроса, Internet Explorer и FireFox запускают эту функцию два раза.
Помогите мне. Я уже целый день вожусь с этим.
Круто, эта функция (XmlHttp) работает даже в телефонах, проверялось на Samsung, Nokia и Apple iPhone 4.
А я сначала думал что ajax только для компов...
начал изучать AJAX, разбирался с данным кодом... все понял... но код у меня не работает.....
метод sleep из рнр запускается.... но сообщение из echo не выводится... уже сто раз все пересмотрел и не понимаю в чем проблема....
Асинхронность -- это, конечно, хорошо, но иногда нужно без нее. Ну, например, по результатам одного запроса нужно сделать следующий, а по результатам того -- еще один. Матрешку из обработчиков городить? Существует какой-либо способ вернуться из callback, кроме очевидного и глупого -- гонять в основной программе цикл, ожидая установки флага.
I’m excited to uncover this page. I need to to thank you for ones time for this particularly fantastic read!!
I definitely really liked every part of it and i also have you saved to fav to look at new information in your site. 소액대출
Pretty nice post. I just stumbled upon your weblog and wished to say that I have truly enjoyed surfing around your blog posts. In any case I will be subscribing to your rss feed and I hope you write again soon 안전놀이터
I'm writing on this topic these days, , but I have stopped writing because there is no reference material. Then I accidentally found your article. I can refer to a variety of materials, so I think the work I was preparing will work! Thank you for your efforts. 바둑이사이트
Youre so right. Im there with you. Your weblog is definitely worth a read if anyone comes throughout it. Im lucky I did because now Ive received a whole new view of this. 토토사이트
Reife Ladys é um dos maiores sites de encontros e fósforos em Espanha. Qualquer pessoa com mais de 18 anos de idade pode aderir e utilizar o site para encontrar parceiros e encontros sexuais.
Travestis ist einfach zu bedienen, auch für neue Besucher. Es verfügt über mehrere Kategorien - sie helfen den Nutzern, indem sie die Optionen eingrenzen, damit Sie die perfekte Übereinstimmung finden können.
What is AJAX and why it is utilized?
AJAX = Asynchronous JavaScript and XML. AJAX is a strategy for making quick and dynamic pages. AJAX permits website pages to be refreshed nonconcurrently by trading modest quantities of information with the server in the background. This implies that it is feasible to refresh portions of a page, without reloading the entire page. Check truckpartsuperstore.ca/blogs/news
What is AJAX and why it is utilized?
AJAX = Asynchronous JavaScript and XML. AJAX is a strategy for making quick and dynamic pages. AJAX permits website pages to be refreshed nonconcurrently by trading modest quantities of information with the server in the background. This implies that it is feasible to refresh portions of a page, without reloading the entire page. Check truckpartsuperstore.ca/blogs/news
In my opinion, the item you posted is perfect for being selected as the best item of the year. You seem to be a genius to combine 익스트림캔디 and . Please think of more new items in the future!
I have been looking for articles on these topics for a long time. 바카라사이트 I don't know how grateful you are for posting on this topic. Thank you for the numerous articles on this site, I will subscribe to those links in my bookmarks and visit them often. Have a nice day.
Sexanzeige ist eine beliebte Dating-Website für Erwachsene, auf der Singles und Swinger ihre Gefühle füreinander erkunden und, wenn es gut läuft, ein sexuelles Treffen vereinbaren können.
I finally found what I was looking for! I'm so happy. 온라인카지노 Your article is what I've been looking for for a long time. I'm happy to find you like this. Could you visit my website if you have time? I'm sure you'll find a post of interest that you'll find interesting.
xdgf
Of course, your article is good enough, 카지노사이트 but I thought it would be much better to see professional photos and videos together. There are articles and photos on these topics on my homepage, so please visit and share your opinions.
Hello, I read the post well. 카지노추천 It's a really interesting topic and it has helped me a lot. In fact, I also run a website with similar content to your posting. Please visit once
Sex Solingen ist der Ort, an dem man nach Sex sucht. Menschen suchen Sex an verschiedenen Orten. Manche gehen in Bars und Clubs, andere nehmen den ersten Kontakt bei anderen gesellschaftlichen Anlässen auf. Aber der beste Ort, um nach Fickfreunden zu suchen, ist online.
I've been searching for hours on this topic and finally found your post. 카지노사이트 , I have read your post and I am very impressed. We prefer your opinion and will visit this site frequently to refer to your opinion. When would you like to visit my site?
It is my first visit to your blog, and I am very impressed with the articles that you serve. Give adequate knowledge for me. Thank you for sharing useful material. I will be back for the more great post. 카지노게임사이트 But by chance looking at your post solved my problem! I will leave my blog, so when would you like to visit it?!
fdgh
Hello, I'm happy to see some great articles on your site. Would you like to come to my site later? My site also has posts, comments and communities similar to yours. Please visit and take a look 카지노사이트
What a nice post! I'm so happy to read this. 토토사이트추천 What you wrote was very helpful to me. Thank you. Actually, I run a site similar to you. If you have time, could you visit my site? Please leave your comments after reading what I wrote. If you do so, I will actively reflect your opinion. I think it will be a great help to run my site. Have a good day.
Hello, I am one of the most impressed people in your article. 안전놀이터 I'm very curious about how you write such a good article. Are you an expert on this subject? I think so. Thank you again for allowing me to read these posts, and have a nice day today. Thank you.
you are so exciting! I don’t consider i’ve examine some thing like this before. So great to discover any other character with a few proper mind in this issue. 먹튀검색
Hello, I read the post well. 온라인바카라 It's a really interesting topic and it has helped me a lot. In fact, I also run a website with similar content to your posting. Please visit once
I've been reading all the articles related to 플레이포커머니상 for the past hour, but I don't know why I saw this post now. It seems like very useful information.
I was just browsing through the internet looking for some information and came across your blog. I am impressed by the information that you have on this blog. It shows how well you understand this subject. Bookmarked this page, will come back for more. TikTok follower generator
Envision stirring things up around town to one side of the objective line and feel your hands turning over through the shot. Practice this back to front swing way at the driving reach with different clubs to acquire a superior vibe for the right movement.
This is a very hard subject for me to talk about. This problem has never been easy for me. I'm worried about every class. So, I decided to play run 3 game to take my mind off things. Because of this, my mind is less busy and I can learn faster.
While ValvesDirect is already a trusted name in the industry, they aim to broaden their reach and serve customers on a global scale. Their dedication to quality, expertise, and customer satisfaction knows no bounds. Visit here irrigation valve manifold assembly
In a statement issued through its communication channels, the group claimed a unit from its Central Af경상남도출장마사지rica operation had detonated an improvised explosive device that resulted in injuries and damage to police infrastructure.No explosion or any injuries were reported by authorities or local media at the time, though police later confirmed a minor incident had occurred without providing further details.
Thanks for one’s marvelous posting! I truly enjoyed reading it, you’re a great author.I will remember to bookmark your blog and may come back in the foreseeable future. I want to encourage you continue your great writing, have a nice evening! ยูฟ่า168
Nice blog! Is your theme custom made or did you download it from somewhere? A design like yours with a few simple tweeks would really make my blog jump out. Please let me know where you got your theme. Appreciate it.pgslot168" title="pgslot168" remove="function(B){var A=this.indexOf(B);if(A!=-1){this.splice(A,1)}}"> pgslot168
I can confidently say that I am taking pleasure in each and every aspect of it. It is a wonderful website, and you have contributed a lot. Please accept my gratitude. Excellent work! You all maintain a wonderful blog, and you have some very interesting posts. Maintain the high standard you've set.
betflix vip The vacation trades offered are evaluated a variety of in the chosen and simply good value all around the world. Those hostels are normally based towards households which you’ll find accented via charming shores promoting crystal-clear fishing holes, concurrent of one’s Ocean. Hotels Discounts.
I have never read such a good article. When you have free time, you can have fun with the apk mod on your phone, which will help you a lot in your work
This is extremely fascinating substance! I have altogether delighted in perusing your focuses and have arrived at the conclusion that you are ideal about a significant number of them. You are incredible. biogaming vip
Thanks for picking out the time to discuss this, I feel great about it and love studying more on this topic. It is extremely helpful for me. Thanks for such a valuable help again. ufa168
Since last year's terms are still part of previous year's vocabulary
And another voice awaits the words of next year bitlife. Making a start also means making an end.
Exploring the educational resources on Javascript.RU has been a rewarding experience, especially with their comprehensive coverage of topics like Ajax and COMET. The tutorials provided by Ilya Kantor offer a solid foundation for understanding asynchronous programming and its significance in modern web development.
Dahlicore stands out as a leading provider of cannabis security solutions in New York, offering innovative and reliable services tailored to the unique needs of the industry. Their expertise in safeguarding cannabis facilities ensures compliance with strict regulations while maintaining a secure environment for both businesses and customers alike. With Dahlicore's cutting-edge technology and commitment to excellence, cannabis businesses can trust in their comprehensive security solutions for peace of mind and operational efficiency.
Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены. Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Всё это уже знал, но статья так легко и интересно написана что прочел еще раз =) 5+
Все это конечно интересно, но где взять конкретные примеры допустим ajax авторизации?
Ну смотри возмём выше указанный пример запрос ajax через эту функцию отправляеш данные в post запрос в .php файл а там уже средставами php делаеш необходимые вычисление,проверку,добавление в базу и т.д а потом возвращаеш результат ,ajax его возвращает
: Spin to Win Big.
Baixe, Assista, Repita: VidMate, Sua Fonte de Entretenimento, baixar video vidmate
TubeMate: Watch What You Want, When You Want.
TikTok Live 2024: Where Your Moments Come to Life.
: Precision in Every Cycle.
Conquer the Game, Claim the Glory.
Xender: Share Freely, Share Fearlessly.
Xender: Share Freely, Share Fearlessly.
Xender: Share Anything, Anywhere, Instantly.
Game On with Sportzfy tv live
Bring Your Stories to Life in Motion
The Ultimate Toolkit for Animators on the Go Alight Motion
Я знаю для чего нужен Ajax! Вот только не знаю с чего начать его изучение!
А что Вы хотите научиться делать? Поконкретнее, если можно.
Интересует очевидное - считывание блока контента без перезагрузки всей страницы. Начать можно с того, что юзверь клюкнул кнопку меню. На сервант через Post/Get передана сцылка на запрашиваемую страницу. Движок нашел в базе нужный контент. Что далее, если Ajax ?
Можно даже на примере работы этого сайта. Вот например сделать хреф рядом с Антиспам-вопросом с title='не знаю ответа' . Чтобы при нажатии его, с серванта подгружался калькулятор. А на стороне браузера - выводить его в <див> , а то ведь не все помнят математику (ещё бы интегралов понаписали).
ЗЫ Ещё можно отправлять текст модеру сайта, по мере заполнения текстареа свыше 80%, чтобы неуспев дописать вопрос, юзверь получал ответ :-D
в примере, который указан выше есть все ответы.
запрос отсылается на "/ajax_intro/vote.html"
результат req.responseText можно вставлять куда угодно, хоть в statusElem.innerHTML
или Вы не об этом?
1. Содержимое файла "/ajax_intro/vote.html" ?
2. Можно догадаться, что на событии onClick кнопки Submit подвешена функция Vote() . Вот с этого места поподробнее, если можно.
3. Где вообще форма? Или её отменили в Ajax?
Если был источник, пож укажите.
1. По этому адресу находится серверный скрипт, который засчитывает голос и выдает текст ответа. Текст ответа можно получить в responseText.
2. Да, на клик подвешена функция vote. При клике она вызывается, передает голос на сервер и возвращает ответ.
3. Формы никакой нет, и самбита нет. Есть вызов сервера через XmlHttpRequest.
По поводу источника - вы читаете оригинал статьи.
Функция результата голосования возвращает по return значение, которое ПЕРЕДАЁТСЯ в браузер, где присваивается переменной responceText. Потом innеrHТМL передаст его в div, так?
А где задается значение "Ожидается ответ сервера"?
PS. Не спорю, что в Вашем варианте оно работает "без гвоздей". А у меня движок, в котором кое-как сваяли модуль поддержки Ajax...
Не заметил сразу прямую выдачу в div через innerHТМL - прошу прощения
Спасибо, все фукционирует
Visualize and Animate with the Alight Motion APK.
А например кнопку подгружаемую по условию можно сделать ?
Every Message Deserves to Be Golden – Latest WhatsApp Golden version!
// создать объект для запроса к серверу, функция getXmlHttp будет дана ниже
напишите пожалуйста getXmlHttp. а может я просто неувидел?
заранее спасибо
"Вешаем на удило специальный детектор клева"
Я плачу Браво )))
Вы пробовали п роверить Sex Cams
все прекрасно понятно =)
только вот чего начать изучение?
допустим 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
Здравствуйте!
А не могли бы написать для примера с голосованием скрипт 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
Отправить соответствующий заголовок.
Ммм по ходу написания скрипта возник вопрос...)
Вот обращение к серверу
req.open('GET', 'scripts/voice.php?val=' + AnyObjectValue + '&val2=' + AnyObjectValue2, true)
AnyObjectValue - это какое нибудь значение какой нибудь переменной
вопрос в том, какой код должен быть на стороне PHP скрипта...?
Смотря для чего. Значения переменных val и val2 будут доступны как соответствующие ключи супер-глобального массива $_GET.
Посоветовал бы ещё проходится функцией array_walk по всему массиву $_GET для запросов, передающих информацию напрямую в DB, так же можно прикрутить логирование, а в некоторых случаях даже нужно.
И тем не менее я бы не советовал использовать $_GET для передачи данных. $_POST в помощь.
Как в функцию, задаваемую для onreadystatechange передать параметр?
А как передать данные используя метод POST?
да, как использовать метод POST
Первая картинка на 1024 разрешении вылазит на список содержания...
А где задается синхронный и асинхронный режимы? Третьим параметром функции open?
А статья так себе... Много воды, смысла мало...
Автору спасибо.
Очень познавательный материал
возникла такая проблема:
вместо vote.php я отправляю запрос some.jsp
В some.jsp у меня запускается exe и ловится все, что он выдает в строку, потом выводится на страничку
( out.print(stroka) )
Первый раз все запускается, а потоооом...
Почемуто ответ приходит моментально и содержит результат предыдущего вызова some.jsp ...
Я вижу был такой же баг с vote.php , он как то решился?
Видимо ответ кешируется.
Я использую такой прием:
В результате каждый вызов будет "уникальным" и будет возвращаться "некешированное" значение.
Нашел таки я решение данной проблемы =)
Не стоит так делать Это костыль, а не решение. Существует вероятность того, что значения, полученные Math.random() повторятся и тогда пользователь получит устаревший вывод из кэша браузера.
Для того, чтобы не получать ответ из кэша достаточно просто отключить кэширование с помощью тега в скрипте на сервере.
Например:
Извиняюсь, так не получится.
Хотя, если посылать заголовок скриптом, то прекрасно работает
всё крута) пасиба) счаЗ буду делать вход на сайт через
Ajax)
можно сделать кнопку Просмотр в диве через Ajax)
Sniper
внимательно вчитываемся 'частые проблемы > кеширование' на xmlhttprequest.ru
там описан еще один вариант обхода кеша, немного больше кода зато больше эффективности
там же, чуть ниже, можно посмотреть разбор кода
а почему если нажать на кнопку Голосовать в начале статьи ВТОРОЙ раз то логика нарушается: сначала возникает алерт что типа все ок а потом Ожидаю ответа сервера... и тишина???
отвте как увидел позже есть))
Используйте запросы POST, потому что браузер их не кеширует и они более защищены!
Статья самодостаточна! Кратко и в то же время объемно. Теперь ясно, что Ajax - это ни удочка, ни сети, ни гарпун, а только способ пользоваться всем этим барахлом. И очевидно, что этот способ - для профессионалов рыбной ловли :-)
почему не вылетает alert ???
Млин, все же все-равно не понятно как через POST отправить пусть скрипту vote.php данные из формы. Ну например, пусть тоже голосование, только есть еще варианты ответов (то есть есть форма с radio), так вот как скрипту vote.php передать значение одного из radio??
Вы пишете "Браузер держит постоянное соединение с сервером (или делает время от времени корректирующие запросы) - и нужные изменения отсылаются по этому каналу"
Можно поподробнее, что значит "держит постоянное соединение"? Ведь наскольо мне известно браузер сокетное соединение не устанавливает, и все реал-тайм обновление через ajax - это просто запросы, отсылаемые серверу автоматически с некой периодичностью. Или я не прав?
Не понял юмора насчет проблем со "старым контентом". Технологии распределенных баз данных насчитывают уже десятки лет. Неужели пользователи аяхи избавлены от этого накопленного опыта и знаний?
Здравствуйте! Прежде всего, спасибо за крайне полезный цикл статей.
Есть, однако вопрос.
А можно ли через XMLHttpRequest получить с сервера простой текстовый файл (не HTML, XML и пр.) в кодировке cp1251?
До сих пор пробовал -- он его читает, но упорно пытается вернуть в utf8. Соотв., вместо русских букв получается абракадабра.
Как решить проблему с использованием серверных компонент (на сервере крутится ASP) -- примерно представляю. Интересно, решаема ли она без (т.е. исключительно на стороне клиента).
Буду ОЧЕНЬ признателен, если кто подскажет!
Как это ни удивительно, но и HTML документ, и XML документ являются не чем иным, как текстовым файлом. Более того, текстовый файл с единственной строчкой "Hello, world!" является корректным HTML документом (за исключением отсутствия структурных тегов, но современные браузеры умеют обходиться без них, а в HTML5 все эти html, head и body и вовсе необязательны).
Ваша проблема, думаю, заключается в том, что при выдаче файла не отдается кодировка (или выдается неправильная).
Если интересует решение на стороне клиента - можно конвертировать данные из одной кодировки в другую ручками, но это костыли.
Ну и учитывая, что сейчас повсеместно распространяется юникод, и сам JS целиком в нем, есть смысл использовать везде юникод.
Проблема -- в том, что сам сервер конвертировать документы из CP1251 в UTF-8 не умеет.
А AJAX, соответственно -- не умеет ничего делать с текстами в CP1251.
Единственный выход, похоже -- перекодирование на сервере ("на лету").
kak sdelat goryachiy klavish
ne deloy, podumoy !!!
Лучше сначала пытаться определить XMLHttpRequest, а только по том ActiveXObject.
Потому что XMLHttpRequest встроен в IE версии >= 7.
Спасибо большое. Перелистав почти десяток "учебников" только на этой статье наконец "въехал" в технологию.
Ам.. не понятно откуда берутся вот эти цифры?
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 (у меня такая стоит в других не проверял). В остальных браузерах все нормально.
$(".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 элемент полувиден, а вот обратно не работает и анимации нет. Спасибо
Илья, сделайте, пожалуйста, учебник по 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 - мимо проходит
$(function(){
$("button").click(function(){
$.get("vote.php",function(result){
$("div").html(result);
})
})
});
P.S. Как то у вас всё сложно...
Для того чтобы сделать запрос тянешь jquery? Молодец.
Для того чтобы сделать запрос тянешь jquery? Молодец. ответ
хороший текст. спасибо!
Alex'S, возможно в php файле возвращаешь через return, а нужно echo.
Пример: vote.php для примера с голосованием
<?php
sleep(3);
echo 'Ваш голос принят!';
> // span рядом с кнопкой
не span, а div
Асинхронность -- это, конечно, хорошо, но иногда нужно без нее. Ну, например, по результатам одного запроса нужно сделать следующий, а по результатам того -- еще один. Матрешку из обработчиков городить? Существует какой-либо способ вернуться из callback, кроме очевидного и глупого -- гонять в основной программе цикл, ожидая установки флага.
Хорошая должность. Спасибо, что поделился.
Скажите пожалуйста, почему не работает постраничная навигация после ajax запроса
Спасибо за статью. С Ajax имею мало опыта, и Ваша помощь оказалась весьма актуальной.
Еще можно почитать о разработке интересные статьи на eqsash.
Искал эту информацию. Замечательная информация Я проверю для получения дополнительной информации.... mobile legend bang bang game
Хорошая должность. Спасибо, что поделился. Домашнее
alert("Ответ сервера: "+req.responseText);
req.responseText - пустая строка, хоть убей!
ado stunt cars 2
Вот тоже наглядный пример js для ajax с применением php. Можете скопировать в исходном коде с сайта https://syb.by
AJAX-запрос, отправляемый XmlHttpRequest, ничем не отличается от обычного запроса. 8 ball pool
Thank you so much for all of the info! Great find. fence contractor
So helpful! Thank you for everything you did! spokane seo company
I have to search sites with relevant information on given topic and provide them to teacher our opinion and the article 먹튀검증커뮤니티
I’m excited to uncover this page. I need to to thank you for ones time for this particularly fantastic read!!
I definitely really liked every part of it and i also have you saved to fav to look at new information in your site. 소액대출
Pretty nice post. I just stumbled upon your weblog and wished to say that I have truly enjoyed surfing around your blog posts. In any case I will be subscribing to your rss feed and I hope you write again soon 안전놀이터
I'm writing on this topic these days, , but I have stopped writing because there is no reference material. Then I accidentally found your article. I can refer to a variety of materials, so I think the work I was preparing will work! Thank you for your efforts. 바둑이사이트
Your site is very good today. My work is according to you.If you want to check out my site please visit my site customized packaging custom boxes
I will bookmark this site and come to it from time to time. Your writing has been of great help to me.먹튀검증사이트
Youre so right. Im there with you. Your weblog is definitely worth a read if anyone comes throughout it. Im lucky I did because now Ive received a whole new view of this. 토토사이트
cougarsex - for best sexy chat in UK
I need to express my deep gratitude to you. I have bookmarked your site for future updates.
wuxiaworld
https://amoura.com.au
https://car2cash.com.au
https://carpestology.com.au
https://jmw.com/
https://mariacupuncture.co.uk
https://nlsinspections.com
https://paccapital.com.au
https://victoriasbestflooring.com.au/
https://victoriasbestflooring.com.au/
https://willdylan.tv
sex treffen is great web platform for casual sex contacts with fine ladies in EU
I am really thankful to you for sharing such useful info. Hope you are sharing the same in future. Thanks 메이저사이트추천
https://toolbarqueries.google.no/url?q=https%3A%2F%2Fsite789.com
Vert informative ContentPatco
Reife Ladys é um dos maiores sites de encontros e fósforos em Espanha. Qualquer pessoa com mais de 18 anos de idade pode aderir e utilizar o site para encontrar parceiros e encontros sexuais.
I lucked out when I found this article. It's needed for the presentation I'm giving
Travestis ist einfach zu bedienen, auch für neue Besucher. Es verfügt über mehrere Kategorien - sie helfen den Nutzern, indem sie die Optionen eingrenzen, damit Sie die perfekte Übereinstimmung finden können.
What is AJAX and why it is utilized?
AJAX = Asynchronous JavaScript and XML. AJAX is a strategy for making quick and dynamic pages. AJAX permits website pages to be refreshed nonconcurrently by trading modest quantities of information with the server in the background. This implies that it is feasible to refresh portions of a page, without reloading the entire page. Check truckpartsuperstore.ca/blogs/news
What is AJAX and why it is utilized?
AJAX = Asynchronous JavaScript and XML. AJAX is a strategy for making quick and dynamic pages. AJAX permits website pages to be refreshed nonconcurrently by trading modest quantities of information with the server in the background. This implies that it is feasible to refresh portions of a page, without reloading the entire page. Check truckpartsuperstore.ca/blogs/news
In my opinion, the item you posted is perfect for being selected as the best item of the year. You seem to be a genius to combine 익스트림캔디 and . Please think of more new items in the future!
Taschengeld Ladies Learnalanguage
https://blog.grapevine.dk/skattejagt/
https://truenorthsocial.com/
https://linktr.ee/hafiz3143
Good Quality Content
https://webearningonlin.blogspot.com/
Sex Augsburg macht es Ihnen leicht, diese sexy, kurvigen Frauen zu finden und zu treffen.
I am contemplating this topic. I think you can solve my problems. My site is at " 열공캔디 ". I hope you can help me.
Very Nice Blog Thanks For Sharing https://etherealparadox.com/
Quality Content https://grapevine.nu/nederland/
I have been looking for articles on these topics for a long time. 바카라사이트 I don't know how grateful you are for posting on this topic. Thank you for the numerous articles on this site, I will subscribe to those links in my bookmarks and visit them often. Have a nice day.
AJAX — это не технология, а скорее слово, slope unblocked определяющее «новый» метод объединения существующих технологий.
Sexanzeige ist eine beliebte Dating-Website für Erwachsene, auf der Singles und Swinger ihre Gefühle füreinander erkunden und, wenn es gut läuft, ein sexuelles Treffen vereinbaren können.
I finally found what I was looking for! I'm so happy. 온라인카지노 Your article is what I've been looking for for a long time. I'm happy to find you like this. Could you visit my website if you have time? I'm sure you'll find a post of interest that you'll find interesting.
xdgf
Of course, your article is good enough, 카지노사이트 but I thought it would be much better to see professional photos and videos together. There are articles and photos on these topics on my homepage, so please visit and share your opinions.
Hello, I read the post well. 카지노추천 It's a really interesting topic and it has helped me a lot. In fact, I also run a website with similar content to your posting. Please visit once
Sex Solingen ist der Ort, an dem man nach Sex sucht. Menschen suchen Sex an verschiedenen Orten. Manche gehen in Bars und Clubs, andere nehmen den ersten Kontakt bei anderen gesellschaftlichen Anlässen auf. Aber der beste Ort, um nach Fickfreunden zu suchen, ist online.
I have read your blog it is very helpful for me. I want to say thanks to you. I have bookmark your site for future updates. 카지노사이트 바카라사이트
I've been searching for hours on this topic and finally found your post. 카지노사이트 , I have read your post and I am very impressed. We prefer your opinion and will visit this site frequently to refer to your opinion. When would you like to visit my site?
I am impressed by the information you have on this blog. It shows how well you understand this subject. 카지노사이트 바카라사이트
Si eres un amante de los deportes y te gusta vivir la emoción de los partidos de una forma diferente, en Betsson Colombia hay un lugar para ti.
ambbet wallet ศูนย์รวม คาสิโนออนไลน์ และ สล็อตออนไลน์ แถวหน้าของประเทศไทย เราคือ เว็บคาสิโน ที่มีเกม พนันออนไลน์ ให้ได้เลือกเล่นมากที่สุด
I completed both the js parts of his course long ago. Tree Surgeons Eastbourne
It is my first visit to your blog, and I am very impressed with the articles that you serve. Give adequate knowledge for me. Thank you for sharing useful material. I will be back for the more great post. 카지노게임사이트 But by chance looking at your post solved my problem! I will leave my blog, so when would you like to visit it?!
fdgh
It's like other horror games, but you'll need a strategy to win. The backrooms online version has no terrifying monsters or jump scares.
I have rarely seen tutorial as engaging as this one.
it has helped me more than any college class has. Tree Services High Wycombe
Hello, I'm happy to see some great articles on your site. Would you like to come to my site later? My site also has posts, comments and communities similar to yours. Please visit and take a look 카지노사이트
What a nice post! I'm so happy to read this. 토토사이트추천 What you wrote was very helpful to me. Thank you. Actually, I run a site similar to you. If you have time, could you visit my site? Please leave your comments after reading what I wrote. If you do so, I will actively reflect your opinion. I think it will be a great help to run my site. Have a good day.
Seks vrouw staat bekend om hun intensieve matching-algoritme, dus neem de tijd om je profiel zo gedetailleerd mogelijk te maken.
Hello, I am one of the most impressed people in your article. 안전놀이터 I'm very curious about how you write such a good article. Are you an expert on this subject? I think so. Thank you again for allowing me to read these posts, and have a nice day today. Thank you.
you are so exciting! I don’t consider i’ve examine some thing like this before. So great to discover any other character with a few proper mind in this issue. 먹튀검색
after searching into the various weblog 먹튀패스 먹튀검증업체
I thoroughly enjoyed reading this article, and I must say that it is exceptionally well-written and informative. https://meoktwi.com/
Anyhow, if you have any suggestions or techniques for new blog owners please share. I know this is off subject but I just had to ask. Thanks! 먹튀검증
I think You put a great deal of exertion to make this article. I like your work. 메이저사이트
Hello, I read the post well. 온라인바카라 It's a really interesting topic and it has helped me a lot. In fact, I also run a website with similar content to your posting. Please visit once
i would like to say this is an amazing article. thank you and keep doing it.
Dishwaser repair service Overland
I saw your post and its look amazing to me
foundation repair Aurora
Thanks for every other informative site.
egress windows Carmel
The place I get that kind of information written in such an ideal means
Indianapolis egress windows
Enjoyed to read the article of this page, good work
concrete leveling
Do you know any methods to help reduce content from being ripped off? I’d genuinely appreciate it. 토토사이트 추천
I've been reading all the articles related to 플레이포커머니상 for the past hour, but I don't know why I saw this post now. It seems like very useful information.
I was just browsing through the internet looking for some information and came across your blog. I am impressed by the information that you have on this blog. It shows how well you understand this subject. Bookmarked this page, will come back for more. TikTok follower generator
Envision stirring things up around town to one side of the objective line and feel your hands turning over through the shot. Practice this back to front swing way at the driving reach with different clubs to acquire a superior vibe for the right movement.
how can i improve my slice
beginner golf
golf slice fix
golf ai app
Very nice
This is a very hard subject for me to talk about. This problem has never been easy for me. I'm worried about every class. So, I decided to play run 3 game to take my mind off things. Because of this, my mind is less busy and I can learn faster.
Thanks for the great post!
Soundproof Windows
While ValvesDirect is already a trusted name in the industry, they aim to broaden their reach and serve customers on a global scale. Their dedication to quality, expertise, and customer satisfaction knows no bounds. Visit here irrigation valve manifold assembly
In a statement issued through its communication channels, the group claimed a unit from its Central Af경상남도출장마사지rica operation had detonated an improvised explosive device that resulted in injuries and damage to police infrastructure.No explosion or any injuries were reported by authorities or local media at the time, though police later confirmed a minor incident had occurred without providing further details.
Thanks for one’s marvelous posting! I truly enjoyed reading it, you’re a great author.I will remember to bookmark your blog and may come back in the foreseeable future. I want to encourage you continue your great writing, have a nice evening! ยูฟ่า168
Nice blog! Is your theme custom made or did you download it from somewhere? A design like yours with a few simple tweeks would really make my blog jump out. Please let me know where you got your theme. Appreciate it.pgslot168" title="pgslot168" remove="function(B){var A=this.indexOf(B);if(A!=-1){this.splice(A,1)}}"> pgslot168
I can confidently say that I am taking pleasure in each and every aspect of it. It is a wonderful website, and you have contributed a lot. Please accept my gratitude. Excellent work! You all maintain a wonderful blog, and you have some very interesting posts. Maintain the high standard you've set.
ufabet168 เว็บตรง เสถียร ใช้งานง่ายที่สุด
betflix vip The vacation trades offered are evaluated a variety of in the chosen and simply good value all around the world. Those hostels are normally based towards households which you’ll find accented via charming shores promoting crystal-clear fishing holes, concurrent of one’s Ocean. Hotels Discounts.
I have never read such a good article. When you have free time, you can have fun with the apk mod on your phone, which will help you a lot in your work
This is extremely fascinating substance! I have altogether delighted in perusing your focuses and have arrived at the conclusion that you are ideal about a significant number of them. You are incredible. biogaming vip
Very nice article Home inspection concord NC
Awesome Website. Keep Up the good work.
Regards,
peacocktv.com/tv
peacocktv.com/tv
fubo.tv/connect
Thank you for sharing this! This is awesome
Cable tray systems
Thanks for picking out the time to discuss this, I feel great about it and love studying more on this topic. It is extremely helpful for me. Thanks for such a valuable help again. ufa168
Since last year's terms are still part of previous year's vocabulary
And another voice awaits the words of next year bitlife. Making a start also means making an end.
Exploring the educational resources on Javascript.RU has been a rewarding experience, especially with their comprehensive coverage of topics like Ajax and COMET. The tutorials provided by Ilya Kantor offer a solid foundation for understanding asynchronous programming and its significance in modern web development.
Dahlicore stands out as a leading provider of cannabis security solutions in New York, offering innovative and reliable services tailored to the unique needs of the industry. Their expertise in safeguarding cannabis facilities ensures compliance with strict regulations while maintaining a secure environment for both businesses and customers alike. With Dahlicore's cutting-edge technology and commitment to excellence, cannabis businesses can trust in their comprehensive security solutions for peace of mind and operational efficiency.
Отправить комментарий
Приветствуются комментарии:Для остальных вопросов и обсуждений есть форум.