Без ajax что это – AJAX vs WebSocket — что лучше для загрузки простого текста с сервера без перезагрузки страницы? — Хабр Q&A

Содержание

что это такое, влияние на SEO, преимущества и недостатки технологии

Что такое AJAX?

AJAX (Asynchronous JavaScript and XML) – это технология, обеспечивающая динамические запросы на сервер, в ходе которых нет нужды перезагружать страницу. Сайт функционирует на порядок быстрее, потому что не нужно регулярно обновлять всю страницу, поэтому его использование становится более удобным для пользователя, но не для поисковых систем.

История возникновения технологии AJAX

Огромное количество подобных технологий начали применяться еще в далеких 90-х годах прошлого века. Например, в 96-ом году в браузер Internet Explorer 3 внедрили HTML-элемент IFRAME, а спустя два года Microsoft реализовала механизм Remote Scripting.

Однако сам термин «Asynchronous JavaScript and XML» стал известен миру лишь на заре 2005 года, когда Джесси Гаррет выпустил статью под названием «Ajax: новый подход к веб-приложениям». В своем материале Гаррет подробно рассказал, как создаются интернет-приложения для Google Maps и Gmail. Он с уверенностью заявил, что это стало началом стремительного развития возможностей, доступных пользователям в приложениях.

Джесси Гаррет

Джесси Джеймс Гарретт (Jesse James Garrett)

Особое внимание Джесси Гаррет уделил именно технологии AJAX, дал ей название и детально описал новый тренд. Но стоит отметить, что не он придумал эту технологию, он дал ей только название.

После этого сфера разработок интернет-приложений стала куда совершеннее. Отныне результаты обмена данными между браузером и сервером пользователи могут видеть на своих дисплеях.

Зайдя на определенный сайт, вы сразу поймете, что на нем применяется технология AJAX. Раньше пользователям приходилось нажимать на различные кнопки и переходить по ссылкам, чтобы подтвердить свои действия. Сегодня же веб-страница самостоятельно принимает новые данные в реальном времен без перезагрузки на стороне пользователя.

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

Принцип работы технологии

Чтобы конкретно понять, как именно работает AJAX, рассмотрим 4 важнейших этапа:

  1. Посетитель обращается к AJAX. Как правило, делает он это посредством определенной кнопки, которая сообщает о том, что при нажатии вы ознакомитесь с дополнительной информацией.
  2. Затем система отсылает запрос и различные данные на сервер. К примеру, может понадобиться загрузить какой-нибудь файл или информацию, находящиеся в базе данных.
  3. Получив ответ от базы данных, сервер отправляет данные в браузер.
  4. JavaScript приходит ответ, и он расшифровывает его в читабельный для пользователя вид
    .

Если объяснять суть технологии визуально, то на изображении данный процесс будет выглядеть так:
Принцип работы технологии AJAX
Без объекта XMLHttpReques обмен информацией невозможен, поэтому он предварительно размещается на самой странице. Объект выступает в роли связывающего звена для сервера и веб-браузера. Сами запросы переходят от системы к серверу в формате POST или GET. Для типа GET при

webmasterie.ru

Знакомство с Ajax. Основы Ajax

Знакомство с AJAX для Front-End дизайнеров. Основы AJAX

От автора: данная серия статей призвана познакомить front-end дизайнеров и начинающих разработчиков с технологией AJAX, основной front-end технологией. В первом уроке мы затронем основы AJAX, начнем узнавать различные детали данной технологии, узнаем, что это такое, как работает и какие есть ограничения.

Приступим! Обратите внимание: предполагается, что вы уже знаете базовые front-end технологии, такие как HTML и CSS.

Что такое AJAX?

AJAX расшифровывается как «Асинхронный JavaScript и XML». Под AJAX понимается не одна технология, и она не является новой. На самом деле это группа технологий (HTML, CSS, Javascript, XML, и т.д.), которые связываются вместе для создания современных веб-приложений.

С помощью AJAX клиент (браузер) общается с сервером и запрашивает у него данные. Полученный ответ обрабатывается, и в станицу вносятся изменения без полной ее перезагрузки. Разберем аббревиатуру AJAX:

«Асинхронный» означает, что когда клиент запрашивает данные с сервера, браузер не зависает, пока не получит ответ. Пользователь наоборот может перемещаться по страницам. Как только сервер вернул ответ, в фоновом режиме ответ начинает обрабатываться соответствующими функциями.

Знакомство с AJAX для Front-End дизайнеров. Основы AJAX

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

«JavaScript» это язык программирования, который используется для создания объекта запроса AJAX, парсинга этого ответа и обновления DOM страницы.

Для отправки запроса на сервер клиент использует XMLHttpRequest или XHR API. API (программный интерфейс) это набор методов, которые задают правила общения между двумя заинтересованными сторонами. Тем не менее, приходящие из AJAX запроса данные могут быть в любом формате, а не только в XML.

Как работает AJAX

Чтобы понять основной принцип работы, давайте взглянем на картинку ниже:

Знакомство с AJAX для Front-End дизайнеров. Основы AJAX

На картинке описан стандартный AJAX сценарий:

Пользователь хочет увидеть больше статей, и он или она кликает на нужную кнопку. Данное событие запускает вызов AJAX.

