Javascript — асинхронные ajax запросы на примерах

Содержание:

Настройка базовых параметров Ajax-запросов
- Задание тайм-аутов и заголовков
Создаем обобщенный запрос AJAX с помощью $.ajax()
Как прочитать данные в формате JSON с помощью jQuery
Необходимые файлы и папки
Отправка изображения или файла ajax-запросом через jQuery
Защита: используем nonce и проверяем права
- - 1. Код nonce (случайный код)
  - 2. Проверка прав доступа
Создание асинхронного AJAX запроса (метод GET)
JS Учебник
Примеры

Настройка базовых параметров Ajax-запросов

Существует группа параметров, с помощью которых можно выполнить базовую настройку Ajax-запроса (некоторые из них, url и type, мы рассмотрели выше). Из всех доступных параметров они представляют наименьший интерес, и их имена в основном говорят сами за себя. Параметры, о которых идет речь, приведены в таблице ниже:

Базовые конфигурационные параметры Ajax-запроса
Параметр	Описание
accepts	Устанавливает для запроса значение заголовка Accept, который указывает MIME-типы, поддерживаемые браузером. По умолчанию это значение определяется параметром dataType
cache	Значение false указывает на то, что содержимое запроса не должно кэшироваться сервером. По умолчанию кешируются все типы данных, кроме script и jsonp
contentType	Устанавливает для запроса значение заголовка content-туре
dataType	Указывает, какие типы данных ожидаются от сервера. Если используется этот параметр, то jQuery будет игнорировать информацию, предоставляемую сервером о типе запроса
headers	Задает дополнительные заголовки и значения, которые должны включаться в запрос
jsonp	Задает строку, которую следует использовать вместо функции обратного вызова при выполнении запросов JSONP (кроссдоменные запросы). Этот параметр требует согласования с сервером
jsonpCallback	Задает имя функции обратного вызова, которое должно использоваться вместо автоматически сгенерированного случайного имени, используемого jQuery по умолчанию
password	Задает пароль, который должен использоваться в запросе при прохождении процедуры аутентификации
scriptCharset	Указывает jQuery, какой набор символов используется при кодировании запрашиваемого JavaScript-содержимого
timeout	Задает длительность тайм-аута (в миллисекундах) для запроса
userName	Задает имя пользователя, которое должно использоваться в запросе при прохождении процедуры аутентификации

Задание тайм-аутов и заголовков

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

В этом примере параметр timeout устанавливает максимальную длительность тайм-аута, равную 5 сек. Если запрос за это время не будет выполнен, то вызовется функция, заданная с помощью параметра error, и будет выведен код ошибки, определяемый параметром status.

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

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

Создаем обобщенный запрос AJAX с помощью $.ajax()

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

В такой ситуации нужно использовать низкоуровневый метод jQuery . Вызов метода делает AJAX запрос к указанному URL. Обобщенный синтаксис вызова следующий:

$.ajax( url  );

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

Параметры, которые можно использовать с методом :

Параметр	Описание	Значение по умолчанию
	Устанавливаем значение , чтобы разрешить кеширование ответа от сервера, или значение чтобы всегда производить запрос. Значение также принуждает jQuery добавлять случайное число к запросу для предотвращения кеширования..	(, когда используется со значениями и параметра )
	Задает возвратную функцию, которая выполняется по завершению запроса (независимо от успешности операции).	Нет
	Данные, которые пересылаются на сервер в запросе.	Нет
	Ожидаемый тип данных ответа. Дополнительно можно использовать значение для выполнения запроса JSONP.	Автоматическое определение данных
	Задает возвратную функцию, которая выполняется. если запрос завершился ошибкой.	Нет
	Дополнительный заголовок HTTP , который отправляется вместе с запросом в виде пар ключ/значение.
	Пароль, который используется, если сервер HTTP требует аутентификации.	Нет
	Задает возвратную функцию, которая выполняется, если запрос завершается успешно.	Нет
	Время ожидания (в миллисекундах) завершения запроса AJAX. Значение 0 означает, что jQuery будет ждать без ограничения во времени.
	Тип запроса: или .
	Имя пользователя, если сервер HTTP требует аутентификации.	Нет

