Рубрика «AJAX»

Страница 2 из 4«1234»

Общее представление об AJAX. Часть 5

31 Июль 2008, 13:38

Получение множественных данных от сервера

По умолчанию свойство responxeText используется лишь однократно, поэтому все данные, возвращаемые сервером, помещаются в одной строке. Но зачастую при вызове посредством объекта XMLHttpRequesr требуется получить в ответ не один, а множество фрагментов данных. Эту задачу можно решить по-разному, но, вероятно, самый простой способ состоит в том, чтобы возвратить множественные данные, разделив их фрагменты специальным символом, который отсутствует в самих данных (например, символом табуляции или перевода строки). А обработку полученной информации можно выполнить средствами JavaScript.

В нашем примере по протоколу HTTP на сервере запрашивается приведенный ниже текстовой файл multiple.txt. (В реальной ситуации на сервере для этих целей обычно служит динамический сценарий, но для демонстрации самого принципа подойдет и статический текстовой файл.)

first
second
third

В приведенном ниже коде осуществляется доступ к отдельным фрагментам возвращаемых данных:

var XMLHttp = getXMLHttp();
XMLHttp.open("GET", "multiple.txt", true);
XMLHttp.onreadystatechange = handlerFunction;
XMLHttp.send(null);

function handlerFunction() {
  if (XMLHttp.readyState == 4) {
    var data = XMLHttp.responseText.split("\n");
    window.alert(data[0] + " " + data[1] + " " + data[2]);
  }
}

function getXMLHttp() {
  var XMLHttp = null;
  if (window.XMLHttpRequest) {
    try {
      XMLHttp = new XMLHttpRequest();
    } catch (e) { }
  } else if (window.ActiveXObject) {
    try {
      XMLHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) { }
    }
  }
  return XMLHttp;
}

Прерывание запроса HTTP

В зависимости от типа браузера одновременно допускается ограниченное число запросов. При наличии множества компонентов AJAX на странице это может привести к серьёзным осложнениям. В таком случае может возникнуть потребность в прерывании запроса HTTP.

Для этой цели служит метод abort(). В приведенном ниже фрагменте кода запрос прерывается только в том случае, если он не был полностью выполнен по истечении пяти секунд. Такой режим работы демонстрируется с помощью PHP-скрипта delay.php, выполняющегося с задержкой 10 секунд:

<?php
  sleep(10);
  echo 'результат запроса';
?>

При этом проверяется значение свойство readyState. Если оно принимает значение 0 или 4, то прерывать, собственно, нечего.

var XMLHttp = getXMLHttp();
XMLHttp.open("GET", "delay.php?" + Math.random(), true);
XMLHttp.onreadystatechange = handlerFunction;
XMLHttp.send(null);
window.setTimeout("timeout();", 5000);

function handlerFunction() {
  if (XMLHttp.readyState == 4) {
    window.alert("Returned data: " + XMLHttp.responseText);
  }
}

function timeout() {
  if (XMLHttp.readyState != 4 && XMLHttp.readyState != 0) {
    XMLHttp.onreadystatechange = function() { };
    XMLHttp.abort();
    window.alert("Request aborted");
  }
}

function getXMLHttp() {
  var XMLHttp = null;
  if (window.XMLHttpRequest) {
    try {
      XMLHttp = new XMLHttpRequest();
    } catch (e) { }
  } else if (window.ActiveXObject) {
    try {
      XMLHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) { }
    }
  }
  return XMLHttp;
}

Ссылки по теме:

Рубрика: AJAX  |  Ваш отзыв

Общее представление об AJAX. Часть 4

30 Июль 2008, 10:11

Отправка синхронного запроса

В большинстве случаев запросы HTTP, формируемые посредством объекта XMLHttpRequest, являются асинхронными. Именно поэтому и требуется функция обратного вызова. Но если указать логическое значение false в качестве третьего параметра метода open(), запрос станет синхронным, а это означает, что выполнение сценария приостанавливается до тех пор, пока от сервера не возвратятся данные. В следующем фрагменте кода демонстрируется отправка синхронного запроса:

<script type="text/javascript">
function syncRequest() {
  var XMLHttp = getXMLHttp();
  XMLHttp.open("GET", "sync.php", false);
  XMLHttp.send(null);
  document.getElementById("output").innerHTML =
    "Returned data: " + XMLHttp.responseText;
}

function getXMLHttp() {
  var XMLHttp = null;
  if (window.XMLHttpRequest) {
    try {
      XMLHttp = new XMLHttpRequest();
    } catch (e) { }
  } else if (window.ActiveXObject) {
    try {
      XMLHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) { }
    }
  }
  return XMLHttp;
}</script>
<p id="output"></p>
<input type="button" value="Send" onclick="syncRequest();" />

Серверный скрипт sync.php

<?php
  sleep(5);
  echo 'Server response';
?>

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

Ссылки по теме:

Рубрика: AJAX  |  Ваш отзыв

Общее представление об AJAX. Часть 3

29 Июль 2008, 11:00

Отправка запроса POST

При отправке запроса GET все параметры указываются как составная часть URL. А при отправке запроса POST эти данные указываются в теле самого запроса HTTP. Следует, однако, иметь в виду, что если требуется доступ к этим параметрам на стороне сервера, то необходимо правильно сформировать HTTP-заголовок Content-type. Это делается с помощью метода setRequestHeader() следующим образом:

var XMLHttp = getXMLHttp();
XMLHttp.open("POST", "post.php", true);
XMLHttp.onreadystatechange = handlerFunction;
name = encodeURIComponent("Вася");
surname = encodeURIComponent("Пупкин");
XMLHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
XMLHttp.send("name=" + name + "&surname=" + surname);

function handlerFunction() {
  if (XMLHttp.readyState == 4) {
    window.alert("Returned data: " + XMLHttp.responseText);
  }
}

function getXMLHttp() {
  var XMLHttp = null;
  if (window.XMLHttpRequest) {
    try {
      XMLHttp = new XMLHttpRequest();
    } catch (e) { }
  } else if (window.ActiveXObject) {
    try {
      XMLHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) { }
    }
  }
  return XMLHttp;
}

Приведенный выше сценарий отправляет по указанному адресу POST-запрос. Скрипт post.php просто возвращает полученные данные:

<?php
  header('Content-Type: text/plain; charset=UTF-8');
  if (isset($_POST['name']) && isset($_POST['surname'])) {
    echo $_POST['name'] . ' ' . $_POST['surname'];
  } else {
    echo 'No data sent';
  }
?>

Разумеется, по запросу POST можно предоставить любой другой сценарий в рамках соответствующей серверной технологии или же отправить простой текстовой файл.

Ссылки по теме:

Рубрика: AJAX  |  Отзывов: 2
Страница 2 из 4«1234»