Время:
Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 3.144.19.163
Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
  • Страница 1 из 1
  • 1
Модератор форума: Hawk  
AJAX своими руками (краткий обзор)
Сообщение оставлено 16.05.2010 в 20:21:24 | Сообщение #1

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
<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$
 
   
  • Страница 1 из 1
  • 1
Поиск:
 
Графика от: Megas, GraFOS | Дизайн сверстал E.A.
Хостинг от uCoz
Яндекс.Метрика