AJAX без использования обьекта XmlHttpRequest
Thursday, November 2nd, 2006Warning: file_get_contents(http://jug.in.ntu-kpi.kiev.ua/glossary/get) [function.file-get-contents]: failed to open stream: HTTP request failed! HTTP/1.1 404 Not Found in /home/www/htdocs/blog/wp-content/plugins/jug-glossary.php on line 40
Введение
AJAX стал самым большим “открытие” последних лет, AJAX так же стал “умным” словом 
почти таким же как Web 2.0. Общепризнано, что аякс это прикольная штука и с её помощью можно делать интересные фичи для web апликух. Прямо сейчас, когда вы читаете эти строчки, аякс уже используется на многих популярнейших сайтах. Наиболее известными являются GMail и Google Maps, хотя Ta-da List или Flickr тоже используют его. Даже Microsoft заразилась аяксоманией, и наваяла либы поддержки AJAX для ASP.NET (привет Java либам DWR & Google Web Toolkit).
Всё было бы отлично, но в текущих реализациях AJAX есть одна существенная проблема - всё завязано на один единственный обьект XmlHttpRequest. Наиболее современные браузеры, вроде FireFox, имеют встроенную поддержку этого объекта. Но старички, вроде IE 6, не имеют встроенной поддержки AJAX и поэтому им приходится использовать левые ActiveX контролы. А это приводит к тому, что у посетителей AJAX-сайта будут выскакивать дурацкие предупреждения о возможной опасности при использовании ActiveX контролов, также пользователи могут вообще отключить в браузере поддержку ActiveX компонентов.
В этой статье я покажу, как использовать Ajax без создания объекта XmlHttpRequest.
Приступаем
Если мы не можем использовать XmlHttpReques, то нам нужно найти какой-то другой способ получения и добавления контента, при этом нужно обойтись без обращения к другим ActiveX обьектам или использования нестандартных методов. Похоже, что наилучшим кандидатом являются внешние JavaScript файлы. Наш подход будет заключатся в использовании динамически созданных на сервере JavaScript файлов. Так как JUG.org.ua посвящен яве, то мы будем использовать JSP
Создадим . и положим её на сервер JSP страничку ajax.jsp, в ней будет находится динамический контент, передаваемый клиенту.
<?
String html = “<b>This content came from JSP</b>”;
?>
div = document.getElementById(’contentdiv’);
div.innerHTML = ‘<?=html?>’;
Тут мы с помощью JavaScript кода получаем элемент DIV с айдишкой contentDiv и вставляем в него созданный на сервере контент.
Отлично, контент мы уже отдаем, нужно его как-то запросить и получить на стороне клиента используя браузер.
Это довольно легко сделать. Cоздадим с помощью DOM хтмл тег SCRIPT и установим в качестве значения атрибута SRС путь к JSP страничке ajax.jsp
function ajax_do (url) {
// url это полный путь к ajax.jsp
// Создаем HTML элемент SCRIPT
var jsel = document.createElement(’SCRIPT’);
jsel.type = ‘text/javascript’;// установим значение атрибута SRC
jsel.src = url;// Скармливаем созданный элемент браузеру
// собственно это и есть AJAX-вызов
document.body.appendChild (jsel);
}
Пробуем!
Слепим всё вместе, для этого напишем простенькую HTML страницу, разместим её на сервере,
<html>
<head>
<title>Demo - The Basic’s</title><script type=”text/javascript”>
function ajax_do (url) {
// url это полный путь к ajax.jsp
// Создаем HTML элемент SCRIPT
var jsel = document.createElement(’SCRIPT’);
jsel.type = ‘text/javascript’;// установим значение атрибута SRC
jsel.src = url;// Скармливаем созданный элемент браузеру
// собственно это и есть AJAX-вызов
document.body.appendChild (jsel);
}
</script>
</head><body>
<div id=”contentdiv”> </div>
<input onclick=”ajax_do(’http://localhost/ajax.jsp’);“
type=”button” value=”Получить контент” />
</body>
</html>
- По этой теме можно почитать на http://www.phpied.com/javascript-include/
- Описанный в статье метод не является AJAX`ом в чистом виде, назовем это AJAX хаком