ОСНОВЫ AJAX ДЛЯ НАЧИНАЮЩИХ- что нужно знать?

Что такое AJAX?

AJAX — это аббревиатура, которая означает Asynchronous Javascript and XML. На самом деле, AJAX не является новой технологией, так как и Javascript, и XML существуют уже довольно продолжительное время, а AJAX — это синтез обозначенных технологий. A JAX чаще всего ассоцириуется с термином Web 2.0 и преподносится как новейшее Web-приложение.

При использовании AJAX нет необходимости обновлять каждый раз всю страницу, так как обновляется только ее конкретная часть. Это намного удобнее, так как не приходится долго ждать, и экономичнее, так как не все обладают безлимитным интернетом. Правда в этом случае, разработчику необходимо следить, чтобы пользователь был в курсе того, что происходит на странице. Это можно реализовать с использованием индикаторов загрузки, текстовых сообщений о том, что идёт обмен данными с сервером. Необходимо также понимать, что не все браузеры поддерживают AJAX (старые версии браузеров и текстовые браузеры). Плюс Javascript может быть отключен пользователем. Поэтому, не следует злоупотреблять использованием технологии и прибегать к альтернативным методам представления информации на Web-сайте.

Обобщим достоинства AJAX:

  • Возможность создания удобного Web-интерфейса
  • Активное взаимодействие с пользователем
  • Частичная перезагрузка страницы, вместо полной
  • Удобство использования

AJAX использует два метода работы с веб-страницей: изменение Web-страницы не перезагружая её, и динамическое обращение к серверу. Второе может осуществляться несколькими способами, в частности, XMLHttpRequest, о чем мы и будем говорить, и использование техники скрытого фрейма.

Обмен данными

Для того, чтобы осуществлять обмен данными, на странице должен быть создан объект XMLHttpRequest, который является своеобразным посредником между Браузером пользователя и сервером (рис. 1). С помощью XMLHttpRequest можно отправить запрос на сервер, а также получить ответ в виде различного рода данных.

Обмениваться данными с сервером можно двумя способами. Первый способ — это GET-запрос. В этом запросе вы обращаетесь к документу на сервере, передавая ему аргументы через сам URL. При этом на стороне клиента будет логично использовать функция Javascript`а escape для того, чтобы некоторые данные не прервали запрос.

Не рекомендуется делать GET-запросы к серверу с большими объемами данных. Для этого существует POST-запрос.

Клиент часть, написанная на Javascript, должна обеспечивать необходимую функциональность для безопасного обмена с сервером и предоставлять методы для обмена данными любым из вышеперечисленных способов. Серверная часть должна обрабатывать входные данные, и на основе их генерировать новую информацию (например, работая с базой данных), и отдавать ее обратно клиенту. Например, для запроса информации с сервера можно использовать обычный GET-запрос с передачей нескольких и небольших по размеру параметров, а для обновления информации, или добавления новой информации потребуется использовать уже POST-запрос, так как он позволяет передавать большие объемы данных.

Как уже было сказано, AJAX использует асинхронную передачу данных. Это значит, что пока идёт передача данных, пользователь может совершать другие, необходимые ему действия. В это время следует оповестить пользователя о том, что идёт какой-либо обмен данными, иначе пользователь подумает, что произошло что-то не то и может покинуть сайт, или повторно вызвать «зависшую», по его мнению, функцию. Индикация во время обмена данными в приложении Web 2.0 играет очень важную роль: посетители могли еще не привыкнуть к таким способам обновления страницы.

Ответ от сервера может быть не только XML, как следует из названия технологии. Помимо XML, можно получить ответ в виде обычного текста, или же JSON (Javascript Object Notation). Если ответ был получен простым текстом, то его можно сразу вывести в контейнер на странице. При получении ответа в виде XML, обычно происходит обработка полученного XML документа на стороне клиента и преобразование данных к (X)HTML. При получении ответа в формате JSON клиент должен лишь выполнить полученный код (функция Javascript`а eval) для получения полноценного объекта Javascript. Но здесь нужно быть осторожным и учитывать тот факт, что с использованием этой технологии может быть передан вредоносный код, поэтому перед выполнением полученного с сервера кода следует его тщательно проверить и обработать. Существует такая практика, как «холостой» запрос, при котором никакой ответ от сервера не приходит, лишь изменяются данные на стороне сервера.

