Gempo

Объявление

Администраторы:
Aiden
whisper-
2rbina
Liker
Модераторы:
Tidfall

!!!Набор Модераторов!!!



Вход
Gempo

IT-Форум.
Любишь технику? Программируешь? Создаешь сайты? Придумываешь новое? Тогда тебе сюда! Форум о технологиях и людях!
Если Ты Настоящий то тебе к Нам. Присоединяйся!

Advego.ru - наполнение сайтов информацией
У тебя имеются файлы? Ты хочешь на них заработать? Но ты не знаешь куда их залить чтобы получить хорошую прибыль?
Жми скорей сюда!
Ссылки:
Регистрация
News
Gempo Blog
Партнерские программы
Добавить в Избранное
Сделать стартовой
=))

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Gempo » Gempo Help » Начинаем работать с AJAX


Начинаем работать с AJAX

Сообщений 1 страница 2 из 2

1

В 2005 году начала набирать популярность сравнительно новая технология, называнная Ajax. Название Ajax происходит от Asynchronous JavaScript and XML. В двух словах это использование нестандартного XMLHttpRequest объекта для взаимодействия с серверными сценариями. Он может отправлять и принимать информацию в различных форматах, включая XML, HTML и текстовые файлы.

Ajax имеет очень большие возможности, а его асинхронная природа позволяет обходиться без перезагрузки страницы. Это дает вам возможность обновлять часть страницы в зависимость от действий пользователя и является краеугольным камнем Rich Internet Applications (RIA) часто обсуждаемым в контексте «Web 2.0»

DOM играет в Ajax несколько ролей, как вы будете использовать DOM зависит от того, как вы собираетесь обрабатывать ответ полученный от сервера. Вы можете получить ответ в виде текста, используя свойство responceText, или вы можете работать с XML, используя responseXML. Допустим, вы получаете от сервера ответ в виде части (X)HTML страницы для этого вы используете свойство responseText, вы можете добавить этот текст, в необходимую точку страницы используя innerHTML. Если же сервер отправляет ответ в виде XML, вы должны использовать responseXML, вы можете просматривать его DOM, проводить выборку или выполнять операции над элементами, атрибутами и текстовыми узлами.

Все это может казаться очень запутанными, но станет гораздо понятней после того как мы рассмотрим несколько примеров. Для этих примеров мы используем библиотеку XHConn для упрощения нашего взаимодействия с объектом XMLHttpRequest(). Эта библиотека доступна на сайте xkr.us/code/javascript/XHConn/ и позволяет получать простой доступ к XMLHttpRequest() через создание нового объекта XHConn и инициализацию его метода connect().

Чтобы проследить наши действия шаг за шагом читайте комментарии к примерам.

Для простого примера использования Ajax, основанного на свойстве innerHTML мы создадим адресную книгу. Начнем с кода XHTML.

Код:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xml:lang="en" lang="en">
<head>
    <title>Адресная книга на Ajax (XML версия)</title>
    <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />
    <script type="text/javascript" src="../XHConn.js"></script>
    <script type="text/javascript" src="addressBook.js"></script>
</head>

<body>
    <h1>Пример адресной книги с использованием Ajax</h1>
    <form action="/stuff/start-with-ajax/xml/index.php"
        method="POST">
        <fieldset>
            <legend>Выбор адресата</legend>
            <select id="person" name="person">
                <option value="">Никто не выбран</option>
                <option value="1">Иванов Иван</option>
                <option value="2">Владимир Петров</option>
            </select>
            <input type="submit" id="submit" name="submit"
	      value="Показать адрес" />
        </fieldset>
    </form>
    <pre id="address"></pre>
</body>
</html>

Как видите, у нас есть простая форма с элементом управления select, с помощью которого выбирается человек. Кроме того, мы предоставляем стандартный механизм запроса с помощью формы, на случай если наш JavaScript не запустится. Ниже формы у нас расположен элемент pre в котором будет отображаться адрес, получаемый из базы данных.

Давайте добавим JavaScript, мы будем использовать обработчик события onchange элемента select чтобы инициировать запрос на получение адреса выбранного человека. Сервер будет возвращать информацию в виде строки:

Код:
Bob Smith
123 School Street
Anytown, NY 12345

Эту строку мы добавим в элемент pre с помощью свойства innerHTML.

Код примера:

