AJAX своими руками (краткий обзор) - Форум о поисковых системах и социальных сетях

Страница 1 из 2
1
2
»

AJAX своими руками (краткий обзор)

$USERNAME$

Воскресенье, 11.04.2010, 09:53

Проверенный

Сообщения: 6860

Репутация: 9662

AJAX — это технология для обмена данными в фоновом режиме. Активно используется в WEB: при создании приложений, чатов, модальных окон и прочего. О нём и пойдёт речь.

Начать обмен данными нужно с создания объекта XMLHTTPRequest, который умеет принимать и посылать данные. Кроссбраузерно это можно сделать так:

Code

function getXmlHttp(){var a;try{a=new ActiveXObject("Msxml2.XMLHTTP")}catch(c){try{a=new ActiveXObject("Microsoft.XMLHTTP")}catch(b){a=false}}if(!a&&typeof XMLHttpRequest!="undefined"){a=new XMLHttpRequest()}return a};

Теперь функция getXmlHttp будет возвращать нужный нам XMLHTTPRequest.

Code

var request = getXmlHttp();

GET-запросы (получение данных)

Откроем соединение при помощи метода open. Первым аргументом он принимает тип запроса (POST или GET), вторым — URL запроса, третьим — асинхронность запроса* (true/false)

Code

request.open('GET', '/index.php', true);

* Асинхронный запрос — запрос, в котором браузер просто отсылает/запрашивает данные и не ждёт ответа. В синхронном же всё наоборот. Это ведёт к потере производительности скрипта. Так что используйте только асинхронные запросы.

Далее на объект XMLHTTPRequest нужно повешать обработчик события readystatechange, который указывает на то, что readyState (состояние запроса) изменился.

Code

request.onreadystatechange = function () {/*Ваша ф-ция*/}

Внутри ф-ции необходимо сделать проверку статуса запроса (request.status). Он должен быть равен 200.

Далее — отправляем запрос методом send:

Code

request.send(null);

Ответ запроса будет храниться в свойстве request.responseText.

Для тех, кто в танке, полный пример:

Code

var request = getXmlHttp(); // новый XMLHTTPRequest
request.open('GET', '/forum', true); // открываем асинхронное GET-соединение со страницей /forum
request.onreadystatechange = function () { // если пришёл ответ
if (request.status == 200) alert(request.responseText); // и если статус равен 200, выводим в алерте текст ответа
}
request.send(null); // отправляем запрос

POST-запросы (отправка данных)

Тут всё проще, чем казалось. Можно также получать ответ сервера в responseText, но в send нужно поместить отправляемые данные. В виде строки, прописывая сначала параметр, а потом его значение.
Пример:

Есть форма:

Code

Отправить её можно так:

Code

request.send('s=значение1&t=значение2');

И конечно же, пример:

Code

var request = getXmlHttp(); // новый XMLHTTPRequest
request.open('POST', '/index', true); // открываем асинхронное POST-соединение со страницей /index
request.send('s=Admin&subject=test&message=test&a=18'); // отправляем данные. На этом примере — отправка ЛС

Как получить некоторый текст со страницы:

Создаём новый DOM-элемент, вставляем в него ответ запроса:

Code

var el = document.createElement('DIV'), el.innerHTML = request.responseText;

Теперь el — полноценный DOM объект, хранящий ответ запроса.

Например, теперь текст первой ссылки можно получить так:

Code

el.getElementsByTagName('a')[0].innerText;

Как видите, всё очень просто и легко осваиваемо, при наличии желания.

С вами был $USERNAME$, до новых встреч.

Пост отредактировал $USERNAME$ - Воскресенье, 11.04.2010, 09:58