В разных браузерах данный объект обладает разными свойствами, но в целом он совпадает.

Методы объекта XMLHttpRequest

Заметьте, что названия методов записаны в том же стиле (Camel-style), что и другие функции Javascript. Будьте внимательны при их использовании.

abort()
— отмена текущего запроса к серверу.

getAllResponseHeaders()
— получить все заголовки ответа от сервера.

getResponseHeader(«имя_заголовка»)
— получить указаный заголовок.

open(«тип_запроса»,«URL»,«асинхронный»,«имя_пользователя»,«пароль»)
— инициализация запроса к серверу, указание метода запроса. Тип запроса и URL — обязательные параметры. Третий аргумент — булево значение. Обычно всегда указывается true или не указывается вообще (по умолчанию — true). Четвертый и пятый аргументы используются для аутентификации (это очень небезопасно, хранить данные об аутентификации в скрипте, так как скрипт может посмотреть любой пользователь).

send(«содержимое»)
— послать HTTP запрос на сервер и получить ответ.

setRequestHeader(«имя_заголовка»,«значение»)
— установить значения заголовка запроса.

Свойства объекта XMLHttpRequest

onreadystatechange
— одно из самых главных свойств объекта XMLHttpRequest. С помощью этого свойства задаётся обработчик, который вызывается всякий раз при смене статуса объекта.

readyState
— число, обозначающее статус объекта.

responseText
— представление ответа сервера в виде обычного текста (строки).

responseXML
— объект документа, совместимый с DOM, полученного от сервера.

status
— состояние ответа от сервера.

statusText
— текстовое представление состояния ответа от сервера.

Следует подробнее расммотреть свойство readyState:

  • 0 — Объект не инициализирован.
  • 1 — Объект загружает данные.
  • 2 — Объект загрузил свои данные.
  • 3 — Объек не полностью загружен, но может взаимодействовать с пользователем.
  • 4 — Объект полностью инициализирован; получен ответ от сервера.

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

Создание объекта XMLHttpRequest

Как уже говорилось выше, создание данного объекта для каждого типа браузера — уникальный процесс.

Например, для создания объекта в Gecko-совместимых браузерах, Konqueror`е и Safari, нужно использовать следующее выражение:

var Request = new XMLHttpRequest();

А для Internet Explorer`а используется следующее:

var Request = new ActiveXObject("Microsoft. XMLHTTP");

 

var Request = new ActiveXObject("Msxml2. XMLHTTP");

 

Теперь, чтобы добиться кроссбраузерности, необходимо сложить все функции в одну:

function CreateRequest()
{
    var Request = false;

    if (window.XMLHttpRequest)
    {
        //Gecko-совместимые браузеры, Safari, Konqueror
        Request = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
        //Internet explorer
        try
        {
             Request = new ActiveXObject("Microsoft.XMLHTTP");
        }    
        catch (CatchException)
        {
             Request = new ActiveXObject("Msxml2.XMLHTTP");
        }
    }
 
    if (!Request)
    {
        alert("Невозможно создать XMLHttpRequest");
    }
    
    return Request;
} 

После всего этого можно создавать данный объект и не беспокоится за работоспособность на популярных браузерах. Но создать объект можно в разных местах. Если создать его глобально, то в определенный момент времени возможен будет только один запрос к серверу. Можно создавать объект всякий раз, как происходит запрос к серверу (это почти полностью решит проблему).

Запрос к серверу

Алгоритм запроса к серверу выглядит так:

  • Проверка существования XMLHttpRequest.
  • Инициализация соединения с сервером.
  • Посылка запрса серверу.
  • Обработка полученных данных.

