Ajax без визуальных эффектов или обучение за 1 день

Многие отпали по причине несовместимости с русским языком, другие по причине "кода в себе", когда было непонятно - где идёт клиентская часть, отвечающая за оформление, а где уже часть общения с сервером, такие примеры кстати ещё и весили не мало.

Задачей же моей была безболезненная вставка в готовый проект двух функций - поиска по справочнику и фоновый поиск уже имеющихся записей в справочнике при заполнении формы добавления (чтобы пользователь сразу мог увидеть, набивая название своего предприятия - нужно ли ему заполнять многочисленные поля, или такая запись уже есть)

Во второй половине дня скачал библиотеку JsHttpRequest. По ссылке подробно и просто рассказан принцип работы как Ajax, так и самой библиотеки.

Скачанные примеры сразу заработали. Я получил, что хотел от технологии - отослать запросом один массив и получить ответом другой. А уж с помощью JavaScript вставить в нужные места полученные результаты запроса не представляло сложности.


Пример функции поиска имеющихся записей в справочнике при добавлении предприятия:

На input, в который пользователь вводит название я банально повесил функцию <input... onKeyUp="p(this.form.nazv.value)" ...>, которая по вводу n-го символа вызывала уже функцию, отрабатывающую запрос. Конечно эта функция могла проверять что-то ещё..например является ли последним символом пробел или сделать таймер...

 

function p(value)
{
if(value.length>2)doLoad(value);
}

function doLoad(value) {
// Create new JsHttpRequest object.
var req = new JsHttpRequest();
// Code automatically called on load finishing.
req.onreadystatechange = function() {
if (req.readyState == 4) {
document.getElementById('result').innerHTML = req.responseText;
}
}
// Prepare request object (automatically choose GET or POST).
req.open(null, 'namelike.php', true);
// Send data to backend.
req.send( { q: value } );
document.getElementById('result').innerHTML = "<img src=/images/loading.gif> Поиск похожих названий";

}

Источник: http://rel.habrahabr.ru/