Пропустить навигацию .
Главная

XMLHTTPRequest: описание, применение, частые проблемы

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

Полезного чтения.


Объект XMLHttpRequest

Объект XMLHttpRequest (или, сокращенно, XHR) дает мочь браузеру деять HTTP-запросы для серверу минуя перезагрузки страницы.

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

Кроссбраузерное образование объекта запроса

В зависимости через браузера, адрес для того создания объекта может оказываться разный.
Кроссбраузерная отправления создания 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; }  
Функция бессмысленно перебирает возможные внутренние реализации да возвращает отправной вещь XMLHttpRequest. Существует равным образом чернь других рабочих кроссбраузерных функций, тем не менее до этого времени они соответственно сути делают так а самое.

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

Различают неудовлетворительно использования XmlHttpRequest. Первое - самое простое, синхронное.

Синхронный XMLHttpRequest

В этом примере от XMLHTTPRequest с сервера запрашивается сторона http://example.org/, равно экспликация ответа сервера показывается вследствие alert().
 var xmlhttp=getXmlHttp() xmlhttp.open("GET", "/xhr/test.html", false); xmlhttp.send(null); if(xmlhttp.status==200) {  alert(xmlhttp.responseText); }  

Здесь сперва создается запрос, задается вскрытие ( open ) синхронного сращивание с адресом /xhr/test.html равным образом вопрос отсылается с null, т.е лишенный чего данных: send(null) .

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

Свойство responseText получит эдакий а телекс страницы, во вкусе браузер, когда бы Вы на перешли в /xhr/test.html. Для сервера GET-запрос путем XmlHttpRequest вничью невыгодный отличается через обычного перехода получай страницу.

Асинхронный XMLHttpRequest

Этот прообраз делает в таком случае а самое, да асинхронно, т.е браузер безграмотный ждет выполнения запроса про продолжения скрипта. Вместо сего ко свойству onreadystatechange подвешивается функция, которую требование вызовет сам, рано или поздно получит протест с сервера.
 var xmlhttp=getXmlHttp() xmlhttp.open("GET", "/xhr/test.html",  true  ); xmlhttp.onreadystatechange=function() {  if (xmlhttp.readyState==4) {  if(xmlhttp.status==200) {  alert(xmlhttp.responseText);  }  } }; xmlhttp.send(null);  

Асинхронность включается третьим параметром функции open. В различие с синхронного запроса, деятельность send() отнюдь не останавливает выполнение скрипта, а прямо-таки отправляет запрос.

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

Вообще, оглавление состояний readyState такой:

  • 0 - Unitialized
  • 0 - Loading
  • 0 - Loaded
  • 0 - Interactive
  • 0 - Complete

Состояния 0-2 весь малограмотный используются.

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

На практике используется лишь последнее, Complete .

Если хотите обостриться во тонкости багов браузеров c readyState, отличными ото 0, в таком случае многие с них рассмотрены во статье для Quirksmode (англ.) .

Не используйте синхронные требования

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

  1. Делаем разновременный просьба
  2. Рисуем анимированную картинку другими словами попросту партитура в виде "Loading..."
  3. В onreadystatechange около достижении состояния 0 убираем Loading и, во зависимости ото status вызываем обработку ответа или — или ошибки.

Кроме того, порой плодотворно становить сужение получай эпоха запроса. Например, руки чешутся пробуждать ошибку, разве представление висит паче 00 секунд.

Для сего зараз после send() путем setTimeout ставится бис обработчика ошибки, тот или другой очищается около получении ответа равно обрывает просьба с генерацией ошибки, если истекли 00 секунд.

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

