Каковы свойства XMLHttpRequest?
В этой статье мы увидим, что такое объект XMLHttpRequest, а также узнаем их свойства и их реализацию с помощью иллюстраций.
Объект XMLHTTPRequest — это API, который используется для получения данных с сервера. XMLHTTPRequest в основном используется в Ajax-программировании. Он извлекает данные любого типа, такие как JSON, XML, текст и т. д. Он запрашивает данные в фоновом режиме и обновляет страницу без перезагрузки страницы на стороне клиента. Объект XMLHTTPRequest используется для асинхронной связи между клиентом и сервером.
Из соображений безопасности современные браузеры не поддерживают его в разных доменах. Следовательно, любая веб-страница, XML/HTML/txt или страница любого формата должны располагаться на одном сервере.
Свойства объекта XMLHttpRequest:
- onload: когда запрос получен (загружен), он определяет вызываемую функцию.
- onreadystatechange : функция будет вызываться всякий раз, когда изменяется свойство readyState.
- readyState : определяет текущее состояние запроса или содержит текущий статус XMLHttpRequest. Существует пять состояний запроса:
- readyState= 0 : это означает, что запрос не инициализирован.
- readyState= 1 : Установление соединения с сервером.
- readyState= 2 : Запрос получен
- readyState= 3 : Во время обработки запроса
- readyState= 4 : Ответ готов после завершения запроса
- responseText : он вернет данные, полученные запросом, в виде строки.
- responseXML : он вернет данные, полученные по запросу, в виде данных XML.
- status : он вернет номер статуса запроса. (т.е. 200 и 404 для OK и NOT FOUND соответственно).
- statusText : возвращает текст состояния в виде строки. (т.е. OK и NOT FOUND для 200 и 404 соответственно).
Мы рассмотрим эти концепции и поймем их с помощью иллюстраций.
Пример 1: В этом примере страница отображается с кнопкой «Получить содержимое». При нажатии кнопки onload определяет вызываемую функцию. Он попытается получить доступ к gfg.html , который присутствует на том же сервере, и, поскольку он доступен, он возьмет содержимое и отобразит его в теге <div>
XMLHttpRequest.html
<!DOCTYPE html><html> <head> <title>XMLHttpRequest Object</title></head> <body> <div id="gfgdemo"> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> The XMLHttpRequest Object onLoad Example </h3> <button type="button" onclick="loadDoc()"> Get the contents </button> </div> <script> function loadDoc() { const xmlhttp = new XMLHttpRequest(); xmlhttp.onload = function() { document.getElementById("gfgdemo").innerHTML = this.responseText; } // Trying to open with GET method. // We just want to get the contents from gfg.txt // which is present in the server xmlhttp.open("GET", "gfg.html"); xmlhttp.send(); } </script></body></html> |
gfg.html
<!DOCTYPE html><html> <body> <h2>XMLHttpRequest Properties</h2> <table border="2"> <th>onload</th> <th>onreadystatechange</th> <th>readyState</th> <th>responseText</th> <th>responseXML</th> <th>status</th> <th>statusText</th> </table></body></html> |
Вывод: здесь мы видим, что при нажатии кнопки вызывается загрузка и отображается содержимое файла gfg.html .
Пример 2. В этом примере показано свойство onreadystatechange , которое будет вызываться при изменении свойства readyState . Здесь мы будем использовать вышеуказанный файл gfg.html .
onreadystatechange.html
<!DOCTYPE html><html> <head> <title>XMLHttpRequest Object</title></head> <body> <div id="gfgdemo"> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> The XMLHttpRequest Object onreadystatechange Example </h3> <button type="button" onclick="loadDoc()"> onreadystatechange demo </button> </div> <script> function loadDoc() { const xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { // Only when readyState is 4 and status as 200, // we can get proper response if(this.readyState == 4 && this.status == 200) { document.getElementById("gfgdemo").innerHTML = this.responseText; } }; xmlhttp.open("GET", "gfg.html"); xmlhttp.send(); } </script></body></html> |
Объяснение: при выполнении этого, поскольку gfg.html присутствует на том же сервере и при условии отсутствия проблем с его получением, мы получим readyState как 4 и ответ как 200, и, следовательно, мы можем увидеть приведенный ниже вывод.
Выход:
Примечание. Очень важно отметить, что открываемый URL-адрес должен быть доступен на том же сервере. В противном случае будет выдана междоменная ошибка.
Пример 3: В этом примере мы используем приведенный выше пример кода. Запрашиваемая страница может быть HTML/XML/текстовым файлом. Здесь мы попытаемся получить содержимое из XML-файла.
foodDetails.xml
<breakfast_menu> <food> <name>Idli</name> <price>30</price> <description> Famous South Indian Healthy Food </description> <calories>650</calories> </food> <food> <name>Dosa</name> <price>100</price> <description> Famous South Indian Most wanted Food </description> <calories>900</calories> </food></breakfast_menu> |
XMLHttpRequests.html
<!DOCTYPE html><html> <head> <title>XMLHttpRequest Object</title></head> <body> <div id="gfgdemo"> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> The XMLHttpRequest Object onreadystatechange Example </h3> <button type="button" onclick="loadDoc()"> onreadystatechange demo </button> </div> <script> function loadDoc() { const xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { // Only when readyState is 4 and status as 200, // we can get proper response) if(this.readyState == 4 && this.status == 200) { document.getElementById("gfgdemo").innerHTML = this.responseText; } }; xmlhttp.open("GET", "foodDetails.xml"); xmlhttp.send(); } </script></body></html> |
Вывод: из вывода мы видим, что содержимое XML-файла отображается.
Свойства XMLHttpRequest очень полезны для открытия веб-страницы, которая находится на том же сервере. Внутри веб-страницы мы можем хранить необходимую информацию, например, получать содержимое из вызова Rest API и задавать ответ на него элементам управления HTML, присутствующим в вызывающем файле или XML-файле.