Код:
var addressBook = {
    myConn:    false,    // XMLHttpRequest
    body:      false,    // элемент body
    control:   false,    // элемент селект
    target:    false,    // «цель» - элемент pre
    loader:    false,    // сообщение о загрузке

    init:      function( controlId, sbmtBtnId, targetId ){
        /* init() takes three arguments:
        * id элемента select
        * id кнопки submit
        * id элемента pre */

        // проверка методов и элементов
        if( !document.getElementById ||
            !document.getElementsByTagName ||
            !document.getElementById( controlId ) ||
            !document.getElementById( sbmtBtnId )  ||
            !document.getElementById( targetId ) ) return;
            
        //создаем и проверяем объект XHConn,
        //если возникли проблемы тихонько выходим
        addressBook.myConn = new XHConn();
        if( !addressBook.myConn ) return;
        addressBook.body    =
            document.getElementsByTagName( 'body' )[0];
        addressBook.control =
            document.getElementById( controlId );
        var sbmtBtn = document.getElementById( sbmtBtnId );
        // удаляем кнопку submit
        // она нам нужна только если скрипт не запустится
        sbmtBtn.parentNode.removeChild( sbmtBtn );
        addressBook.target  = document.getElementById( targetId );
        // добавляем обработчик события onchange элемента select
        addressBook.addEvent( addressBook.control, 'change',
            function(){
                if( this.value != '' ){
                    // если адресат выбран, запрашиваем адрес
                    addressBook.getAddress( this.value );
                } else {
                    // иначе очищаем поле адреса
                    addressBook.target.innerHTML = '';
                }
            } );
    },

    getAddress:  function( id ){
        // даем пользователю знать, что началась загрузка данных
        addressBook.buildLoader();
        // функция которая будет запущена
        // после завершения вызова Ajax
        var fnWhenDone = function(oXML) {
            // удаляем сообщение о загрузке
            addressBook.killLoader();
            // вставляем полученную информацию в элемент pre
            addressBook.target.innerHTML = oXML.responseText;
        };
        addressBook.myConn.connect("index.php",
    "POST", "id="+id, fnWhenDone);
    },

    buildLoader: function(){    // создание сообщения о загрузке
        // создаем элемент div
        addressBook.loader = document.createElement( 'div' );
        // настраиваем стили
        addressBook.loader.setAttribute( 'id', 'loading' );
        addressBook.loader.style.position   = 'absolute';
        addressBook.loader.style.top        = '50%';
        addressBook.loader.style.left       = '50%';
        addressBook.loader.style.width      = '300px';
        addressBook.loader.style.lineHeight = '100px';
        addressBook.loader.style.margin     = '-50px 0 0 -150px';
        addressBook.loader.style.textAlign  = 'center';
        addressBook.loader.style.border     = '1px solid #870108';
        addressBook.loader.style.background = '#fff';
        // выводим текст сообщения о загрузке данных
        addressBook.loader.appendChild( 
    document.createTextNode( 'Загрузка... ) );
        addressBook.body.appendChild( addressBook.loader );
    },

    killLoader:  function(){
        // функция убирает сообщение о загрузке
        addressBook.body.removeChild( addressBook.loader );
    },

    addEvent: function( obj, type, fn ){ 
	    // функция добавляет обработчик события
        if (obj.addEventListener)
            obj.addEventListener( type, fn, false );
        else
            if (obj.attachEvent) {
                obj["e"+type+fn] = fn;
                obj[type+fn] = function() {
                    obj["e"+type+fn]( window.event );
                };
                obj.attachEvent( "on"+type, obj[type+fn] );
            }
    }
};
// вызываем метод init() при загрузки страницы
// и передаем необходимые параметры
addressBook.addEvent( window, 'load',
    function(){
        addressBook.init( 'person', 'submit', 'address' );
    }
);

Этот скрипт в действии

http://devilart.net/ajax/119-nachinaem- … l#post2392

2

Пример 2: Ajax с использованием Узлов (Nodes)

Давайте отредактируем пример и вместо возврата строки от сервера, будем использовать XML:

Код:
<file> 
    <name> 
        <first>Bob</first> 
        <last>Smith</last> 
    </name> 
    <address> 
        <street>123 School Street</street> 
        <city>Anytown</city> 
        <state>NY</state> 
        <zip>12345</zip> 
    </address> 
</file>

Код XHTML не изменится, но нам нужно будет внести небольшие изменения в JavaScript. Чтобы выделить отличия, я опишу вкратце каждое изменение.

Первое изменение, в обработчик события onchange элемента select, очень простое.

Код:
addressBook.addEvent( addressBook.control,
    'change',
    function(){
        if( this.value != '' ){
            addressBook.getAddress( this.value );
        } else {
            addressBook.target.removeChild(
                addressBook.target.firstChild );
        }
    } );

Вместо очищения содержимого цели с помощью innerHTML, мы удаляем узел, который является первым потомком цели.

Следующее изменение внесем в метод getAddress()

Код:
getAddress:  function( id ){
    addressBook.buildLoader();
    var fnWhenDone = function(oXML) {
        addressBook.killLoader();
        if( addressBook.target.hasChildNodes() ){
            addressBook.target.removeChild(
                addressBook.target.firstChild );
        }
        xml = oXML.responseXML;
        var name = addressBook.getNodeValue( xml, 'first' )
            + ' ' + addressBook.getNodeValue( xml, 'last' );
        var address = addressBook.getNodeValue( xml, 'street' );
        var csz     = addressBook.getNodeValue( xml, 'city' )
            + ', ' + addressBook.getNodeValue( xml, 'state' )
            + ' ' + addressBook.getNodeValue( xml, 'zip' );
        var txt = document.createTextNode(
            name+"\r\n"+address+"\r\n"+csz );
        addressBook.target.appendChild( txt );
    };
    addressBook.myConn.connect(
        "index.php", "POST", "id="+id, fnWhenDone);
};

Поскольку мы работаем с XML мы можем использовать свойство responseXML чтобы получить доступ к ответу сервера в виде дерева узлов. Мы можем просмотреть дерево, собрать необходимую информацию. В этом примере мы добавили новый метод getNodeValue()который упрощает работу с ответом полученным в виде XML:

Код:
getNodeValue: function( scope, node ){
return scope.getElementsByTagName( node )[0].firstChild.nodeValue;
},

Это метод принимает два аргумента узел и элемент содержание, которого мы хотим получить.

Как только мы получим все необходимые данные из XML, текстовая строка созданная с помощью DOM должна быть добавлена к элементу pre, конечный результат можно увидеть здесь.

Может быть, вы удивлены тому, что оба примера делают одно и то же? Это показывает, как вы можете работать с двумя разными системами и получать один и тот же результат. В Ajax, как и везде гибкость очень важна, чтобы делать свою работу.

Исходные файлы примеров, включая серверные скрипты в архиве

Автор: A List Apart: Authors: G: Aaron Gustafson

http://devilart.net/ajax/119-nachinaem- … l#post2392

Спасибо Форуму Devil Art за эту статью. wwwdevilart.net

Похожие темы


Вы здесь » Gempo » Gempo Help » Начинаем работать с AJAX