Ajax без визуальных эффектов или обучение за 1 день
Как и все, начав разбираться с Ajax, с утра накачал себе с интернета куча разных примеров и стал применять на себя.
Многие отпали по причине несовместимости с русским языком, другие по причине "кода в себе", когда было непонятно - где идёт клиентская часть, отвечающая за оформление, а где уже часть общения с сервером, такие примеры кстати ещё и весили не мало.
Задачей же моей была безболезненная вставка в готовый проект двух функций - поиска по справочнику и фоновый поиск уже имеющихся записей в справочнике при заполнении формы добавления (чтобы пользователь сразу мог увидеть, набивая название своего предприятия - нужно ли ему заполнять многочисленные поля, или такая запись уже есть)
Во второй половине дня скачал библиотеку JsHttpRequest. По ссылке подробно и просто рассказан принцип работы как Ajax, так и самой библиотеки.
Скачанные примеры сразу заработали. Я получил, что хотел от технологии - отослать запросом один массив и получить ответом другой. А уж с помощью JavaScript вставить в нужные места полученные результаты запроса не представляло сложности.
Пример функции поиска имеющихся записей в справочнике при добавлении предприятия:
На input, в который пользователь вводит название я банально повесил функцию <input... onKeyUp="p(this.form.nazv.value)" ...>, которая по вводу n-го символа вызывала уже функцию, отрабатывающую запрос. Конечно эта функция могла проверять что-то ещё..например является ли последним символом пробел или сделать таймер...
function p(value)
{
if(value.length>2)doLoad(value);
}
Функция по положительному if вызывает функцию 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> Поиск похожих названий";
}
Ответ в скрипте namelike.php просто выводится в пул, попадая в req.responseText , а с помощью .innerHTML вставляется в <div id="result">. Во время запроса всё тем же .innerHTML вставляется всеми любимый loading.gif:)
В заключение приведу неполную выписку возможностей библиотеки JsHttpRequest:
Кроссбраузерность
Работа с любыми кодировками (без перекодировки)
Закачка файлов
Передача многомерных структур
Совместимость с библиотекой prototype
Рекомендуем почитать
