WEB start

Компьютеры. Интернет. Заочное профессиональное обучение. 055-966-10-17

hit 
counter

Обучение

Широкий спектр программ и различных форм обучения

Возможность заочного, дистанционного обучения 055-966-10-17
  • Программирование. Современные языки и технологии.
  • Обслуживание персональных компьютеров.
  • Компьютерные сети. Защита информации.
  • Интернет. Планирование, создание WEB-сайтов. Дизайн, программирование. CEO, продвижение сайтов в интернет.
  • Основы современных IT - технологий.

Наши преимущества

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


Регистрация на сайте

javaScript AJAX

JavaScript - AJAX

Технология AJAX (Asynchronous JavaScript and XML)  - это способ создания быстрых и динамичных веб-страниц. AJAX позволяет обновлять веб-страницы асинхронно, обмениваясь небольшими объемами данных с сервером в фоновом режиме. Это означает, что можно обновлять части веб-страницы без перезагрузки всей страницы.

AJAX используется для решения следующих задач: 

  • Чтение данных с веб-сервера - после загрузки страницы
  • Обновление веб-страницы без перезагрузки страницы
  • Отправка данных на веб-сервер - в фоновом режиме

Ключевым элементом AJAX является объект DOM - XMLHttpRequest.

Все современные браузеры поддерживают этот объект.

Этот бъект (XMLHttpRequest)  использоваться для обмена данными с веб-сервером в фоновом режиме. 

Создать объект XMLHttpRequest

var xhttp = new XMLHttpRequest();
В старых версиях Internet Explorer (5/6) вместо объекта XMLHttpRequest используется объект ActiveX:

Пример:

if (window.XMLHttpRequest) { // Для современных браузеров xmlhttp = new XMLHttpRequest(); } else{ // Для старых версий IE xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

Доступ из разных доменов

По соображениям безопасности современные браузеры не разрешают доступ из разных доменов.

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

XMLHttpRequest - методы

abort()

Отменяет текущий запрос.

getAllResponseHeaders()

Возвращает полный набор заголовков HTTP в виде строки.

getResponseHeader( headerName )

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

open( method, URL )

open( method, URL, async )

open( method, URL, async, userName )

open( method, URL, async, userName, password )

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

Параметр method может иметь значение «GET», «POST» или «HEAD». Могут быть и другие HTTP-методы, такие как «PUT» и «DELETE» (в основном используемые в приложениях REST).

Параметр «async» указывает, следует ли обрабатывать запрос асинхронно или нет. «true» означает, что обработка сценария продолжается после метода send (), не дожидаясь ответа, а «false» означает, что скрипт ожидает ответа до продолжения обработки скрипта.

send( content )

Отправляет запрос.

setRequestHeader( label, value )

Добавляет пару label / value в HTTP-заголовок, который нужно отправить.

XMLHttpRequest - свойства

Свойство XMLHttpRequest.readyState возвращает состояние, в котором находится клиент XMLHttpRequest. Клиент существует в одном из следующих состояний:

Значение  Состояние Описание
0 UNSENT Клиент создан. open () еще не вызыван.
1 OPENED open() вызван.
2 HEADERS_RECEIVED send () был вызван, заголовки и статус доступны.
3 LOADING Загрузка; responseText содержит частичные данные.
4 DONE Операция завершена.
UNSENT
Клиент XMLHttpRequest был создан, но метод open () еще не был вызван.
OPENED
Вызывается метод open(). Во время этого состояния заголовки запросов могут быть установлены с использованием метода setRequestHeader(), и может быть вызван метод send(), который инициирует выборку.
HEADERS_RECEIVED
send () был вызван, и заголовки ответов были получены.
LOADING
Текст ответа принимается. Если responseType - это «текст» или пустая строка, responseText будет иметь частичный текстовый ответ при загрузке.
DONE
Операция выборки завершена. Это может означать, что передача данных была успешно завершена или не выполнена.

Имена состояний в Internet Explorer различны. Вместо UNSENT, OPENED, HEADERS_RECEIVED, LOADING и DONE используются имена READYSTATE_UNINITIALIZED (0), READYSTATE_LOADING (1), READYSTATE_LOADED (2), READYSTATE_INTERACTIVE (3) и READYSTATE_COMPLETE (4).

onreadystatechange

Обработчик событий который срабатывает при любом изменении состояния. 

responseText

Возвращает ответ как текстовую строку.

responseXML

Возвращает ответ как XML. Это свойство возвращает DOM - объект XML, который может быть проанализирован и проанализирован с использованием методов и свойств W3C DOM.

status

Возвращает статус как число (например, 404 для «Не найдено» и 200 для «ОК»).

statusText

Возвращает статус как строку (например, «Не найдено» или «ОК»).

AJAX - отправка запроса на сервер

Чтобы отправить запрос на сервер, используются  методы open () и send () объекта XMLHttpRequest:

xhttp.open ("GET", "ajax_info.txt", true);

xhttp.send ();

Метод Описание
open(method, url, async) Создаёт запрос
method: тип запроса: GET или POST
url: расположение сервера (файла)
async: true (асинхронный) или false (синхронный)
send() Отправляет запрос на сервер (используется для GET)
send(string) Отправляет запрос на сервер (используется для POST)

GET или POST?

GET проще и быстрее, чем POST, и может использоваться в большинстве случаев.

POST-запросы используются, если:

  • Не может быть использован эшированный файл (нужно обновлять файл или базу данных на сервере).
  • Отправка большого количества данных на сервер (POST не имеет ограничений по размеру).
  • Отправка пользовательского ввода (который может содержать неизвестные символы), POST более надежный и безопасный, чем GET.

Примеры использования

Чтение файла с сервера

  • Создаём объект типа XMLHttpRequest (в переменной httpRequest)
  • Задаём функцию, которая запускается при любых изменениях состояния этого объекта (привязываем её к событию onreadystatechange созданного объекта). Эта функция при каждом изменении состояния:

проверяет, завершена ли передача данных (XMLHttpRequest.DONE) и завершена успешно (status === 200)

если - да, то свойство responseText прописывается в DIV с ID="outdiv"

если - нет, то в этот DIV прописывается сообщение об ошибке

  • Вызываем метод open() объекта XMLHttpRequest, который создали в переменной httpRequest (httpRequest.open('GET', 'AjaxTest.txt', true)). Этот метод создаёт асинхронный запрос на сервер, по методу GET, для получения с сервера файла с именем AjaxTest.txt
  • Методом send() отправляем запрос на сервер. 
  • Наша функция постоянно анализирует состояние запроса, и в случае его успешного завершения, содержимое текстового файла будет находиться в переменной httpRequest.responseText


// Create XMLHttpRequest object // Old compatibility code, no longer needed. if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ... httpRequest = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE 6 and older httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } httpRequest.onreadystatechange = function() { // process the server response if (httpRequest.readyState === XMLHttpRequest.DONE) { if (httpRequest.status === 200) { document.getElementById("outdiv").innerHTML=httpRequest.responseText; } else { document.getElementById("outdiv").innerHTML = 'A problem encountered processing HTTP request.'; } } }; httpRequest.open('GET', 'AjaxTest.txt', true); httpRequest.send(null);