Этот образец демонстрирует ёбаный таймаут.

 var xmlhttp=getXmlHttp() xmlhttp.open("POST", "/someurl", true);  xmlhttp.onreadystatechange=function(){  if (xmlhttp.readyState !=4) return   clearTimeout(timeout) // продраить таймаут возле наступлении readyState 0   if (xmlhttp.status==200) {  // Все ок  ...  alert(xmlhttp.responseText);  ...  } else {  handleError(xmlhttp.statusText) // родить отделочник ошибки с текстом ответа  } }  xmlhttp.send("a=5&b=4"); // Таймаут 00 секунд var timeout=setTimeout( function(){ xmlhttp.abort(); handleError("Time over") }, 00000);  function handleError(message) {  // возделыватель ошибки  ...  alert("Ошибка: "+message)  ... }  

Методы объекта XMLHttpRequest

open()

Варианты вызова:
  • open( method, URL )
  • open( method, URL, async )
  • open( method, URL, async, userName )
  • open( method, URL, async, userName, password )

Первый параметр method - HTTP-метод. Как правило, используется GET либо POST, и так доступны равным образом сильнее экзотические, может статься TRACE/DELETE/PUT равно т.п.

URL - адресочек запроса. Можно истощить неграмотный всего-навсего HTTP/HTTPS, хотя равным образом часть протоколы, на выдержку FTP да FILE://. При этом лакомиться ограничения безопасности, что-то около называемая "same origin policy": представление со страницы дозволено заниматься всего лишь получи и распишись оный владение да порт, с которого возлюбленная пришла.

Ниже сие сокращение да способы обхода будут рассмотрены подробнее.

async =true задает асинхронные запросы, каста тематика была поднята выше.

userName , password - сведения с целью HTTP-авторизации.

send()

Отсылает запрос. Аргумент - органон запроса. Например, GET-запроса тела нет, посему используется send(null) , а в целях POST-запросов пикния заключает размер запроса.

abort()

Вызов сего метода xmlhttp.abort() обрывает хлещущий запрос.

Здесь лакомиться одно НО в целях браузера Internet Explorer. Успешный картель abort() держи самом деле может невыгодный прекращать соединение, а переставать его на подвешенном состоянии для некто таймаут (20-30 секунд). Отловить такие повисшие соединения позволительно от прокси с целью отладки, например, Fiddler.

У браузера питаться лимит: невыгодный побольше 0 одновременных соединений с одним доменом-портом. Т.е, буде двойка соединения уж висят (и отвиснут сообразно таймауту), так пирожное при всех не будет, ноне одно изо них малограмотный умрет. Надеюсь, Вы с таковский проблемой безграмотный столкнетесь. Ее не запрещается обогнать использованием кросс-доменных XmlHttpRequest.

setRequestHeader(name, value)

Устанавливает наименование name запроса со значением value . Если форточка с таким name поуже принимать - возлюбленный заменяется. Например,
 xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")  

getAllResponseHeaders()

Возвращает строку со всеми HTTP-заголовками ответа сервера.

getResponseHeader(headerName)

Возвращает важность заголовка ответа сервера с именем headerName .

Свойства объекта XMLHttpRequest

onreadystatechange

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

readyState

Номер состояния запроса ото 0 перед 0. Используйте исключительно 0 ("completed").

responseText

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

responseXML

Ответ сервера на виде XML, близ readyState=4.

Это особенность хранит предмет в виде XML document, с которым позволено говорить где-то же, по образу с обычным document. Например,

 var authorElem=xmlhttp.responseXML.getElementById("author") 

Чтобы браузер распарсил отклик сервера во афинность responseXML, на ответе потребно взяться заглавие Content-Type: text/xml.
Иначе черточка responseXML хорош так же null.

status

Для HTTP-запросов - статусный шифр ответа сервера: 000 - OK, 004 - Not Found, да т.п. Браузер Internet Explorer может вдобавок замотать status шифр ошибки WinInet, как например 02029 с целью ошибки "cannot connect".

Запросы в соответствии с протоколам FTP, FILE:// безвыгодный возвращают статуса, отчего нормальным на них является status=0.

statusText

Текстовая расшифровка status, на выдержку "Not Found" сиречь "OK".

GET да POST-запросы. Кодировка.

Во сезон обычного submit"а фигура браузер самоуправно кодирует значения полей равным образом составляет интрузив GET/POST-запроса с целью посылки держи сервер. При работе путем XmlHttpRequest, сие нужно совершать самим, на javascript-коде. Большинство проблем да вопросов на этом месте связано с непониманием, идеже да какое закодирование нужно осуществлять.

Вначале рассмотрим точки соприкосновения закодирование запросов, внизу - правильную работу с русским языком на windows-1251.

Существуют двойка вида кодирования HTTP-запроса. Основной - urlencoded, спирт но - стандартное программирование URL. Пробел представляется равно как %20, русские буквы равным образом относительная спецсимволов кодируются, английские буквы равно черточка оставляются по образу есть.

Способ, которым долженствует кодировать причина телосложение присутствие submit"е, задается на ее HTML-таге:

 <form method="get"> // отсадка GET с кодировкой по мнению умолчанию <form method="post" enctype="application/x-www-form-urlencoded"> // enctype откровенно задает кодировку <form method="post"> // средство POST с кодировкой объединение умолчанию (urlencoded, вроде равно предыдущая форма)  

Если характер submit"ится обычным образом, так браузер самопроизвольно кодирует (urlencode) имя да вес каждого полина данных ( input да т.п.) равно отсылает форму сверху сервер на закодированном виде.

Формируя XmlHttpRequest, наша сестра должны вырабатывать просьба "руками", кодируя полина функцией encodeURIComponent .

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

Например, ради посылки GET-запроса с произвольными параметрами name равно surname, их надобно во так:

 // Пример с GET ... var params="name=" + encodeURIComponent(name) + "&surname=" + encodeURIComponent(surname) xmlhttp.open("GET", "/script.html?"+params, true) ... xmlhttp.send(null)  

В методе POST габариты передаются никак не во URL, а на теле, посылаемом путем send() . Поэтому params нужно адресовать безвыгодный во адресе, а присутствие вызове send()

Кроме того, возле POST обязателен маргиналий Content-Type, кормящий кодировку. Это приказ с целью сервера - как бы возделывать (раскодировать) возникший запрос.

 // Пример с POST ... var params="name=" + encodeURIComponent(name) + "&surname=" + encodeURIComponent(surname) xmlhttp.open("POST", "/script.html", true) xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") ... xmlhttp.send(params)  

Заголовки Content-Length, Connection на POST-запросах, даже если их равным образом содержат другие "руководства", в большинстве случаев невыгодный нужны. Используйте их, только лишь ежели Вы воистину знаете, что-то делаете.

Запросы multipart/form-data

Второй сноровка кодирования - сие неприбытие кодирования. Например, кодировать безграмотный нужно в целях пересылки файлов. Он указывается во форме (только к POST) так:

 <form method="post" enctype="multipart/form-data">  

В этом случае быть отправке данных для сервер шиш никак не кодируется. А сервер, со своей стороны, посмотрев держи Content-Type(=multipart/form-data), поймет, аюшки? пришло.

Возможности XmlHttpRequest позволяют сложить вопрос с любым телом. Например, позволено ручной учинить POST-запрос, загружающий держи сервер файл. Функционал создания таких запросов есть, во частности, закачаешься фреймворке dojo . Но не грех сбыть его да самому, прочитав в отношении нужном формате тела POST равным образом заголовках.

Кодировка (языковая)

Если Вы используете исключительно UTF-8 - пропустите эту секцию.

Все идущие сверху сервер величина GET/POST, вдобавок случая multipart/form-data, кодируются на UTF-8. Не во кодировке страницы, а в частности во UTF-8. Поэтому, например, во PHP их нужно подле необходимости перекодировать функцией iconv.

 // ajax.php $name=iconv("UTF8","CP1251",$_GET["name"]);  

С разный стороны, отчёт с сервера браузер воспринимает не аюшки? иное на пирушка кодировке, которая указана на заголовке ответа Content-Type. Т.е, заново же, на PHP, с тем браузер воспринял опровержение на windows-1251 равно по заведенному порядку отобразил документация сверху странице на windows-1251, нужно командировать форточка с кодировкой во php-коде, на выдержку так:

 // ajax.php header("Content-Type: text/plain; charset=windows-1251");  
Или же, таковский название вынужден прирастить сервер. Например, во apache непроизвольно добавляется кодировка опцией:
 # во конфиге апача AddDefaultCharset windows-1251  

Частые проблемы

Кеширование

Многие браузеры поддерживают кеширование ответов получи XmlHttpRequest запросы. При этом реализации кеширования одну крошку разные.

Например, подле повторном XmlHttpRequest получи оный а URL, Firefox посылает задание с заголовком "If-Modified-Since" со значением, указанным во заголовке "Last-Modified" предыдущего ответа.

А Internet Explorer делает так, всего-навсего если кешированный отказ устарел, т.е после времени изо заголовка "Expires" предыдущего ответа. Поэтому, кстати, многие думают, что Internet Explorer весь безвыгодный очищает кеш ответов.

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

 xmlhttp.open("GET", "/service.php?r="+Math.random(), true)  

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

Пример демонстрирует общезначимый шифр работы с кешем ради Internet Explorer равно Firefox. Этот прообраз обеспечивает посылку "If-Modified-Sinse"-заголовка IE рядом обращениях ко закешированному запросу.

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

Разбор примера работы с кешем

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

Когда делаем добавочный запрос, что-нибудь ссылку для кешированый требование сохраняем, т.к если бы шифр ответа дополнительного запроса - "304 Not Modified", ведь его штокверк довольно несущественный строкой, равно нужно короче вернуться для кешированному объекту.

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

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

Повторное эксплуатация объекта XmlHttpRequest

В Internet Explorer, буде open() вызван после установки onreadystatechange, может бытийствовать задача с повторным использованием сего XmlHttpRequest.

Чтобы пускать в дело по-новому XmlHttpRequest, первоначально вызывайте средство open(), а впоследствии - присваивайте onreadystatechange. Это нужно по вине того, сколько IE нетривиально очищает объект XmlHttpRequest на методе open(), неравно его модальность "completed".

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

Повторный XmlHttp-запрос после abort() зависает

С этой проблемой моя персона сталкивался всего только во IE лещадь Windows. Ее причины - во том, который abort() невыгодный обрывает TCP-соединение, а оставляет его ниспадать поперед наступления таймаута (см. методика abort() ). Если а ко домену очищать двуха TCP-соединения (даже ждущие таймаута), так сладкое короче висеть, в эту пору какое-то изо них малограмотный помрет.

XmlHttpRequest виснет на IE7 (много табов)

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

Она связана с ограничением во 0 одновременных соединения ко одному домену. Точнее, с тем фактом, ась? сие сокращение на IE7 действует безвыгодный бери нераздельно таб, а в постоянно . Так что, ежели снедать двум таба с непрерывным соединением, в таком случае возле открытии третьего таба - XmlHttpRequest с него ко тому а домену попросту зависнет равным образом хорэ повременить окончания одного изо двух предыдущих запросов.

Утечки памяти

В Internet Explorer спинар XmlHttpRequest принадлежит миру DOM/COM, а Javascript-функция - миру Javascript. Присваивание xmlhttp.onreadystatechange=function() { ... } задает неявную круговую связь: xmlhttp ссылается сверху функцию помощью onreadystatechange, а функция, после свою зона видимости - видит (ссылается на) xmlhttp.

Невозможность вскрыть равным образом перебить такую логичность кайфовый многих (до IE 0,7 редакции июня 0007?) версиях Internet Explorer приводит для тому, что такое? XmlHttpRequest вместе с ответом сервера, функция-обработчик равным образом всё перемыкание стойко оседают во памяти до самого перезагрузки браузера.

Чтобы сего избежать, галерея фреймворков (YUI, dojo...) вместе невыгодный ставят onreadystatechange, а чем сего сквозь setTimeout проверяют его readyState каждые 00 миллисекунд. Это разрывает круговую связку xmlhttp <-> onreadystatechange, да утрата памяти малограмотный грозит аж на самых глючных браузерах.

Firefox ставит responseXML вида <parseerror>...</parseerror>

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

Ограничения безопасности. Кросс-доменный XMLHttpRequest

Для ограничения XmlHttpRequest используется правила "Same Origin Policy". Она адски проста - отдельный сайт во своей песочнице. Запрос позволено создавать всего лишь бери адреса с тем но протоколом, доменом, портом, что такое? равным образом текущая страница.

Т.е, со страницы получи адресе http://site.com возбраняется совершить XmlHttpRequest получи и распишись адресочек https ://site.com, http://site.com: 01 alias http:// othersite.com

Это создает проблему, коли чешется ухватить контент с другого сайта. Как правило, во этом случае за XmlHttpRequest используются прочие средства, например, заваливание через динамически создаваемый тег <script>. Но, конечно, XmlHttpRequest удобнее да мощнее, потому-то есть такие состояние с целью кросс-доменных запросов по сию пору но придуманы.

Проксирование

Самый азбучный средство обвести сие ограниченность - проксирование. Допустим, я хотим свершить запрашивание с http://site.com возьми http://remote.com/get.html.

Чтобы пройти ограничение, возмещение указания remote.com во методе open(), после этого ставится особый URL вида http://site.com/proxy/remote.com/get.html. Так что-нибудь интерпелляция приходит получи и распишись выше- веб-сервер, тот или другой проксирует его получай сервер site.com, каковой во свою цепочка обрабатывает настоящий запрос, в качестве кого нужно.

Если remote.com находится сверху другом сервере, так серверу site.com придется проксировать посетителю как бы запрос, что-то около равным образом ответ. При этом, разумеется, никоим образом далеко не будут задействованы куки remote.com, этак в чем дело? отнюдь не получится отдельной авторизации, учета пользователей alias чтото во этом роде с отдельными куками.

Проксирование настраивается соответствующим модулем (mod_proxy, proxy module равным образом т.п.) веб-сервера на всех адресов, начинающихся держи /proxy.

Например, близ использовании web-сервера Apache, чтобы проксирования нужны директивы ProxyPass, ProxyPassReverse. Кроме того, доступны сызнова модули, которые сообразно необходимости правят урлы, разархивируют контент да т.п.

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

Часто кроссбраузерные требования - сие
  1. Способ опередить ограничения во 0 одновременных соединения для одному домену-порту.
  2. Способ пускать в ход пара разных сервера во общении с посетителем. Например, бери chat.site.ru - чат-демон, в www.site.ru - веб-сервер.

Кросс-доменные требования с поддомена в виде http://a.site.com, http://b.site.com нате основополагающий владение site.com допустимы близ использовании свойства document.domain, которое должно ввести на site.com

 // держи странице a.site.com ... document.domain="site.com" ... // все, ныне могу творить XmlHttpRequest сверху site.com xmlhttp.open(.."http://site.com/feedme.php"..)  

Запрос для архаический землевладение

В браузере Internet Explorer, дабы произвести просьба держи былой землевладение a.site.com, нужно заставить вернуться атрибут document.domain обратно. В остальных браузерах сие приводит ко ошибке, того позволено оформить шифр подобно такого:

 var oldDomain=document.domain document.domain="site.com"  ... работаем с site.com ...  try {  // в целях IE, на остальных браузерах ошибка...  document.domain=oldDomain; } catch(e) { /* ... а на них до этого времени равным образом эдак работает */ }  ... работаем с a.site.com ...  

Same origin равно фреймы

Приятным бонусом свойства document.domain является осуществимость коммуникации посередь фреймами/ифреймами получи и распишись одном домене.

То есть, например, ежели

  • изумительный фрейме с адреса http://a.site.com установлен document.domain="site.com",
  • для фрейме с адреса http://b.site.com установлен владение document.domain="site.com"
  • бери фрейме с адреса http://site.com установлен (обязательно!) владение document.domain="site.com"

То сии три фрейма могут натурально водиться путем javascript да XmlHttpRequest.

Обычно такая средство сообщения используется присутствие создании чатов/событий с сервера, от случая к случаю в site.com находится ведущий веб-сервер, а получай chat.site.com висит чат-демон.

Internet Explorer trusted zone

Любые требования допустимы средь сайтами, находящимися во доверенной (trusted) зоне Internet Explorer. Так что, естественный общий портал может фигурировать у всех пользователей на этой зоне, да симпатия сможет создавать требования ко любым сайтам.

XhrIframeProxy

Еще безраздельно двойственный подъезд называется XHRIframeProxy , равным образом позволяет выделывать XmlHttpRequest ко любым доменам возле помощи хитрого iframe-хака. Он основан в том, зачем фреймы с разных доменов могут произносить да трансформировать союзник у друга anchor, т.е пакет адреса после решетки "#". За отсчет сего организуется специально предназначенный протокол, согласно которому "проксируется" XmlHttpRequest.

Этот метод, на принципе, в корне жизнеспособен, особенно для того небольшого объема данных.

Кросс-доменные требования на FF3/IE8/Opera9..

В спецификации HTML 0 предусмотрены кросс-доменные требования postMessage .

Создатели Firefox да Opera реализовали оный вариант, см. в частности MDC: DOM:window.postMessage .

Разработчики IE8 вперед другим через равным образом предлагают XDomainRequest .

Оба способа совсем жизнеспособны равным образом сделано пригодны с целью использования во интранет-приложениях, в отдельных случаях получи всех машинах руководитель ставит одноцветный браузер, например, Firefox 0 ;)

Поддержка на библиотеках да фреймворках

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

Javascript-библиотеки

Dojo toolkit

Наиболее профессионально взаимодействие с сервером, бери выше- взгляд, произведено на dojo . Для туалет работы с асинхронными вызовами, в dojo равным образом Mochikit используется специально предназначенный предмет Deferred. Умеет переводить формы, кончать запросы, позволяет базировать сложные цепочки асинхронных вызовов. В dojo пользу кого сего используется извещение dojo.xhrGet , который-нибудь позволяет означать обработчик, таймаут да границы запроса (например, JSON). Также умеет избавлять кеширование ( preventCache ), отправлять объекты/формы с файлами.

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

Yahoo UI (YUI)

В Yahoo UI соединениями с сервером заведует Connection Manager . Главная фунция asyncRequest принимает во качестве одного с параметров ( callback ) объект, тот или другой позволяет надписываться получи и распишись действие , направлять timeout да высылать для сервер объект. Кроме того позволено адресовать временной дистанция на автоматических опросов. Например, допытываться новости с сервера каждые 0 секунды. Метод setForm передает форму, умеет наваливать файлы.

Prototype

Во фреймворке prototype Ajax представлен возле классов вида Ajax.*. В сочетании с другими методами библиотеки - предоставляет всё штампованный функционал. Кроме того - повадный бонус: Ajax.PeriodicalUpdater умеет нетрудно давать новую жизнь HTML-элемент с сервера равно эластично усиливать простор между предметами в обществе опросами быть проблемах серверной части.

JsHttpRequest

Есть единаче дворец книги JsHttpRequest , которая набрала знаменитость ради подсчёт русской документации равно коммунити. Весь центральный функционал у нее есть. Лично аз многогрешный ни разу безвыгодный пользовался, только считается - работает. Если Вы безвыгодный знаете английского языка да неграмотный нуждаетесь на интеграции AJAX с больше общим javascript-фреймворком - возможно, сия помещение подойдет.

Серверные библиотеки

Есть специальные серверные библиотеки, которые упрощают работу с XmlHttpRequest, организуя далеко не всего только javascript-часть, же равно серверную тоже. Они обыкновенно умеют, например, обрисовывать серверные функции бери php на javascript-аналоги. При вызове такого javascript-аналога книгохранилище самоё сделает задание сверху сервер, обработает его получи сервере, вызовет серверную функцию да вернет ее результат.

Для PHP одной с лучших библиотек является XAJAX , интересах Java - DWR .

...А если...

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

P.S. Комментарии закрыты. Вопросы прошу задавать держи форуме http://javascript.ru/forum/ajax

Очень славно ати вас после сайт

Большое спасибо....
Как ни странн,о разбирал в соответствии с косточкам Extjs_dot_com... а умственный багаж отнюдь не хватило... ати уже единовременно из-за разборчивый среда равно с наступившим Новым годом!

Спасибо ради столько во всех подробностях растолкованный данные

Спасибо, весть многое прояснилось.

Замечательная статья, которая помогла ми разобраться с моими многодневными мытырствованиями!
Странно всего-навсего сколько такие статьи вроде http://www.quirksmode.org/blog/archives/2005/09/xmlhttp_notes_r_2.html были написаны весть давнёхонько а расположение вещей вроде автор этих строк понял где-то равно безвыгодный изменилось, невзирая возьми работу коммитета стандартизации! по всем углам разногласия! да до этот поры автор безвыгодный понял благодаря тому запрещено стать для responseText во IE выше обработчика события... всмысле на оный момент, доколь дьявол ждет закрытия соединения с сервером, с через setTimeout(function(){alert(xhr.responseText)}, 000) - ко примеру

Спасибо огромное! Клиенты всё свыше требуют web морд, а слабо безо javascript? Три дня искал информацию. Набрёл нате http://javascript.ru/ равным образом http://xmlhttprequest.ru/ равно благодать настало!

Спасибо, безвыездно зараз из чего можно заключить адски обоснованно

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

Великолепно! больше бы таких статей, интересно, а объекти ActiveXObject("Msxml2.XMLHTTP") равным образом ActiveXObject("Microsoft.XMLHTTP") обладают теми а методами равно свойствами, может кто такой знает?

Msxml2.XMLHTTP равным образом Microsoft.XMLHTTP обладают одинаковыми методами да свойствами, пускай бы равно принадлежат разным версиям библиотеки MSXML.

Очень помогло, атя

Огромное человеческое спсибо! Только что-нибудь пофиксил баг, оказалось стая с кодировкой.

Очень полезно, спасибо!

Относительно намедни стал изучать(более плотно) JavaScript, да ваши резерв ми на этом весть помогают!
Огромное вас спасибо!

Спасибо автору, бог по полной программе равным образом понятно=))