Запрос посылается на сервер. С запросом можно передать различные данные. Запрос может посылаться в статический файл (к примеру, example.php), хранящийся на сервере. Также можно выполнять динамические скрипты (functions.php), на каждом этапе которых будет происходить общение с базой данных (или другой системой) для извлечения необходимой информации.

База данных отсылает обратно запрошенные статьи на сервер. А сервер посылает их в браузер.

JavaScript парсит ответ и обновляет часть DOM (структура страницы). В нашем примере обновится только сайдбар. Остальные части страницы не меняются.

Помня это, вы поймете, почему AJAX настолько важная технология в современном интернете. Разрабатывая приложения под управлением AJAX мы можем контролировать большие объемы данных, загружаемых с сервера.

Живой пример на AJAX

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

Сперва рассмотрим принципы работы Facebook и Twitter. При прокрутке страницы вниз AJAX подгружает новый контент. Также если вы ставите лайк или дизлайк вопросам и ответам на Stack Overflow, опять же срабатывает AJAX. Как только вы вбиваете в строку поиска что-то в Google или Youtube, срабатывают множественные запросы AJAX.

Более того, если мы захотим, то сможем отслеживать данные запросы. К примеру, в консоли Chrome это можно сделать, кликнув правой кнопкой мыши и активировав функцию Log XMLHttpRequests.

Как создать запрос

Выше мы уже говорили, что для создания запроса используется XMLHttpRequest API. Кроме того в jQuery, самой популярной JS библиотеке есть различные Ajax функции и методы. В серии статей мы рассмотрим различные примеры на чистом JS и JQuery для отправки запросов на сервер.

Управление запросами

Вытаскиваемые данные с сервера могут храниться в различных форматах. XML, JSON, JSONP, обычный текст и HTML.

Знакомство с AJAX для Front-End дизайнеров. Основы AJAX

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее
XML

XML (Расширяемый язык разметки) – один из самых популярных форматов для обмена данными между приложениями. Формат похож на HTML, и в качестве структуры используются теги. Однако в XML нет готовых тегов, мы сами задаем их. Пример структуры ниже:

<person> <name>Mike</name> <surname>Mathew</surname> <nationality>Australian</nationality> <languages> <language>English</language> <language>Spanish</language> <language>French</language> <language>Russian</language> </languages> </person>

<person>

    <name>Mike</name>

    <surname>Mathew</surname>

    <nationality>Australian</nationality>

    <languages>

        <language>English</language>

        <language>Spanish</language>

        <language>French</language>

        <language>Russian</language>

    </languages>

</person>

В сети полно онлайн редакторов, с помощью которых можно создавать XML документы. Мой любимый это: XMLGrid.net. В этом редакторе наш пример выглядит так:

Знакомство с AJAX для Front-End дизайнеров. Основы AJAX

JSON

JSON (JavaScript Object Notation) – еще один популярный формат обмена данными. В JSON пример сверху будет выглядеть так:

{ «name» : «Mike», «surname» : «Mathew», «nationality» : «Australian», «languages» : [«English», «Spanish», «French», «Russian»] }

{

  «name»        : «Mike»,

  «surname»     : «Mathew»,

  «nationality» : «Australian»,

  «languages»   : [«English», «Spanish», «French», «Russian»]

}

В сети также полно онлайн JSON редакторов. Мне нравятся два редактора: JSON Generator, JSON Editor Online

В JSN редакторе наш пример будет выглядеть так:

Знакомство с AJAX для Front-End дизайнеров. Основы AJAX

Ограничения в AJAX запросах

Перед тем, как начать использовать AJAX, необходимо узнать про ограничения. Мы рассмотрим только две проблемы.
Первая – ошибка в консоли Chrome:

Знакомство с AJAX для Front-End дизайнеров. Основы AJAX

Ошибка появляется, когда запрос ссылается на локальный файл. В этом примере мы хотели получить доступ к данным из локального файла (Demo.json), который хранится не на сервере. Для устранения данной проблемы можно установить локальный сервер и хранить файлы там. Вторая проблема:

Знакомство с AJAX для Front-End дизайнеров. Основы AJAX

Ошибка появляется, когда данные из запроса хранятся на другом домене относительно нашей страницы (ошибка известна как правило ограничения домена). В нашем примере данные хранятся на локальном сервере, а страница хранится на сервере Codepen. К счастью, данные ошибки устранимы.

Один из способов это CORS от W3C. Но данный механизм требует внести изменения в конфигурацию файлов на сервере. К примеру, на данной странице описано, как настроить Apache сервер. Другой способ это JSONP (JSON с набивкой).

Заключение

Данный обзор дал вам представление о том, что такое AJAX, где вы уже с ним могли сталкиваться, а также какие существуют потенциальные проблемы. Также мы рассмотрели самые популярные форматы обмена данными. В следующей статье мы рассмотрим работающий пример. Увидимся!

Автор: George Martsoukos

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Знакомство с AJAX для Front-End дизайнеров. Основы AJAX

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее Знакомство с AJAX для Front-End дизайнеров. Основы AJAX

Создание зависимых списков средствами AJAX

Посмотрите видео по созданию зависимых списков средствами AJAX!

Смотреть

webformyself.com

jQuery для начинающих. Часть 3. AJAX / Habr


Представляю Вам третью статью из серии jQuery для начинающих. В этот раз я постараюсь рассказать о реализации AJAX запросов…

