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

Изучаем AJAX на примерах.

AJAX расшифровывается как Asynchronous Javascript And XML, что означает Асинхронный JavaScript и XML. AJAX позволяет обновлять данные HTML-страницы без полной её перезагрузки. Кроме этого технология позволяет работать с интернет-страницами асинхронно. То есть пока JavaScript взаимодействует с Web-сервером, пользователь может продолжать работать с web-страницей.

Примером использования технологии AJAX является Google Suggest. Работа Google Suggest заключается в том, что пока вы вводите слово или фразу для поиска, JavaScript обращается к базе данных Google и запрашивает у неё 10 самых популярных запросов, начинающихся с тех же букв. И затем выводит этот список без перезагрузки страницы.

Для рассмотрения принципов работы технологии AJAX, реализуем на своем сайте механизм подобный Google Suggest. Допустим, у нас есть сайт туроператора. На сайте есть поле поиска предложений по названию страны. Добавим к этому полю раскрывающийся список с автозаполнением по введенным буквам. Приступим к решению этой задачи. Сразу оговорюсь, что для реализации этой задачи необходимо знание HTML и немного JavaScript(знатоком быть не обязательно). В качестве серверного языка будет использован php.

Для начала создадим форму поиска. Для этого на вашем web-сервере создайте файл index.html, откройте его при помощи любого текстового редактора и введите следующий html-код.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title> Поиск предложений. </title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <script type="text/javascript" src="ajax.js"></script>
  </head>
  <body>
      <form id="forma" method="post">
        <p><strong style="font-size: 24pt">Отдых на море</strong><br />
        <strong>Поиск предложений:</strong></p>
        <input name="country" style="width:250px" autocomplete="off" onkeyup="KeyPress(this.value)" />
        <input type="submit" value="Поиск" />
        <div align="left" id="searchresults">
        </div>
      </form>
  </body>
</html>

В этом листинге мы создали форму поиска с полем для ввода текста и кнопкой отправки, и создаем слой div для вывода результатов. К данной странице так же прикрепляется файл ajax.js, который будет содержать функции JavaScript.

Далее напишем функции JavaScript, которые будут посылать запросы серверу и обновлять страничку. Для того чтобы не приходилось перегружать html-документ полностью нам и понадобиться технология Ajax. Итак, приступим. Создайте файл ajax.js, поместите его в ту же папку, что и index.html, и откройте его в текстовом редакторе.

Для начала необходимо создать объект, который будет передавать запросы серверу и принимать ответы. В разных браузерах этот объект создается по разному. Мы напишем универсальную функцию, которая должна работать в разных браузерах. Добавьте в файл ajax.js следующий код JavaScript.

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

Выводить список результатов необходимо при каждом изменении в поле поиска. Для этого воспользуемся обработчиком событий JavaScript. Определять изменения будем при каждом событии клавиатуры keyup. Для этого в наш HTML-код файла index.html в строке, где создается поле поиска с именем country, добавим атрибут onkeyup="KeyPress(this.value)":

  <input name="country" style="width:250px" onkeyup="KeyPress(this.value)" />

Т. е. при нажатии любой клавиши будет вызываться функция JavaScript KeyPress(), в которую в качестве параметра передаются символы, введенные в строку поиска. Функция KeyPress() должна выполнить следующие задачи:

  • Создать новый объект запроса посредством вызова функции CreateRequest();
  • Сформировать URL-адрес, к которому необходимо подключиться для получения результатов;
  • Настроить объект запроса для установки связи с сервером;
  • Отправить запрос серверу.

Приступим к созданию функции KeyPress(). Для создания нового объекта запроса нам просто необходимо переменной request присвоить значение, возвращаемое ранее созданной функцией CreateRequest(). И для надежности проверим переменную request. Если она равна NULL, то объект запроса создать не удалось. Вот так будет выглядеть код JavaScript для решения данной задачи:

function KeyPress(term) {   /*создаем новый объект запроса*/
  request=CreateRequest();
  /*если не удалось создать объект запроса, то заканчиваем выполнение функции*/
  if(request==null)
  {
    return;
  }
}

Далее необходимо указать объекту запроса request какая функция JavaScript будет обрабатывать ответ сервера. Для этого необходимо свойству onreadystatechange присвоить имя соответствующей функции. Данное свойство указывает браузеру, какую функцию запускать при каждом изменении состояния готовности запроса. У нас обработкой ответа будет заниматься функция LoadResults(). Добавьте в функцию следующую строку: request.onreadystatechange = LoadResults;. Отметим, что после названия функции нет скобок.

Затем займемся настройкой подключения. Для этого сначала необходимо указать объекту, куда передавать этот запрос. Сформируем URL-адрес сценария, который будет вычислять результаты, и присвоим его переменной url. Допустим, за вычисление результатов на стороне сервера у нас будет отвечать php-скрипт country.php. Тогда наш URL-адрес будет выглядеть следующим образом: var url = "country.php" + "?s=" + encodeURIComponent(term) + "&sid=" + Math.random();, где с переменной s передаются введенные в поле поиска символы, а sid присваивается случайное число, чтобы браузер не кэшировал страницу. Добавьте эту строчку в тело функции KeyPress().

Далее необходимо инициализировать подключение с помощью метода open("GET", url, true) объекта request. Этот метод имеет три параметра. Параметр "GET" указывает, как отправить данные серверу. Мы используем метод GET, потому что введенные символы в строку поиска передаются серверному сценарию через url-адрес. Во второй параметре указывается url-адрес серверного сценария. У нас url-адрес храниться в переменной url, поэтому во втором параметре мы указываем эту переменную. Третий параметр может иметь два значения: true - асинхронный режим и false - синхронный режим. Наше приложение будет работать в асинхронном режиме, поэтому указываем true. После инициализации подключения, необходимо создать подключение и запросить результаты. Для этого просто необходимо вызвать функцию send(null) объекта request. Параметр null указывает, что запрос не содержит данных.