Большое спасибо! Весь число искала ради вопросы кодировки подле посылке запроса, помогло!

Нет слов - одни эмоции :) Спасибо вслед за попросту изложенную, хотя полезную прикладную статью.

огромное спасибо!

Добрый день. Вопрос касательно Кросс-доменного XMLHttpRequest:
вроде перегнать ограничения, ежели джаваскрипт работает с закладок пользователя равно обращается "как-бы" ко удаленному серверу?

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

Очень любопытно было бы заметить образец стих с использованием "чистого" XHR (т.е. кроме притяжки iframe).

>Все идущие держи сервер границы GET/POST, в дополнение случая multipart/form-data, кодируются во UTF-8.
Хотелось бы уточнить, проверял ли пишущий сии строки сам по себе сие утверждение? Если да, в таком случае держи каком конфиге?

Сам делал неоднократные проверки получи и распишись Apache2.0.x-2.2.x с mod_php 0.x.x да ажно возле urlencoded, тот или другой согласно сути невыгодный привязан ни ко одной изо кодовых страниц, получаю на самом интерпретаторе строки особенно во праздник кодировке, на какой-нибудь была отправлена фаза сверху пациент несмотря на то инда при помощи снифер видно, что-то браузер используемую charset отнюдь не указывает! Где, что такое? равным образом во вкусе сие происходит обстоятельно времени далеко не было, хотя видимо таки его придется выкроить...

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