Что такое AJAX я думаю рассказывать не стоит, ибо с приходом веб-два-нуля большинство пользователей уже воротят носом от перезагрузок страниц целиком, а с появлением jQuery реализация упростилась в разы…

Примечание: Во всех примерах используется сокращенный вариант вызова jQuery методов, используя функцию $ (знак доллара)

jQuery(..).load

Начнем с самого простого — загрузка HTML кода в необходимый нам DOM элемент на странице. Для этой цели нам подойдет метод load. Данный метод может принимать следующие параметры:

  1. url запрашиваемой страницы
  2. передаваемые данные (необязательный параметр)
  3. функция которой будет скормлен результат (необязательный параметр)

Приведу пример JavaScript кода:
// по окончанию загрузки страницы
$(document).ready(function(){              
    // вешаем на клик по элементу с id = example-1
    $(‘#example-1’).click(function(){
        // загрузку HTML кода из файла example.html
        $(this).load(‘ajax/example.html’);       
    }) 
}); 

Пример подгружаемых данных (содержимое файла example.html):
Example<br/>
Data Loaded By AJAX<br/>
Bye-Bye

Пример работы

jQuery.ajax


Это самый основной метод, а все последующие методы лишь обертки для метода jQuery.ajax. У данного метода лишь один входной параметр — объект включающий в себя все настройки (выделены параметры которые стоит запомнить):
  • async — асинхронность запроса, по умолчанию true
  • cache — вкл/выкл кэширование данных браузером, по умолчанию true
  • contentType — по умолчанию «application/x-www-form-urlencoded»
  • data — передаваемые данные — строка иль объект
  • dataFilter — фильтр для входных данных
  • dataType — тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)
  • global — тригер — отвечает за использование глобальных AJAX Event’ов, по умолчанию true
  • ifModified — тригер — проверяет были ли изменения в ответе сервера, дабы не слать еще запрос, по умолчанию false
  • jsonp — переустановить имя callback функции для работы с JSONP (по умолчанию генерируется на лету)
  • processData — по умолчанию отправляемые данный заворачиваются в объект, и отправляются как «application/x-www-form-urlencoded», если надо иначе — отключаем
  • scriptCharset — кодировочка — актуально для JSONP и подгрузки JavaScript’ов
  • timeout — время таймаут в миллисекундах
  • type — GET либо POST
  • url — url запрашиваемой страницы

Локальные AJAX Event’ы:
  • beforeSend — срабатывает перед отправкой запроса
  • error — если произошла ошибка
  • success — если ошибок не возникло
  • complete — срабатывает по окончанию запроса

Для организации HTTP авторизации (О_о):
  • username — логин
  • password — пароль

Пример javaScript’а:
$.ajax({
    url: ‘/ajax/example.html’,             // указываем URL и
    dataType : «json»,                     // тип загружаемых данных
    success: function (data, textStatus) { // вешаем свой обработчик на функцию success
        $.each(data, function(i, val) {    // обрабатываем полученные данные
            /* … */
        });
    }
});

jQuery.get


Загружает страницу, используя для передачи данных GET запрос. Может принимать следующие параметры:
  1. url запрашиваемой страницы
  2. передаваемые данные (необязательный параметр)
  3. callback функция, которой будет скормлен результат (необязательный параметр)
  4. тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

jQuery.post


Данный метод аналогичен предыдущему, лишь передаваемые данные уйдут на сервер посредством POST’а. Может принимать следующие параметры:
  1. url запрашиваемой страницы
  2. передаваемые данные (необязательный параметр)
  3. callback функция, которой будет скормлен результат (необязательный параметр)
  4. тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

JavaScript:

$(document).ready(function(){                          // по завершению загрузки страницы
    $(‘#example-3’).click(function(){                  // вешаем на клик по элементу с id = example-3
        $.post(‘ajax/example.xml’, {}, function(xml){  // загрузку XML из файла example.xml   
            $(‘#example-3’).html(»);
            $(xml).find(‘note’).each(function(){       // заполняем DOM элемент данными из XML
                $(‘#example-3’).append(‘To: ‘   + $(this).find(‘to’).text() + ‘<br/>’)
                               .append(‘From: ‘ + $(this).find(‘from’).text() + ‘<br/>’)
                               .append(‘<b>’    + $(this).find(‘heading’).text() + ‘</b><br/>’)
                               .append(           $(this).find(‘body’).text() + ‘<br/>’);
            });
        }, ‘xml’);                                     // указываем явно тип данных
    })
});

Файл example.xml:
<?xml version=»1.0″ encoding=»UTF-8″?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don’t forget me this weekend!</body>
</note>

Пример работы

jQuery.getJSON


Загружает данные в формате JSON (удобней и быстрее нежели XML). Может принимать следующие параметры:
  1. url запрашиваемой страницы
  2. передаваемые данные (необязательный параметр)
  3. callback функция, которой будет скормлен результат (необязательный параметр)

JavaScript:

$(document).ready(function(){                            // по завершению загрузки страницы
    $(‘#example-4’).click(function(){                    // вешаем на клик по элементу с id = example-4
        $.getJSON(‘ajax/example.json’, {}, function(json){  // загрузку JSON данных из файла example.json   
            $(‘#example-4’).html(»);
                                                         // заполняем DOM элемент данными из JSON объекта
            $(‘#example-4’).append(‘To: ‘   + json.note.to + ‘<br/>’)
                           .append(‘From: ‘ + json.note.from + ‘<br/>’)
                           .append(‘<b>’    + json.note.heading + ‘</b><br/>’)
                           .append(           json.note.body + ‘<br/>’);
        });                
    })
});

Файл example.json:
{
    note:{
        to:’Tove’,
        from:’Jani’,
        heading:’Reminder’,
        body:’Don\’t forget me this weekend!’
    }
}

Пример работы

jQuery.getScript


данная функция загружает и выполняет локальный JavaScript. Может принимать следующие параметры:
  1. url запрашиваемого скрипта
  2. callback функция, которой будет скормлен результат (необязательный параметр)

JavaScript:

$(document).ready(function(){                          // по завершению загрузки страницы
    $(‘#example-5’).click(function(){                  // вешаем на клик по элементу с id = example-5
        $.getScript(‘ajax/example.js’, function(){     // загрузку JavaScript’а из файла example.js 
            testAjax();                                // выполняем загруженный JavaScript
        });                
    })
});

Файл example.js:
function testAjax() {
    $(‘#example-5’).html(‘Test completed’);  // изменяем элемент с id = example-5
}

Пример работы

Отправка Формы


Для отправки формы посредством jQuery можно использовать любой из перечисленных способов, а вот для удобства «сбора» данных из формы лучше использовать плагин jQuery Form

Отправка Файлов


Для отправки файлов посредством jQuery можно использовать плагин Ajax File Upload иль One Click Upload

Взаимодействие с PHP


Для организации работы с PHP использую бибилотеку jQuery-PHP, удобно если Вам нравится jQuery ;), подробней читаем в статье PHP библиотека для jQuery

Примеры использования JSONP


Отдельно стоит отметить использование JSONP — ибо это один из способов осуществления кросс-доменной загрузки данных. Если немного утрировать — то это подключение удаленного JavaScript’a, содержащего необходимую нам информациию в формате JSON, а так же вызов нашей локальной функции, имя которой мы указываем при обращении к удаленному серверу (обычно это параметр callback). Чуть более наглядно это можно продемонстрировать следующая диаграмма (кликабельно):


При работе с jQuery имя callback функции генерируется автоматически для каждого обращения к удаленному серверу, для этого достаточно использовать GET запрос ввида:

http://api.domain.com/?type=jsonp&query=test&callback=?

Вместо последнего знака вопроса (?) будет подставлено имя callback функции. Если же Вы не хотите использовать данный способ, то Вам необходимо будет явно указать имя callback функции, используя опцию jsonp при вызове метода jQuery.ajax().

Google Поиск


Пример получения и обработки результатов поиска используя Google, более подробную информацию найдете в статье «jQuery + AJAX + (Google Search API || Yahoo Search API)»

Yahoo Поиск


Пример получения и обработки результатов поиска используя Yahoo, более подробную информацию найдете в статье «jQuery + AJAX + (Google Search API || Yahoo Search API)»

JSONP API


Приведу так же небольшой список открытых API с поддержкой JSONP:
  • Google — поиск и большинство сервисов
  • Yahoo — поиск и большинство сервисов
  • Flickr
  • MediaWiki — соответственно и все производные — Wikipedia, Wiktionary и т.д.
  • Digg
  • CNET
  • aideRSS

События


Для удобства разработки, на AJAX запросах висит несколько event’ов, их можно задавать для каждого AJAX запроса в отдельности, либо глобально. На все event’ы можно повесить свою функцию.

Пример для отображения элемента с id=«loading» во время выполнения любого AJAX запроса:

$(«#loading»).bind(«ajaxSend», function(){
    $(this).show(); // показываем элемент
}).bind(«ajaxComplete», function(){
    $(this).hide(); // скрываем элемент
});

Для локальных событий — вносим изменения в опции метода ajax():
$.ajax({
    beforeSend: function(){
        // Handle the beforeSend event
    },
    complete: function(){
        // Handle the complete event
    }
    // …
});

Для большей наглядности, приведу следующую диаграмму (кликабельно):

Ну и собственно список всех event’ов:

  • ajaxStart — Данный метод вызывается в случае когда побежал AJAX запрос, и при этом других запросов нету
  • beforeSend — Срабатывает до отправки запроса, позволяет редактировать XMLHttpRequest. Локальное событие
  • ajaxSend — Срабатывает до отправки запроса, аналогично beforeSend
  • success — Срабатывает по возвращению ответа, когда нет ошибок ни сервера, ни вернувшихся данных. Локальное событие
  • ajaxSuccess — Срабатывает по возвращению ответа, аналогично success
  • error — Срабатывает в случае ошибки. Локальное событие
  • ajaxError — Срабатывает в случае ошибки
  • complete — Срабатывает по завершению текущего AJAX запроса (с ошибкои или без — срабатывает всегда).Локальное событие
  • ajaxComplete — Глобальное событие, аналогичное complete
  • ajaxStop — Данный метод вызывается в случае когда больше нету активных запросов

Так же Вы можете скачать все примеры в одном архиве.

Цикл статей


  1. jQuery для начинающих
  2. jQuery для начинающих. Часть 2. JavaScript Меню
  3. jQuery для начинающих. Часть 3. AJAX

P.S. Для подсветки синтаксиса использовал мини-сервис http://highlight.hohli.com/

