Ajax без визуальных эффектов или обучение за 1 день
Как и все, начав разбираться с Ajax, с утра накачал себе с интернета куча разных
примеров и стал применять на себя.
Многие отпали по причине несовместимости с русским языком, другие по причине
"кода в себе", когда было непонятно - где идёт клиентская часть, отвечающая за
оформление, а где уже часть общения с сервером, такие примеры кстати ещё и
весили не мало.
Задачей же моей была безболезненная вставка в готовый проект двух функций -
поиска по справочнику и фоновый поиск уже имеющихся записей в справочнике при
заполнении формы добавления (чтобы пользователь сразу мог увидеть, набивая
название своего предприятия - нужно ли ему заполнять многочисленные поля, или
такая запись уже есть)
Во второй половине дня скачал библиотеку
. По ссылке
подробно и просто рассказан принцип работы как 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
Код примера работает
Источник:
Комментарии
Ваш комментарий к данному материалу будет интересен нам и нашим читателям!
Когда существующих возможностей становиться мало, а совершенствовать существующее уже некуда, тогда и происходит технологический прорыв. Таким прорывом и есть AJAX (Asynchronous JavaScript and XML) - подход к построению пользовательских интерфейсов веб-приложений, при котором web-страница, не перезагружаясь, сама догружает нужные пользователю данные. AJAX - один из компонентов концепции DHTML... подробнее
Итак, запись в таблице отредактирована, осталось её сохранить. Первое, что приходит на ум - это целиком AJAX решение, когда данные собираются из редактируемой строки DataGrid, отправляются на сервер, и в случае успеха клиентская PostBack функция перерисовывает строку таблицы уже только для просмотра... подробнее
Не так давно я говорил, что буду предоставлять информацию относительно PHP и Ajax. На конференции которую я провел на прошлой неделе 10 ноября 2005г. Я также обещал людям что переведу все что я приготовил для публикации на моем блоге (автор так и не перевел все это дело на Голландский, тем самым очень мне облегчил перевод )... подробнее
Давайте обсудим более рациональные и эффективные функции для нашего любимого сайта. Начнем с самой простой вещи - кнопки Добавить в закладки. По моему, это самое наболевшее место, которое так и просится чтобы его Ajax’стили... подробнее
Рыская в интернете в поисках Ajax-готового новостного движка, я наткнулся на давно всем известный . Хотя этот довольно продвинутый php ресурс и содержит элементы Ajax, они по-моему не до конца раскрыты и используются довольно скупо... подробнее
