Ajax запрос примеры,

JS Tutorial

JS HOMEJS IntroductionJS Where ToJS OutputJS StatementsJS SyntaxJS CommentsJS VariablesJS OperatorsJS ArithmeticJS AssignmentJS Data TypesJS FunctionsJS ObjectsJS EventsJS StringsJS String MethodsJS NumbersJS Number MethodsJS ArraysJS Array MethodsJS Array SortJS Array IterationJS DatesJS Date FormatsJS Date Get MethodsJS Date Set MethodsJS MathJS RandomJS BooleansJS ComparisonsJS ConditionsJS SwitchJS Loop ForJS Loop WhileJS BreakJS Type ConversionJS BitwiseJS RegExpJS ErrorsJS ScopeJS HoistingJS Strict ModeJS this KeywordJS LetJS ConstJS Arrow FunctionJS DebuggingJS Style GuideJS Best PracticesJS MistakesJS PerformanceJS Reserved WordsJS VersionsJS Version ES5JS Version ES6JS JSON

HTTP Request: GET vs. POST

Two commonly used methods for a request-response between a client and server are: GET and POST.

  • GET — Requests data from a specified resource
  • POST — Submits data to be processed to a specified resource

GET is basically used for just getting (retrieving) some data from the server. Note: The GET method may return cached data.

POST can also be used to get some data from the server. However, the POST method NEVER caches data, and is often used to send data along with the request.

To learn more about GET and POST, and the differences between the two methods, please read our HTTP Methods GET vs POST chapter.

Performing POST Request with AJAX using jQuery

POST requests are identical to GET requests in jQuery. So, generally which method you should use either or is basically depends on the requirements of your server-side code. If you have large amount of data to be transmitted (e.g. form data) you need to use POST, because GET has a stringent limit on the data transfer.


Example

Try this code

Here’s our «display-comment.php» file that simply output the data entered by the user.

Example

Download

Now that you have learnt how to perform various Ajax operations such as loading data, submitting form, etc. asynchronously using jQuery. Before concluding this chapter check out one more classic example of Ajax that will show you how to populate the state or city dropdown based on the option selected in the country dropdown using jQuery.

Очередь пользователя

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

Если быстро провести мышкой по ссылкам несколько раз, то анимации станут в очередь и будут выполняться одна за другой. Можно воспользоваться страницой http://jsbin.com/aqaku

Метод ‘queue’ по сопособу вызова похож на хорошо известный метод ‘each’. Вы выполняете функцию, которая будет вызвана для каждого элемента в коллекции:

Передача функции методу ‘queue’ приводит к тому, что функция добавляется к очереди ‘fx’, которая используется всеми анимациями, выполняемыми jQuery. Таким образом, данная функция не будет вызвана до тех пор, пока все текущии анимации на каждом элементе коллекции (в случае нашего примера — для всех ссылок) не будут завершены.

Отметим, что мы добавили класс ‘all-done’ в функцию нашего примера. Данный класс будет добавлен только тогда, когда все текущие анимации будут завершены. Также вызывается метод ‘dequeue’

Это очень важно, псокольку позволяет jQuery продолжать выполнение очереди (то есть, данное действие сообщает jQuery о том, что Вы завершили то, что делали). jQuery 1.4 имеет другой способ для продолжения выполнения очереди

Вместо вызова метода ‘dequeue’ можно просто вызвать первый аргумент, переданный Вашей функции:

Эта операция делает то же самое, хотя она и значительно более удобна в использовании, так как может быть вызвана где угодно в Вашей функции, даже в мешанине завершающих действий (что обычно приводит к разрушению ‘this’ ). Конечно, для версий jQuery до 1.4 Вам следует сохранять ссылку на ‘this’, но это может быть очень утомительным процессом.

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

Отметим также, так как мы не используем очередь ‘fx’ , то мы должны передать имя нашей очереди методу ‘dequeue’, для того, чтобы позволить jQuery продолжать выполнение нашей очереди.

Определяем тип данных ответа

Обычно, серверная сторона передает данные в одном из нескольких типовых форматов, включая XML, JSON, JavaScript, или HTML. По умолчанию jQuery пытается определить наиболее подходящий формат и разобрать данные соответствующим образом. Но лучше явно определить формат.

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

Например, если вы знаете, что скрипт сервера возвращает данные в формате JSON, то вызываете метод следующим образом:

$.get( "http://example.com/getForecast.php", data, myCallback, "json" );

Примеры

Сделать запрос к test.php, игнорируя ответ:

$.post("test.php");

