Основы HTML
 Структура документов
 Создание web-страницы
 Задаем стили текста
 Вставляем картинку
 Гиперссылки
 Таблицы
 Списки
 Теги HTML
 Специальные символы
Основы CSS
 Свойства CSS
Технология Ajax
 Основы AJAX
 Изучаем AJAX на примере
SEO
 SEO учебники
 ТИЦ и как его повысить
Заработок в интернете
 Заработок в интернете для новичков
 Заработок в соц. сетях с помощью Prospero
 GetGoodLinks – заработок на продаже ссылок.
Реклама

Основы AJAX.

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

Технология AJAX базируется на использовании объекта XMLHttpRequest(), который позволяет отправлять и получать информацию в различных форматах включая XML и HTML. Реализация технологии состоит из клиентской и серверной частей. Клиентская часть выполняется в браузере пользователя и пишется на JavaScript, а серверная выполняется на веб-сервере и пишется на любом языке веб-программирования: php, asp, perl и др.

Клиентский JavaScript-код - это основной код, выполняющий Ajax-приложение и обеспечивающий взаимодействие с сервером. Клиентская часть выполняет сбор информации для отправки запроса серверу, устанавливает соединение с сервером, посылает запрос, получает ответ и обрабатывает ответ сервера. Рассмотрим реализацию клиентской части подробней.

1. Создание объекта запроса XMLHttpRequest.
В Internet Explorer и других браузерах создание объекта XMLHttpRequest отличается. Во всех браузерах кроме Internet Explorer этот объект создается очень просто:xmlHttp = new XMLHttpRequest(); Браузер Internet Explorer для создания объекта запроса использует анализатор MSXML. Кроме того существует две разных версии MSXML. Универсальный метод создания объекта запроса XMLHttpRequest для всех браузеров выглядит следующим образом:

/*переменная для хранения объекта запроса*/
var xmlHttp=null;
try
{
  //создаем объект запроса для Firefox, Opera, Safari
  xmlHttp = new XMLHttpRequest();
}
catch (e)
{
  //создаем объект запроса для Internet Explorer
  try
  {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
  catch (e)
  {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
}

Создание объекта запроса происходит в строках xmlHttp = new XMLHttpRequest();, xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); и xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");. Остальные строки обрабатывают ошибки.

2. Выполнение запроса.
Для выполнения запроса необходимо открыть соединение с сервером, установить функцию, которая выполниться после ответа сервера и передать запрос.

Чтобы указать функцию которая будет обрабатывать ответ, необходимо свойству onreadystatechange присвоить имя JavaScript функции: xmlHttp.onreadystatechange = MyFunc;. Причем имя функции указывается без скобок.

Чтобы открыть соединение с сервером необходимо вызвать функцию open(). Эта функция имеет три обязательных параметра:

  • метод запроса HTTP - обычно используют 'GET' или 'POST', но можно использовать любой другой метод в соответствии с HTTP стандартами;
  • url запроса - адрес скрипта на сервере, который обрабатывает запрос;
  • асинхронность запроса - TRUE или FALSE, если TRUE, то запрос асинхронный и пользователь сможет продолжать работу со страницей.

Для отправки запроса необходимо вызвать метод send(), параметром которого могут быть любые данные, которые вы хотите отправить на сервер. Данные должны быть сформированы в строку запроса param1=1¶m2=2¶m3=3.

Если данные отправляются методом POST, то необходимо изменить MIME-тип запроса: xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');.

Выполнение запроса с использованием метода GET:

/*Устанавливаем соединение*/
xmlHttp.open("GET", "example.php?param1=1¶m2=2", true);
/*Указываем функцию*/
xmlHttp.onreadystatechange = MyFunc;
/*Отправляем запрос*/
xmlHttp.send(null);
И с использование метода POST:
/*Устанавливаем соединение*/
xmlHttp.open("POST", "example.php", true);
/*Меняем MIME-тип*/
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
/*Указываем функцию*/
xmlHttp.onreadystatechange = MyFunc;
/*Отправляем запрос*/
xmlHttp.send('param1=1¶m2=2');

3. Обработка ответа сервера.
Отправляя запрос, мы указали имя функции, обрабатывающей ответ сервера: xmlHttp.onreadystatechange = MyFunc;. Для начала, эта функция должна проверять статус запроса. Это можно сделать с помощью свойства readyState. Если xmlHttp.readyState = 4, то ответ от сервера получен и можно приступать к его обработке. Далее необходимо проверить статус HTTP-ответа с помощью свойства status. Если xmlHttp.status = 200 значит все в порядке и можно продолжить обработку данных. Получить доступ к данным можно с помощью свойств responseText - в виде текста, либо responseXML - в виде объекта XMLDocument.

Полный пример работы Ajax-приложения:

<script type="text/javascript" language="javascript">
/*переменная для хранения объекта запроса*/
var xmlHttp=null;
/*создание объекта запроса*/
function createRequest()
{
  try{
    //создаем объект запроса для Firefox, Opera, Safari
    xmlHttp = new XMLHttpRequest();
  } catch(e){
    //создаем объект запроса для Internet Explorer
    try{
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e){
      try{
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch(e){
        xmlHttp = null;
      }
    }
  }

  if(xmlHttp == null)alert("Браузер не поддерживает AJAX!");
}

/*отправка запроса*/
function sendRequest()
{
/*получаем объект запроса*/
  createRequest();
  /*Устанавливаем соединение*/
  xmlHttp.open("GET", "ajax.php?param1=1¶m2=2", true);
  /*Указываем функцию*/
  xmlHttp.onreadystatechange = MyFunc;
  /*Отправляем запрос*/
  xmlHttp.send(null);
}

/*обрабатываем ответ*/
function MyFunc()
{
  if(xmlHttp.readyState == 4) {
    if (xmlHttp.status == 200) {
      alert(xmlHttp.responseText);
    } else {
      alert("Ошибка обработки запроса!");
    }
  }
}
</script>
<input value="сделать запрос" type="button" onClick="sendRequest();" />

Серверная часть может быть написана на чем угодно. Возвращаемое значение xmlHttp.responseText формируется стандартным выводом. Пример серверной части на php:

<?php
/*Получаем параметры*/
$param1 = $_GET['param1'];
$param2 = $_GET['param2'];
/*Отсылаем ответ клиенту*/
echo("Вы прислали $param1 и $param2");
?>

Попробуйте пример в действии:

И в дополнение некоторые справочные материалы по объекту XMLHttpRequest:

Методы класса XMLHttpRequest
МетодОписание
abort()отменяет текущий запрос
getAllResponseHeaders()возвращает полный список HTTP-заголовков в виде строки
getResponseHeader(headerName)возвращает значение указанного заголовка
open(method, url, async, userName, password)определяет метод, URL, асинхронность и другие параметры запроса
send(data)отправляет запрос на сервер, если данных нет то параметр null
setRequestHeader(label, value) добавляет HTTP-заголовок к запросу
overrideMimeType(mimeType)позволяет указать mime-type документа;
Внимание: метод отсутствует в Internet Explorer!

Свойства класса XMLHttpRequest
СвойствоОписание
onreadystatechangeобработчик события, которое происходит при каждой смене состояния объекта
readyStateвозвращает текущее состояние объекта (0—неинициализирован, 1—открыт, 2—отправка данных, 3—получение данных и 4—данные загружены)
responseTextтекст ответа на запрос
responseXMLтекст ответа на запрос в виде XML
statusвозвращает HTTP-статус в виде числа (404 — «Not Found», 200 — «OK» и т. д.)
statusTextвозвращает статус в виде строки («Not Found», «OK» и т. д.)

Подписка на новости
Теги HTML
 A
 ABBR
 ACRONYM
 ADDRESS
 B
 BIG
 BLOCKQUOTE
 BODY
 BR
 BUTTON
 CENTER
 CITE
 CODE
 DD
 DFN
 DL
 DT
 EM
 FONT
 H1-H6
 HEAD
 HR
 HTML
 I
 IMG
 KBD
 LI
 LINK
 MARQUEE
 META
 NOBR
 OL
 OPTION