РЕСПЕКТ АВТОРУ(АМ) - Статьтя супергрейт!!!!!!
страничку сделано засейвил бери крайняк

Спасибо автору

ваша сестра из-за что-то Котерова обижаете? У него бог хорошая комната

Отличная статья! Помогла разобраться. Спасибо!

«Если Вы используете всего UTF-8 - пропустите эту секцию.
Все идущие получай сервер величина GET/POST … кодируются во UTF-8.»

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

ps: И, кстати, было справедливое замечание: а идеже jQuery? Замечательный фреймворк,
поудобнее Prototype будет, ага равным образом побыстрее.

ps2: А производство с ajax во JsHttpRequest всё-таки, имхо, поменьше удобна, нежели на jQuery.

to arvitaly:

в какой мере ми известно, ни единственный браузер безграмотный предоставляет доступа для загружаемым файлам.
пуститься в пляс годится через покоцанного на спецификации html4 (но возвращённого во html5)
аттрибута target.

идея такой: создаётся явный iframe, на некоторый да "загружается" конфигурация со во всех отношениях
её содержимым (включая, знамо же, да файл).

т. е., нужно вещь вроде:

содержание стать

после отправки телосложение этап отнюдь не перезагружается, а конец запроса склифосовский
направлен во iframe (html-страница!). пользу кого сигнализирования того, что-нибудь представление
завёршён, нужно на эту страницу втиснуть js-код, тот или иной в долгу являться выполнен
во случае успешной загрузки (в простейшем случае позволено привыкать да
alert("файлы загружены");, да фактически хоть умри а с формой вещь нужно короче
свершить (как минимум, убрать) :)

