Начинаем работать с Ajax : Программирование для всех. Языки программирования, программирование баз данных, технологии. Статьи для програмиста скачать бесплатно учебники книги документация форум : Статьи

В 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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"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' );
    }
);

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

Пример 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+"rn"+address+"rn"+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, как и везде гибкость очень важна, чтобы делать свою работу.

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

Ресурсы посвященные Ajax:

Foundations of Ajax by Ryan Asleson and Nathaniel T. Schutta (Apress)
Fiftyfoureleven’s XMLHttpRequest Examples⁵
The Ajaxian Blog⁶
AHAH⁷, микроформат для работы с XMLHttpRequest() и innerHTML

Translated with the permission of A List Apart Magazine⁸ and the author[s].

Источник: http://designformasters.info/

После публикации 29 тестовых версий анонсирован первый стабильный релиз MySQL 5.1, пригодный для промышленной эксплуатации и обеспечивающий увеличение производительности для "тяжелых" SQL запросов, по сравнению с MySQL 5.0, примерно на 15-20%. Главные новшества появившиеся в MySQL 5.1:

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

Аннотация. В статье кратко рассматривается архитектура AMD64 компании AMD и ее реализация EM64T компании Intel. Описаны особенности архитектуры, ее возможности, достоинства и недостатки.