Немного обо всем интересном
На главную Обратная связь Поиск
Главная
Форум
 
 
 
  Статьи Файлы Видео Кулинарные рецепты Города и Страны Разное  
Отдых и развлечения Юмор Видео, ТВ и музыка Непознанное Литература Спорт Игры Хобби
Окружающий мир Люди Страны и города География Флора и фауна Космос
Технологии Hardware Операционные системы Софт Интернет Мобильные устройства Сети и сетевая безопасность Разное
Дизайн и программирование Веб-строительство Дизайн и графика

Все статьи Список статей Добавить статью
 
Вниз
Используем технологию AJAX


   Сегодня очень популярными становятся интерактивные веб-страницы. То есть такие страницы, которые при клике на ссылку или нажатии на кнопку не перезагружаются полностью, а заменяется только часть страницы.

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

   Прорывом в этой области стало появление технологии AJAX. Технологии позволяющей догружать недостающие элементы страницы с веб-сервера уже после того как страница полностью загружена.

   Итак, давайте разберемся что из себя представляет AJAX-технология.

   Важно понимать, что AJAX - это не совсем самостоятельная технология, AJAX - это элемент JavaScript. В браузерах Opera, Mozilla Firefox и Internet Explorer 7 AJAX представлен в виде объекта XMLHttpRequest. В браузере Internet Explorer 6 технология представлена ActiveX-объектом.
    Что может AJAX?

  • AJAX может отправлять GET и POST HTTP запросы, но только на тот веб-сервер с которого была получена страница

  • AJAX позволяет отправлять собственные HTTP-заголовки и принимать заголовки отправленные сервером

  • AJAX может принимать результат не только в виде текста, но и в виде xml-документа

  • AJAX получает статус-ответ сервера, как в виде номера статуса (200, 404) так и в виде строки статуса ("Ok", "File not found")


   Давайте построим простую оболочку для AJAX, которая соединит возможности AJAX воедино, будет производить скрытые GET и POST запросы на наш сервер и получать ответ.

   Создадим файл ajax.js

//Создадим переменную AJAX которая будет основным интерфейсом AJAX технологии
AJAX = new Object();

//Создадим два события, для загрузки и для ошибки
AJAX.onload = null;
AJAX.onerror = null;

//Так же нам понадобятся два масива для хранения GET и POST параметров
AJAX.GET = new Array();
AJAX.POST = new Array();

//Создадим две переменные, которые будут хранить результат
AJAX.text = null;
AJAX.xml = null;

//Эта переменная при ошибке будет хранить описание ошибки
AJAX.errtext = null;

//Переменная для хранения таймера соеденения
AJAX.TIMEOUT = null;

//Инициализируем технологию AJAX
if(window.XMLHttpRequest) {
AJAX.HTTP = new XMLHttpRequest();
} else if(window.ActiveXObject) {
AJAX.HTTP = new ActiveXObject("Microsoft.XMLHTTP");
}

//Создадим функцию для обработки состояния соеденения
AJAX.HTTP.onreadystatechange = function() {
if(AJAX.HTTP.readyState == 4) {
clearTimeout(AJAX.TIMEOUT);
AJAX.TIMEOUT = null;
if(AJAX.HTTP.status == 200) {
AJAX.text = AJAX.HTTP.responseText;
AJAX.xml = AJAX.HTTP.responseXML;
//Если событие onload отслеживается, то сгенерируем его
if(AJAX.onload !== null) AJAX.onload();
} else {
//Ошибка!!! Если событие onerror отслеживается, то сгенерируем его
AJAX.errtext = AJAX.HTTP.statusText;
if(AJAX.onerror !== null) AJAX.onerror();
}
}
}

//Две функции для добавления GET, POST параметров
AJAX.setGET = function(vname, value) {
AJAX.GET[vname] = value;
}
AJAX.setPOST = function(vname, value) {
AJAX.POST[vname] = value;
}

//Функция для отправки запроса серверу, в параметре передается путь и имя файла
AJAX.request = function(file) {
var v;
var post;
AJAX.HTTP.abort(); //Закрываем предыдущие соеденение
var url = file;
if(AJAX.GET.length !== 0) {
url += "?";
for(v in AJAX.GET) {
url += v + "=" + encodeURIComponent(AJAX.GET[v]) + "&";
}
}
if(AJAX.POST.length === 0) {
AJAX.HTTP.open("GET", url, true);
post = null;
} else {
AJAX.HTTP.open("POST", url, true);
post = "";
for(v in AJAX.POST) {
post += v + "=" + encodeURIComponent(AJAX.POST[v]) + "&";
}
AJAX.HTTP.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
AJAX.HTTP.setRequestHeader("Content-Length", post.length);
}
AJAX.HTTP.send(post);
AJAX.GET = new Array();
AJAX.POST = new Array();
AJAX.TIMEOUT = setTimeout("AJAX.etimeout();", 300000);
}

//Создадим функцию для обработки таймаута
AJAX.etimeout = function() {
AJAX.HTTP.abort();
AJAX.errtext = "Timeout";
if(AJAX.onerror !== null) AJAX.onerror();
}


   Вся оболочка представлена в виде объекта AJAX
   Наш объект имеет два события onload, происходящие при полной удачной загрузке, и onerror, происходящие в случае ошибки. Чтобы использовать эти события достаточно присвоить им функции