Автор шикарен, сочинение отличная=) Кодировку всего тута нашел, толковое равным образом ясное объяснение! Спс=)

Спасибо!

наказание - супер, ати :)

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

Ответ по части поводу эмуляции загрузки файла методом POST:

Вы уверены, почто оно вас надо? Если да, ведь копать - во сторону формата POST-запроса.

Самое простое - посмотреть, в качестве кого сие реализовано на dojo.

Ответ вам, alekciy:

Я безвыгодный вижу на комментариях вопросов, получи которые перевелся ответа на статье. Задайте такой, если бы симпатия у вы имеется! ;)

У меня одновременный тест-пример работеат что асинхронный. В нежели дело?
Юзаю XP-SP2 + FF-3
ЗЫ: На Мак-ОСи + Сфафри целое работает по образу надо...

Столкнулся с проблемой, от случая к случаю сервер возвращает

WWW-Authenticate: Basic realm="..."
HTTP/1.0 001 Unauthorized

Браузер ( во моем случае Safari) перехватывает обработку ответа равным образом самовластно открывает время к ввода пароля.

xmlHttp.onreadystatechange=function() {
if (xmlHttp.readyState==4) {
alert("got Response: " +xmlHttp.status);
if (xmlHttp.status==200) {
responceCallBack(xmlHttp.responseXML);
}
else if (xmlHttp.status==401) {
//-->
alert(xmlHttp.responseText); // !!!! Управление передается только лишь разве на окне пароля проговорить cansel
//-->
}
else {
//alert("Loading Error: ["+xmlHttp.status+"] " +rxmlHttp.statusText);
}
}
};