habr.com

Области применения Ajax

У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!

Для чего все-таки нужен Ajax? Где его стоит использовать, а где нет?

Где стоит использовать Ajax:

  1. Формы. Они очень медленны. Если асинхронно передавать данные, страница не перезагружается.
  2. Навигация в виде «дерева». Вообще, такая навигация — ужас. Простая топология намного удобнее, но если уж до этого дошло, лучше использовать Ajax.
  3. Голосования. Пользователю будет приятней оставить свой голос за несколько секунд, чем за 30-40.
  4. Система комментариев. Пример: на сайте есть статьи, к которым можно приписывать комментарии. Пользователю приходится все время перезагружать страницу, чтобы увидеть новые посты. Это крайне неудобно.
  5. Фильтры. Часто на сайтах делают сортировку по дате, по имени, и т.д. Ajax это будет значительно удобнее.

Где не стоит использовать Ajax:

  1. Поиск. Лучше использовать PHP и Perl.
  2. Обычная навигация. Для навигации между документами Ajax не поможет.
  3. Обновление большого количества текста. Если текст занимает почти всю страницу, то легче перезагрузить ее.
  4. Бесполезные украшения. Всякие подсвечивающиеся ячейки и появляющиеся подсказки будут только отвлекать пользователя.

Теперь о самой большой проблеме Ajax. Закладки и кнопки «вперед-назад» стали незаменимы из-за традиционных веб-приложений. С посещением разных сайтов у пользователя скапливается большая коллекция закладок, да и кнопки «вперед-назад» работают прекрасно, всегда можно вернуться к интересующей информации. Но Ajax-приложения довольно необычны, и обычно огромное количество данных находится формально на одной и той же странице. Наши браузеры тоже считают такое приложение одной страницей, поэтому при обновлении кнопки «вперед-назад» не работают, поэтому нельзя вернутся, если что-то пропустил, а закладки в этом случае просто бесполезны.

Итак, Ajax — это не технология, это объединение технологий, это процесс, это новый взгляд на старые вещи. Ни одна из технологий, составляющих Ajax не нова. Однако, их совместное использование позволяет получить новые результаты.

htmlweb.ru

Что такое Ajax?


Ajax — это подход к построению интерактивных пользовательских интерфейсов web-приложений, разработанный на javaScript, который в фоновом режиме (без перезагрузки всей страницы, как в PHP) позволяет обмениваться данными между браузером и сервером.

AJAX от английского э́йджэкс, в русском языке популярно произношение ая́кс.

Из истории AJAX


Первое упоминания об AJAX официально известно 18 февраля 2005 года в статье Джесси Джеймса Гарретта (Jesse James Garrett) Новый подход к веб-приложениям. Автор решил описать новый подход к web-технологиям и упрощённой связи сервера и клиента.

Большую популярность AJAX приобрёл после того, как Google использовал его в своих сервисах, таких как Gmail, Google Maps и Google Suggest.

Google поиск выдаёт варианты запроса

Как работает AJAX


В начале хотелось бы сказать, что AJAX имеет вид всего лишь одного объекта под названием XMLHttpRequest.

Свойства XMLHttpRequest дают возможность передавать информацию на сервер с помощью методов Get или Post, после чего сервер выполняет необходимые операции и остается только получить ответ.

Когда Вы используете Ajax нужно учитывать следующие правила:
1. вся информация передается/получается исключительно в кодировке UTF-8
2. в разных браузерах XMLHttpRequest вызывается по-разному

Основные преимущества и недостатки AJAX


Преимущества

Экономия трафика. Передаются данные только конкретной части страницы, что существенно снижает трафик.
Уменьшение нагрузки на сервер. Нет надобности обновлять страницу целиком, уходит конкретный запрос. Например, Вы захотели проголосовать на сайте. После нажатия кнопки отправляются данные на сервер по Вашему голосу, и возвращается ответ. При этом сама страница не обновляется. Меняется только результат.
Быстрая работа самого сервиса. Поскольку работа происходит с конкретным блоком, то и результат его работы можно увидеть намного быстрее.
Разнообразие в использовании. Действие AJAX подразумевает под собой не только работу с формами. Например, в поиске Google вы можете видеть подборку поисковых фраз после ввода уже первых букв Вашего запроса.
Недостатки

Требуется включенный Java Script. Если в настройках безопасности браузера будет выключен Java Script, то результата работы AJAX можно не увидеть.
Данные не доступны поисковикам. Что логично, динамически изменяемые данные, как и прочие в Java Script не видимы поисковым роботом.
Сложность самого проекта. Со временем, при частом использовании AJAX на сервисе могут возникнуть трудности в работе с программным кодом и масштабностью проекта. Поэтому использование AJAX в самом начале стоит ограничить и использовать точечно.
невозможно отследить количество обращений. Поскольку AJAX слабо интегрирован со стандартными инструментами браузера, использование динамических элементов нельзя отследить и просмотреть. Для этого приходится использовать другие скрипты.

Пример работы AJAX


Демонстрация Скачать исходники

Популярные библиотеки AJAX


jQuery — популярный JavaScript-фреймворк
AJAX.OOP — JavaScript-фреймворк
Extjs — JavaScript-библиотека
xajax — PHP и JavaScript-библиотека
Dojo — многофункциональный JavaScript-инструментарий
JsHttpRequest — AJAX-библиотека с поддержкой AJAX-закачки файлов на сервер и многими другими возможностям
Google Web Toolkit — инструментарий от Google для Java-разработчиков

