From e06bd4050093ed0c1e5ed5f0d360f5f2768dd4ca Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Thu, 29 Sep 2022 13:04:02 +0200 Subject: [PATCH 1/3] move *.html to *.md --- files/ru/web/guide/ajax/getting_started/{index.html => index.md} | 0 files/ru/web/guide/ajax/{index.html => index.md} | 0 files/ru/web/guide/api/{index.html => index.md} | 0 .../{index.html => index.md} | 0 .../buffering_seeking_time_ranges/{index.html => index.md} | 0 .../web/guide/audio_and_video_delivery/{index.html => index.md} | 0 .../guide/audio_and_video_manipulation/{index.html => index.md} | 0 .../guide/css/block_formatting_context/{index.html => index.md} | 0 files/ru/web/guide/graphics/{index.html => index.md} | 0 .../web/guide/html/constraint_validation/{index.html => index.md} | 0 .../ru/web/guide/html/content_categories/{index.html => index.md} | 0 files/ru/web/guide/html/editable_content/{index.html => index.md} | 0 files/ru/web/guide/{index.html => index.md} | 0 files/ru/web/guide/mobile/{index.html => index.md} | 0 .../guide/parsing_and_serializing_xml/{index.html => index.md} | 0 files/ru/web/guide/performance/{index.html => index.md} | 0 files/ru/web/guide/user_input_methods/{index.html => index.md} | 0 files/ru/web/guide/woff/{index.html => index.md} | 0 18 files changed, 0 insertions(+), 0 deletions(-) rename files/ru/web/guide/ajax/getting_started/{index.html => index.md} (100%) rename files/ru/web/guide/ajax/{index.html => index.md} (100%) rename files/ru/web/guide/api/{index.html => index.md} (100%) rename files/ru/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/{index.html => index.md} (100%) rename files/ru/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/{index.html => index.md} (100%) rename files/ru/web/guide/audio_and_video_delivery/{index.html => index.md} (100%) rename files/ru/web/guide/audio_and_video_manipulation/{index.html => index.md} (100%) rename files/ru/web/guide/css/block_formatting_context/{index.html => index.md} (100%) rename files/ru/web/guide/graphics/{index.html => index.md} (100%) rename files/ru/web/guide/html/constraint_validation/{index.html => index.md} (100%) rename files/ru/web/guide/html/content_categories/{index.html => index.md} (100%) rename files/ru/web/guide/html/editable_content/{index.html => index.md} (100%) rename files/ru/web/guide/{index.html => index.md} (100%) rename files/ru/web/guide/mobile/{index.html => index.md} (100%) rename files/ru/web/guide/parsing_and_serializing_xml/{index.html => index.md} (100%) rename files/ru/web/guide/performance/{index.html => index.md} (100%) rename files/ru/web/guide/user_input_methods/{index.html => index.md} (100%) rename files/ru/web/guide/woff/{index.html => index.md} (100%) diff --git a/files/ru/web/guide/ajax/getting_started/index.html b/files/ru/web/guide/ajax/getting_started/index.md similarity index 100% rename from files/ru/web/guide/ajax/getting_started/index.html rename to files/ru/web/guide/ajax/getting_started/index.md diff --git a/files/ru/web/guide/ajax/index.html b/files/ru/web/guide/ajax/index.md similarity index 100% rename from files/ru/web/guide/ajax/index.html rename to files/ru/web/guide/ajax/index.md diff --git a/files/ru/web/guide/api/index.html b/files/ru/web/guide/api/index.md similarity index 100% rename from files/ru/web/guide/api/index.html rename to files/ru/web/guide/api/index.md diff --git a/files/ru/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html b/files/ru/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md similarity index 100% rename from files/ru/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.html rename to files/ru/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md diff --git a/files/ru/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.html b/files/ru/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.md similarity index 100% rename from files/ru/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.html rename to files/ru/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.md diff --git a/files/ru/web/guide/audio_and_video_delivery/index.html b/files/ru/web/guide/audio_and_video_delivery/index.md similarity index 100% rename from files/ru/web/guide/audio_and_video_delivery/index.html rename to files/ru/web/guide/audio_and_video_delivery/index.md diff --git a/files/ru/web/guide/audio_and_video_manipulation/index.html b/files/ru/web/guide/audio_and_video_manipulation/index.md similarity index 100% rename from files/ru/web/guide/audio_and_video_manipulation/index.html rename to files/ru/web/guide/audio_and_video_manipulation/index.md diff --git a/files/ru/web/guide/css/block_formatting_context/index.html b/files/ru/web/guide/css/block_formatting_context/index.md similarity index 100% rename from files/ru/web/guide/css/block_formatting_context/index.html rename to files/ru/web/guide/css/block_formatting_context/index.md diff --git a/files/ru/web/guide/graphics/index.html b/files/ru/web/guide/graphics/index.md similarity index 100% rename from files/ru/web/guide/graphics/index.html rename to files/ru/web/guide/graphics/index.md diff --git a/files/ru/web/guide/html/constraint_validation/index.html b/files/ru/web/guide/html/constraint_validation/index.md similarity index 100% rename from files/ru/web/guide/html/constraint_validation/index.html rename to files/ru/web/guide/html/constraint_validation/index.md diff --git a/files/ru/web/guide/html/content_categories/index.html b/files/ru/web/guide/html/content_categories/index.md similarity index 100% rename from files/ru/web/guide/html/content_categories/index.html rename to files/ru/web/guide/html/content_categories/index.md diff --git a/files/ru/web/guide/html/editable_content/index.html b/files/ru/web/guide/html/editable_content/index.md similarity index 100% rename from files/ru/web/guide/html/editable_content/index.html rename to files/ru/web/guide/html/editable_content/index.md diff --git a/files/ru/web/guide/index.html b/files/ru/web/guide/index.md similarity index 100% rename from files/ru/web/guide/index.html rename to files/ru/web/guide/index.md diff --git a/files/ru/web/guide/mobile/index.html b/files/ru/web/guide/mobile/index.md similarity index 100% rename from files/ru/web/guide/mobile/index.html rename to files/ru/web/guide/mobile/index.md diff --git a/files/ru/web/guide/parsing_and_serializing_xml/index.html b/files/ru/web/guide/parsing_and_serializing_xml/index.md similarity index 100% rename from files/ru/web/guide/parsing_and_serializing_xml/index.html rename to files/ru/web/guide/parsing_and_serializing_xml/index.md diff --git a/files/ru/web/guide/performance/index.html b/files/ru/web/guide/performance/index.md similarity index 100% rename from files/ru/web/guide/performance/index.html rename to files/ru/web/guide/performance/index.md diff --git a/files/ru/web/guide/user_input_methods/index.html b/files/ru/web/guide/user_input_methods/index.md similarity index 100% rename from files/ru/web/guide/user_input_methods/index.html rename to files/ru/web/guide/user_input_methods/index.md diff --git a/files/ru/web/guide/woff/index.html b/files/ru/web/guide/woff/index.md similarity index 100% rename from files/ru/web/guide/woff/index.html rename to files/ru/web/guide/woff/index.md From a1e15ce68f4d9d066f6ae7b4a4c27a62686daeb7 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Thu, 29 Sep 2022 13:04:15 +0200 Subject: [PATCH 2/3] convert content to md --- .../web/guide/ajax/getting_started/index.md | 215 +++---- files/ru/web/guide/ajax/index.md | 57 +- files/ru/web/guide/api/index.md | 18 +- .../index.md | 324 +++++----- .../buffering_seeking_time_ranges/index.md | 187 +++--- .../guide/audio_and_video_delivery/index.md | 606 +++++++++--------- .../audio_and_video_manipulation/index.md | 400 ++++++------ .../css/block_formatting_context/index.md | 182 +++--- files/ru/web/guide/graphics/index.md | 34 +- .../guide/html/constraint_validation/index.md | 549 +++++++++------- .../guide/html/content_categories/index.md | 206 +++--- .../web/guide/html/editable_content/index.md | 264 ++++---- files/ru/web/guide/index.md | 106 ++- files/ru/web/guide/mobile/index.md | 74 +-- .../parsing_and_serializing_xml/index.md | 99 ++- files/ru/web/guide/performance/index.md | 16 +- .../ru/web/guide/user_input_methods/index.md | 232 ++++--- files/ru/web/guide/woff/index.md | 63 +- 18 files changed, 1808 insertions(+), 1824 deletions(-) diff --git a/files/ru/web/guide/ajax/getting_started/index.md b/files/ru/web/guide/ajax/getting_started/index.md index 95a368c7267a4f..d89cfded1d719e 100644 --- a/files/ru/web/guide/ajax/getting_started/index.md +++ b/files/ru/web/guide/ajax/getting_started/index.md @@ -6,127 +6,125 @@ tags: translation_of: Web/Guide/AJAX/Getting_Started original_slug: Web/Guide/AJAX/С_чего_начать --- -

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

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