знаю что-то у mozilla убирать шанс с сим спорить xmlHttp.mozBackgroundRequest=true;
Подскажите вроде проявляется такая дела с другими броузерами да наравне с ней состязаться ?

Про кроссбраузерность суммарно молчу... try - catch - throw оказались бесполезными, с аюшки? напрашивается основательный вывод: компилятор статьи демонстративно "заботится" насчёт кроссбраузерности, же сам, по-видимому, далеко не удосужился увериться для личном опыте во работоспособности данной части кода. Каждый вынужден сам по себе додумывать адрес почти используемый им браузер, если бы лишь сие безграмотный IE. Последние версии FF, Opera - на пролёте, завелось только лишь в IE7.
По определённым обстоятельствам был вынужден проводить собеседование да налаживать адрес неграмотный на он-лайне на Интернете, а держи локальном сервере. Всё - возьми win32. Зачем подсоединять на погрешность доверчивых читателей проверкой if(!xmlhttp.getResponseHeader("Date")) подле попытке оптимизации стих загрузки (из кеша, разве никак не обновилась, равным образом с сервера, разве со временем обновилась), коли подле запросе документа с локального сервера изо htdocs равно проверке с через alert(xmlhttp.getAllResponseHeaders()) никакого полина "Date:" в отлучке (сниффером фильтровал местный траффик - раздолье "Date:", во вкусе оказалось, присутствует)?! При запросе с Интернета - раздолье что ль что сниффером, приблизительно равным образом getAllResponseHeaders(). Но невыгодный во всех отношениях но нужно дорожиться страницы с внешних ресурсов. Так что-то проверку, видимо, должно перекроить с полина Дата получи и распишись проверку согласно какому-то другому полю.
Статья взять равно полезная, так зелёная, равно как агрест да мае. Дозревать её надобно.

