среда, 20 июня 2012 г.

Ajax и с чем его едят




Не так давно начал тестить новое для себя понятие - Ajax. Javascript, совмещенный с PHP дает очень интересные возможности программирования веб-приложений, но до недавнего времени работа с ним для меня была как дайвинг в болоте - вроде бы работает, но непонятно, как, порой возникают ошибки, лечатся, но опять же, не пойми как. И вот, более-менее все стало по своим местам. Итак, обо всем по порядку: Архитектура Клиент-Сервер-Клиент: подразумевает следующее: пользователь(клиент) отправляет запрос на сервер, там его запрос обрабатывается, и возвращается результат обработки введенных данных. Обычно для реализации этой архитектуры достаточно самого что ни на есть обыкновенного PHP. Это сценарий, выполняемый на стороне сервера, куда отправляются данные с локального(клиентского) компьютера. Все бы хорошо, но работа скрипта подразумевает перезагрузку страницы, что влечет за собой обнуление сохраненных Java-переменных, нарушение восприятия, ну и вообще просто неприятно. И тут как раз и приходит на выручку Ajax. Ajax позволяет запускать PHP-скрипт не перегружая страницу, и возвращать результат обработки непосредственно в Javascript. Итак:


<script>
xHR=new XMLHttpRequest();
</script>


 В переменную xHR мы записываем экземпляр класса XMLHttpRequest, который и обеспечивает обмен данными между Javascript и PHP, и все бы хорошо, если бы не треклятый ослик, который и тут нам пихает палки в колеса. Дело в том, что Internet Explorer не умеет работать с объектом XMLHttpRequest, для этого у него есть специализированная "примочка" - ActiveX. Итак, чтобы Ajax заработал и на осле, модифицируем наш скрипт:

<script>
if(window.XMLHttpRequest){
xHR=new XMLHttpRequest();
}else{
if(window.activeXObject){
xHR=new activeXObject("Microsoft.XMLHTTP");
}else{
alert("Ваш браузер не поддерживает Ajax!");
}
}
</script>

Инструкция "if(window...)" означает - "если сможешь, сделай так...". Итак, начало положено, что же дальше? А дальше нам предстоит обеспечить передачу данных PHP-скрипту, для чего мы сделаем следующее:

<script>
if(window.XMLHttpRequest){
xHR=new XMLHttpRequest();
}else{
if(window.activeXObject){
xHR=new activeXObject("Microsoft.XMLHTTP");
}else{
alert("Ваш браузер не поддерживает Ajax!");
}
}

xHR.open("POST","myScript.php",false);
xHR.send("myVar=myVarValue");
</script>

В строке /xHR.open("POST","myScript.php",false);/ мы инициировали передачу данных серверному сценарию myScript.php, передача будет осуществляться методом POST, false указывает на то, что асинхронный режим использоваться не будет. Далее, строкой /xHR.send("myVar=myVarValue");/ мы отправили данные указанному выше скрипту, а именно в переменную myVar мы записали значение myVarValue. Теперь, чтобы получить эти данные в PHP-скрипте нам достаточно воспользоваться глобальным массивом $_POST:

<?
echo "Моя переменная равна:".$_POST['myVar'];
?>

Если бы PHP-скрипт запускался напрямую, он бы выдал надпись "Моя переменная равна: myVarValue", однако, поскольку скрипт был инициирован из Javascript, результат его работы возвращается туда же, в переменную responseText или responseXML (в случае, если результатом является XML-файл). В нашем случае это responseText. Итак, финал:

<script>
if(window.XMLHttpRequest){
xHR=new XMLHttpRequest();
}else{
if(window.activeXObject){
xHR=new activeXObject("Microsoft.XMLHTTP");
}else{
alert("Ваш браузер не поддерживает Ajax!");
}
}

xHR.open("POST","myScript.php",false);
xHR.send("myVar=myVarValue");
alert(xHR.responseText);
</script>

 И все бы хорошо, пока я не наткнулся на такую ошибку: origin /хост/ is not allowed by access-control-allow-origin. Связано это с тем, что для сервера http://domain.com и http://www.domain.com - это разные сервера, как следствие может возникнуть ситуация, воспринимаемая сервером, как попытка запуска Javascript'ом одного домена PHP-скрипта другого. Лечится все достаточно просто: лучше использовать абсолютные пути при указании расположения скриптов, или же использовать HTML-директиву <base href="...">.