tradebenefit.ru

Несколько вещей об Ajax, которые должен знать веб-мастер / Habr

По-английски AJAX произносится как эй-джэкс, по-русски довольно распространено ая́кс.
Вроде бы всё красиво, но есть несколько подводных камней, о которых я вам ниже и расскажу.

Ajax — это не просто акроним, это идея


Хотя Ajax и является акронимом от «Асинхронный JavaScript и XML», это не раскрывает его идеологию. Ajax – это идеология, которая гласит, что для работы серверного веб-приложения, совсем не обязательно перезагружать всю страницу, бесполезно гоняя данные от сервера к клиенту и обратно. Использование Ajax’a позволяет сделать веб-приложение более гибким и современным, позволяя пользователям работать с веб-приложением более продуктивно и удобно.

Это действительно JavaScript


Ajax-приложения пишут на JavaScript и, как правило, используют объект XMLHttpRequest для передачи данных (для браузеров от Microsoft — ActiveXObject(Microsoft.XMLHTTP) — ничего не поделаешь). Объект XMLHttpRequest был одобрен World Wide Web Consortium. Поскольку технология получила широко распространение относительно недавно, то никакого общего стандарта нет, и как следствие — разные браузеры могут по разному понимать Ajax или просить особо подхода, яркий пример чего — это браузеры от Microsoft. Для более глобальной совместимости можно использовать другие технические решения, к примеру фреймы, кукисы, Java-аплет или Flash. Однако если фреймы и куки не всегда справляются с возложенной задачей, то Java-аплет или Flash слишком тяжеловесны. Вы когда-нибудь в страшном сне представляли админку WordPress’a сделанную полностью на флеше?

Независимо от того, используете вы Ajax или нет, JavaScript поднялся до новых, ранее не доступных ему, высот. Теперь это полноценный инструмент для современного веб-мастера, игнорировать его более нет смысла, он полезен и удобен для пользователя. Например я активно начал учить JavaScript, если раньше я довольствовался каким-то общим представлением и написанием несложных скриптов — то сейчас я начал копать глубже, потому что я планирую работать с Ajax более тесно.

Разработчики, которые считают JavaScript второсортным или вредным языком, избегают его как только могут. Однако если перед вами стоит задача написать Ajax-приложение, вам всё равно придётся использовать JavaScript. Аналогией могут служить разве что Java-аплеты или Flash.

Ajax очень интерактивен, потому при ошибках проектирования приложения или кодинга, могут возникнуть проблемы. Ajax принял в наследство все правила хорошего тона от JavaScript, все правила и запреты — это касается написания, отладки и тестирования уже готового приложения.

XML вовсе необязателен


Не смотря на то, что «X» в акрониме Ajax пошла именно от XML, его использование вовсе необязательно. Вполне допустимо использовать просто текст, предположим, с разделителями, а то и просто куски HTML кода (что я и делаю, в общем-то, скрипт, к которому отправлялся запрос генерирует готовый кусок кода, который просто заменяет предыдущий код). А ещё кто-то использует YAML разметку.

XMLHttpRequest пока плохо работает с бинарным форматом данных, в отличие от Flash. Но скоро такая ситуация, как мне кажется, будет исправлена. Уже сейчас есть фиксы, костыли — но всё не то.

Как вывод — проанализируйте, какой формат данных в вашем случае удобней и быстрее обрабатывается. К примеру для несложных манипуляций замечательно подойдёт YAML или CSV, а XML будет излишне толстым 🙂

Рассчитывайте и планируйте увеличение HTTP запросов


Самая очевидная проблема для веб-мастера заключается в том, что что веб-приложение отныне будет отсылать не пару сотен килобайт раз, к примеру, в 10 минут, а более часто более мелкими объёмами. На деле это означает возможность возникновения задержек в обработке Ajax-запросов и усиления нагрузок на веб-сервер. Это следует учитывать ещё на уровне проектирования Ajax-приложения.

Оптимизируйте Ajax-запросы аккуратно


Не переусердствуйте, потому как оптимизация запроса в итоге даст вам минимальный выигрыш в скорости отправки-получения запроса. Лучше включите компрессию на стороне сервера. Все современные браузеры это поймут и оценят.

Однако есть решение лучше — кеширование запросов. Причём не утруждайте себя изобретением велосипеда с попыткой закешировать это на строноне клиента — кешируйте прямо на сервере. Ajax-приложение выйграет от этого много больше, чем от сжатия.

Помните о максимальном количестве соединений


Ajax-приложения ограничены спецификацией HTTP, которая позволяет открывать одновременно не более двух соединений к одному сетевому адресу. Хорошая новость в том, что в большинстве случаев эти ограничения отсутствуют. Однако могут возникнуть проблемы с браузером, или с сетевым администратором. Однако последним, по хорошему, закрыть бы на это глаза.

Следите за полученными ответами


В традиционном веб-приложении, разработчики обычно не заморачиваются порядком получения данных пользователями. Да по сути, это и не нужно. Ajax такого не любит. Важно соблюдать очерёдность «отправка-приём-обработка полученного», иначе могут возникнуть совсем неожиданные проблемы.

Внимательно следите за ошибками


