Ajax

Вчора прикрутив оновлення списку останніх повідомлень з форуму на Теревенях (посилання оновити).

Тут я спробую описати, як швидко і без проблем прикрутити собі на сайт подібне.

Теоретично розказувати, що таке Ajax, я не буду – про це вже багато написано, наприклад тут. Скажу лише декілька слів – це технологія, за допомогою якої можна отримувати нові дані на сторінку, не перевантажуючи її повністю.

Що в мене було раніше.
Був скрипт, який формував таблицю Останні повідомлення на форумі. Підключався він ось так:
include "forum/latest_posts.php";

Щоб отримати останні повідомлення з форума потрібно було оновити сторінку. Але це займає багато часу (завантаження + опрацювання браузером).

Тепер про Ajax.

Основний елемент JavaScript, на якому це все працює – XMLHttpRequest.
Але в різних браузерах він реалізований по різному. На відміну від інших в Microsoft Internet Explorer це все реалізовано через ж… ActiveX. Тому з ним була деяка морока.

Ось функція на JavaScript, що визначає браузер, і повертає потрібний елемент XMLHttpRequest

function createXMLHttp()
{
  if (typeof XMLHttpRequest != "undefined")
    return new XMLHttpRequest();
  else if (window.ActiveXObject)
  {
    var aVersions = ["MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", "Microsoft.XMLHttp"];
    for (var i = 0; i < aVersions.length; i++)     {       try       {         var oXmlHttp = new ActiveXObject(aVersions[i]);         return oXmlHttp;       }       catch (oError) {}     }   }   throw new Error("XMLHttp object could be created."); }

Як видно з коду основна морока - визначити, яка версія браузера в користувача.
Далі просто повертаємо потрібний елемент.

Наступна функція викликає функцію createXMLHttp, отримує за допомогою нього дані і показує їх на сторінці:

function submitForm()
{
  document.getElementById('updating').style.display='inline';
  document.getElementById('update').style.display='none';
  var req = createXMLHttp();
  req.onreadystatechange = function()
  {
    if(req.readyState == 4)
      if(req.status == 200)
        document.getElementById("result").innerHTML=req.responseText;  
  };
  req.open("GET", "forum/latest_posts_ajax.php?id=" + Math.random(), true);
  req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  req.setRequestHeader('Accept-Language', 'uk');
  req.send(null);
}

Цей рядок: if(req.readyState == 4) означає що дані отримані, а
цей: if(req.status == 200) що скрипт повернув 200 код, тобто все гаразд.

Конструкція: document.getElementById("result").innerHTML=req.responseText; вставляє в елемент сторінки <div id='result'>...</div> отримані дані.

Поміщаємо все це в окремий файл (наприклад, ось так) а на сторінці прописуємо:
<script type="text/javascript" src="./mkportal/templates/tereveni/ajax.js"></script>

Тепер розглянемо файл forum/latest_posts_ajax.php
В принципі там немає нічого особливого, це звичайний скрипт експорту останніх повідомлень з форуму IPB, написаний на php. Генерує він ось таке
Для нас важливі тільки ось ці рядки:
@header('Content-Type: text/plain; charset=utf-8');
Це ми кажемо браузеру, що дані є звичайним текстом в кодуванні utf-8 (юнікод).
Я спочатку пробував видавати все в windows-1251 (в мене і сайт, і база в цьому кодувані).
В Опері, ВогнеЛисі все працювало просто прекрасно. А от Інтернет Експлорер видавав закарлючки.
Виявилось що Експлореру все рівно, яке кодування вказане, він все рівно використовую utf-8.
Для перекодування тексту з windows-1251 в UTF-8 використовуйте код:
echo iconv("windows-1251", "UTF-8", $echo);
(в змінній $echo міститься вже згенерована таблиця)

Тепер останній штрих - розміщення посилання оновити. Ну тут все просто:
<a href='javascript:submitForm();'>оновити</a>

Як це все працює можна глянути тут

Важливо: Поданий код реально працює, якщо у вас він чомусь не захотів працювати - перевірте, чи увімкнена підтримка JavaScript (не Java!!!) в браузері, або, якщо не дай Бог ви користуєтесь ІЕ, ввімкнений ActiveX.
Якщо все рівно не захотіло працювати - Ґуґл в поміч (по словах Ajax або XMLHttpRequest)

  • Чудово!

    Мені саме потрібна була проста стаття про Ajax

    PS в IE все справді-таки через ж@п# зроблено, як і в самій win’ді
    PPS симпатичний блоґ, однак, на жаль, авторові сайту бракує грамотності

  • neopba, не помиляється лише той, хто нічого не робить
    я намагаюсь писати без помилок, але це не завжди виходить 🙂

  • Гарна стаття, буду трішки вивчати аякс, хочу його використовувати як альтернативу флеш =)

  • Ось більш досконала бібліотека: http://ukrbash.org/js/core.js