Полный список параметров приводится в документации jQuery.

Изменим наш пример для использования метода . Мы можем для нашего прогноза отказаться от кеширования и будем обрабатывать ошибки. Вот модифицированный код страницы :

<!doctype html>
<html lang="ru">
<head>
<title>Прогноз погоды</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 
<script>
 
  $( function() {
 
    $('#getForecast').click( function() {
      var data = { city: "Васюки", date: "20120318" };
      $.ajax( "getForecast.txt", {
        cache: false,
        data: data,
        dataType: "json",
        error: errorHandler,
        success: success
      } );
    } );
 
    function success( forecastData ) {
      var forecast = forecastData.city + ". Прогноз на  " + forecastData.date;
      forecast += ": " + forecastData.forecast + ". Максимальная температура: " + forecastData.maxTemp + "C";
      alert( forecast );
    }
 
    function errorHandler() {
      alert( "Есть проблемы с получением прогноза. Наверно, Васюки смыло в море." );
    }
 
  } );
</script>
 
</head>
 
<body>
 
<button id="getForecast">Получить прогноз погоды</button>
<div id="forecast"></div>
 
</body>
</html>

Запускаем код демонстрации и наслаждаемся результатом.

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

Функция просто выдает сообщение об ошибке пользователю.

Как прочитать данные в формате JSON с помощью jQuery

4.1 Показать товары на странице при загрузке

В папке products откройте файл read-products.js

Следующий код вызовет метод showProducts() при первой загрузке веб-страницы.

Функция showProducts() покажет список продуктов в виде HTML-таблицы. Поместите следующий код в файл read-products.js.

4.2 Показать товары при клике на кнопку

Следующий код вызовет метод showProducts() при нажатии кнопки с классом кнопки read-products-button.

Кнопку можно найти в HTML-шаблонах «Создать товар и «Обновить товар. Мы увидим это в следующих разделах.

Поместите следующий код под showProducts(); предыдущего раздела.

4.3 Создание функции showProducts()

Теперь мы создадим метод showProducts(). Замените комментарий // здесь будет метод showProducts() в файле read-products.js следующим кодом.

4.4 Получение списка товаров

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

4.5 Создание кнопки «Добавить товар»

Мы должны добавить кнопку «Создать продукт» в списке товаров. Мы заставим эту кнопку работать позже в этом руководстве.

Поместите следующий код после открывающей фигурной скобки предыдущего раздела.

4.6 Создание HTML-таблицы

Мы должны начать строить HTML-таблицу, в которой появится список продуктов.

Следующий код создаст HTML-таблицу с ее заголовком. Разместите его после кода предыдущего раздела.

4.7 Построение строки таблицы для каждой записи

Мы пройдемся по каждой записи, возвращаемой API. Для каждой записи мы создадим строку таблицы.

Помимо данных о товаре, строка таблицы также будет иметь кнопки «Действие». К ним относятся кнопки «Просмотр», «Редактировать» и «Удалить».

Замените комментарий // здесь будут строки следующим кодом.

4.8 Вставка контента на страницу

Мы должны сделать так, чтобы HTML-таблица появилась на нашей веб-странице. Мы сделаем это, выводя таблицу в div page-content.

Поместите следующий код после закрывающего тега table

4.9 Изменение заголовка страницы

Следующий код изменит «заголовок» на веб-странице и «заголовок» на вкладке браузера.

Поместите следующий код после кода предыдущего раздела.

Необходимые файлы и папки

3.1 Файловая структура

app/
- assets/
  - css/
  - js/
    - bootbox.min.js
    - jquery.min.js