Уже много лет пользователи, при проблемах с отображением страницы нажимают кнопку «Назад» в браузере. В современных Ajax-приложениях это тоже важно. Ведь обычной gif картинки недостаточно для определения состояния запроса.

При возникновении ошибки отправляйте себе нотисы, для их анализа и ликвидации ошибок и проблем. А пользователю выведите что-нибудь дружелюбное после определённого времени. Стоит также признать, что современные JS/Ajax фреймворки не умеют нормально работать с тайм-аутом.

Старая сказка о безопасности


На самом деле Ajax-приложение так же безопасно, как и традиционное. Заголовки одинаковы, средства и способы коммуникации — тоже одинаковы. Хотя стоит отдельной строкой уделить внимание некоторым вещам, ведь классические ошибки могут спокойны стать наследством Ajax-приложения.

Это XSS — сам по себе он не является новинкой, просто с распространением Ajax-приложений начал набирать популярность. Как минимум фильтруйте любой HTML код, приходящий от пользователя. Так же проверяйте HTTP Referer — ибо это важно.

Сейчас сетевые специалисты приходят к выводу, что ненадлежащая защита сайта, который активно использует JavaScript, может привести не только к несанкционированному доступу к вашему серверу, но и к компьютеру вашего посетителя. Будьте аккуратны и осторожны, ведь потом будет неприятно узнать, что из-за вашей лени у кого-то увели аську или кошелёк.

Вместо «Спасибо за внимание»


Этот текст является вольным переводом с правками и дополнениями статьи 10 things IT needs to know about Ajax.

Кросс-пост из моего блога.

habr.com

Как делать удобные ajax-сайты / Habr

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

Сразу скажу, что существуют такие web-приложения, которые лишены указанных ниже недостатков (например, Gmail, Хабрахабр). Но это — счастливые исключения, лишь подтверждающие правила.

1. Трудность навигации


Прежде всего, состояние. Тот, кто читал «Психбольницу в руках пациентов» Купера, знает, о чем речь. Складным ножом легко пользоваться потому, что у него всего два состояния: раскрыт и сложен. А в случае же с сайтом вы имеете очень большое количество состояний. И если к неопределенности в плане ссылок мозг еще привыкает со временем — пользователь знает, что он находится на одной странице, и всего его действия ограничены ею одной, что сказывается на относительной легкости моделировании различных состояний по страницам — то с аяксом такого не происходит.


Довольная Гаечка наконец-то нашла нормальный ajax-сайт!

Однако этот факт совершенно не заботит типового программиста. Потому что мозг программиста настолько мощный, что ему под силу моделировать все состояния в голове. К чему же это приводит?

К тому, что традиционные границы страницы стираются, и моделирование для простого пользователя состояний сайта становится очень тяжелым. Думаю, все имели дело со флеш-сайтами, особенно каких-нибудь артистов, и помнят неудобство использования такого сайта.

Решением является такое применение аякса, когда пользователю предоставляются «виртуальные» страницы, когда функционал так группируется, что есть некие логические центры, откуда идет множество аякс-запросов, связанных одной ответственностью. К примеру, в Gmail это явно видно: вот список писем, вот страница письма, а вот страница настроек.

Но это только вершина айсберга. Рассмотрим более конкретные баги и недоработки.

2. Сброс состояния при закрытии


Это один из частых видов проблем, о которых не думает никто. Распространены следующие варианты.

Невозможность отправить другу, или добавить страницу в избранное. Разработчик не позаботился использовать никакие признаки состояния, в котором находится аякс-приложение, в URL. И чтобы отправить другу ссылку в аське, нужно еще написать текст в стиле «нажми туда, пойди сюда, кликни это», чуть ли не скринкаст снять. Ясно, что если вдруг случайно выключился свет, то те же самые действия пользователю придется проделать снова, что ужасно бесит и сильно снижает ядро аудитории сайта.

Отдельно отмечу формы, которые не запоминают введенные данные, показывая сообщений о неверном заполнении. Это просто трындец, господа. Запомните, главный закон — DRY — работает для пользователя в первую очередь. Пользователь должен делать минимум кликов, и не должен ничего делать дважды. Плюс автосохранение в важных формах is a must, если речь идет об админках приложений.

Решением является добавление к URL каких-нибудь маркеров, возвращающих приложение к нужному состоянию, например, ajaxsite.ru/#myStateInfoGoesHere

3. Неработающие кнопки навигации


Так как в первом пункте мы уже поняли, что пользователи привыкли и в силу работы мозга, и в силу истории развития интернета думать страницами, то неработающие кнопки назад/вперед, которые так бесили во флэш-сайтах, восстали из пепла после постепенного умирания flash в аякс-сайтах. Ничто так не раздражает, когда ты зашел на какой-то нереальный раздел 100500го уровня навигации, и нет кнопки вроде «вернуться к списку» на самой странице от разработчика, и вдруг обнаруживаешь — «Back», которая спасала еще со времен Netscape (классный был браузер), не работает!

Кнопки «назад» и «вперед» должны работать. Я закрываю сразу такой сайт, где это правило не работает, потому что во второй раз делать миллион кликов не хочу — в гугле ждет по списку следующий сайт (ваш конкурент с нормальными, адекватными программистами, которые сами тестят свой сайт глазами пользователей).

4. Тормоза


