Все современные браузеры имеют встроенный XMLHttpRequest объект, чтобы запрашивать данные с сервера.
Все основные браузеры имеют встроенный XML-анализатор для доступа и управления XML.
Объект XMLHttpRequest
Объект XMLHttpRequest может быть использован для запроса данных с веб-сервера.
Объект XMLHttpRequest является a developers dream , потому что вы можете:
- Обновление веб-страницы без перезагрузки страницы
- Запрос данных с сервера - после загрузки страницы
- Получение данных с сервера - после загрузки страницы
- Отправка данных на сервер - в фоновом режиме
XMLHttpRequest Пример
При вводе символа в поле ввода , ниже, XMLHttpRequest отправляется на сервер, а также некоторые предложения имя возвращаются (from the server) :
пример
Start typing a name in the input field below:
Suggestions:
Отправка XMLHttpRequest
Все современные браузеры имеют встроенный объект XMLHttpRequest.
Общий синтаксис JavaScript для его использования выглядит следующим образом:
пример
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
// Action to be performed when the
document is read;
}
};
xhttp.open("GET", " filename ", true);
xhttp.send(); Попробуй сам " Создание объекта XMLHttpRequest
Первая строка в приведенном выше примере создает XMLHttpRequest Objet:
var xhttp = new XMLHttpRequest();
Onreadystatechange Событие
ReadyState свойство содержит статус XMLHttpRequest.
Событие onreadystatechange срабатывает каждый раз , когда readyState изменения.
Во время запроса сервера, readyState изменяется от 0 до 4:
0: Запрос не инициализирован
1: соединение с сервером установлено
2: запрос получен
3: обработка запроса
4: просить закончен и будет готов
В onreadystatechange собственности, указать функцию, которая будет выполняться, когда readyState изменения:
xhttp.onreadystatechange = function()
Когда readyState равно 4, и состояние 200, ответ готов:
if (xhttp.readyState == 4 && xhttp.status == 200)
XMLHttpRequest Свойства и методы
| метод | Описание |
|---|---|
| new XMLHttpRequest() | Создает новый объект XMLHttpRequest |
| open( method, url, async ) | Определяет тип запроса method : тип запроса: GET или POST url : расположение файла async : истинный (asynchronous) или ложным (synchronous) |
| send() | Посылает запрос на сервер (used for GET) |
| send( string ) | Посылает строку запроса на сервер (used for POST) |
| onreadystatechange | Функция, которая вызывается при изменении свойства readyState |
| readyState | Статус XMLHttpRequest 0: Запрос не инициализирован 1: соединение с сервером установлено 2: запрос получен 3: обработка запроса 4: просить закончен и будет готов |
| status | 200: OK 404 Страница не найдена |
| responseText | Данные ответа в виде строки |
| responseXML | Данные отклика в виде данных XML |
Доступ через домены
По соображениям безопасности, современные браузеры не позволяют доступа между доменами.
Это означает, что как веб-страницы и файл XML он пытается загрузить, должен находиться на том же сервере.
Примеры на w3ii все открытые файлы XML, расположенные на w3ii домене.
Если вы хотите использовать приведенный выше пример на одном из ваших собственных веб-страниц, файлы XML вы нагрузка должна быть расположена на собственном сервере.
ResponseText недвижимости
Свойство responseText возвращает ответ в виде строки.
Если вы хотите использовать ответ в виде текстовой строки, используйте свойство responseText:
ResponseXML недвижимости
Свойство responseXML возвращает ответ как объект XML DOM.
Если вы хотите использовать в качестве ответа на объект XML DOM, следует использовать свойство responseXML:
пример
Запросить файл cd_catalog.xml и использовать ответ как объект XML DOM:
xmlDoc = xmlhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt; Попробуй сам " GET или POST?
GET проще и быстрее, чем POST, и может использоваться в большинстве случаев.
Тем не менее, всегда использовать POST запросы, когда:
- Кэшируемый файл не вариант (update a file or database on the server)
- Отправка большого количества данных на сервер (POST не имеет ограничений по размеру)
- Отправка пользовательского ввода (which can contain unknown characters) , POST является более надежной и безопасной , чем GET
URL - файл на сервере
Параметр URL в open() метод, является обращение к файлу на сервере:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
Файл может быть любого типа файла, например .txt и .xml или файлы сценариев сервера, как .asp и .php (который может выполнять действия на сервере перед отправкой ответ обратно).
Асинхронный - Верно или нет?
Для того, чтобы отправить запрос в асинхронном режиме, параметр асинхронной из open() метод должен быть установлен верно:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
Отправка асинхронно запрашивает огромный шаг вперед для веб-разработчиков. Многие из задач, выполняемых на сервере, очень много времени.
Отправляя асинхронном JavaScript не придется ждать ответа от сервера, но может вместо того, чтобы:
- выполнять другие сценарии во время ожидания ответа сервера
- иметь дело с ответом, когда ответ готов
Асинхронный = True
При использовании асинхр = True, задать функцию для выполнения, когда ответ готов в onreadystatechange события:
пример
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("demo").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "xmlhttp_info.txt", true);
xmlhttp.send(); Попробуй сам " Асинхронный = False
Чтобы использовать асинхр = ложь, измените третий параметр в open() метода к ложным:
xmlhttp.open("GET", "xmlhttp_info.txt", false);
Использование асинхр = False не рекомендуется, но в течение нескольких небольших запросов это может быть в порядке.
Помните, что JavaScript не будет продолжать выполняться, пока ответ сервера не будет готов. Если сервер занят или медленно, то приложение будет висеть или остановить.
Note: При использовании асинхронной = ложь, не пишите функцию onreadystatechange - просто поместите код после send() заявление:
пример
xmlhttp.open("GET", "xmlhttp_info.txt", false);
xmlhttp.send();
document.getElementById("demo").innerHTML = xmlhttp.responseText; Попробуй сам " XML Parser
Все современные браузеры имеют встроенный XML-анализатор.
Объектной модели документа XML (the XML DOM) содержит много методов для доступа и редактирования XML.
Тем не менее, до того, как XML-документ может быть доступен, он должен быть загружен в объект XML DOM.
XML-анализатор может читать обычный текст и преобразовать его в объект XML DOM.
Синтаксический текстовая строка
Этот пример анализирует текстовую строку в объект DOM XML, и извлекает информацию из него с JavaScript:
пример
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
Попробуй сам " Старые браузеры (IE5 and IE6)
Старые версии Internet Explorer (IE5 and IE6) не поддерживают объект XMLHttpRequest.
Чтобы справиться с IE5 и IE6, проверьте, поддерживает ли браузер объект XMLHttpRequest, либо создать ActiveXObject:
пример
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
}
else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} Попробуй сам " Старые версии Internet Explorer (IE5 and IE6) не поддерживают объект DOMParser.
Чтобы справиться с IE5 и IE6, проверьте, поддерживает ли браузер объект DOMParser, либо создать ActiveXObject:
пример
if (window.DOMParser) {
// code for modern browsers
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
}
else {
// code for old IE browsers
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(text);
}
Попробуй сам " 
Еще примеры
Получить информацию заголовка с getAllResponseHeaders()
Получить информацию заголовка ресурса (file) .
Получить конкретную информацию заголовка с getResponseHeader()
Получить конкретную информацию заголовка ресурса (file) .
Получить содержимое файла ASP
Как веб-страница может обмениваться данными с веб-сервером в то время как символы типа пользователя в поле ввода.
Извлечения содержимого из базы данных
Как веб-страница может извлечь информацию из базы данных с объектом XMLHttpRequest.
Получить содержимое файла XML
Создание XMLHttpRequest для извлечения данных из файла XML и отображать данные в HTML-таблице.