Что такое Ajax? Если по простому, то это транспорт для данных. Есть у нас сервер, есть у нас клиент, так вот как передать данные, например, от клиента к серверу или наоборот? Ajax это делает. Фишка, и то, чем отличается от других способов передачи данных – он делает это без обновления страницы.
Технологическая основа Ajax это компонент компании Microsoft XMLHttpRequest, который изначально использовался в технологии ActiveX и позже был “подхвачен” компанией Mozilla Foundation. Более подробно об XMLHttpRequest можно прочитать в Википедии.
Чем хороша библиотека jQuery? Она все упрощает и делает код намного чище и понятнее. Такая же ситуация и с Ajax Теперь посмотрим на 2 примера.
Ajax в традиционном JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<head> <meta charset='utf-8'> </head> <body> <button onclick="ajaxload();">Загрузить</button> <div id="mydiv"><h3>No news</h3></div> <script type="text/javascript"> function ajaxload(){ var AjaxObject=new XMLHttpRequest(); AjaxObject.onreadystatechange=function(){ if(this.readyState==4){ if(this.status >=200 && xhr.status < 300){ // Ради следующей строчки писали все остальной код document.getElementById('mydiv').innerHTML=this.responseText; } } } AjaxObject.open('GET', 'ajaxServerAnswer.php'); // указываем тип запроса и адрес скрипта ответа AjaxObject.send(); } </script> </body> </html> |
responseText это ответ сервера в данном случае.
onreadystatechange это EventListener – обработчик каждой смены состояния readyState
readyState (0 — не инициализирован, 1 — открыт, 2 — отправка данных, 3 — получение данных и 4 — данные загружены)
status это ответ сервера, например код 200 OK означает, что запрос успешно обработан, коды от 200 до 300 говорят об более менее успешном ответе
ajaxServerAnswer.php
|
1 2 3 |
<?php echo "<h3> Some Answer from Server</h3>"; ?> |
Ajax в стиле jQuery
Решим ту же задачу средствами jQuery
App.js (вынесем код javascript в отдельный файл)
|
1 2 3 4 5 |
$(function(){ $('button').click(function(){ $('#mydiv').load('ajaxServerAnswer.php'); }); }); |
Как видно, кода гораздо меньше, без учета разметки HTML