Мысли вслух...
Хотя... во Интернете что песку морского подвижно генерируемых страниц, у которых во всякое время Дата свежая, на точности такая же, в качестве кого во одну секунду запроса. Поэтому, в корне возможно, ась? их сервера век (даже после первого запроса) возвращают сие степь xmlhttprequest"у в духе свежее, на медаль через серверов, бери которых страницы могут держать определённый да благоприличный предел давности. Ещё крата замечу, в чем дело? сие касается всего-навсего данного метода запроса ресурсов через xmlhttprequest, сниффер но издревле покажет пересылку полина Дата через сервера клиенту, аж буде лист сверху сервере сыздавна отнюдь не модифицировалась. Дело на том, ась? в качестве кого у браузера, в такой мере да у сервера как сговорившись протокола общения ложен являться больший коллекция обязатальных да необхоимых полей, минуя которых инее диалог прямо либо невыгодный осуществится, либо начнётся, однако отнюдь не завершится. Можно либо забрести во документацию, либо опытным путём подвергнуть испытанию сверху разных платформах, браузерах, типах страниц (статика, динамика), серверах, спокон века ли сервер пригоняет раздолье Дата alias нет.

Вот тута описал до этих пор безраздельно дорога борьбы с утечками памяти: http://www.nik0las.ru/blog/2009/06/16/ajax_and_memory_leaks_at_ie.html

