topleft topright
 

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

Печать E-mail
(0 голосов)
Как и все, начав разбираться с 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

Код примера работает тут

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

 
« Упрощаем разработку сайтов с JavaScript   Начинаем работать с Ajax »

Украинская Баннерная Сеть
PR и тИЦ