Сделать запрос к test.php, передать данные, игнорировать ответ:

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

Передать массив данных на сервер, игнорируя ответ:

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

Обработать ответ от сервера (HTML или XML в зависимости от того, что пришло):

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

Сделать запрос к test.cgi, предать данные, обработать ответ (HTML или XML в зависимости от того, что пришло):

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

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

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

Отправка формы POST запросом и отображение результата в div

$.ajax({
<!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>
/* прикрепить событие submit к форме */
$("#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 } );
 
  /* результат помещаем в div */
  posting.done(function( data ) {
    var content = $( data ).find( '#content' );
    $( "#result" ).empty().append( content );
  });
});
</script>
 
</body>
</html>

Как получить стиль элемента в jQuery

Первый вариант метода css — это получение окончательного значения CSS-свойства непосредственно применяемого к элементу.

Синтаксис метода :

// Вариант 1 (получение окончательного одного CSS свойства)
.css( propertyName )
// propertyName (тип: Строка) – имя CSS-свойства, значение которого нужно получить
.css( propertyNames )
// propertyName (тип: Массив) – массив, состоящий из одного или нескольких CSS-свойств, значения которых нужно получить

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

Пример, в котором получим цвет фона непосредственно применённого к элементу :

var bgHeader = $('#header').css('background-color');

В jQuery названия CSS-свойств можно указывать как в CSS, так и как это принято в JavaScript. Т.е. убирать дефисы и заменять буквы, следующие за каждым дефисом на прописные.

// можно и так
var bgHeader = $('#header').css('backgroundColor');

Если необходимо получить значения указанного CSS свойства или набора этих свойств у всех элементов текущего набора, то в этом случае необходимо использовать, например, метод each.

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

// переберём все элементы .container
$('.container').each(function(index){
  // значение css-свойства display текущего элемента набора
  var display = $(this).css('display');
  // выведем результат в консоль (индекс элемента в наборе и его значение css-свойства display)
  console.log(index + '. display = '+ display);
});   

Кроме этого, метод позволяет также получить сразу несколько CSS свойств у элемента.

Например, при нажатии на HTML элемент выведим его ширину и высоту:

<div style="width: 100px; height: 100px; background-color: bisque;"></div>
<div style="width: 200px; height: 200px; background-color: lightseagreen;"></div>
...
<script>
  // при нажатии на элемент div
  $('div').click(function () {
    // создадим переменную, которая будет содержать результат
    var output = [];
    // получим значения сразу нескольких CSS свойств
    var cssProperties = $(this).css();
    // переберём полученные свойства
    $.each(cssProperties, function (prop, value) {
      // добавим в массив элемент, содержащий имя свойства и значения
      output.push(prop + ": " + value);
    });
    //выведем массив в качестве содержимого элемента
    $(this).html(output.join('<br>'));
  });
</script>

2 AJAX POST Example, the jQuery way

So let’s get our hands dirty. Here’s our HTML5 and jQuery:

Let’s break down the not-so-clear parts of the method. The setting controls how data we receive from the server is treated. So if we want JSON from the server to be treated as text in our Javascript on the client side, for example, then we set this value as . If we don’t set the value at all, jQuery will try to figure out what the server sent and convert it intelligently. If it thinks it’s JSON, it’ll turn it into a JavaScript object; if it thinks it XML it’ll turn it into a native XMLDocument JavaScript object, and so on.

Next up is , which is the HTTP verb that we want to use. I’ll let you in on a little secret: since jQuery 1.9.0, you can use instead of . It could make things a little bit clearer for newcomers.

Following is . This is where understanding how HTTP requests and responses work helps a lot. What we set here gets sent as part of the HTTP header field . That’s important to note because we’re letting the server know ahead of time what type of content we’re sending, which allows the server to interpret the response correctly. For example, if you see a of you would know to process the content as JSON in your server-side code — it’s as simple as that.


Now, the setting is the data we’re going to send to the server. We can send data to the server in a variety of different formats, but the default is . That means we’ll be sending text to our server with our form data formatted in key-value pairs, like . Most, if not all, web server languages will pick up the key-value pairs and separate them for you either natively or through the use of libraries or frameworks.

Here’s how to do that in a few different languages:

  • Ruby with Sinatra
  • Python with web.py
  • Node.JS with Express and body-parser middleware

Most POST requests from a form will use the content type. I’ll also provide an alternative if you need to POST actual JSON from jQuery — if, for instance, you need to make a call to your own RESTful API.

The method has several events we can hook into to handle our AJAX responses accordingly: , , , and . The ones we care about most are and , so we’ll use these in our example.

One important thing to note is that the data parameter for the function will be dependent on the setting. So it’s completely possible to treat JSON coming from the server as a string by setting to . Many developers, including myself, occasionally get tripped up attempting to output their request in the method and then wonder why nothing is showing up when they try to render JSON as HTML, which doesn’t work at all.

As long as you know that the parameter can be transformed into a different data type, fixing that problem will be easy. If your AJAX server responses for the form will always be of one type — for instance, JSON — and you will always treat it as JSON, then it makes sense to set to . If you need to juggle between different data types, omit to allow jQuery to intelligently convert the data.

Our function is where we do things after we get a successful AJAX response, like updating a message in our page or search results in a table. Here is a good live example of jQuery AJAX and POST from one of my clients, a free keyword suggestion tool for advanced SEO marketers.

Now, on to the server side. From the client side, all we need to worry about is sending the right Content Type and Request body (the content we send along like the form data). On the server side we pick this up, process it, and respond accordingly.

It’s important to note that we need to format the response data correctly according to the we want to send back. If we want to send a simple text message we would respond with . If we want to respond with JSON, we’ll send a and a properly formatted JSON string without any extra characters before or after the string, like so:

This will allow jQuery to convert the string into JSON. Please do not try to build a JSON string manually; use your language’s built-in JSON function or libraries to do it for you. Trust me, it will save you time and headaches.

2.1 Server side code for our AJAX form

If you’re running PHP 5.4 or above, you can fire up a server by going into your terminal running the following commands:

If you’re on Mac, install Mac Ports and then php55 with:

Then run the development server:

Now open up your browser to http://localhost:8111.

Загрузка разметки на страницу с помощью метода load()

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

В простейшем случае вы можете вызвать метод следующим образом:

$('#myElement').load( url );

Данный пример делает запрос AJAX по адресу , получает разметку с сервера и замещает ею содержание элемента  .


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

var data = { city: "Васюки", date: "20120318" };
$('#myElement').load( url, data );

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

<h2>Прогноз погоды в Васюках</h2>
<h3>18 марта 2012</h3>
<p>Будет мерзко холодно, сыро и слякотно. Макисмальная температура: 1C.</p>

имитирует эффект выполнения скрипта на стороне сервера и возвращает разметку с прогнозом погоды.

Теперь сохраняем следующий код в файле в той же папке, что и :

<!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" };
      $('#forecast').load( "getForecast.html", data );
    } );
 
  } );
 
</script>
 
</head>
 
<body>
 
<button id="getForecast">Получить прогноз погоды</button>
<div id="forecast"></div>
 
</body>
</html>

Пробуем запустить демонстрацию и наслаждаемся результатом работы запроса AJAX.

Вот как работает код примера:

  1. Страница содержит элемент с идентификатором , в котором будет размещаться разметка прогноза.
  2. Обработчик события для кнопки формирует данные для отправки на сервер.
  3. Затем обработчик выбирает и вызывает метод jQuery , передавая URL  () и объект с данными.
  4. jQuery выполняет AJAX  запрос к файлу . Когда браузер получает ответ , jQuery автоматически замещает содержание элемента полученной разметкой.

Одной из причин того, что метод легко использовать является то, что не нужно писать возвратную функцию для обработки ответа — jQuery все делает для вас. Но если вам требуется производить какие-нибудь действия после того, как разметка вставлена, вы можете передать «полноценную» возвратную функцию в качестве третьего аргумента  методу .

Делаем запрос GET с помощью $.get()

Метод jQuery предоставляет легкий и удобный способ сделать простой запрос AJAX. Он выполняет запрос с помощью метода HTTP GET (используется для получения URL, например страниц и изображений), вместо метода POST (который традиционно используется для отправки данных формы).

В простейшей форме можно вызвать метод так:

$.get( url );

…где является адресом URL ресурса, от которого ожидается ответ. Обычно это скрипт на стороне сервера, который выполняет какие-нибудь действия и может возвращать некие данные:

$.get( "http://example.com/getForecast.php" );

…хотя можно также запросить статический документ:

$.get( "http://example.com/mypage.html" );

При запросе URL, вы можете отправить данные с запросом. Вы можете передать данные в строке запроса, так же как и при обычном запросе GET:

$.get( "http://example.com/getForecast.php?city=rome&date=20120318" );

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

var data = { city: "rome", date: "20120318" };
$.get( "http://example.com/getForecast.php", data );

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

var data = "city=rome&date=20120318";
$.get( "http://example.com/getForecast.php", data );

Заключение