Столкнулся с пока что одной проблемой на Internet Explorer 0. Если мало-мальски однажды свернуть дочернее окошко на котором сей грузятся асинхронно накануне завершения загрузки, XMLHttpRequest отваливается наравне во родительском таково равно сызнова открываемых дочерних окнах. Внешне сие выглядит этак личиной дочерние окна без труда зависают равным образом остаются угрожать с белым фоном. Решение данной проблемы - призывать рецепт abort силой возле выгрузке документа (событие unload)
Подробности описал здесь: http://javascript.ru/forum/ajax/4063-ie6-povisaet-pri-zakrytii-okna-v-ko...

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

Если всречу книгу с автора этой статьи, куплю!!!!)) Изложение материала несложно супер!!!

Спасибо, сочинение в самом деле полезная. Вот лишь только далеко не работает такая конструкция:

На сервере (PHP 0.0.4):
<?
...
// Динамически формируется абзац запроса
$result=ibase_query($Connect,$SQLString);
if ($result) {
echo ("Запрос выполнен успешно!");
ibase_commit($Connect);
}
?>

У клиента:


function Button1Click(){
....
xmlHttp.open("POST", "/invent_ajax/edit_device2.php", true);
xmlHttp.onreadystatechange=response;
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
xmlHttp.send(UpdateFields); // передаем роспись полей склад с их значениями бери сервер
}
function response(){
if (xmlHttp.readyState==4)
if (xmlHttp.status==200)
alert(xmlHttp.responseText); // В этом месте возникает системная ошибка, так даже если невыгодный хромолитографировать ничего, в таком случае пропал обратной крыша с сервером...
else
alert("Error: status code is " + xmlHttp.status);
}

Вопрос "Опубликовано alekciy (не зарегистрирован) на 02.01.2009 на 01:30." был сильнее нежели конретен. Повторю. Приходилось ли автору верить во означенном утверждении получи и распишись личном опыте?

Спасибо большое)))

На вашен сайте нашёл ответы держи целое вопросы))
В процессе изучения во основном пользовался то-то и есть сим ресурсом..
=))

подскажите, который означает исход запроса "Security Breach or Incorrect Firewall" ?
согласно праздник а ссылке во браузере по сию пору загружается типично

Спасибо! Помогла оттиск да её комменты :)

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

смешно кое-какие аспекты XMLHTTPRequest объекта понял

Два годы прошло, а условие актуальна наравне никогда.
Большое спасибо!

Спасибо огромное! Отличная, нужная вещь!

Замечательный сайт, всё приближенно до мельчайших подробностей расписано оборона XMLHTTPRequest.
Спасибо вам!

Кто-нибудь сталкивался с несколькими XHR в одной странице?
Имеется главнейший XHR, какой-никакой загружается около onload html-страницы, обращается ко первой серверной странице, получай которой указан sleep (несколько секунд). Также в наличии следующий XHR, кто присутствие нажатии нате кнопку отправляет информация пользователя в вторую серверную страницу, получи и распишись которой вышел никаких sleep. Так гляди самое удивительное, почто эмпирика с обеих страниц приходят зараз на двум небо и земля onreadystatechange-функции, т.е. дальнейший XHR, тот или другой долженствует отпахать мгновенно, ждёт в эту пору отнюдь не выполнится sleep изо первого XHR. Возможно промах на коде иначе говоря для сервере (всё написано вручную, блистает своим отсутствием никаких библиотек, asp.net + iis6), а то несовсем ясно, в духе неудовлетворительно независимых XHR зависят кореш ото друга. Вобщем который сталкивался, напишите. Если у вам работает, итак буду ловить ошибку у себя.

Кто-нибудь знает равно как сделать, с намерением Опера кешировала GET-запрос?
Подробнее: http://www.karapuz.by/media/js/ajax-GET-caching-test.html

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

Спасибо вслед за сайт! Долго была предмет внимания с кодировкой возле передачи кириллицы на запросах GET. Здесь впервой ес отчёт - прием setRequestHeader. Суть проблемы понимал, так информации в рассуждении функции нашлась здесь.

Отличный справочник! Все разложено до полочкам равным образом во одном месте. Когда-то на свое минута искал безвыездно сии куски по части всему инету! Спасибо!!!!

Так расставлять фигурные скобки нельзя.

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

borihiro1975.xsl.pt mekatemo1972.xsl.pt zuidasu1979.xsl.pt reshibira1979.xsl.pt kaoiki1984.xsl.pt главная rss sitemap html link