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:
Ответ запроса будет храниться в свойстве 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
<form>
<input name="s" />
<input name="t" />
</form>
Отправить её можно так:
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$