В этой серии статей мы много внимания уделяем различным форматам данных, так как асинхронные приложения по большей части заключают в себе именно работу с данными. Если вы владеете различными инструментами и техниками, позволяющими отправлять и получать любые данные – и делать это наиболее эффективным методом для каждого отдельного типа данных – то можете считать, что вы уже уверенно стоите на пути к профессионализму в Ajax. Добавьте JSON к тому, что вы уже умеете использовать (XML и обычный текст), и вы получите инструментарий для работы с более сложными структурами данных в JavaScript.

В следующей статье этой серии мы не ограничимся рассмотрением отправки данных и подробно разберёмся, как сервер может принимать JSON-отформатированные данные и с ними работать. Мы также посмотрим, как серверная программа может отправлять клиенту данные в JSON-формате через скрипты и специальные серверные компоненты, позволяющие совместно использовать XML, обычный текст и JSON в запросах и ответах и преобразовывать их друг в друга. Главная цель здесь – добиться гибкости. Скоро вы сможете использовать все эти инструменты совместно, практически в любой мыслимой комбинации.

Похожие темы

  • Оригинал статьи Using JSON for data transfer (EN).
  • Освоение Ajax : прочтите предыдущие статьи этой серии.
  • JSON.org (EN): посетите Web-сайт, посвящённый JSON, чтобы получить дополнительную информацию по этому формату данных, включая ссылки на некоторые реализации JSON API.
  • В ряде статей на developerWorks рассматриваются более сложные темы, связанные с JSON:

    • «Преобразование XML в JSON с помощью PHP» (EN) Senthil Nathan, Edward J. Pring, and John Morar (январь 2007 г.)
    • «Кэширование и JSON» (EN) Bakul L. Patel (октябрь 2006 г.)
    • «Генерация JSON из XML для использования в Ajax» (EN) Jack D. Herrington (сентябрь 2006 г.)
  • Раздел XML на developerWorks : всё об XML в соответствующем разделе developerWorks.
  • xml.com (EN): еще один хороший ресурс обо всём, что связано с XML.
  • «Создание динамических Java-приложений» Philip McCarthy (developerWorks, сентябрь 2005 г.): взгляд на Ajax с серверной стороны (применительно к Java).
  • «Сериализация объектов Java для Ajax» Philip McCarthy (developerWorks, октябрь 2005 г.): в этой статье рассматривается, как можно посылать объекты через сеть и как они могут взаимодействовать с Ajax (применительно к Java).
  • «Вызов Web-сервисов SOAP с помощью Ajax» (EN) (James Snell, developerWorks, октябрь 2005 г.): довольно серьёзная статья об интеграции Ajax с существующими Web-сервисами, основанными на SOAP.
  • Домашняя страничка DOM на сайте World Wide Web Consortium: стартовая точка для изучения всего, что связано с DOM.(EN)
  • The DOM Level 3 Core Specification (EN): определение ядра Document Object Model – от имеющихся типов и свойств до использования DOM в различных языках.
  • Привязки ECMAScript-языков к DOM (EN): заинтересует JavaScript-программистов, которые хотят использовать в своём коде DOM.(EN)
  • «Ajax: новый подход к Web-приложениям» (EN) (Jesse James Garrett, Adaptive Path, февраль 2005 г.): прочитайте статью, в которой было введено название Ajax – рекомендуется к прочтению всем разработчикам, использующим Ajax.(EN)
  • Быстрый штурм Ajax (Head Rush Ajax) (EN) Brett McLaughlin (O’Reilly Media, 2006 г.): загрузите идеи этой статьи прямо в свой мозг. Стиль Head First («головой вперёд»).(EN)
  • Java и XML, второе издание (EN) (Brett McLaughlin, O’Reilly Media, Inc., 2001 г.): содержит рассуждения Бретта по поводу преобразований XHTML и XML.
  • JavaScript: Полное руководство (The Definitive Guide) (EN) (David Flanagan, O’Reilly Media, Inc., 2001 г.): включает подробные инструкции по работе с JavaScript и динамическими Web-страницами. В следующем издании будут добавлены ещё две главы по Ajax.
  • «Вперёд головой» в HTML с CSS и XHTML (EN) (Elizabeth and Eric Freeman, O’Reilly Media, Inc., 2005 г.): узнайте больше о стандартизированных HTML и XHTML и о том, как применять CSS к HTML.
  • Ознакомительное программное обеспечение от IBM (EN): создайте ваш следующий проект, используя программное обеспечение, которое можно загрузить непосредственно с сайта developerWorks.

С этим читают