Для создания запроса к серверу мы создадим небольшую функцию, которая будет по функциональности объединять в себе функции для GET и POST запросов.

/*
Функция посылки запроса к файлу на сервере
r_method  - тип запроса: GET или POST
r_path    - путь к файлу
r_args    - аргументы вида a=1&b=2&c=3...
r_handler - функция-обработчик ответа от сервера
*/
function SendRequest(r_method, r_path, r_args, r_handler)
{
    //Создаём запрос
    var Request = CreateRequest();
    
    //Проверяем существование запроса еще раз
    if (!Request)
    {
        return;
    }
    
    //Назначаем пользовательский обработчик
    Request.onreadystatechange = function()
    {
        //Если обмен данными завершен
        if (Request.readyState == 4)
        {
            //Передаем управление обработчику пользователя
            r_handler(Request);
        }
    }
    
    //Проверяем, если требуется сделать GET-запрос
    if (r_method.toLowerCase() == "get" && r_args.length > 0)
    r_path += "?" + r_args;
    
    //Инициализируем соединение
    Request.open(r_method, r_path, true);
    
    if (r_method.toLowerCase() == "post")
    {
        //Если это POST-запрос
        
        //Устанавливаем заголовок
        Request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf-8");
        //Посылаем запрос
        Request.send(r_args);
    }
    else
    {
        //Если это GET-запрос
        
        //Посылаем нуль-запрос
        Request.send(null);
    }
} 

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

function ReadFile(filename, container)
{
    //Создаем функцию обработчик
    var Handler = function(Request)
    {
        document.getElementById(container).innerHTML = Request.responseText;
    }
    
    //Отправляем запрос
    SendRequest("GET",filename,"",Handler);
    
} 

Именно таким образом происходит взаимодействие с сервером.

Обработка ответа

В предыдущем примере мы сделали функцию запроса к серверу. Но она, по сути, небезопасна, так как мы не обрабатываем состояния объекта и состояния ответа от сервера.

Дополним наш код, чтобы он смог выводить визуальное оповещение о процессе загрузки.

...
Request.onreadystatechange = function()
{
    //Если обмен данными завершен
    if (Request.readyState == 4)
    {
        //Передаем управление обработчику пользователя
        r_handler(Request);
    }
    else
    {
        //Оповещаем пользователя о загрузке
    }
}
... 

Как вы уже знаете, объект XMLHttpRequest позволяет узнать статус ответа от сервера. Воспользуемся этой возможностью.

...
Request.onreadystatechange = function()
{
    //Если обмен данными завершен
    if (Request.readyState == 4)
    {
        if (Request.status == 200)
        {
            //Передаем управление обработчику пользователя
            r_handler(Request);
        }
        else
        {
            //Оповещаем пользователя о произошедшей ошибке
        }
    }
    else
    {
        //Оповещаем пользователя о загрузке
    }
 
}
... 

Варианты ответа от сервера

От сервера можно получить данные нескольких видов:

  • Обычный текст
  • XML
  • JSON

Если вы получаете обычный текст, то вы можете сразу же направить его в контейнер, то есть на вывод. При получении данных в виде XML вы должны обработать данные с помощью DOM-функций, и представить результат с помощью HTML.

JSON— это объектная нотация Javascript. С ее помощью можно представить объект в виде строки (здесь можно привести аналогию с функцией сериализации). При получении JSON-данных вы должны выполнить их, чтобы получить полноценный объект Javascript и произвести с ним необходимые операции. Помните, что такая передача данных и выполнение их не являются безопасными. Вы должны следить за тем, что поступает на исполнение.

Пример кода JSON:

{

"data":
{
    "misc":
    [
        {
            "name" : "JSON-элемент один",
            "type" : "Подзаголовок 1"
        },
        
        {
            "name" : "JSON-элемент два",
            "type" : "Подзаголовок 2"
        }
    ]
}

} 