- products/
  - create-product.js
  - delete-product.js
  - read-products.js
  - read-one-product.js
  - update-product.js
- app.js
index.html

3.3 Подключение Bootstrap

Как вы можете видеть из файла index.html, мы включили Bootstrap через CDN.

Если вам нужно включить Bootstrap через загрузку, то это будет работать также.

3.4 Создание главного CSS файла

Создайте в корне папку app
В ней создайте папку assets
В папке assets создайте папку css
В папке css создайте файл style.css

Файл style.css — это наш главный файл CSS. Вы можете поместить в этот файл любой CSS для дополнительной стилизации веб-страницы. В нашем случае у нас есть следующий код CSS внутри файла style.css.

3.5 Установка JavaScript-библиотек jQuery и Bootbox.js

Откройте папку assets в папке app и создайте папку js

В папку js мы поместим библиотеки jQuery и Bootbox.js.

Библиотека jQuery необходима, чтобы сделать наше простое приложение простым. Скачайте jQuery по этой ссылке.

Библиотека Bootbox.js необходима, чтобы диалоговое окно подтверждения «удаления» выглядело лучше. Загрузите Bootbox.js по этой ссылке.

Также есть CDN для этих JavaScript библиотек. Вы можете использовать их, если хотите. Оба варианта будут работать.

3.6 Создание файла app.js

Файл app.js будет содержать некоторые основные функции HTML и JavaScript, которые могут использоваться другими JS файлами в нашем приложении.

В папке app создайте файл app.js со следующим содержимым.

3.7 Создание папки «products» и файлов для будущих скриптов

Теперь мы создадим несколько JavaScript файлов.

Внутри папки app создайте папку products
В папке products создайте следующие файлы:

read-products.js
create-product.js
read-one-product.js
update-product.js
delete-product.js

Пока мы оставим их пустыми. Но мы заполним их в следующих разделах этого руководства.

Отправка изображения или файла ajax-запросом через jQuery

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

html-код будет такой:

<button id="addfile"><span>Загрузить изображение</span><input type="file" id="load_file" value=""></button>

css код:

#addfile {
  position: relative;
  overflow: hidden;
  width: 180px;
  height: 34px;
}
#load_file {
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  height: 34px;
  font-size: 0px;
  opacity: 0;
  filter: alpha(opacity:0);
}
#load_file:hover {
  cursor: pointer;
}

Суть идеи в том, что поверх кнопки выводится стандартный input для выбора файла, но он полностью прозрачен и имеет такие же размеры как кнопка. Таким образом, пользователь видит кнопку button, но когда наводит на нее курсор, фактически наводит на input. Соответственно, когда он нажимает на кнопку, на самом деле нажимается input выбора файла. Для того, чтобы не мигал курсор после выбора файла, размер шрифта задан 0px.

Теперь javascript код отправки файла на сервер с отображением прогресса:

$(function() {
  $('#load_file').on('change', loadfile);
});

function loadfile() {
  $('#addfile span').html('Загружено 0 %');
  files = $('#load_file').files;
  var form = new FormData();
  form.append('upload', files);
  $.ajax({
    url: '<url-адрес>',
    type: 'POST',
    data: form,
    cache: false,
    processData: false,
    contentType: false,
    xhr: function() {
      var myXhr = $.ajaxSettings.xhr();
      if (myXhr.upload) {
        myXhr.upload.addEventListener('progress',ShowProgress, false);
      }
      return myXhr;
    },
    complete: function(data){
      $('#addfile span').html('Загрузить изображение');
      $('#load_file').val('');
    },
    success: function(message){
      alert(message);
    },
    error: function(jqXHR, textStatus, errorThrown) {
      alert(textStatus+' '+errorThrown);
    }
  });
}

function ShowProgress(e) {
  if(e.lengthComputable){
    $('#addfile span').html('Загружено '+Math.round(100*e.loaded/e.total)+' %');
  }
}

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