+### Что такое AJAX? -

Что такое AJAX?

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

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

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

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

+- Отправление запросов серверу без перезагрузки страницы +- Работа с XML документами - +### Шаг 1 — Как послать HTTP запрос -

Шаг 1 — Как послать HTTP запрос

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

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

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

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

- -
var httpRequest;
+```
+var httpRequest;
 if (window.XMLHttpRequest) { // Mozilla, Safari, ...
     httpRequest = new XMLHttpRequest();
 } else if (window.ActiveXObject) { // IE
     httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
 }
-
+``` -

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

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

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

+Некоторые версии некоторых броузеров Mozilla не будут корректно работать, если ответ сервера не содержит заголовка XML `mime-type`. Чтобы решить эту проблему, вы можете использовать вызовы дополнительных методов для переопределения заголовка полученного от сервера, если он отличен от `text/xml`. -
httpRequest = new XMLHttpRequest();
+```
+httpRequest = new XMLHttpRequest();
 httpRequest.overrideMimeType('text/xml');
-
+``` -

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

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

httpRequest.onreadystatechange = nameOfTheFunction;

+`httpRequest.onreadystatechange = nameOfTheFunction;` -

Заметьте, что после названия функции нет скобок и не указано параметров, потому что вы просто присваиваете ссылку на функцию, а не вызываете её. К тому же, вместо указания имени функции, вы можете использовать возможность JavaScript объявлять функции на лету (так называемые «анонимные функции») и указывать действия, которые тотчас же будут обрабатывать ответ:

+Заметьте, что после названия функции нет скобок и не указано параметров, потому что вы просто присваиваете ссылку на функцию, а не вызываете её. К тому же, вместо указания имени функции, вы можете использовать возможность JavaScript объявлять функции на лету (так называемые «анонимные функции») и указывать действия, которые тотчас же будут обрабатывать ответ: -
httpRequest.onreadystatechange = function(){
+```
+httpRequest.onreadystatechange = function(){
     // какой-нибудь код
 };
-
+``` -

Далее, после того как вы объявили что будет происходить после получения ответа, вам необходимо сделать запрос. Вы должны вызвать методы класса open() и send():

+Далее, после того как вы объявили что будет происходить после получения ответа, вам необходимо сделать запрос. Вы должны вызвать методы класса `open()` и `send()`: -
httpRequest.open('GET', 'http://www.example.org/some.file', true);
+```
+httpRequest.open('GET', 'http://www.example.org/some.file', true);
 httpRequest.send(null);
-
+``` - +- Первый параметр вызова функции `open()` — метод HTTP запроса (GET, POST, HEAD или любой другой метод, который вы хотите использовать). Используйте методы в соответствии с HTTP стандартами, иначе некоторые браузеры (такие как Firefox) могут не обработать запрос. Информация о допустимых HTTP запросах доступна по адресу [спецификации W3C](http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html) +- Второй параметр — URL запрашиваемой страницы. Из соображений безопасности возможность запрашивать страницы сторонних доменов недоступна. Убедитесь, что вы используете одинаковое доменное имя на всех страницах, иначе вы получите ошибку 'доступ запрещён' при вызове функции `open()`. Типичной ошибкой при доступе к сайту через `site.ru` является отправка запроса на `www.site.ru`. +- Третий параметр указывает, является ли запрос асинхронным. Если он `TRUE`, то выполнение JavaScript продолжится во время ожидания ответа сервера. В этом и заключается асинхронность технологии. -

Параметром метода send() могут быть любые данные, которые вы хотите послать на сервер. Данные должны быть сформированы в строку запроса:

+Параметром метода `send()` могут быть любые данные, которые вы хотите послать на сервер. Данные должны быть сформированы в строку запроса: -

name=value&anothername=othervalue&so=on

+`name=value&anothername=othervalue&so=on` -

Заметьте, что если вы хотите отправить данные методом POST, вы должны изменить MIME-тип запроса с помощью следующей строки:

+Заметьте, что если вы хотите отправить данные методом `POST`, вы должны изменить MIME-тип запроса с помощью следующей строки: -
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-
+``` +httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); +``` -

Иначе сервер проигнорирует данные отправленные методом POST.

+Иначе сервер проигнорирует данные отправленные методом POST. -

Шаг 2 — Обрабатываем ответ сервера

+### Шаг 2 — Обрабатываем ответ сервера -

Отправляя запрос, вы указали имя функции JavaScript, обрабатывающей ответ.

+Отправляя запрос, вы указали имя функции JavaScript, обрабатывающей ответ. -

httpRequest.onreadystatechange = nameOfTheFunction;

+`httpRequest.onreadystatechange = nameOfTheFunction;` -

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

+Давайте посмотрим, что эта функция должна делать. Во-первых, функция должна проверять статус запроса. Если значение переменной статуса 4, то это означает, что ответ от сервера получен и его можно обрабатывать. -
if (httpRequest.readyState == 4) {
+```
+if (httpRequest.readyState == 4) {
     // все в порядке, ответ получен
 } else {
     // все ещё не готово
 }
-
+``` -

Полный список значений кодов readyState такой:

+Полный список значений кодов `readyState` такой: - +- 0 (uninitialized) +- 1 (loading) +- 2 (loaded) +- 3 (interactive) +- 4 (complete) -

(Источник)

+([Источник](http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/readystate_1.asp)) -

Следующее, что нужно проверить — это статус HTTP-ответа. Все возможные коды можно посмотреть на сайте W3C. Для наших целей нам интересен только код ответа 200 OK.

+Следующее, что нужно проверить — это статус HTTP-ответа. Все возможные коды можно посмотреть на [сайте W3C](http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html). Для наших целей нам интересен только код ответа `200 OK`. -
if (httpRequest.status == 200) {
+```
+if (httpRequest.status == 200) {
     // великолепно!
 } else {
     // с запросом возникли проблемы,
     // например, ответ может быть 404 (Не найдено)
     // или 500 (Внутренняя ошибка сервера)
 }
-
+``` -

Теперь, после проверки состояния запроса и статуса HTTP-ответа, вы можете делать с данными, полученными от сервера, всё что угодно. Есть два способа получить доступ к данным:

+Теперь, после проверки состояния запроса и статуса HTTP-ответа, вы можете делать с данными, полученными от сервера, всё что угодно. Есть два способа получить доступ к данным: - +- `httpRequest.responseText` – возвращает ответ сервера в виде строки текста. +- `httpRequest.responseXML` – возвращает ответ сервера в виде объекта `XMLDocument`, который вы можете обходить используя функции JavaScript DOM -

Шаг 3 — Простой пример

+### Шаг 3 — Простой пример -

Давайте соберём все вместе и сделаем простой пример HTTP-запроса. Наш JavaScript запросит HTML документ test.html, который содержит текст "I'm a test." и выведет содержимое файла в диалоговом окне.

+Давайте соберём все вместе и сделаем простой пример HTTP-запроса. Наш JavaScript запросит HTML документ `test.html`, который содержит текст "I'm a test." и выведет содержимое файла в диалоговом окне. -
<script type="text/javascript" language="javascript">
+```
+
+
         Сделать запрос
-</span>
-
+ +``` -


- В этом примере:

+В этом примере: - +- Пользователь нажимает на ссылку "Сделать запрос" в броузере; +- Это вызывает функцию `makeRequest()` с параметром `test.html` — именем HTML файла; +- Посылается запрос, после чего (`onreadystatechange`) выполнение передаётся `alertContents()`; +- `alertContents()` проверяет получен ли ответ и все ли с ним в порядке, после чего содержимое файла `test.html` выводится в диалоговом окне. -

Замечание: Строка httpRequest.overrideMimeType('text/xml'); вызовет ошибки в консоли JavaScript в Firefox 1.5 или более позднем, как описано в https://bugzilla.mozilla.org/show_bug.cgi?id=311724, если страница вызванная с помощью XMLHttpRequest не является правильным XML (например, если это обычный текст). На самом деле это корректное поведение.

+**Замечание**: Строка `httpRequest.overrideMimeType('text/xml');` вызовет ошибки в консоли JavaScript в Firefox 1.5 или более позднем, как описано в , если страница вызванная с помощью XMLHttpRequest не является правильным XML (например, если это обычный текст). На самом деле это корректное поведение. -

Замечание 2: Если вы посылаете запрос не на статический XML-файл, а на серверный скрипт, возвращающий XML, то нужно установить некоторые заголовки ответа, если вы планируете сделать вашу страницу работоспособной в Internet Explorer помимо Mozilla. Если вы не установите заголовок Content-Type: application/xml, IE будет сообщать об ошибке JavaScript, 'Object Expected', после строки, где вы пытаетесь получить доступ к XML элементу. Если вы не установите заголовок Cache-Control: no-cache броузер будет кешировать ответ и никогда не будет повторно отправлять запрос, что сделает отладку весьма «забавной».

+**Замечание 2**: Если вы посылаете запрос не на статический XML-файл, а на серверный скрипт, возвращающий XML, то нужно установить некоторые заголовки ответа, если вы планируете сделать вашу страницу работоспособной в Internet Explorer помимо Mozilla. Если вы не установите заголовок `Content-Type: application/xml`, IE будет сообщать об ошибке JavaScript, 'Object Expected', после строки, где вы пытаетесь получить доступ к XML элементу. Если вы не установите заголовок `Cache-Control: no-cache` броузер будет кешировать ответ и никогда не будет повторно отправлять запрос, что сделает отладку весьма «забавной». -

Замечание 3: Если переменная httpRequest используется глобально, то конкурирующие функции, вызывающие makeRequest() могут конкурировать друг с другом, вызывая состязания. Объявление переменной httpRequest локально в функции и передача её в alertContent() предотвращает состязания.

+**Замечание 3**: Если переменная `httpRequest` используется глобально, то конкурирующие функции, вызывающие `makeRequest()` могут конкурировать друг с другом, вызывая состязания. Объявление переменной `httpRequest` локально в функции и передача её в `alertContent()` предотвращает состязания. -

Замечание 4: При привязывании колбэк-функции к onreadystatechange нельзя указать аргументы. По этой причине не работает следующий код:

+**Замечание 4**: При привязывании колбэк-функции к `onreadystatechange` нельзя указать аргументы. По этой причине не работает следующий код: -
httpRequest.onreadystatechange = alertContents(httpRequest); // (не работает)
-
+``` +httpRequest.onreadystatechange = alertContents(httpRequest); // (не работает) +``` -

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

+Таким образом, для успешной регистрации функции, вы должны передать ей аргументы косвенно через анонимную функцию или используя `httpRequest` как глобальную переменную. Вот пример: -
httpRequest.onreadystatechange = function() { alertContents(httpRequest); };  //1 (одновременный запрос)
+```
+httpRequest.onreadystatechange = function() { alertContents(httpRequest); };  //1 (одновременный запрос)
 httpRequest.onreadystatechange = alertContents;  //2 (глобальная переменная)
-
+``` -

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

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

Замечание 5: В случае ошибки взаимодействия (например, если сервер упал), при попытке доступа к переменной .status метода onreadystatechange будет сгенерировано исключение. Убедитесь, что if...then заключено в try...catch. (См. https://bugzilla.mozilla.org/show_bug.cgi?id=238559).

+**Замечание 5**: В случае ошибки взаимодействия (например, если сервер упал), при попытке доступа к переменной .status метода onreadystatechange будет сгенерировано исключение. Убедитесь, что if...then заключено в try...catch. (См. ). -
function alertContents(httpRequest) {
+```
+function alertContents(httpRequest) {
 
         try {
             if (httpRequest.readyState == 4) {
@@ -222,36 +220,39 @@ httpRequest.onreadystatechange = alertContents;  //2 (глобальная пе
         }
 
     }
-
+``` -

Шаг 4 — Работа с XML ответом

+### Шаг 4 — Работа с XML ответом -

В предыдущем примере, после того как был получен ответ на HTTP-запрос мы использовали responseText запрашиваемого объекта, который содержал данные файла test.html. Теперь давайте попробуем использовать свойство responseXML.

+В предыдущем примере, после того как был получен ответ на HTTP-запрос мы использовали `responseText` запрашиваемого объекта, который содержал данные файла `test.html`. Теперь давайте попробуем использовать свойство `responseXML`. -

Прежде всего, давайте создадим правильный XML документ, который мы будем запрашивать. Документ (test.xml) содержит следующее:

+Прежде всего, давайте создадим правильный XML документ, который мы будем запрашивать. Документ (`test.xml`) содержит следующее: -
<?xml version="1.0" ?>
-<root>
+```
+
+
     I'm a test.
-</root>
-
+ +``` -

В скрипте нам всего лишь необходимо заменить строку запроса на:

+В скрипте нам всего лишь необходимо заменить строку запроса на: -
...
-onclick="makeRequest('test.xml')">
+```
+...
+onclick="makeRequest('test.xml')">
 ...
-
+``` -

Далее в alertContents() нам нужно заменить строку alert(httpRequest.responseText); на:

+Далее в `alertContents()` нам нужно заменить строку `alert(httpRequest.responseText);` на: -
var xmldoc = httpRequest.responseXML;
+```
+var xmldoc = httpRequest.responseXML;
 var root_node = xmldoc.getElementsByTagName('root').item(0);
 alert(root_node.firstChild.data);
-
+``` -

Этот код берёт объект XMLDocument, возвращаемый responseXML и использует методы DOM для доступа к данным, содержащимся в документе XML.

+Этот код берёт объект `XMLDocument`, возвращаемый `responseXML` и использует методы DOM для доступа к данным, содержащимся в документе XML. -

Чтобы узнать больше о методах DOM, посмотрите реализация DOM в Mozilla.

+Чтобы узнать больше о методах DOM, посмотрите [реализация DOM в Mozilla](http://www.mozilla.org/docs/dom/). -

{{ 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" } ) }}

+{{ 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" } ) }} diff --git a/files/ru/web/guide/ajax/index.md b/files/ru/web/guide/ajax/index.md index 43d7f93ed4dab3..5ac7c3a62af734 100644 --- a/files/ru/web/guide/ajax/index.md +++ b/files/ru/web/guide/ajax/index.md @@ -6,47 +6,36 @@ tags: - поведение метода length объекта XML в IE и Mozilla translation_of: Web/Guide/AJAX --- -

Введение в AJAX

+## Введение в AJAX -
-

AJAX (англ. Asynchronous JavaScript and XML — асинхронный JavaScript и XML) — это не технология сама по себе, а термин, который описывает «новый» подход к использованию существующих технологий вместе. AJAX включает: HTML или XHTML, CSS, JavaScript, DOM, XML, XSLT, и объект XMLHttpRequest. Когда эти технологии объединяются в модель AJAX, web-приложения способны делать быстрые дополняющие обновления интерфейса пользователя без необходимости полной перезагрузки страницы браузером. Приложения работают быстрее и становятся более отзывчивыми к действиям пользователей.

-
+**AJAX** (англ. _Asynchronous JavaScript and XML_ — асинхронный JavaScript и XML) — это не технология сама по себе, а термин, который описывает «новый» подход к использованию существующих технологий вместе. AJAX включает: [HTML](/ru/HTML) или [XHTML](/ru/XHTML), [CSS](/ru/CSS), [JavaScript](/ru/JavaScript), [DOM](/ru/DOM), [XML](/ru/XML), [XSLT](/Ru/XSLT), и [объект XMLHttpRequest](/ru/XMLHttpRequest). Когда эти технологии объединяются в модель AJAX, web-приложения способны делать быстрые дополняющие обновления интерфейса пользователя без необходимости полной перезагрузки страницы браузером. Приложения работают быстрее и становятся более отзывчивыми к действиям пользователей. +## Документация -

Документация

+- [AJAX: С чего начать?](/ru/docs/Web/Guide/AJAX/%D0%A1_%D1%87%D0%B5%D0%B3%D0%BE_%D0%BD%D0%B0%D1%87%D0%B0%D1%82%D1%8C) + - : Эта статья, описывающая основы AJAX и содержащая два простых примера, позволит быстро начать работу. +- [Ajax: Новый подход к WEB-приложениям](/ru/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) + - : Jesse James Garrett из [adaptive path](http://www.adaptivepath.com), создавший эту статью в феврале 2005 года, знакомит с AJAX и связанными с ним понятиями. +- [Простой путь Ajax](http://www.onlamp.com/pub/a/onlamp/2005/05/19/xmlhttprequest.html) + - : "Как это оказывается, довольно легко использовать в своих интересах объект XML-HttpRequest сделает акт приложений сети больше как настольное приложение, все ещё используя традиционные инструменты , сеть формируется для того, чтобы собрать пользовательский вход." +- [Fixing the Back Button and Enabling Bookmarking for AJAX Apps](http://www.contentwithstyle.co.uk/Articles/38/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps) + - : Mike Stenhouse has penned this article, detailing some methods you can use to fix back button and bookmarking issues when developing AJAX applications. +- [Ошибки использования Ajax](http://alexbosworth.backpackit.com/pub/67688) + - : Alex Bosworth написал эту статью, где описал некоторые ошибки которые могут сделать разработчики приложений AJAX. -
-
AJAX: С чего начать?
-
Эта статья, описывающая основы AJAX и содержащая два простых примера, позволит быстро начать работу.
-
Ajax: Новый подход к WEB-приложениям
-
Jesse James Garrett из adaptive path, создавший эту статью в феврале 2005 года, знакомит с AJAX и связанными с ним понятиями.
-
Простой путь Ajax
-
"Как это оказывается, довольно легко использовать в своих интересах объект XML-HttpRequest сделает акт приложений сети больше как настольное приложение, все ещё используя традиционные инструменты , сеть формируется для того, чтобы собрать пользовательский вход."
-
Fixing the Back Button and Enabling Bookmarking for AJAX Apps
-
Mike Stenhouse has penned this article, detailing some methods you can use to fix back button and bookmarking issues when developing AJAX applications.
-
Ошибки использования Ajax
-
Alex Bosworth написал эту статью, где описал некоторые ошибки которые могут сделать разработчики приложений AJAX.
-
+## Сообщество -

Сообщество

+- Смотрите форумы Mozilla... -
    -
  • Смотрите форумы Mozilla...
    • -
+{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }} -

{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}

+## Инструменты -

Инструменты

+- [Toolkits and frameworks](http://www.ajaxprojects.com) +- [Отладчик AJAX](http://blog.monstuff.com/archives/000252.html) +- [Flash/AJAX Integration Kit](http://www.osflash.org/doku.php?id=flashjs) +- [AJAX: many cool examples](http://www.hotajax.org) - +## Связанные темы -

Связанные темы

- - +- [HTML](/ru/HTML), [XHTML](/ru/XHTML), [CSS](/ru/CSS), [DOM](/ru/DOM), [JavaScript](/ru/JavaScript), [XML](/ru/XML), [XMLHttpRequest](/ru/XMLHttpRequest), [XSLT](/Ru/XSLT), [DHTML](/ru/DHTML) diff --git a/files/ru/web/guide/api/index.md b/files/ru/web/guide/api/index.md index 8e209f37a93b78..2cae60f2d07436 100644 --- a/files/ru/web/guide/api/index.md +++ b/files/ru/web/guide/api/index.md @@ -10,17 +10,15 @@ tags: - Web translation_of: Web/Guide/API --- -

Здесь вы найдёте ссылки на каждое руководство и объяснение каждого API, составляющего архитектуру веб-разработки.

+Здесь вы найдёте ссылки на каждое руководство и объяснение каждого API, составляющего архитектуру веб-разработки. -

Web APIs from A to Z

+## Web APIs from A to Z -

{{ListGroups}}

+{{ListGroups}} -

See also

+## See also - +- [Web API interface reference](/ru/docs/Web/API) (an index of all of the interfaces comprising all of these APIs) +- [Document Object Model](/ru/docs/Web/API/Document_Object_Model) (DOM) +- [Web API event reference](/ru/docs/Web/Events) +- [Learning web development](/ru/docs/Learn) diff --git a/files/ru/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md b/files/ru/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md index 958db3f6ed997b..e93f26a4b0314d 100644 --- a/files/ru/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md +++ b/files/ru/web/guide/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md @@ -5,94 +5,91 @@ slug: >- translation_of: >- Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video --- -
-
-

В других статьях мы рассмотрели как создать cross browser видео плеер используя {{ domxref("HTMLMediaElement") }} и {{ domxref("Window.fullScreen") }} APIs, а так-же как стилизовать плеер. В этой статье мы возьмём тот же плеер и покажем как добавить подписи и субтитры, используя {{ domxref("Web_Video_Text_Tracks_Format","the WebVTT format") }} и {{ htmlelement("track") }} элемент.

-
-
+> В других статьях мы рассмотрели как [создать cross browser видео плеер](https://developer.mozilla.org/en-US/Apps/Build/Manipulating_media/cross_browser_video_player) используя {{ domxref("HTMLMediaElement") }} и {{ domxref("Window.fullScreen") }} APIs, а так-же как [стилизовать плеер](https://developer.mozilla.org/en-US/Apps/Build/Manipulating_media/Video_player_styling_basics). В этой статье мы возьмём тот же плеер и покажем как добавить подписи и субтитры, используя {{ domxref("Web_Video_Text_Tracks_Format","the WebVTT format") }} и {{ htmlelement("track") }} элемент. -

Пример видео с подписями

+## Пример видео с подписями -

В этой статье мы сошлёмся на пример плеера с подписями. Этот пример использует отрывок из Sintel open movie, созданного Blender Foundation.

+В этой статье мы сошлёмся на пример плеера с подписями. Этот пример использует отрывок из [Sintel open movie](http://www.sintel.org/), созданного [Blender Foundation](http://www.blender.org/foundation/). -

Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

+![Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."](https://mdn.mozillademos.org/files/7887/video-player-with-captions.png) -
-

Note: вы можете найти source on Github, а так же посмотреть пример.

-
+> **Примечание:** вы можете найти [source on Github](https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions), а так же [посмотреть пример](http://iandevlin.github.io/mdn/video-player-with-captions/). -

HTML5 и Video Captions

+## HTML5 и Video Captions -

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

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

Подписи или Субтитры

+### Подписи или Субтитры -

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

+[Подписи и субтитры не одно и тоже](http://web.archive.org/web/20160117160743/http://screenfont.ca/learn/): они имеют существенные различия для зрителя, и передают различную информацию, мы рекомендуем ознакомится с различиями, если вы не уверены, что они есть. Однако технически они реализуются одинаково, поэтому материал в нашей статье применим к обоим. -

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

+В этой статье мы сошлёмся на text tracks, отображаемые как субтистры, т.к их контент направлен на слышащих людей, со сложностью понимания языка в фильме, а не на людей с плохим или отсутствием слуха. -

Элемент <track>

+### Элемент \ -

HTML5 позволяет нам указать субтитры для видео, используя {{ htmlelement("track") }} элемент. Различные атрибуты этого элемента позволяют нам указать такие вещи как тип контента, который мы хотим разместить, язык и конечно ссылку на текстовый файл который содержит информацию о субтитрах.

+HTML5 позволяет нам указать субтитры для видео, используя {{ htmlelement("track") }} элемент. Различные атрибуты этого элемента позволяют нам указать такие вещи как тип контента, который мы хотим разместить, язык и конечно ссылку на текстовый файл который содержит информацию о субтитрах. -

WebVTT

+### WebVTT -

Файлы содержащие данные о субтитрах - это простой текстовый файл, который следует специальному формату, такому как Web Video Text Tracks (WebVTT) формат. WebVTT specification всё ещё работает, по этому основные его части стабильны и мы можем использовать их сегодня.

+Файлы содержащие данные о субтитрах - это простой текстовый файл, который следует специальному формату, такому как [Web Video Text Tracks](/ru/docs/HTML/WebVTT) (WebVTT) формат. [WebVTT specification](http://dev.w3.org/html5/webvtt/) всё ещё работает, по этому основные его части стабильны и мы можем использовать их сегодня. -

Поставщики видео контента (такие как Blender Foundation) предоставляют и подписи и субтитры в текстовом формате с их видео, но они обычно в SubRip Text (SRT) формате. Этот формат может быть легко переконвертирован в WebVTT, используя online конвертер например такой как srt2vtt.

+Поставщики видео контента (такие как [Blender Foundation](http://www.blender.org/foundation/)) предоставляют и подписи и субтитры в текстовом формате с их видео, но они обычно в SubRip Text (SRT) формате. Этот формат может быть легко переконвертирован в WebVTT, используя online конвертер например такой как [srt2vtt](https://atelier.u-sub.net/srt2vtt/). -

Modifications to the HTML and CSS

+## Modifications to the HTML and CSS -

В этом разделе представлены модификации, сделанные в коде предыдущих статей, для того чтобы облегчить добавление субтитров в видео. Если вам это не интересно и вы просто хотите идти дальше в JavaScript и более соответствующий CSS, пропустите Subtitle implementation раздел.

+В этом разделе представлены модификации, сделанные в коде предыдущих статей, для того чтобы облегчить добавление субтитров в видео. Если вам это не интересно и вы просто хотите идти дальше в JavaScript и более соответствующий CSS, пропустите [Subtitle implementation](#subtitle_implementation) раздел. -

В этом примере мы используем другое видео, Sintel, так как оно имеет больше речи и следовательно лучше иллюстрирует работу субтитров.

+В этом примере мы используем другое видео, [Sintel](http://www.sintel.org/), так как оно имеет больше речи и следовательно лучше иллюстрирует работу субтитров. -

HTML Markup

+### HTML Markup -

Как упоминалось выше, нам необходимо использовать новый HTML5 <track> чтобы добавить файл с субтитрами в HTML5 Video. У нас уже имеется субтритры в 3х различных локалях, такие как English, German и Spanish, что ж теперь мы привяжем все 3 соответствующих VTT файла, добавляя <track> внутрь нашего HTML5 <video> элемента:

+Как упоминалось выше, нам необходимо использовать новый HTML5 `` чтобы добавить файл с субтитрами в HTML5 Video. У нас уже имеется субтритры в 3х различных локалях, такие как English, German и Spanish, что ж теперь мы привяжем все 3 соответствующих VTT файла, добавляя `` внутрь нашего HTML5 ` +``` -

The code above creates a video player of dimensions 640x480 pixels, displaying a poster image until the video is played. We instruct the video to autoplay but to be muted by default.

+The code above creates a video player of dimensions 640x480 pixels, displaying a poster image until the video is played. We instruct the video to autoplay but to be muted by default. -
-

Note: The autoplay attribute may be ignored by some mobile browsers.

-
+> **Примечание:** The autoplay attribute may be ignored by some mobile browsers. -

For further info see <video> element and Creating a cross-browser video player.

+For further info see [\