jQuery для начинающих. Часть 3. AJAX. Примеры

jQuery для начинающих. Часть 3. AJAX. Примеры

Примеры реализации работы с AJAX с использованием бибилотеки jQuery, подробное руководство смотрите на моём сайте (jQuery для начинающих. Часть 3. AJAX).

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

jQuery(..).load

Данный метод может принимать следующие параметры:

  • url — url запрашиваемой страницы
  • data — передаваемые данные (необязательный параметр)
  • callback — функция которой будет скормлен результат (необязательный параметр)

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

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 запрос. Может принимать следующие параметры:

  • url — url запрашиваемой страницы
  • data — передаваемые данные (необязательный параметр)
  • callback — функция которой будет скормлен результат (необязательный параметр)
  • type — тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

jQuery.post

Данный метод аналогичен предыдущему, лишь передаваемые данные уйдут на сервер посредством POST’а. Может принимать следующие параметры:

  • url — url запрашиваемой страницы
  • data — передаваемые данные (необязательный параметр)
  • callback — функция которой будет скормлен результат (необязательный параметр)
  • type — тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

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

jQuery.getJSON

Может принимать следующие параметры:

  • url — url запрашиваемой страницы
  • data — передаваемые данные (необязательный параметр)
  • callback — функция которой будет скормлен результат (необязательный параметр)

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

jQuery.

getScript

Загружает и выполняет локальный JavaScript. Может принимать следующие параметры:

  • url — url запрашиваемого скрипта
  • callback — функция которой будет скормлен результат (необязательный параметр)

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

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

Google Поиск

Пример получения и обработки результатов поиска используя Google (подробнее)

Yahoo Поиск

Пример получения и обработки результатов поиска используя Yahoo (подробнее)

Получение данных от сервера в jQuery

В этом видео мы с вами разберем, как писать запросы к серверу в javascript используя jQuery.

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

Для того, чтобы обращатся на сервер за данными, давайте создадим API с тестовыми данными с помощью сервиса mocky.io.

Вот у меня есть JSON данных

[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  },
  {
    "userId": 1,
    "id": 3,
    "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
    "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
  }
]

Вставляем его в body запроса и в advance mode выбираем

 Access-Control-Allow-Origin:*

Для того, чтобы любой домен мог обращатся к этому API.

Нажимаем Generate response и получаем ссылку на наш API.

Теперь давайте посмотрим на мою заготовку для урока. Это просто базовый html файл, в который подключено два скрипта jquery и code.js в котором мы будем писать код.

Давайте напишем код, который получит данные от сервера.

var promise = $.ajax({
  url: 'http://www.mocky.io/v2/5944e07213000038025b6f30'
})

Очень важно помнить, что в результате выполнения мы получаем не данные, а промис. Это значит, что мы можем подписаться на получение данных из промиса с помощью .then, передав туда callback. Тогда первым аргументом, мы получим наши данные.

$.ajax({
  url: 'http://www.mocky.io/v2/5944e07213000038025b6f30'
}).then(function (result) {
  console.log('result', result)
})

Если мы посмотрим в браузер, то у нас вывелся в консоль наш массив обьектов.

Что делать если мы хотим обработать ошибку? Нам нужно подписаться с помощью .catch на error.

$.ajax({
  url: 'http://www.mocky.io/v2/5944e07213000038025b6f30'
}). then(function (result) {
  console.log('result', result)
}).catch(function (err) {
  console.log('err', err)
})

Если мы изменим ссылку на неправильную то попадем в error.

В $.ajax можно также использовать методы done и fail, которые являются аналогами then и catch, но я советую придерживаться в работе с любыми промисами использования then и catch, так как это ближе к стандарту. Например в es6 промисах у вас тоже будут the и catch, а это значит, что код будет выглядит одинаково.

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

Первое это конечно method. По умолчанию он get и мы можем менять его например на post, чтобы отправить post запрос.

$.ajax({
  method: 'POST',
  url: 'http://www.mocky.io/v2/5944e07213000038025b6f30'
}).then(function (result) {
  console.log('result', result)
}).catch(function (err) {
  console.log('err')
})

Конечно чаще всего в POST запрос мы хотим передать какие-то данные. В этом нам поможет поле data

$.ajax({
  url: 'http://www.mocky.io/v2/5944e07213000038025b6f30',
  method: 'POST',
  data: {
    test: 1
  }
}).then(function (result) {
  console.log('result', result)
}).catch(function (err) {
  console.log('err')
})

Если мы посмотрим в network, то увидим, что данные у нас передаются.

Также в jQuery есть алиасы метода $.ajax. Это $.get, $.post, $.getJSON, которые хоть и более короткие, но на мой взгляд менее читабельные и лучше придерживаться полной записи.