Пример серверной части на php (по просьбе Евгения):

  $message = '';
  if (empty($_FILES) || $_FILES == "none") {
    $message = 'Вы не выбрали файл';
  } else if ($_FILES == 0 || $_FILES > 9437184) {
    $message = 'Размер файла не соответствует нормам (максимум 9 Мб)';
  } else if (($_FILES != 'image/jpeg') && ($_FILES != 'image/pjpeg') &&
             ($_FILES != 'image/gif') && ($_FILES != 'image/png')) {
    $message = 'Допускается загрузка только картинок JPG, GIF и PNG.';
  } else if (!is_uploaded_file($_FILES)) {
    $message = 'Что-то пошло не так. Попытайтесь загрузить файл ещё раз.';
  } else {
    $ftype = $_FILES;
    $fname = 'newname_image.'.($ftype == 'image/gif' ? 'gif' : ($ftype == 'image/png' ? 'png' : 'jpg'));
    if (move_uploaded_file($_FILES, $_SERVER.'/files/'.$fname)) {
      $message = 'Изображение успешно загружено.';
    } else {
      $message = 'Что-то пошло не так. Попытайтесь загрузить файл ещё раз.';
    }
  }
  exit($message);

Информация о загруженном изображении будет содержаться в $_FILES, т.к. скриптом файл добавлялся так: form.append(‘upload’, files); Соответственно, всё что требуется от php-программы — это проверить что файл соответствует ожидаемым параметрам, перенести файл в нужную папку (в примере в папку files) под нужным именем (в примере newname_image) и вернуть в браузер ответ, который в моем примере просто выводится пользователю командой alert(message);

Защита: используем nonce и проверяем права

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

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

Существует два вида защиты, которые нужно использовать в AJAX запросах в большинстве случаев.

1. Код nonce (случайный код)

Nonce — это уникальная строка, которая создается и используется один раз — одноразовое число. Nonce проверка используется, когда нужно убедится, что запрос был послан с указанного «места».

В WordPress есть функции wp_create_nonce() и check_ajax_referer() — это базовые функции для создания и последующей проверки nonce кода. С их помощью мы и будем создавать защиту nonce для AJAX запросов.

Для начала создадим nonce код:

add_action( 'wp_enqueue_scripts', 'myajax_data', 99 );
function myajax_data(){

	wp_localize_script( 'twentyfifteen-script', 'myajax',
		array(
			'url' => admin_url('admin-ajax.php'),
			'nonce' => wp_create_nonce('myajax-nonce')
		)
	);

}

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

Затем, в AJAX запросе добавим переменную с кодом nonce:

var ajaxdata = {
	action     : 'myajax-submit',
	nonce_code : myajax.nonce
};
jQuery.post( myajax.url, ajaxdata, function( response ) {
	alert( response );
});

Теперь, в обработке заброса необходимо проверить nonce код:

add_action( 'wp_ajax_nopriv_myajax-submit', 'myajax_submit' );
add_action( 'wp_ajax_myajax-submit', 'myajax_submit' );
function myajax_submit(){
	// проверяем nonce код, если проверка не пройдена прерываем обработку
	check_ajax_referer( 'myajax-nonce', 'nonce_code' );
	// или так
	if( ! wp_verify_nonce( $_POST, 'myajax-nonce' ) ) die( 'Stop!');

	// обрабатываем данные и возвращаем
	echo 'Возвращаемые данные';

	// не забываем завершать PHP
	wp_die();
}

check_ajax_referer() работает на основе функции wp_verify_nonce() и по сути является её оберткой для AJAX запросов.

Обратите внимание, что в данном случае Nonce код создается в HTML коде. А это значит, что если у вас установлен плагин страничного кэширования, то этот код может и наверняка будет устаревать к моменту очередного AJAX запроса, потому что HTML код кэшируется..

2. Проверка прав доступа