Недавно я зашел на сайт одного стартапа, который реализовал мою давнюю идею. И был очень недоволен — с айпада грузился очень медленно, во многом благодаря тому, что каждый из мелких элементов административного интерфейса подгружался аяксом. Кликаю раскрыть список — и он грузится… Если бить страницу на миллион мелких страниц, нужно знать, что нередко это может приводить к ее медленной работе. Особенно если разработчик не позаботился посылать параллельные запросы к серверу и каждый микроэлемент сделал аяксом.

Количество аякс-блоков на странице должно быть ограничено разумным числом.. Подгрузить следующую страницу результатов в таблицу, когда для генерации шапки, меню и тд выполняется много запросов к БД — разумно. А вот в случае с конфигурацией, когда у вас вкладки и внутри дерево настроек, каждую вкладку грузить аяксом, каждый попап, каждый элемент дерева (фанаты ExtJS в первую очередь стоят) — это зло, однозначно, господа.

5. Неочевидность происходящего на странице


Ушла в прошлое нижняя строка браузера, в которой когда-то мы писали с помощью манипуляций над window.status бегущую строку. Эх, было время в 2000х, когда это называлось не аяксом, а DHTML, и применялось в меру, и сайт javascript.internet.com и dynamicdrive.com с туториалами знал каждый второй, и на JS писали, понимая, а не тупя над тормозами без знания внутренностей фреймворков, как делают новички, пишущие о виртуозном владении JavaScript.

Но я отвлекся 🙂

Только половина сайтов сообщают, как Google Docs, что они что-то там сохраняют или загружают, с помощью надписей или всем приевшегося рисуночка с крутящимися полосками. Сейчас ситуация уже лучше, а раньше ты работал с сайтом, и вдруг у тебя пропадало текущее окно и вылезало ОНО, на что ты нажал минуту назад (привет server-side тормозам).

Сообщайте пользователю о процессе загрузки чего-либо, чтобы он был готов к изменениям на странице.

6. Неверное применение AJAX

Очень часто применяется модный эффект. К примеру, подгрузка по мере скролла контента вместо традиционного paging. Paging обладает миллиардом преимуществ — и ссылку можно дать, и понятно где ты находишься. А когда ты скроллил фотки вконтакте, закрыл случайно и открыл shift+ctrl+T — изволь скроллить по-новой.

Ну и самый распространенный косяк — это когда модный эффект, применный к месту, усложняется. Знаете, как раздражает, когда кликаешь «подгрузить еще» каждые 10 сообщений, водя мышку туда-сюда, вместо того, чтобы просто скроллить. И просто потому, что программист поленился и не сделал подгрузку при скролле.

Применяя эффект, будьте готовы ответить себе и пользователю, нахрена вы его применили, кроме моды или красоты.

7. Отсутствие поддержки клавиатуры


Тоже очень бесит. Во-первых, формы не отправляются по нажатию Enter (к чему приучает десктопный интерфейс). Во-вторых, распространные шоткаты, такие как Ctrl+влево/вправо для перехода страниц, не работают (привет Гуглу, Яндекс красавчеги). Внезапно вылезший модальный попап не пропадает при нажатии Escape.

Если ваши пользователи — не героиня Гриффинов, которая ходит, не разгибаясь и смотря в свой мобильный девайс, не забывайте о привычках пользователей и добавляйте поддержку клавиатуры.

Общая идея проектирования ajax-приложения


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

Вам в помощь наука. Мозг, как известно, при весе в 1/50 тела в момент предельной нагрузки потребляет до 25% всей энергии организма. Посему он стремиться всячески свести свою работу к минимуму. Именно поэтому, а вовсе из-за непонятной психологам, не знающим биологию есть прокрастинация. Поэтому мы ленивы и поэтому нам нравится все простое и не нравится все, что требует лишних энергетических затрат.

Следовательно, измеряйте количество кликов для выполнения основных user stories на вашем сайте, количество движений мышкой, количество нажатий клавиш, и всячески минимизируйте эти числа. Тупо и методично. Тут можно похвалить Гугл — зацените, вы вводите текст, а он уже начинает искать и показывать результаты. Круто сделано.

Напишите в комментариях ваши примеров раздражающих моментов в аякс-приложениях и сайтах, и образцовые сайты.

upd. из комментариев:

lesha_penguin 8. Отсутствие возможности открыть ссылку в отдельном окне/вкладке.

Например, в интернет-магазине невозможность открыть одновременно два товара для сравнения/выбора в двух вкладках. За такое хочется убивать.

alienator Дополню 5: сообщайте не только о идущем процессе, но и о его завершении.

Еще: если какая-то информация используется для построения нескольких блоков на странице, но надо обновлять их все. Один известный банк не сразу допер, что если пользователь нажал кнопку «Обновить остаток» в заголовке конкретного счета, то не мешает полученный остаток обновить и в списке счетов в левой колонке.

mib Еще при разработке аякс-сайта не забывайте об индексации: Если основной контент (тот который меняется при навигации по меню сайта), подгружается аяксом — поисковики скорее всего не будут этот контент индексировать.

Я использую такое решение: Каждый пункт меню изначально является ссылкой на реальную страничку, т.е. /about /home /settings /news/5 etc.

А при загрузке явоскрипта — клики по этим линкам перехватываются, и с сервера забирается только аякс-контент, а не вся страничка.

habr.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *