Get ajax response in html

jQuery для начинающих. Часть 3. AJAX

Представляю Вам третью статью из серии jQuery для начинающих. В этот раз я постараюсь рассказать о реализации AJAX запросов.

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

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

jQuery(..).load

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

// по окончанию загрузки страницы
$ ( document ) . ready ( function ( ) <
// вешаем на клик по элементу с id = example-1
$ ( ‘#example-1’ ) . click ( function ( ) <
// загрузку HTML кода из файла example.html
$ ( this ) . load ( ‘ajax/example.html’ ) ;
> )
> ) ;

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 запрашиваемой страницы

• beforeSend — срабатывает перед отправкой запроса
• error — если произошла ошибка
• success — если ошибок не возникло
• complete — срабатывает по окончанию запроса

• username — логин
• password — пароль

$. ajax ( <
url : ‘/ajax/example.html’ , // указываем URL и
dataType : «json» , // тип загружаемых данных
success : function ( data , textStatus ) < // вешаем свой обработчик на функцию success
$. each ( data , function ( i , val ) < // обрабатываем полученные данные
/* . */
> ) ;
>
> ) ;

jQuery.get

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

jQuery.post

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

$ ( document ) . ready ( function ( ) < // по завершению загрузки страницы
$ ( ‘#example-3’ ) . click ( function ( ) < // вешаем на клик по элементу с id = example-3
$. post ( ‘ajax/example.xml’ , < >, function ( xml ) < // загрузку XML из файла example.xml
$ ( ‘#example-3’ ) . html ( » ) ;
$ ( xml ) . find ( ‘note’ ) . each ( function ( ) < // заполняем DOM элемент данными из XML
$ ( ‘#example-3’ ) . append ( ‘To: ‘ + $ ( this ) . find ( ‘to’ ) . text ( ) + ‘
‘ )
. append ( ‘From: ‘ + $ ( this ) . find ( ‘from’ ) . text ( ) + ‘
‘ )
. append ( ‘‘ + $ ( this ) . find ( ‘heading’ ) . text ( ) + ‘
‘ )
. append ( $ ( this ) . find ( ‘body’ ) . text ( ) + ‘
‘ ) ;
> ) ;
> , ‘xml’ ) ; // указываем явно тип данных
> )
> ) ;

jQuery.getJSON

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

$ ( document ) . ready ( function ( ) < // по завершению загрузки страницы
$ ( ‘#example-4’ ) . click ( function ( ) < // вешаем на клик по элементу с id = example-4
$. getJSON ( ‘ajax/example.json’ , < >, function ( json ) < // загрузку JSON данных из файла example.json
$ ( ‘#example-4’ ) . html ( » ) ;
// заполняем DOM элемент данными из JSON объекта
$ ( ‘#example-4’ ) . append ( ‘To: ‘ + json. note . to + ‘
‘ )
. append ( ‘From: ‘ + json. note . from + ‘
‘ )
. append ( ‘‘ + json. note . heading + ‘
‘ )
. append ( json. note . body + ‘
‘ ) ;
> ) ;
> )
> ) ;

<
note : <
to : ‘Tove’ ,
from : ‘Jani’ ,
heading : ‘Reminder’ ,
body : ‘Don \’ t forget me this weekend!’
>
>

jQuery.getScript

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

function testAjax ( ) <
$ ( ‘#example-5’ ) . html ( ‘Test completed’ ) ; // изменяем элемент с id = example-5
>

Отправка Формы

Для отправки формы посредством jQuery можно использовать любой из перечисленных способов, а вот для удобства «сбора» данных из формы лучше использовать плагин jQuery Form

Отправка Файлов

Для отправки файлов посредством jQuery можно использовать плагин Ajax File Upload иль One Click Upload

Взаимодействие с PHP

Для организации работы с PHP использую бибилотеку jQuery-PHP, удобно если Вам нравится jQuery ;), подробней читаем в статье PHP библиотека для jQuery

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

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

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

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

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

Google Поиск

Пример получения и обработки результатов поиска используя Google, более подробную информацию найдете в статье «jQuery + AJAX + (Google Search API || Yahoo Search API)»

Yahoo Поиск

Пример получения и обработки результатов поиска используя Yahoo, более подробную информацию найдете в статье «jQuery + AJAX + (Google Search API || Yahoo Search API)»

JSONP API

• Google — поиск и большинство сервисов
• Yahoo — поиск и большинство сервисов
• Flickr
• MediaWiki — соответственно и все производные — Wikipedia, Wiktionary и т.д.
• Digg
• CNET
• aideRSS

События

Для удобства разработки, на AJAX запросах висит несколько event’ов, их можно задавать для каждого AJAX запроса в отдельности, либо глобально. На все event’ы можно повесить свою функцию.

Пример для отображения элемента с во время выполнения любого AJAX запроса:

$ ( «#loading» ) . bind ( «ajaxSend» , function ( ) <
$ ( this ) . show ( ) ; // показываем элемент
> ) . bind ( «ajaxComplete» , function ( ) <
$ ( this ) . hide ( ) ; // скрываем элемент
> ) ;

$. ajax ( <
beforeSend : function ( ) <
// Handle the beforeSend event
> ,
complete : function ( ) <
// Handle the complete event
>
// .
> ) ;

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

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

Цикл статей

Источник

How to get server response from an AJAX request using jQuery ?

In this article, we will see how we can use jQuery to get the server response to an AJAX request. To answer this question, we have to understand the jQuery ajax() method.

The jQuery ajax() method implements the basic Ajax functionality in jQuery. It communicates with the server via asynchronous HTTP requests.

• url: A URL string to which you wish to send or get data.
• options: Options for configuring an Ajax request. The JSON format is used to specify an options parameter. This is an optional parameter.

The table below lists all of the configuration options for Ajax requests.

Options	Description
url	The URL to which the request is sent is a string.
data	Data is to be transmitted to the server. It can be a JSON object, a string, or an array.
type	A kind of HTTP request, such as POST, PUT, or GET. The default is GET.
success	A callback function is called when an Ajax request is successful.
timeout	A timeout value in milliseconds for the request.
username	In response to an HTTP access authentication request, utilize this username using XMLHttpRequest.
xhr	A function is s called when the XMLHttpRequest object is created.
xhrFields	To set on the native XMLHttpRequest object, an object of field_Name-field_Value pairs.
statusCode	A JSON object containing numeric HTTP codes and methods to be invoked when the matching code is present in the response.
accepts	The content type specified in the request header, which informs the server about the sort of answer it will accept in return.
async	All queries are sent asynchronously by default. To make it synchronous, set it to “false”.
beforeSend	A callback function will be called before the Ajax request is issued.
cache	A boolean indicating the presence of browser cache. The default value is “true”.
complete	When the request is completed, a callback function is invoked.
contentType	When transmitting MIME material to the server, this string contains the kind of content. The default is “application/x-www-form-urlencoded; charset=UTF-8”.
crossDomain	A boolean value that indicates whether or not a request is cross-domain.
dataType	The type of data you anticipate receiving from the server.
error	When the request fails, a callback function is executed.
global	A boolean value indicating whether or not to invoke a global Ajax request handler. The default is “true”.
headers	An object containing additional header key/value pairs to deliver with the request.
ifModified	Only allow the request to succeed if the response has changed since the last request. The Last-Modified header is used to do this. The default setting is “false”.
isLocal	Allow the present environment to be acknowledged as local.
jsonp	In a JSONP request, you can change the name of the callback function. This value will be used instead of ‘callback’ in the query string’callback=?’ section of the URL
jsonpCallback	A string holding the name of the callback function for a JSONP request.
mimeType	Override the XMLHttpRequest mime type with a string containing a mime type.
password	In response to an HTTP access authentication request, utilize this password using XMLHttpRequest.
processData	A Boolean that indicates whether or not the data supplied to the data option will be transformed into a query string. The default value is “true”.

Example 1: This example uses the ajax() method to get the text content from an external file demo.txt. In the following example, the first parameter of the ajax() function is a url from which we wish to obtain the data. The second parameter is the options parameter, which contains the success and error callback functions.

Источник