При получении такого кода, производим следующее действие:

var responsedata = eval("(" + Request.responseText + ")")

 

После выполнения данного кода вам будет доступен объект responsedata.

Работа с серверными языками программирования

Такая работа ничем не отличается от обычной. Для примеров я возьму PHP в качестве серверного языка. В клиентской части ничего не изменилось, но серверная часть теперь представлена PHP-файлом.

По традиции, начнем с приветствия нашему замечательному миру:

    echo "Hello, World!";

При обращении к этому файлу клиенту вернется строка Hello, World. Как вы понимаете, это представляет широчайшие возможности для построения приложений. На основе передачи аргументов при вызове сервера с помощью XMLHttpRequest можно сделать параметризацию вывода, тем самым обеспечив обширную функциональность Web-приложения.

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

Конечно, если есть возможность, стоит использовать существующие фреймворки, я считаю. Но знать «как оно работает» всё-же необходимо.

    Для чего нужен AJAX?

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

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

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

    Недостатки AJAX

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

    Во-вторых, можно отметить то, что при использовании ajax полученные данные не индексируются поисковыми системами и, конечно же, нельзя поставить закладки в браузере.

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

    Хватит теории, перейдем к практике. Сразу скажу, что ajax — это не сложно, и если Вы разобрались с JavaScript, то разобраться с ajax будет очень просто, даже легче чем с JavaScript!

    И начну я с того, что весь ajax строится на объекте XMLHttpRequest, у которого есть несколько свойств и несколько методов, которые легко освоить и запомнить. Объект XMLHttpRequest — это своего рода мини-браузер, от имени которого и будет посылаться запрос к серверному скрипту.

    Весь механизм начинается с создания этого объекта, и создать его можно по-разному, в старых браузерах это делается одним способом, а во всех новых другим способом. Если вдруг Вы не планируете использовать ajax на старых браузерах, например, Вы создаете ajax-приложение для корпоративной сети, в которой установлены современные браузеры, Вы можете смело создать этот объект одной строкой.

    Но если Ваше приложение могут использовать и в старых браузерах, то лучше использовать универсальный способ создания данного объекта, мне, например, нравится вот такой способ:

      
     function getXmlHttpRequest()
     {
     if (window. XMLHttpRequest) 
     {
     try 
     {
     return new XMLHttpRequest();
     } 
     catch (e){}
     } 
     else if (window. ActiveXObject) 
     {
     try 
     {
     return new ActiveXObject('Msxml2. XMLHTTP');
     } catch (e){}
     try 
     {
     return new ActiveXObject('Microsoft. XMLHTTP');
     } 
     catch (e){}
     }
     return null;
     }
    
    

    Для создания объекта XMLHttpRequest мы просто вызовем функцию getXmlHttpRequest, которая вернет нам нужный объект.

    Объект создан, теперь можно писать код на JavaScript, который будет формировать запрос на сервер, и обрабатывать данные, полученные с сервера.

    Для того чтобы наш урок прошел полноценно, нам потребуется небольшой серверный скрипт, я буду использовать серверный язык программирования PHP, и наш скрипт будет просто возвращать текущие время на сервере. Назовем его mytime.php, его код:

      
     <?php
     //серверный скрипт(обработчик запроса)
     //посылаем заголовок для правильной кодировки
     header("Content-Type:" .  "text/html; charset=utf8");
     //Чтение параметра в запросе
     if (isset($_GET["MyTime"])){
     echo date("H:i:s");//Текущее время
     }
     ?>
    
    

    Здесь я думаю все понятно, мы проверяем параметр, пришедший к нам методом GET, т.е. MyTime, и если параметр действительно к нам пришел, то возвращаем текущие время на сервере. Советую при разработке ajax приложения на серверном скрипте делать больше проверок, так как ajax запрос можно подделать. Можно делать вот такие проверки, например:

    • можно дополнительно посылать  заголовок  X-REQUESTED-WITH
      , а на серверном обработчике проверять его;
    • также добавить проверку реферера, т.е. откуда пришел запрос;
    • еще можно осуществлять проверку с помощью сессий.

    Далее идет сам код ( я оформил его также в php, файл index.php), в самом коде я все подробно комментирую, поэтому вопросов возникнуть не должно.

      
     <?php
     header("Content-Type:" .  "text/html; charset=utf8");
     ?>
     <script type="text/javascript" charset="UTF-8">
     //функция создания объекта XMLHttpRequest
     function getXmlHttpRequest(){
     if (window. XMLHttpRequest) 
     {
     try 
     {
     return new XMLHttpRequest();
     } 
     catch (e){}
     } 
     else if (window. ActiveXObject) 
     {
     try 
     {
     return new ActiveXObject('Msxml2. XMLHTTP');
     } catch (e){}
     try 
     {
     return new ActiveXObject('Microsoft. XMLHTTP');
     } 
     catch (e){}
     }
     return null;
     }
     function serverTime(){
     // Объект XMLHttpRequest
     var request = getXmlHttpRequest();
     /*свойство onreadystatechange это обработчик события, которое реагирует 
     на любое изменения данного объекта*/
     request.onreadystatechange = function (){
     /*свойство readyState - состояние объекта 
     0 — не инициализирован
     1 — открыт, 
     2 — отправка данных, 
     3 — получение данных, 
     4 — данные загружены
     рекомендую использовать только 4*/
     if (request.readyState == 4) {
     /*свойство status это HTTP-статус ответа: 200-OK, 404-Not Found*/
     if (request.status == 200){
     var result = document.getElementById("MyId"); // Чтение ответа
     result.firstChild.nodeValue = request.responseText; // Вывод на экран
     } else document.write("Произошла ошибка.  Обнови страничку");
     }
     }
     // Адрес серверного скрипта
     var url = "mytime.php?MyTime";
     /* Запрос на сервер, true означает что это асинхронный запрос
     если было бы false, то это синхронный запрос*/
     request.open("GET", url, true); 
     request.setRequestHeader("Content-type", "charset=utf8");
     request.send(null); // посыл данных
     }
     </script>
     <?php
     echo '<h1 id = "MyId">Поле для времени</h1>';
     echo '<p><button onclick="serverTime()">Узнать время</button></p>';
     ?>
    

    Вот два файла ( mytime.php и index.php), с помощью которых Вы легко можете проверить работу ajax, код этих файлов представлен выше.

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

    Код функции serverTime с передачей параметров методом post:

      
     function serverTime(){
     var request = getXmlHttpRequest();
     request.onreadystatechange = function (){
     if (request.readyState == 4) {
     if (request.status == 200){
     var result = document.getElementById("MyId"); 
     result.firstChild.nodeValue = request.responseText; 
     } else document.write("Произошла ошибка.  Обнови страничку");
     }
     }
     var url = "mytime2.php";//изменим адрес серверного обработчика
     var data = "MyTime=1";//задаем параметры
     request.open("POST", url, true); // указываем метод post
     //посылаем два заголовка: тип данных и размер данных 
     request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
     request.setRequestHeader("Content-Length", data.length);
     request.send(data); // посыл данных, вместо null вставляем переменную с параметрами
     }
    
    

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

    В сегодняшнем уроке мы рассмотрели только основы, в ajax есть еще что изучать (хотя не много), например, передача сложных данных и т.д., но надеюсь, этот урок Вам помог узнать, что же такое ajax и в следующих уроках мы продолжим изучать этот механизм взаимодействия с сервером!

    Разметка модального окна

    Далее необходимо рассмотреть разметку нашего модального окна. H TML разметка:

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

    По умолчанию модальное окно скрыто, загрузчик также прячется. Загрузчик будет отображаться только во время выполнения AJAX запроса. C SS код:

    Обратите внимание, что для скрытия модального окна мы используем свойство opacity, так как его можно анимировать. Таким образом мы сможем плавно менять состояния окна (открытое и закрытое состояния).

    Генерация JSON ответа

    В целях нашего примера мы выбрали формат ответа JSON. А конкретно, ожидаемый ответ будет массивом объектов (Demo.json). Каждый объект будет хранить подробности относительно front-end фреймворка. Более того, значение свойства name будет совпадать с текстовой ссылкой тега main (разметка чуть выше).

    Обратите внимание: значения свойств numberOfStars и currentVersion выдуманы просто для демонстрации.

    Как и в предыдущих примерах, мы будем использовать AJAX запрос для доступа к статичному файлу. Если же мы хотим вставлять контент с других сайтов (Google Maps, Flickr), придется почитать документацию API.

    Кроме того наши данные находятся на том же сервере, что и само демо. Поэтому у нас не будет ошибок, связанных с взаимодействием со сторонними сервисами.

    Отправка AJAX запроса

    В этом разделе мы будем работать с JQuery функцией ajax для инициализации AJAX запроса. Но перед этим создадим переменные, кэшируя самые распространенные JQuery селекторы.

    Параметр settings – объект конфигурации, в котором хранится информация о наших запросах. У данного объекта может быть очень много свойств (около 34 свойств). Для упрощения мы разберем только те, которые задействованы в нашем демо:

    Promise методы

    Функция ajax возвращает объект jQuery XMLHttpRequest или jqXHR. Данный объект выполняет интерфейс Promise, а значит, в нем хранятся все свойства, методы и настройки объекта Promise. В нашем примере мы используем три Promise метода:

    Метод done выполняется, если запрос успешен. Метод принимает два и более аргументов, каждый из которых может быть как функцией, так и массивом функций. К примеру, в нашем демо successFunction() передается в качестве аргумента.

    Колбэк функция (например, successFunction()) принимает три аргумента. Первый – возвращаемые данные. Второй – строка статуса запроса (см. возможные значения в предыдущей статье). Последний – объект jqXHR.

    Метод fail вызывается при неудачном выполнении запроса. На вход подается один или более аргументов, каждый из которых может быть как функцией, так и массивом функций. К примеру, в нашем демо errorFunction() передается как аргумент. Колбэк функция (например, errorFunction()) принимает три параметра: jqXHR объект, строка статуса запроса, строка с конечной ошибкой. В ошибку записывается часть HTTP статуса типа Not Found или Forbidden.

    Метод always выполняется после завершения запроса вне зависимости от его успешности (т.е. выполнен метод done или fail). Точно так же он принимает аргументом функцию или массив функций. К примеру, в нашем демо alwaysFunction() передается как аргумент.

    Состояние запроса определяет аргументы функции. В случае успеха (например, alwaysFunction()) колбэк функция получает те же аргументы, что и колбэк метод done. И наоборот если запрос не удался, функция принимает те же аргументы, что и метод fail.

    Обратите внимание: вместо Promise методов done, fail и always, которые мы использовали в нашем примере, можно также использовать колбэк функции success, error и complete. Это можно сменить в параметре settings.

    Как показать данные

    Если запрос прошел успешно, мы можем вернуть данные. Полученные данные мы помещаем в пустые теги модального окна.

    Несколько сценариев

    Важно понимать, что код выполняется в определенных обстоятельствах. Рассмотрим два основных сценария:

    Значение свойства name не совпадает с текстовой ссылкой тега main. К примеру, предположим, что URL со значением свойства name для фреймворка Foundation задан как Foundation2, а не Foundation. В таком случае по клику на Foundation в модальном окне появится сообщение.

    :

    Fetch

    Метод fetch позволяет асинхронно отправлять сетевые запросы на сервер и получать ответы. Этот подход не блокирует основной поток выполнения, что означает, что во время отправки запроса и ожидания ответа приложение может продолжать работу без задержек. Fetch предоставляет более современный и гибкий способ выполнения HTTP-запросов и обработки полученных данных.

    Например для выполнение простейшего запроса с использованием XMLHttpRequest нам необходимо написать минимум десять строчек кода, в то время как с fetch всего несколько.

    Метод fetch предоставляет более простой и лаконичный синтаксис для выполнения HTTP запросов.

    URL
    — URL адрес для отправки запроса

    options
    — дополнительные параметры, где можно указать метод отправки: GET, POST, DELETE, PATCH и заголовки

    По умолчанию fetch выполняет GET запрос, если в параметре не указывать его явно, а просто передаем URL адрес.

    let promise = fetch(‘https://hexlet.io’)

    Теперь когда мы знакомы с базовым синтаксисом, посмотрим как fetch работает. Ниже будет объяснение по каждой строчке кода.

    Работа fetch

    fetch('https://hexlet.io/users')

    .then(response => response.json()) //

    .then(users => console.log(users)) //

    .catch(error => console.log(‘Произошла ошибка:’, error)); //

    Пройдемся по каждой строчке кода и посмотрим более детально как оно работает.

    Функция fetch возвращает промис(promise) — объект с внутренним состоянием ответа от сервера. Ответ внутри прописа может быть успешным либо выполнен с ошибкой.

    .then(response => response.json()):

    После успешного выполнения запроса, мы вызываем функцию .then, которая принимает в качестве аргумента результат предыдущей операции. Затем мы используем метод .json() для извлечения данных в формате JSON из полученного ответа.

    .then(data => console.log(data)):

    В этом шаге мы снова используем .then (шаг 2), чтобы обработать результат предыдущей операции. Здесь мы передаем извлеченные данные в функцию, которая просто выводит их в консоль наших пользователей

    .catch(error => console.log(‘Произошла ошибка:’, error));

    Если в любом из предыдущих шагов произошла ошибка, мы переходим к блоку .catch. Здесь мы передаем объект ошибки в функцию, которая выводит сообщение об ошибке вместе с самой ошибкой в консоль

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

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

    POST запрос на примере добавление нового пользователя.

    const dataUser = {
    
      name: 'Olga',
    
      email: '[email protected]'
    
    };
    
    fetch('https://hexlet.io/postData', {
    
      method: 'PUT', // Указываем метод PUT для добавления
    
      headers: {
    
        'Content-Type': 'application/json' // Необходимо указать формат json в заголовке
    
      },
    
      body: JSON.stringify(dataUser)// В теле запроса преобразуем объект в JSON и передаем во внутрь
    
    })
    
      .then(response => response.json()) // Вызываем метод json для получения ответа от сервера
    
      .then(result => console.log(result)) // После выполнении запроса(добавление нового пользователя)получаем ответ от сервера о выполнении нашего запроса
    
      .catch(error => console.log('Произошла ошибка:', error)); // Если запрос выполнился не успешно, то сообщаем об этом

    В этом примере мы указали метод вставки данных method: ‘PUT’, так как в этом запросе мы добавляем нового пользователя в базу и дополнительные заголовки ‘Content-Type’: ‘application/json, поскольку отправляем данные(пользователя) в формате JSON

    Выводы

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

    Познакомились с устаревшим подходом выполнения запросов через XMLHttpRequest и современным методом fetch.

    В целом fetch представляет более удобный и гибкий подход к выполнению HTTP запросов, особенно при использовании современных браузеров.

    Благодаря fetch мы можем гибко обрабатывать асинхронные операций и при этом не писать большого количества кода.

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

    jQuery(.).load

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

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

    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 — пароль

    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

    j

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

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

     

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

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

     

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

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

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

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

    Александр

    Здравствуйте, меня зовут Александр, уже более 10 лет я занимаюсь ремонтом компьютером, этот сайт я создал чтобы делиться полезной и практической информацией с вами! Буду благодарен, если вы опишите свой опыт или мнение в комментарии, надеюсь, что данная информация принесёт только пользу

    Оцените автора
    WindowsComp.ru
    Добавить комментарий