После внесения всех изменений функция KeyPress(this.value) примет следующий вид:

function KeyPress(term)
{
  /*создаем новый объект запроса*/
  request=CreateRequest();
  /*если не удалось создать объект запроса, то заканчиваем выполнение функции*/
  if(request==null)
  {
    return;
  }
  /*формируем url-адрес*/
  var url = "country.php" + "?s=" + encodeURIComponent(term) + "&sid=" + Math.random();
  /*настраиваем объект запроса для установки связи*/
  request.onreadystatechange = LoadResults;
  request.open("GET", url, true);
  /*отправляем запрос серверу*/
  request.send(null);
}

Итак, соединение установлено, запрос отправлен, сервер обрабатывает данные и возвращает результат. Далее необходимо получить ответ, обработать и вывести результаты на web-страницу. Всем этим будет заниматься функция LoadResults(), которая будет вызываться при каждом изменении статуса готовности запроса. Рассмотрим, как должна работать эта функция.

Для начала необходимо проверить текущее состояние готовности. Статус готовности хранит свойство объекта запроса readyState. При завершении обработки запроса состояние готовности равно 4. Т.е. если request.readyState == 4, то можно обрабатывать ответ:

function LoadResults()
{
  /*Проверяем состояние готовности*/
  if (request.readyState == 4){
    /*обрабатываем ответ*/
  }
}
Далее необходимо проверить код статуса полученный от сервера. Он устанавливается в свойстве status и если все хорошо он должен равняться 200. Добавим проверку в нашу функцию LoadResults():
function LoadResults()
{
  /*Проверяем состояние готовности*/
  if (request.readyState == 4){
    /*Проверяем статус запроса*/
    if (request.status == 200){
    /*все в порядке, обрабатываем ответ*/
    }
  }
}
Если проверка состояния и статуса запроса закончилась успешно, то можно приступать к обработке данных, полученных от сервера. Получить данные можно двумя способами: request.responseText - получение данных в виде текста, либо request.responseXML - получение данных в виде объекта XMLDocument. Допустим, у нас сервер передает ответ в виде текстового списка стран через запятую. Тогда получаем данные: var answer = request.responseText. Далее обрабатываем данные и выводим их в слой с id="searchresults".

Я не буду вдаваться в подробности обработки данных, а просто приведу код функции с комментариями:

function LoadResults()
{
  /*Проверяем состояние готовности*/
  if (request.readyState == 4){
    /*Проверяем статус запроса*/
    if (request.status == 200){
      //делаем слой searchresults видимым
      ShowDiv("searchresults");
      //очищаем результаты
      ClearResults();
      //получаем данные
      var answer = request.responseText;
      //преобразуем строку текста в массив
      var array = answer.split(",");
      //определяем размер массива
      var count = array.length;
      //находим слой searchresults
      var div = document.getElementById("searchresults");
      //создаем таблицу в объектной модели документа
      var tbl = document.createElement("table");
      var tblbody = document.createElement("tbody");
      var tblRow, tblCell, tblNode;
      //перебираем все элементы массива array
      for(var i = 0; i < count; i++)
      {
        var text = array[i];
        //создаем строки таблицы и добавляем в ее тело
        tblRow = document.createElement("tr");
        tblCell = document.createElement("td");
        //задаем атрибуты и функции ячеек
        tblCell.onmouseover = function(){this.className='mouseOver';};
        tblCell.onmouseout = function(){this.className='mouseOut';};
        tblCell.setAttribute("border", "0");
        tblCell.onclick = function(){Replace(this);};
        tblNode = document.createTextNode(text);
        tblCell.appendChild(tblNode);
        tblRow.appendChild(tblCell);
        tblbody.appendChild(tblRow);
      }
      //добавляем в таблицу ее тело
      tbl.appendChild(tblbody);
      //помещаем таблицу в слой
      div.appendChild(tbl);
    }
  }
}

И еще пару вспомогательных функций JavaScript для вывода результатов на экран:

/*делаем слой с результатами видимым*/
function ShowDiv(id)
{
  if (document.layers) document.layers[id].visibility="show";
  else document.getElementById(id).style.visibility="visible";
}

/*делаем слой с результатами не видимым*/
function HideDiv(id)
{
  if (document.layers) document.layers[id].visibility="hide";
  else document.getElementById(id).style.visibility="hidden";
}

/*очистка результатов*/
function ClearResults()
{
  /* Удаление существующих строк из таблицы результатов
  var div = document.getElementById("searchresults");
  var counter = div.childNodes.length;
  for(var i = counter-1; i >= 0; i--)
  {
    div.removeChild(div.childNodes[i]);
  }
}

/*Заменяем значение в поле ввода значением, выбранным щелчком мыши*/
function Replace(tblCell)
{
  var inputbox = document.getElementById("country");
  inputbox.value = tblCell.firstChild.nodeValue;
  ClearResults();
  HideDiv("searchresults");
}

Так же в наш html-файл index.html между тегами <head> и </head> добавьте следующие правила CSS:

<style type="text/css">
  .mouseOut{ background: #ffffff; color: #0000000; }
  .mouseOver{ background: #ccccff; color: #0000000; }
  table {width:250px}
</style>

Пример php-скрипта, который обрабатывает запрос на сервере, можете скачать здесь. Пример можно посмотреть здесь, а исходники скачать здесь.

На этом все. В данной статье мы рассмотрели основы работы технологии Ajax на примере.

Подписка на новости
Теги 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