Введение в Ajax для начинающих

В греческой мифологии Аякс — сын Перибеи и Теламона. Он был известен как воин большой храбрости и очень влиятельный в Троянской войне. Если ваш опыт примерно такой же, как у меня, вы, вероятно, ничего не понимали в слове Ajax, кроме чистящего средства. Когда я впервые услышал этот термин, я почему-то представил себе дрено. Однако этот полезный инструмент далек от обычного домашнего чистящего средства или греческого мифологического бога.

Ajax не хватает асинхронного Javascript и HTML. Он в основном используется на клиентской стороне спектра, используя набор методов для обмена данными с сервером. Более того, Ajax позволяет этому обмену данными постоянно происходить в фоновом режиме, отсюда и термин асинхронный. Эта концепция заняла у меня некоторое время, чтобы обернуть мою голову. Даже когда я использовал ajax и jQuery для доступа к различным API, я не мог понять важность всего этого. Теперь да, Ajax позволяет изменять информацию в DOM без обновления всей страницы. Это позволяет вашему сайту работать быстрее и эффективнее.

Важно отметить, что технически Ajax не является технологией. Было бы безопаснее сказать, что Ajax — это команда таких технологий, как HTML и Javascript, которые работают вместе для обработки информации. Эта информация чаще всего поступает в виде нотации объектов JSON или Javascript. JSON — это в основном пакет информации, который содержит различные уровни информации, к которой может получить доступ клиент. Эта «команда» технологий объединилась для создания Ajax.

Использование Ajax для вызова API проще, чем ожидалось. С помощью jQuery нужно просто найти URL-адрес базы данных, предназначенной для доступа, и с помощью такого метода, как GET, отобразить JSON в DOM или записать данные в консоль.

$.ajax({
    url: 'http://api.giphy.com/v1/gifs/trending',
    data: {
      api_key: 'dc6zaTOxFJmzC',
      q: query
    }
  })

В приведенном выше коде показан вызов Ajax к API giphy.com. На веб-сайте giphy.com отображается информация, необходимая для доступа к их данным, и она очень полезна при попытке доступа к их каталогу .gif. Вы заметите, что в этом примере нет метода. Если в вызове Ajax не определен метод, по умолчанию это запрос GET. В приведенном ниже примере показан тот же вызов API с методом PUT.

$.ajax({
    method: 'PUT',
    url: 'http://api.giphy.com/v1/gifs/trending',
    data: {
      api_key: 'dc6zaTOxFJmzC',
      q: query
    }
  })

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