Как стать автором
Обновить

AJAX с нуля

Год назад, когда я слышал слово AJAX, мне сразу становилось страшно, перед глазами появлялись крутые программеры пьющие, по выходным, зеленый чай с тибетскими монахами, ну и т.д. и т.п. Дело в том, что человеку, пытающемуся с нуля разобраться, что же такое AJAX, не следует видеть код вроде этого:

window.addEvent('domready', function() {
$('aj').addEvent('click', function(event) {
event.stop();
new Request.HTML({
url: 'script.php',
method: 'get',
update: $('ajax_area'),
onRequest: function(){$('ajax_area').innerHTML="\"Загрузка...\"";},
onComplete: function(){$('ajax_area').innerHTML="";}
}).send('stage=1');
});
});
// Написано с помощью фреймворка mootools


Но как-то раз мне попалась халтурка, где без функционала, который предоставляет механизм AJAX, пришлось бы сильно попотеть. И, поборов страх, я сел смотреть примеры, в которых уже были реализованы куски нужного мне кода.

Каково было мое удивление, когда я понял, что все это не так уж страшно, можно сказать, даже приятно)

Скажу сразу, я не профессионал в области веб-разработки, верстки, дизайна, веб-программирования. Я вообще не профессионал, я студент и «только учусь». Эта статья для таких как я, которые хотят понять как это работает, но не хотят очень долго читать чужой код, в поисках просветления)

Я приведу самый простейший пример рабочего варианта использования xmlhttprequest в вашем сайте.

Будем использовать innerHTML, не будет трогать XML или JSON.

Внимание: innerHTML не входит в стандарт DOM2 — используйте его в рабочих проектах на свой страх и риск.

Для понимания этого гайда вам потребуются минимальные знания HTML и понимание кода на языках с с/c++ синтаксисом (js, php в данном случае)

Итак, нам нужно создать файлы:

index.php — HTML интерфейс
ajax.js — вся джава тут
script.php — к этому файлу будем делать запросы

Использовать innerHTML будем в паре с тегами . Напишем файл index.php
В данном случае просто шаблон, который я часто использую.

<?php
//---------- HEAD ---------------------------------------------------------------------------
echo 'Проба пера';
echo '/>';
echo '';
echo '';
//---------- MAIN CODE-----------------------------------------------------------------------
echo 'Послать асинхронный запрос';
echo 'Пока тут пусто'; // Вот сюда и будет помещен ответ на наш запрос
//---------- FOOT ---------------------------------------------------------------------------
echo '';
//---------- END ----------------------------------------------------------------------------
?>


Важны тут 2 элемента – ссылка, на которую вешаем функцию отправки запроса, и тэг div, в который будем принимать ответ)

Переходим к самому интересному, создаем ajax.js
Код хорошо закомментирован, читайте сразу его)

//Функция создает объект класса XMLHttpRequest для любого браузера------------------------------------
function createRequestObject()
{
if (window.XMLHttpRequest) {
try {
return new XMLHttpRequest();
} catch (e){}
} else if (window.ActiveXObject) {
try {
return new ActiveXObject('Msxml2.XMLHTTP');
} catch (e){}
try {
return new ActiveXObject('Microsoft.XMLHTTP');
} catch (e){}
}
return null;
}
//Универсальная функция запроса. В данном случае file это скрипт, к которому и будет направлен запрос--
function sendRequest(file, _resultId)
{
httpRequest = createRequestObject(); // создаем объект класса XMLHttpRequest
httpRequest.open('get',file,true); // "открываем" запрос
// задаем заголовок ответа, чтобы все было красиво, а не "крокозаябрами"
httpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");

// описываем получение ответа: на событие onreadystatechange объекта класса XMLHttpRequest назначаем функцию
// которая, если процедура запроса полностью завершена (readyState == 4), поместит ответ в тег с
// id равным _resultId, используя механизм innerHTML
httpRequest.onreadystatechange = function()
{
if (httpRequest.readyState == 4)
{
document.getElementById(_resultId).innerHTML = httpRequest.responseText;
}
}

// Отправляем запрос
httpRequest.send(null);
}
//А теперь что делает ссылка - пошлет запрос к script.php и передаст ему переменную $stage == 1---
//Также эта функция указывает, что ответ следует поместить в тег с id == "ajax_area"------------------
function zapros()
{
sendRequest("script.php?stage=1", "ajax_area");
}
//Хватит------------------------------------------------------------------------------------------


И теперь, чисто для демонстрации работы, создаем скрипт, к которому будет отправлен запрос

<?PHP
switch ($_GET['stage'])
{
case 0: break;
case 1: echo 'Вы просили stage равное '."{$_GET['stage']}".'; запрос отработал нормально!!'; break;
}
?>


Для того, чтобы этот пример заработал, нужен веб-сервер, настроенный на работу с php.
В примере можно было бы обойтись и без php, но пусть будет так

Теги:
Хабы:
Данная статья не подлежит комментированию, поскольку её автор ещё не является полноправным участником сообщества. Вы сможете связаться с автором только после того, как он получит приглашение от кого-либо из участников сообщества. До этого момента его username будет скрыт псевдонимом.