Чем полезна для сайта технология Ajax?

   Современные веб-технологии чрезвычайно многообразны и многочисленны. Тем, кому интересны основы сайтостроения, любопытно будет узнать, что технология Ajax находится, так сказать, на смежной границе некоторых из них. В эту технологию интегрирован целый ряд веб-технологий, среди которых привычные Html, DOM, CSS. Благодаря ей появилась возможность совершать так называемые асинхронные запросы на сервер. При этом для вывода полученной информации нет необходимости перезагружать или обновлять всю страницу целиком, а лишь ее отдельную определенную часть. Это особенно может заинтересовать тех, кто изучает сайтостроение для начинающих. А весь секрет этой технологии хранится в одном объекте XMLHttpRequest.

Асинхронный запрос — зачем он?

    В создании приложений — хоть традиционных «десктопных», хоть для веб — используются две модели запросов: синхронная и асинхронная. Тем, кого интересуют основы сайтостроения, необходимо знать, что первая модель предполагает последовательность выполнения всех операций приложением. В таком случае функция, посылающая запрос, не вернет управление приложению до тех пор, пока не получит данные по запросу. Чем это чревато? А чревато это подвисанием приложения, например, — во время ожидания оно не сможет выполнять никаких других операций, так как их последовательное выполнение производится в одном потоке. Так, веб-страницы долго перезагружаются, ожидая пока закончится обмен данными между сервером и веб-браузером.

   Рассматривая сайтостроение для начинающих, нельзя пройти мимо асинхронной модели, которая позволяет организовать выполнение запроса в отдельный фоновый поток. Функция, ожидающая данные, не будет занимать все время ожидания, а сразу же передаст управление назад в приложение. Таким образом, получив управление, приложение сможет выполнять дальнейшую последовательность действий, хотя ожидание или считывание данных в это время еще не будет завершено. Так что приложение не будет подвисать в ожидании или во время выполнения считывания большого количества данных. Чтобы было понятней тем, кого интересует сайтостроение для начинающих, веб-страничка в этом случае предупредит пользователя, что еще производится обмен данными с сервером, но пользователь сможет выполнять другие действия на этой странице. Именно на асинхронной модели построена технология Аякс. Хотя Ajax поддерживает и синхронный подход, но рекомендуется его избегать или, если использовать, то крайне редко.

Динамически обновляемое содержимое

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

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

Объект XMLHttpRequest

     Для тех, кто изучает основы сайтостроения, интересно будет узнать, как на сайте воспользоваться преимуществами Ajax-технологии. А для этого необходимо сначала создать объект типа XMLHttpRequest. Благодаря этому объекту можно отослать Http-запрос серверу и получить ответ на него, не перезагружая для этого страницу браузера. При этом хоть в типе этого объекта и отражен формат данных xml, но он умеет работать с абсолютно разными форматами хранения данных.

    Существуют разные способы кроссбраузерного создания этого объекта. Вот ряд простых примеров для тех, кого интересует сайтостроение для начинающих и Аякс-технология. Кроссбраузерное создание объекта типа XMLHttpRequest может выглядеть так:

    Кроме того, оно может выглядеть и так:

    Синхронный запрос может в этом случае выглядеть таким образом:

   При этом метод open запрашивает синхронное соединение с указанным в качестве его второго аргумента файлом. В нашем случае методом Http-запроса выбран «GET», а булево значение false в третьем аргументе сообщает о том, что запрос синхронный. На методе send обычно браузер подвисает, пока не получит ответ, который выводится функцией responseText().

    А вот таким образом можно продемонстрировать асинхронный запрос.

    Об этом здесь сообщает булево значение true третьего параметра функции open. В отличие от предыдущего примера с синхронным запросом, функция send не останавливает выполнение приложения, а сразу возвращает браузеру управление. При этом объект xmlHttp проверяет состояние обработки запроса. Если обработка закончена, то состоянию присваивается значение 4, поэтому свойство readyState проверяет, не окончена ли обработка. В следующем свойстве status проверяется, насколько успешно произведен запрос.

    Немногим ранее мы говорили о создании автозагрузчика классов в PHP. Говоря о технологии Аякс, часто подразумевают ее взаимодействие с PHP. Однако данная технология успешно работает не только в связке с PHP, MYSQL-сервера, а и с такой технологией как ASP.NET, хотя это тема отдельной статьи.