DOM - объект XMLHttpRequest
Объект XMLHttpRequest устанавливает среду между клиентской и серверной веб-страницей, которая может использоваться многими языками сценариев, такими как JavaScript, JScript, VBScript и другими веб-браузерами, для передачи данных XML и управления ими.
С помощью объекта XMLHttpRequest можно обновлять часть веб-страницы без перезагрузки всей страницы, запрашивать и получать данные с сервера после загрузки страницы и отправлять данные на сервер.
Синтаксис
Объект XMLHttpRequest может быть создан следующим образом:
xmlhttp = new XMLHttpRequest();Чтобы обрабатывать все браузеры, включая IE5 и IE6, проверьте, поддерживает ли браузер объект XMLHttpRequest, как показано ниже:
if(window.XMLHttpRequest) // for Firefox, IE7+, Opera, Safari, ... {
xmlHttp = new XMLHttpRequest();
} else if(window.ActiveXObject) // for Internet Explorer 5 or 6 {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}Примеры загрузки XML-файла с помощью объекта XMLHttpRequest можно найти здесь.
Методы
В следующей таблице перечислены методы объекта XMLHttpRequest:
| S.No. | Метод и описание |
|---|---|
| 1 | abort() Завершает текущий сделанный запрос. |
| 2 | getAllResponseHeaders() Возвращает все заголовки ответа в виде строки или null, если ответа не было. |
| 3 | getResponseHeader() Возвращает строку, содержащую текст указанного заголовка, или null, если ответ еще не получен или заголовок в ответе не существует. |
| 4 | open(method,url,async,uname,pswd) Он используется вместе с методом Send для отправки запроса на сервер. Открытый метод определяет следующие параметры -
|
| 5 | send(string) Он используется для отправки запроса, работая вместе с методом Open. |
| 6 | setRequestHeader() Заголовок содержит пару метка / значение, на которую отправляется запрос. |
Атрибуты
В следующей таблице перечислены атрибуты объекта XMLHttpRequest -
| S.No. | Атрибут и описание |
|---|---|
| 1 | onreadystatechange Это свойство, основанное на событиях, которое устанавливается при каждом изменении состояния. |
| 2 | readyState Это описывает текущее состояние объекта XMLHttpRequest. Есть пять возможных состояний свойства readyState:
|
| 3 | responseText Это свойство используется, когда ответ сервера представляет собой текстовый файл. |
| 4 | responseXML Это свойство используется, когда ответ от сервера является файлом XML. |
| 5 | status Предоставляет статус объекта запроса Http в виде числа. Например, «404» или «200». |
| 6 | statusText Предоставляет статус объекта запроса Http в виде строки. Например, «Не найдено» или «ОК». |
Примеры
Содержимое node.xml показано ниже -
<?xml version = "1.0"?>
<Company>
<Employee category = "Technical">
<FirstName>Tanmay</FirstName>
<LastName>Patil</LastName>
<ContactNo>1234567890</ContactNo>
<Email>[email protected]</Email>
</Employee>
<Employee category = "Non-Technical">
<FirstName>Taniya</FirstName>
<LastName>Mishra</LastName>
<ContactNo>1234667898</ContactNo>
<Email>[email protected]</Email>
</Employee>
<Employee category = "Management">
<FirstName>Tanisha</FirstName>
<LastName>Sharma</LastName>
<ContactNo>1234562350</ContactNo>
<Email>[email protected]</Email>
</Employee>
</Company>Получить конкретную информацию о файле ресурсов
В следующем примере показано, как получить конкретную информацию из файла ресурсов с помощью метода getResponseHeader () и свойства readState .
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = iso-8859-2" />
<script>
function loadXMLDoc() {
var xmlHttp = null;
if(window.XMLHttpRequest) // for Firefox, IE7+, Opera, Safari, ... {
xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject) // for Internet Explorer 5 or 6 {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}
function makerequest(serverPage, myDiv) {
var request = loadXMLDoc();
request.open("GET", serverPage);
request.send(null);
request.onreadystatechange = function() {
if (request.readyState == 4) {
document.getElementById(myDiv).innerHTML = request.getResponseHeader("Content-length");
}
}
}
</script>
</head>
<body>
<button type = "button" onclick="makerequest('/dom/node.xml', 'ID')">Click me to get the specific ResponseHeader</button>
<div id = "ID">Specific header information is returned.</div>
</body>
</html>Исполнение
Сохраните этот файл как elementattribute_removeAttributeNS.htm на пути к серверу (этот файл и node_ns.xml должны находиться на одном пути на вашем сервере). Мы получим результат, как показано ниже -
Before removing the attributeNS: en
After removing the attributeNS: nullПолучить информацию заголовка файла ресурсов
В следующем примере показано, как получить информацию заголовка файла ресурсов с помощью метода getAllResponseHeaders() используя свойство readyState.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<script>
function loadXMLDoc() {
var xmlHttp = null;
if(window.XMLHttpRequest) // for Firefox, IE7+, Opera, Safari, ... {
xmlHttp = new XMLHttpRequest();
} else if(window.ActiveXObject) // for Internet Explorer 5 or 6 {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}
function makerequest(serverPage, myDiv) {
var request = loadXMLDoc();
request.open("GET", serverPage);
request.send(null);
request.onreadystatechange = function() {
if (request.readyState == 4) {
document.getElementById(myDiv).innerHTML = request.getAllResponseHeaders();
}
}
}
</script>
</head>
<body>
<button type = "button" onclick = "makerequest('/dom/node.xml', 'ID')">
Click me to load the AllResponseHeaders</button>
<div id = "ID"></div>
</body>
</html>Исполнение
Сохраните этот файл как http_allheader.html на пути к серверу (этот файл и node.xml должны находиться на одном пути на вашем сервере). Мы получим результат, как показано ниже (зависит от браузера) -
Date: Sat, 27 Sep 2014 07:48:07 GMT Server: Apache Last-Modified:
Wed, 03 Sep 2014 06:35:30 GMT Etag: "464bf9-2af-50223713b8a60" Accept-Ranges: bytes Vary: Accept-Encoding,User-Agent
Content-Encoding: gzip Content-Length: 256 Content-Type: text/xml