AJAX.onload = function() {
//Здесь обрабатываем удачную загрузку
}
AJAX.onerror = function() {
//здесь обрабатываем ошибки
}

   Два свойства, из которых мы будем получать результат - это text, для текстовой информации и xml, для расшифрованного xml документа. Свойство, которое хранит описание ошибки - errtext

   Есть два метода - setGET и setPOST, с помощью которых можно добавить в запрос GET и POST параметры. Первый атрибут - это имя параметра, а второй - его значение. Важно, что эти методы должны вызываться до запроса, иначе они пойдут на следующий запрос.

   Ну и самый главный метод нашего объекта - метод request, который и осуществляет запрос к серверу. В качестве параметра он принимает имя файла, к которому будет производится запрос, например если нам нужно запросить файл mod.php из корня нашего сайта, то вызываем так:
AJAX.request("/mod.php");

P.S.

   Важно помнить, что AJAX работает невидимо и асинхронно, то есть не блокирует страницу во время загрузки. Надо показать посетителю, что идет загрузка, а так же не дать ему запустить запрос еще раз.

   Так же надо помнить, что элементы страницы, загруженные спомощью AJAX, не попадают в историю браузера, а значит, у посетителя не будет возможности вернуться назад обычным способом.

   И последнее, GET запросы всегда кэшируются браузером, и если ваша AJAX-страница, посылает однотипные запросы, но сервер возвращает разные ответы, то нужно запретить кэширование, делается это с помощью php. В самом начале файла, который мы запрашиваем с помощью AJAX, поместите следующий php-код:
<?php
header
("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
?>

Данные:
Просмотров: 18371
Рейтинг: 105
Голосов: 16
Средний бал: 6.56
Комментариев: 16
Добавлен: 29.05.2007

Оценить:

Функции:



Шрифт:   +  -

Разместил: [SL]
Посмотреть все статьи этого пользователя
Комментарии:

Разместил гость Алексей30.03.2011

Интересненько
Разместил гость Avatarko.ru23.01.2011

Ajax ваще тема!
Разместил гость koko27.11.2010

nin ko ngar chit tal
Разместил гость z02.07.2010

qfFQ
Разместил пользователь Alexander-V-Sh22.10.2008

Валерий Нет, на этом сайте этот скрипт не используется
Разместил гость Валерий17.10.2008

Зато я понял, что коментарии на этой странице добавляются как раз именно этим скриптом.
Разместил гость qwerty03.07.2008

))
Разместил гость w3c.kz17.06.2008

Спсибо!
Разместил гость Константин09.05.2008

Что то методы setGET(...), setPOST(...) не пашут нифига...
Разместил гость floyd11.12.2007

affka.ru, мне очень интересно как исправить этот баг, причем у меня даже опера и мозила не работают, да и вообще пришлось написать свою функцию length для ассоциативного массива, т.к. не работало =(
Разместил гость Zdanchik22.10.2007

Ошибка была просто в неправильной инициализации объекта в ИЕ.... Дополнительно нужно проинициализировать объект Msxml2.XMLHTTP
Разместил гость Dmitriy02.10.2007

Спасибо за статейку. Очень пригодилась.
Разместил гость V0Rch1g27.09.2007

Баалин! Статья весьма помогла мне в изучении данной технологии...в частности в отправке POST запросов...на примере я увидел где я допускал ошибки!!!
Большое СПААААААААААСИИИИИИИБООООО!!!

P.S. Кстати Алексей верно заметил...косячек обнаружил исправил...и всё работает!
Разместил гость affka.ru05.09.2007

хотя вообщем-то решение той ошибки нашлось легко. если кому интересно - вышлю..
Разместил гость affka.ru05.09.2007

поидее всё правильно.. правда не знаю что скрыто под адским смайлом..
а вообще я нашёл косяк в данном объекте. в опере всё сразу нормально работало, а вот в ИЕ не хотела пахать, зараза..
Почему-то ИЕшке не нравилось, что метод событие на отслеживания статуса загрузки был вне ф-ии AJAX.request.. не знаю в чём у него логика.. может быть потому что он один раз запускался и потом отрубал это событие нафиг.. не знаю.. ну короче решение следующее:

Отбзываем функцию обработки состояния соеденения какой-нибуть qwerty функцией и потом вставляем почти в начало метода AJAX.request слудеющее:
AJAX.HTTP.onreadystatechange = qwerty;

косяк, конечно, всё же есть.. хоть и контент загружен нормально, но он всёравно потом будет ругаться, что типа ошибка (срабатывает событие AJAX.onerror - тайм аут проходит потому что..).. c этим сейчас ещё помучаюсь..
Разместил гость Алексей29.08.2007

на сколько я понял ссылку на документ можно писать например так:
a href="#" onclick="AJAX.request("/mod.php";"
но так у меня не работает!
что не так?
 
Добавить комментарий:

Оставлять комментарии могут только зарегистрированные пользователи.
Возможно заинтересует: • 
Вверх
2006-2010 Интересное.инфо.
При использовании или копировании материалов не забываем ссылку на http://interesnoe.info