Напоминаю, что $.ajax, это всего лишь обертка нам стандартным для javascript XMLHttpRequest.

Какие же основные преимущества она нам дает?

  1. Как результат выполнения мы получаем промис, а это значит с ним очень удобно работать с помощью .then и .catch
  2. Очень простое API. Мы просто указываем обьектом опции и все работает.

Если у вас что-то не получается, либо возникли вопросы и комментарии, пишите их прямо под этим видео и я обязательно на них отвечу.

Методы jQuery AJAX

❮ Назад Далее ❯

AJAX — это искусство обмена данными с сервером и обновления частей веб-страницы без перезагрузки всей страницы.

В следующей таблице перечислены все методы jQuery AJAX:

..
Метод Описание
$.ajax() Выполняет асинхронный запрос AJAX
$.ajaxPrefilter() Обработка пользовательских параметров Ajax или изменение существующих параметров перед выполнением каждого запроса. отправлено и до того, как они будут обработаны $.ajax()
$.ajaxSetup() Устанавливает значения по умолчанию для будущих запросов AJAX
$.ajaxTransport() Создает объект, который обрабатывает фактическую передачу данных Ajax
$.get() Загружает данные с сервера с помощью HTTP-запроса AJAX GET
$.getJSON() Загружает данные в формате JSON с сервера с помощью HTTP-запроса GET
$. parseJSON() Устарело в версии 3.0, вместо этого используйте JSON.parse(). Принимает правильно сформированную строку JSON и возвращает результирующее значение JavaScript
$.getScript() Загружает (и выполняет) JavaScript с сервера, используя AJAX HTTP GET запрос
$.парам() Создает сериализованное представление массива или объекта (может использоваться как строка запроса URL для запросов AJAX)
$.post() Загружает данные с сервера с помощью HTTP-запроса AJAX POST
ajaxComplete() Указывает функцию для запуска после завершения запроса AJAX
ajaxError() Указывает функцию для запуска, когда запрос AJAX завершается с ошибкой
ajaxSend() Указывает функцию, которая должна выполняться перед отправкой запроса AJAX
ajaxStart() Указывает функцию, которая будет выполняться, когда начинается первый запрос AJAX.
ajaxStop() Указывает функцию для запуска после завершения всех запросов AJAX
ajaxSuccess() Указывает функцию для запуска после успешного завершения запроса AJAX
загрузка() Загружает данные с сервера и помещает возвращенные данные в выбранный элемент
сериализовать() Кодирует набор элементов формы в виде строки для отправки
сериализовать массив () Кодирует набор элементов формы как массив имен и значений

❮ Предыдущий Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

9004 Справочник0135 HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3. CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

3 Top5 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры How To
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3. CSS.

JQuery AJAX Введение

AJAX расшифровывается как «Асинхронный JavaScript и XML». JavaScript включает функции отправки асинхронного HTTP-запроса с использованием объекта XMLHttpRequest . Ajax использует эту способность JavaScript для отправки асинхронного http-запроса и получения данных xml в качестве ответа (также в других форматах) и обновления части веб-страницы (с использованием JavaScript) без перезагрузки или обновления всей веб-страницы.

На следующем рисунке показаны функциональные возможности Ajax.

Аякс

Библиотека jQuery включает в себя различные методы для отправки запросов Ajax. Эти методы внутренне используют объект XMLHttpRequest JavaScript. В следующей таблице перечислены все методы Ajax jQuery.

Методы jQuery Ajax Описание
Аякс() Отправляет асинхронный HTTP-запрос на сервер.
получить() Отправляет HTTP-запрос GET для загрузки данных с сервера.
Пост() Отправляет HTTP-запрос POST для отправки или загрузки данных на сервер.
получитьJSON() Отправляет HTTP-запрос GET для загрузки данных в формате JSON с сервера.
получить скрипт() Отправляет HTTP-запрос GET для загрузки файла JavaScript с сервера, а затем выполняет его.
загрузка() Отправляет http-запрос для загрузки html или текстового содержимого с сервера и добавления их к элементам DOM.

Библиотека jQuery также включает следующие события, которые будут запускаться в зависимости от состояния запроса Ajax.

События jQuery Ajax Описание
ajaxComplete() Зарегистрируйте функцию-обработчик, которая будет вызываться при завершении запросов Ajax.
ajaxError() Зарегистрируйте функцию-обработчик, которая будет вызываться при завершении запросов Ajax с ошибкой.
ajaxSend() Зарегистрируйте функцию-обработчик, которая будет вызываться перед отправкой запроса Ajax.
ajaxStart() Зарегистрируйте функцию-обработчик, которая будет вызываться при начале первого запроса Ajax.
АяксСтоп() Зарегистрируйте функцию-обработчик, которая будет вызываться после завершения всех запросов Ajax.

No related posts.

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

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