Ajax: имя, изменившее веб (2005)

18 февраля 2005 года Джесси Джеймс Гаррет из Adaptive Path опубликовал эссе «Ajax: A New Approach to Web Applications». Это не было техническим прорывом. XMLHttpRequest существовал в Internet Explorer с 1999 года. Нативная реализация в Mozilla - с 2002-го. Спецификация была написана годами раньше.

Гаррет дал паттерну имя и сформулировал что он делает возможным. До «Ajax» разработчики, использовавшие XMLHttpRequest, делали что-то безымянное и нишевое. После «Ajax» это был признанный архитектурный подход с словарём, который понимали все.

Google Maps запустился в феврале 2005-го. Gmail - в бете в апреле 2004-го. Оба использовали XMLHttpRequest чтобы обновлять контент без перезагрузки. После эссе Гаррета каждый разработчик понял почему эти продукты ощущались иначе - и захотел строить так же.

---

Что такое Ajax на практике: живой поиск (2005)

// livesearch.js - реализация 2005 года
// jQuery ещё не было. Всё вручную.

var searchTimer = null;

function initLiveSearch() {
    var input = document.getElementById('search-input');
    if (!input) return;

    input.onkeyup = function() {
        if (searchTimer) clearTimeout(searchTimer);

        var query = input.value;
        if (query.length < 2) {
            document.getElementById('results').innerHTML = '';
            return;
        }

        document.getElementById('results').innerHTML = '<p>Поиск...</p>';

        // Debounce 300мс - ждём пока пользователь перестанет печатать
        searchTimer = setTimeout(function() {
            doSearch(query);
        }, 300);
    };
}

function doSearch(query) {
    var xhr;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();          // Firefox, Safari
    } else {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');  // IE 5/6
    }

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            document.getElementById('results').innerHTML = xhr.responseText;
        }
    };

    // IE кешировал GET-запросы агрессивно - добавляем timestamp
    var url = '/search.php?q=' + encodeURIComponent(query)
            + '&ajax=1&_t=' + new Date().getTime();
    xhr.open('GET', url, true);
    xhr.send(null);
}

window.onload = initLiveSearch;

Серверная сторона - PHP, возвращающий фрагмент HTML:

<?php
// search.php - 2005 год
$query   = isset($_GET['q']) ? trim($_GET['q']) : '';
$is_ajax = isset($_GET['ajax']) && $_GET['ajax'] == '1';

if (strlen($query) < 2) {
    if ($is_ajax) exit;
    header('Location: /');
    exit;
}

$q       = mysql_real_escape_string($query);
$results = mysql_query(
    "SELECT id, title, excerpt FROM posts
     WHERE MATCH(title, content) AGAINST ('$q' IN BOOLEAN MODE)
       AND published = 1
     LIMIT 10"
);

if ($is_ajax) {
    // Возвращаем только фрагмент - не полную страницу
    if (mysql_num_rows($results) === 0) {
        echo '<p>Ничего не найдено по запросу: <em>' . htmlspecialchars($query) . '</em></p>';
        exit;
    }
    echo '<ul>';
    while ($row = mysql_fetch_assoc($results)) {
        echo '<li><a href="/post/' . $row['id'] . '">'
           . htmlspecialchars($row['title']) . '</a>'
           . '<p>' . htmlspecialchars($row['excerpt']) . '</p></li>';
    }
    echo '</ul>';
    exit;
}
// Не-Ajax: рендерим полную страницу
include 'header.php';
// ...
?>

---

XML или JSON?

В 2005 году «X» в Ajax официально означал XML. На практике - большинство разработчиков возвращали фрагменты HTML или начинали использовать JSON:

// "Правильный" Ajax с XML - болезненно в 2005
var xml   = xhr.responseXML;
var posts = xml.getElementsByTagName('post');
for (var i = 0; i < posts.length; i++) {
    var title = posts[i].getElementsByTagName('title')[0]
                        .firstChild.nodeValue;
}

// Практика 2005: JSON через eval() - до JSON.parse() (ES5, 2009)
var data = eval('(' + xhr.responseText + ')');
// Небезопасно, но работало. JSON.parse появился в 2009.

Переход с XML на JSON как дефолтный формат произошёл между 2005 и 2008 годами. Когда jQuery 1.0 вышел в августе 2006 с методом $.getJSON(), JSON стал очевидным выбором.

---

Что 2005 год установил навсегда

После именования Ajax стало ясно: браузер - это платформа приложений, а не средство просмотра документов. Эта идея не была технически новой - возможность была с 1999-го. Изменилась ментальная модель.

К концу 2005-го:

• Google Suggest работал и был замечен всеми
• Google Maps изменил ожидания пользователей от веб-интерактивности
• Ruby on Rails 1.0 вышел со встроенными Ajax-хелперами
• Каждый веб-фреймворк добавлял поддержку Ajax
• Вопрос «как сделать чтобы страница не перезагружалась?» стал стандартным

Веб никогда не вернётся к полной перезагрузке страницы как дефолтной модели взаимодействия.