JavaScript Learning Notes (VII) Коды статуса AJAX и HTTP

Аякс и как это работает

Ajax - это технология, которая обменивается данными с серверами без освежающих веб -страниц. Впервые он использовался Google в Google Maps и был быстро популярен.

Аякс не может быть междоменом. Если вам нужно перекрестно, вы можете использовать Document.domain = 'a.com'; или используйте прокси -сервер для прокси -файла xmlhttprequest.

Ajax основан на существующих интернет -стандартах и ​​использует их в комбинации:

Xmlhttprequest объект (асинхронно обменивает данные с сервером)

JavaScript/DOM (Информационный дисплей/взаимодействие)

CSS (определяйте стили для данных)

XML (как формат для преобразования данных)

Создайте объект xmlhttprequest

Все современные браузеры (IE7+, Firefox, Chrome, Safari и Opera) имеют встроенные объекты xmlhttprequest.

Создайте объект Ajax:

// IE6 или выше

var oajax = new xmlhttprequest ();

// IE6

var oajax = new ActivexObject ("microsoft.xmlhttp")

Подключиться к серверу

oajax.open (метод, URL, это асинхронно)

Мы все знаем, что Ajax, а именно «асинхронный JavaScript и XML» (асинхронный JavaScript и XML), относится к технологии веб -разработки, которая создает интерактивные веб -приложения. Следовательно, Ajax рожден для работы в асинхронном режиме (асинхронно это истинно, синхронно ложно)

Синхронно и асинхронно

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

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

(Чтобы выразить это просто: синхронизация может быть сделана только одну за другой, в то время как асинхронное можно сделать несколько вещей одновременно)

Отправить запрос send ()

Кода -копия выглядит следующим образом:

<script type = "text/javascript">

функция getDoc () {

var xmlhttp;

if (window.xmlhttprequest) {

xmlhttp = new xmlhttprequest ();

}

еще{

xmlhttp = new ActiveXobject ("microsoft.xmlhttp"); // Для IE6

}

xmlhttp.onreadystatechange = function () {

if (xmlhttp.readystate == 4 && xmlhttp.status == 200) {

document.getElementbyId ("myid"). innerhtml = xmlhttp.responsetext;

}

}

xmlhttp.open ("get", index.php, true);

xmlhttp.send ();

}

</script>

</head>

<тело>

<button type = "button" onclick = "getDoc ()"> Запросить данные </button>

</body>

Получить или отправить?

По сравнению с Post, Get проще и быстрее и доступно в большинстве случаев.

Однако используйте запрос POST в следующих случаях:

Невозможно использовать кэшированные файлы (обновлять файлы или базы данных на сервере)

Отправить большие объемы данных на сервер (у посты нет предела данных)

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

Получить информацию о возврате

oajax.onreadystateChange = function () {// обработчик событий должен быть вызван при изменении состояния запроса

оповещение (OAJAX.ReadyState);

}

Всякий раз, когда изменяется значение свойства готового штата, будет запускается событие BeadyStateChange. Это событие может быть использовано для обнаружения значения готового штата после каждого изменения состояния. Обычно мы заинтересованы только на этапе, где значение готового штата составляет 4, потому что все данные готовы в это время, однако, перед вызовом Open (), чтобы обеспечить совместимость с кросс-браузером. Давайте посмотрим на пример:

Кода -копия выглядит следующим образом:

var xhr = createxhr ();

xhr.onreadystatechange = function () {

if (xhr.readystate == 4) {

if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {

оповещение (xhr.statustext);

} еще {

Alert («запрос был неудачным:» + xhr.status);

}

}

};

xhr.open ("get", "example.txt", true);

xhr.send (null);

Xhr объекты

Когда объект XHR отправляет HTTP -запрос на сервер, он проходит через несколько состояний до тех пор, пока запрос не будет обработан, а затем получает ответ. Readystate - это государственное свойство запроса XHR, которое само по себе имеет 5 значений свойств:

0 (неонициализированный) метод Open () еще не был вызван

1 (загрузка) метод send () был вызван и отправляется запрос

2 (Загрузка завершена) Метод Send () был завершен, и все содержимое ответа было получено

3 (анализ) содержание ответа проанализируется

4 (Завершено) Подборки содержимого ответа завершается и может использоваться клиентом.

статус

Атрибут состояния представляет код состояния ответа, возвращаемый с сервера. Например: 200 означает успех, 404 означает, что не найдено.

Заголовок с 1 словом: сообщение. Этот тип кода состояния означает, что запрос был принят и должен быть обработан.

Глава с 2 слова: успех. Этот тип кода состояния означает, что запрос был успешно получен, понят и принят сервером.

Заголовок из 3 слов: перенаправление. Этот тип кода состояния означает, что клиент требуется дальнейшие действия для выполнения запроса.

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

Заголовок из 5 слов: ошибка сервера. Этот тип кода состояния представляет собой ошибку или ненормальное состояние, произошедшее в процессе обработки запросов сервера

Также прилагается: подробное объяснение кода состояния HTTP

Statastext

STATUSTEXT - это текстовая информация, возвращаемая в ответе, и может использоваться только в том случае, если значение reatestate составляет 3 или 4. Когда готово является еще одним значением, представление обращается к свойству Statastext.

Метод XHR

Кода -копия выглядит следующим образом:

<script type = "text/javascript">

var oajax = oajax ();

Alert (OAJAX.ReadyState); // "0" всплывает "

oajax.open ("get", "index.html", true);

Alert (Oajax.ReadyState); // "1" появляется

oajax.send (null);

Alert (Oajax.ReadyState); // 4 появляется под т.е., а Firefox - 2

// Вы можете прослушать событие BethodeStateChange

oajax = xhr ();

oajax.onreadystatechange = function () {

Alert (Oajax.ReadyState); // Орден под Firefox составляет 1, 2, 3, 4, но в конце концов будет еще 1

// под т.е. это 1, 1, 3, 4

};

oajax.open ("get", "index.txt", true);

oajax.send (null);

</script>