Тут AJAX запросы будут срабатывать только для пользователей с правом указанным правом, например author. Для всех остальных, включая неавторизованных пользователей, AJAX запрос вернет ошибку.

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

add_action( 'wp_ajax_nopriv_myajax-submit', 'myajax_submit' );
add_action( 'wp_ajax_myajax-submit', 'myajax_submit' );
function myajax_submit(){
	// проверяем nonce код, если проверка не пройдена прерываем обработку
	check_ajax_referer( 'myajax-nonce', 'nonce_code' );

	// текущий пользователь не имеет права автора или выше
	if( ! current_user_can('publish_posts') )
		die('Этот запрос доступен пользователям с правом автора или выше.')

	// ОК. У юзера есть нужные права!

	// Делаем что нужно и выводим данные на экран, чтобы вернуть их скрипту

	// Не забываем выходить
	wp_die();
}

Создание асинхронного AJAX запроса (метод GET)

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

Для этого необходимо создать на сервере 2 файла в одном каталоге:

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

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Пример работы AJAX</title>
</head>
<body>
  <h1>Пример работы AJAX</h1>
  <div id="welcome"></div>
  <script>
  // Здесь поместим код JavaScript, который будет отправлять запрос на сервер, получать его и обновлять содержимое страницы. Всё это будет работать без перезагрузки страницы

</script>
</body>
</html>

Рассмотрим последовательность действий, которые необходимо выполнить на стороне клиента (в коде JavaScript):

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

Указываются следующие параметры:
- Метод, с помощью которого будет посылаться запрос на сервер (GET, POST).
- URL-адрес, который будет обрабатывать запрос на сервере.
- Тип запроса: синхронный (false) или асинхронный (true).
- Имя и пароль при необходимости.
Подпишемся на событие объекта XHR и укажем обработчик в виде анонимной или
именованной функции. После этого создадим код внутри этой функции, который будет проверять состояние ответа, и
выполнять определённые действия на странице. Ответ, который приходит с сервера, всегда находится в свойстве
.

Дополнительно с проверкой значения свойства числу 4, можно проверять и значение свойства
. Данное свойство определяет статус запроса. Если оно равно 200, то всё . А
иначе произошла ошибка (например, 404 – URL не найден).
Отправим запрос на сервер с помощью метода .

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

Если используем для отправки запроса метод POST, то данные необходимо передать в качестве параметра методу
. Кроме этого, перед вызовом данного метода необходимо установить заголовок Content-Type, чтобы
сервер знал в какой кодировке пришёл к нему запрос и смог его расшифровать.

Содержимое элемента :

// 2. Создание переменной request
var request = new XMLHttpRequest();
// 3. Настройка запроса
request.open('GET','processing.php',true);
// 4. Подписка на событие onreadystatechange и обработка его с помощью анонимной функции
request.addEventListener('readystatechange', function() {
  // если состояния запроса 4 и статус запроса 200 (OK)
  if ((request.readyState==4) && (request.status==200)) {
    // например, выведем объект XHR в консоль браузера
    console.log(request);
    // и ответ (текст), пришедший с сервера в окне alert
    console.log(request.responseText);
    // получить элемент c id = welcome
    var welcome = document.getElementById('welcome');
    // заменить содержимое элемента ответом, пришедшим с сервера
    welcome.innerHTML = request.responseText;
  }
}); 
// 5. Отправка запроса на сервер
request.send();

В итоге файл будет иметь следующий код:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Пример работы AJAX</title>
</head>
<body>
  <h1>Пример работы AJAX</h1>

  <div id="welcome"></div>

<script>
window.addEventListener("load",function() {
  var request = new XMLHttpRequest();
  request.open('GET','processing.php',true);
  request.addEventListener('readystatechange', function() {
    if ((request.readyState==4) && (request.status==200)) {
      var welcome = document.getElementById('welcome');
      welcome.innerHTML = request.responseText;
    }
  });
request.send();
});
</script>

</body>
</html>

