AJAX - Asynchronous Javascript And XML - подход к решению задачи взаимодействия с загружаемым ресурсом, подразумевающий, что после отправки запроса не происходит перезагрузки страницы в окне браузера и не происходит задержки выполнения действий на странице.
Реализуется с помощью объекта XMLHttpRequest.
С помощью этого подхода подгружают текстовые, JSON и XML-файлы.
Перед разбором примера сначала научитель отправлять GET-запросы и убедитесь в том, что вам понятна основа механизма обмена данными по протоколу HTTP http://dist-learn.blogspot.com/2011/10/http-telnet.html
В простейшем случае отправляется запрос в пределах одного доменного имени.
Рассмотрите файл http://dist-learn.spb.ru//samples/ajax_test/q.txt
А теперь рассмотрите сценарий, который создает объект XMLHttpRequest, отправляет асинхронный GET-запрос (третий параметр true), посылает его и регистрирует функцию обратного вызова (callback), которая включается всякий раз, когда меняется состояние объекта (readyState). Как только оно принимает значение "4" (ответ пришёл), все содержимое в виде текста выводится на экран.
var xhr = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP'); xhr.open('GET', '/samples/ajax_test/q.txt', true); xhr.send(); xhr.onreadystatechange = function(){ if (xhr.readyState != 4) return; document.body.innerHTML = "<p>" + xhr.responseText + "</p>"; }
Работающий пример: http://j.mp/ajax-00
Рассмотрите файл http://dist-learn.spb.ru/q.xml
Вот сценарий, который извлекает из этого файла формулировки вопросов и выводит их на экран в виде списка
Работающий пример: http://j.mp/ajax-01
var xhr = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP'); xhr.open('GET', '/q.xml', true); xhr.send(); xhr.onreadystatechange = function(){ if (xhr.readyState != 4) return; var x = xhr.responseXML; var xq = x.getElementsByTagName("вопрос"); var newList = document.createElement("ul"); for (i=0; i < xq.length; i++) { var newLi = document.createElement("li"); newLi.appendChild(document.createTextNode(xq[i].getAttribute("формулировка"))); newList.appendChild(newLi) } document.body.appendChild(newList); }
Дерево XML в примере оказывается после загрузки ресурса в свойстве responseXML
Соответственно далее извлекаются все элементы "вопрос" и по значению их атрибута "формулировка" строится набор элементов списка.
***************
Cross-domain
Чтобы браузер (клиент) мог принять ответ от кроссдоменного сценария, на стороне сервера должен генерироваться заголовок, разрешающий этого клиента (т.е. домен компа, с которого пришел запрос; возможно также указать звездочку).
Нижеследующую страницу можно запустить на локальном сервере или просто открыть из папки в браузере.
<!DOCTYPE html> <html> <head> <title>HTML5 JQuery CrossAJAX</title> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> $(function(){ $("h1").click(function(){ $.ajax({ type: "GET", url: "http://dist-learn.spb.ru/request0.php", data: {Имя: 'Джон', Фамилия: 'Резиг'}, success: function(msg){ $("body").html(msg); } }); }) }) </script> </head> <body> <article> <h1>Нажми чтобы сделать AJAX-запрос</h1> <p></p> </article> </body> </html>
Вот какой сценарий находится на той стороне:
<? header("Access-Control-Allow-Origin: *"); echo $_SERVER["REQUEST_METHOD"]; echo "<pre>nn"; foreach ($_REQUEST as $k => $v) { echo "Param $k" . " : " . $v; echo "n"; } echo "nn"; foreach (getallheaders() as $name => $value) { echo "$name: $valuen"; } echo "</pre>"; ?>
Вот что увидит пользователь, щелкнувший по надписи:
GET
Param Имя : Джон Param Фамилия : Резиг Accept: */* Accept-Encoding: gzip, deflate Accept-Language: en-us Connection: close Host: dist-learn.spb.ru Origin: http://localhost:8888 Referer: http://localhost:8888/cross1.html User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_1) AppleWebKit/536.25 (KHTML, like Gecko) Version/6.0 Safari/536.25 X-Real-IP: 95.27.195.96 X-Real-Port: 49534
easyXDM - решение для кроссдоменного AJAX
Комментариев нет:
Отправить комментарий