mozilla

Revision 273298 of С чего начать

  • URL ревизии: AJAX/С_чего_начать
  • Заголовок ревизии: С чего начать
  • ID ревизии: 273298
  • Создано:
  • Автор: Megapotz
  • Это текущая версия? Нет
  • комментировать

Содержание версии

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

Что такое AJAX?

Ajax означает Асинхронный JavaScript и XML. В основе технологии лежит использование нестандартного объекта XMLHttpRequest(), необходимого для взаимодействия со скриптами на стороне сервера. Объект может как отправлять, так и получать информацию в различных форматах включая XML, HTML и даже текстовые файлы. Самое привлекательное в Ajax - это его асинхронный принцип работы. С помощью этой технологии можно осуществлять взаимодействие с сервером без необходимости перезагрузки страницы. Это позволяет обновлять содержимое страницы частично, в зависимости от действий пользователя

Две особенности, которые мы рассмотрим:

  • Отправление запросов серверу без перезагрузки страницы
  • Работа с XML документами

Шаг 1 - скажите "Пожалуйста!" или как послать HTTP запрос

Для того, чтобы послать HTTP запрос на сервер используя JavaScript, вам необходим экземпляр класса, который позволит это сделать. Такой класс впервые был введен в Internet Explorer как объект ActiveX, называемый XMLHTTP. Позже в Mozilla, Safari и других броузерах был введен класс XMLHttpRequest, который поддерживал методы и свойства изначального объекта ActiveX от Microsoft.

В результате, чтобы создать кросс-броузерный объект требуемого класса, вы можете сделать:

if (window.XMLHttpRequest) { // Mozilla, Safari, ...
    http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
    http_request = new ActiveXObject("Microsoft.XMLHTTP");
}

(В целях наглядности код выше является немного упрощенным вариантом кода, который нужно использовать для создания объекта XMLHTTP. Более жизненный пример будет рассмотрен в шаге 3 этой статьи)

Некоторые версии некоторых броузеров Mozilla не будут корректно работать, если ответ сервера не содержит заголовка XML mime-type. Чтобы решить эту проблему вы можете использовать вызовы дополнительных методов для переопределения заголовка полученного от сервера, если он отличен от text/xml.

http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');

Далее вам необходимо решить что вы будете делать после получения ответа от сервера. На этом этапе вам необходимо указать объекту какая JavaScript функция будет обрабатывать ответ. Это делается путем присваивания свойству onreadystatechange имени JavaScript функции, которую вы собираетесь использовать:

http_request.onreadystatechange = nameOfTheFunction;

{{ wiki.languages( { "ca": "ca/AJAX/Primers_passos", "de": "de/AJAX/Getting_Started", "en": "en/AJAX/Getting_Started", "es": "es/AJAX/Primeros_Pasos", "fr": "fr/AJAX/Premiers_pas", "it": "it/AJAX/Iniziare", "ja": "ja/AJAX/Getting_Started", "ko": "ko/AJAX/Getting_Started", "pl": "pl/AJAX/Na_pocz\u0105tek", "pt": "pt/AJAX/Como_come\u00e7ar", "zh-cn": "cn/AJAX/\u5f00\u59cb" } ) }}

Источник ревизии

<p>
</p><p>В этой статье рассмотрены основные принципы работы AJAX и даны два простых примера, использующих эту технологию.
</p>
<h3 name=".D0.A7.D1.82.D0.BE_.D1.82.D0.B0.D0.BA.D0.BE.D0.B5_AJAX.3F"> Что такое AJAX? </h3>
<p>Ajax означает Асинхронный JavaScript и XML. В основе технологии лежит использование нестандартного объекта XMLHttpRequest(), необходимого для взаимодействия со скриптами на стороне сервера. Объект может как отправлять, так и получать информацию в различных форматах включая XML, HTML и даже текстовые файлы. Самое привлекательное в Ajax - это его асинхронный принцип работы. С помощью этой технологии можно осуществлять взаимодействие с сервером без необходимости перезагрузки страницы. Это позволяет обновлять содержимое страницы частично, в зависимости от действий пользователя
</p><p>Две особенности, которые мы рассмотрим:
</p>
<ul><li> Отправление запросов серверу без перезагрузки страницы
</li><li> Работа с XML документами
</li></ul>
<h3 name=".D0.A8.D0.B0.D0.B3_1_-_.D1.81.D0.BA.D0.B0.D0.B6.D0.B8.D1.82.D0.B5_.22.D0.9F.D0.BE.D0.B6.D0.B0.D0.BB.D1.83.D0.B9.D1.81.D1.82.D0.B0.21.22_.D0.B8.D0.BB.D0.B8_.D0.BA.D0.B0.D0.BA_.D0.BF.D0.BE.D1.81.D0.BB.D0.B0.D1.82.D1.8C_HTTP_.D0.B7.D0.B0.D0.BF.D1.80.D0.BE.D1.81"> Шаг 1 - скажите "Пожалуйста!" или как послать HTTP запрос </h3>
<p>Для того, чтобы послать HTTP запрос на сервер используя JavaScript, вам необходим экземпляр класса, который позволит это сделать. Такой класс впервые был введен в Internet Explorer как объект ActiveX, называемый <code>XMLHTTP</code>. Позже в Mozilla, Safari и других броузерах был введен класс <code>XMLHttpRequest</code>, который поддерживал методы и свойства изначального объекта ActiveX от Microsoft.
</p><p>В результате, чтобы создать кросс-броузерный объект требуемого класса, вы можете сделать:
</p>
<pre>if (window.XMLHttpRequest) { // Mozilla, Safari, ...
    http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
    http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
</pre>
<p>(В целях наглядности код выше является немного упрощенным вариантом кода, который нужно использовать для создания объекта XMLHTTP. Более жизненный пример будет рассмотрен в шаге 3 этой статьи)
</p><p>Некоторые версии некоторых броузеров Mozilla не будут корректно работать, если ответ сервера не содержит заголовка XML <code>mime-type</code>. Чтобы решить эту проблему вы можете использовать вызовы дополнительных методов для переопределения заголовка полученного от сервера, если он отличен от <code>text/xml</code>.
</p>
<pre>http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');
</pre>
<p>Далее вам необходимо решить что вы будете делать после получения ответа от сервера. На этом этапе вам необходимо указать объекту какая JavaScript функция будет обрабатывать ответ. Это делается путем присваивания свойству <code>onreadystatechange</code> имени JavaScript функции, которую вы собираетесь использовать:
</p><p><code>http_request.onreadystatechange = nameOfTheFunction;</code>
</p>{{ wiki.languages( { "ca": "ca/AJAX/Primers_passos", "de": "de/AJAX/Getting_Started", "en": "en/AJAX/Getting_Started", "es": "es/AJAX/Primeros_Pasos", "fr": "fr/AJAX/Premiers_pas", "it": "it/AJAX/Iniziare", "ja": "ja/AJAX/Getting_Started", "ko": "ko/AJAX/Getting_Started", "pl": "pl/AJAX/Na_pocz\u0105tek", "pt": "pt/AJAX/Como_come\u00e7ar", "zh-cn": "cn/AJAX/\u5f00\u59cb" } ) }}
Вернуть эту версию