С помощью responseText и responseXML Вы можете принять данные отправленные сервером.

Состояния готовности сервера

С помощью свойства readyState Вы можете узнать состояние готовности сервера.

Сервер может находится в 5 состояниях готовности:

Запрос не инициализирован;
Установлено подключение к серверу;
Запрос получен;
Обработка запроса;
Обработка запроса закончена и ответ готов.

Во время обработки запроса свойство readyState поочередно принимает значения от 0 до 4.

Пример

var xhttp=new XMLHttpRequest();
xhttp.onreadystatechange=function(){
   if (xhttp.readyState==0)
      document.getElementById('rs0').style.display='block';
   if (xhttp.readyState==1)
      document.getElementById('rs1').style.display='block';
   if (xhttp.readyState==2)
      document.getElementById('rs2').style.display='block';
   if (xhttp.readyState==3)
      document.getElementById('rs3').style.display='block';
   if (xhttp.readyState==4){
      document.getElementById('rs4').style.display='block';
      document.getElementById('result').innerHTML=xhttp.responseText;
   }
}
xhttp.open('GET','state.php',true);
xhttp.send();

Попробовать в редакторе

Свойство status

С помощью свойства status Вы можете узнать код ответа на Ваш запрос.

Код 200 означает - запрос обработан успешно, код 404 означает - страница не существует.

Пример

function requestBad(){
   var xhttp=new XMLHttpRequest();
   xhttp.onreadystatechange=function(){
      document.getElementById('result').innerHTML=xhttp.status;
   }
   xhttp.open('GET','nepage',true);
   xhttp.send();
}
function requestGood(){
   var xhttp=new XMLHttpRequest();
   xhttp.onreadystatechange=function(){
      document.getElementById('result').innerHTML=xhttp.status;
   }
   xhttp.open('GET','test.xml',true);
   xhttp.send();
}

Попробовать в редакторе

Обратите внимание: содержимое данного свойства доступно только для чтения.

Событие onreadystatechange

Событие onreadystatechange выполняет код при изменении содержимого свойства readyState (т.е. во время успешного запроса код функции выполняется 4 раза).

Для того, чтобы корректно обработать ответ сервера необходимо добавить проверку условия if (XMLHttpRequest.readyState==4 && XMLHttpRequest.status==200) и только после этого получать и обрабатывать соответствующие данные.

Пример

var xhttp=new XMLHttpRequest();
xhttp.onreadystatechange=function(){
   if (xhttp.readyState==0){
      document.getElementById('rs0').style.display='block';
      document.getElementById('res0').innerHTML=responseText; 
   }  
   if (xhttp.readyState==1){
      document.getElementById('rs1').style.display='block';
      document.getElementById('res1').innerHTML=responseText; 
   }
   if (xhttp.readyState==2){
      document.getElementById('rs2').style.display='block';
      document.getElementById('res2').innerHTML=responseText;
   }
   if (xhttp.readyState==3){
      document.getElementById('rs3').style.display='block';
      document.getElementById('res3').innerHTML=responseText;
   }
   if (xhttp.readyState==4){
      document.getElementById('rs4').style.display='block';
      document.getElementById('res4').innerHTML=xhttp.responseText;
   }
}
xhttp.open('GET','state.php',true);
xhttp.send();

Попробовать в редакторе

Принятие ответа сервера

Для того, чтобы принять ответ сервера используйте свойства объекта XMLHttpRequest responseText и responseXML.

Свойство	Описание
responseText	Хранит ответ сервера как строку символов.
responseXML	Хранит ответ сервера как XML файл.

Свойство responseText

Если запрошенные у сервера данные не являются XML данными, то для считывания ответа сервера используйте свойство responseText.

Пример

xhttp=new XMLHttpRequest();
xhttp.onreadystatechange=function(){
  if (xhttp.readyState==4 && xhttp.status==200)
  document.getElementById("ajax").innerHTML=xhttp.responseText;
  }
xhttp.open("GET","testfile.txt",true);
xhttp.send();

Попробовать в редакторе

Свойство responseXML

Если Вы ожидаете получить от сервера XML данные используйте для считывания ответа сервера свойство responseXML.

Пример

xhttp=new XMLHttpRequest();
xhttp.onreadystatechange=function(){
   if (xhttp.readyState==4 && xhttp.status==200){
      var r=xhttp.responseXML;
      document.getElementById('ajax').innerHTML="Содержимое первого тэга name 
      в XML файле: "+ r.getElementsByTagName('name')[0].childNodes[0].nodeValue;
      var dep=r.getElementsByTagName('dept');
      var cont="Содержимое всех тэгов dept в XML файле: <br />";
      for (var i=0;i<dep.length;i++){
         cont+=(i+1)+". "+dep[i].childNodes[0].nodeValue+" руб.<br />";
      }
   document.getElementById('ajax1').innerHTML=cont;
   }
}
xhttp.open("GET","test.xml",true);
xhttp.send();

Попробовать в редакторе

Сделайте сами

Задание 1 запросите файл test.xml из скрипта, примите ответ с помощью responseXML и затем:

выведите содержимое 3 и 4 тэга name на страницу
выведите содержимое 2 и 3 тэга surname на страницу
выведите содержимое 1 тэга dept на страницу
выведите содержимое всех тэгов surname, которые присутствуют в файле на страницу

Пример

<script type='text/javascript'>
/* Пишите код здесь */
</script>
</head>
<body>
<!--
Пишите код здесь
-->
</body>

Попробовать в редакторе

« Предыдущая глава Следующая глава »