На сервере (с помощью php):

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

<?php
$output = 'Здравствуйте, пользователь! ';
if ($_SERVER) {
  $output .= 'Ваш IP адрес: '. $_SERVER;
}
else {
 $output .= 'Ваш IP адрес неизвестен.';
}
echo $output;

JS Учебник

JS ГлавнаяJS ВведениеJS Что? Где? Куда?JS ВыводJS ЗаявленияJS СинтаксисJS КомментарииJS ПеременныеJS ОператорыJS АрифметикаJS ПрисваиванияJS Типы данныхJS ФункцииJS ОбъектыJS СобытияJS СтрокиJS Методы строкJS ЧислаJS Методы чиселJS МассивыJS Методы массиваJS Сортировка массиваJS Итерация массиваJS Объекты датJS Формат датJS Метод получения датJS Метод набора датJS Математические…JS Случайные числаJS БулевыJS Сравнение…JS Заявления if…elseJS Заявление switchJS Цикл forJS Цикл whileJS Заявление break…JS Преобразование…JS Битовые…JS Регулярные выраженияJS ОшибкиJS ОбластьJS ПодъемныйJS СтрогийJS Ключевое слово thisJS Ключевое слово letJS КонстантыJS Функция стрелкиJS КлассыJS ОтладчикJS Руководство стиляJS ПрактикаJS Распространенные ошибкиJS ЭффективностьJS Зарезервированные словаJS ВерсииJS Версия ES5JS Версия ES6JS Версия 2016JS Версия 2017JS JSON

Примеры

Пример: Выполняется запрос на страницу test.php, но не выполняется обработка данных.

jQuery.post("test.php");

Пример: Запрос на страницу test.php с отправкой некоторых данных (без обработки полученных данных).

jQuery.post("test.php", { name: "John", time: "2pm" } );

Пример: Передается массив данных на сервер (без обработки полученных данных).

jQuery.post("test.php", { 'choices[]': } );

Пример: отправка данных формы используя Ajax-запрос.

jQuery.post("test.php", jQuery("#testform").serialize());

Пример: Оповещаем об успешном получении данных со страницы test.php (HTML или XML, в зависимости от полученных данных).

jQuery.post("test.php", function(data) {
    alert("Data Loaded: " + data);
});

Пример:Оповещаем об успешном получении данных со страницы test.cgi с дополнительной отправкой данных (HTML или XML, в зависимости от полученных данных).

jQuery.post("test.php", { name: "John", time: "2pm" })
.done(function(data) {
    alert("Data Loaded: " + data);
});

Пример: Получить содержимое страницы test.php, возвращаемые в JSON-формате (<?php echo json_encode(array(«name»=>»John»,»time»=>»2pm»)); ?>), и вывести их на страницу.

jQuery.post("test.php",
    function(data) {
        $('body').append( "Name: " + data.name ) // John
            .append( "Time: " + data.time ); // 2pm
    }, "json"
);

Пример: Отправка данных формы используя Ajax-запрос и вставка полученных данных в div.

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
    <form action="/" id="searchForm">
        <input type="text" name="s" placeholder="Search..." />
        <input type="submit" value="Search" />
    </form>
    <!-- результат будет вставлен внутрь следующего div -->
    <div id="result"></div>
    <script>
        //    добавляем обработчик сабмита формы
        $("#searchForm").submit(function(event) {
            //    запрещаем стандартный функционал обработчика формы
            event.preventDefault();
            //    получаем некоторые данные из элементов страницы
            var $form = $( this ),
            term = $form.find( 'input' ).val(),
            url = $form.attr( 'action' );
            //    отпправляем данные на сервер POST-запросом
            var posting = $.post( url, { s: term } );
            //    вставляем полученные результаты
            posting.done(function( data ) {
                var content = $( data ).find( '#content' );
                $( "#result" ).empty().append( content );
            });
        });
    </script>
</body>
</html>