Javascript ajax data type

jQuery функция $.ajax()

jQuery функция $.ajax() позволяет выполнить асинхронный AJAX запрос. AJAX (от англ. Asynchronous Javascript and XML — «асинхронный JavaScript и XML») — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером.

Обращаю Ваше внимание, что все AJAX методы jQuery используют эту функцию, она в основном используется для запросов, где другие методы не могут быть использованы.

jQuery синтаксис:

Синтаксис 1.0: $.ajax( settings> ) settings - PlainObject Синтаксис 1.5: $.ajax( url, settings> ) url - String settings - PlainObject 

jQuery функция $.ajax() лежит в основе всех AJAX запросов, отправленных с использованием jQuery. Не смотря на то, что функция $.ajax() может использоваться более гибко, в большинстве случаев в этом нет необходимости. В jQuery существуют такие альтернативные методы как $.get() и .load() , которые проще в использовании.

В самом простом виде функция $.ajax() может быть вызвана без параметров:

Обращаю Ваше внимание, что параметры по умолчанию могут быть установлены глобально с использованием jQuery функции $.ajaxSetup(). В этом примере функция $.ajax() используется без параметров и просто загружает содержимое текущей страницы, но ничего не делает с результатом. Чтобы использовать результат, вы можете определить одну из функций обратного вызова.

Добавлен в версии jQuery

Значения параметров

$.ajax( accepts:  mycustomtype: "application/x-some-custom-type" >, // указываем как обрабатывать ответ converters:  "text mycustomtype": function( result )  // возвращаем преобразованное значение ответа return newresult; > >, // Ожидаемый тип данных ("mycustomtype") dataType: "mycustomtype" >); 

$.ajax( url: "test.html", // адрес, на который будет отправлен запрос context: $( ".myClass" ), // новый контекст исполнения функции success: function() // если запрос успешен вызываем функцию $( this ).html( "Всё ок" ); // добавлем текстовое содержимое в элемент с классом .myClass > >); 

 "* text": window.String, // любой тип в текст "text html": true, // текст в html "text json": jQuery.parseJSON, // текст в JSON "text xml": jQuery.parseXML // текст в XML > 

• «xml» — возвращает XML документ, который может быть обработан с помощью jQuery.
• «html» — возвращает HTML как обычный текст, теги будут обработаны и выполнены после вставки в объектную модель документа (DOM).
• «script» — расценивает ответ как JavaScript и возвращает его как обычный текст. Отключает кэширование с помощью добавления параметра к строке запроса _=[TIMESTAMP] , даже если парамета cache имеет значение true . Это превратит метод POST в GET для кроссдоменных запросов.
• «json» — расценивает ответ как JSON и возвращает объект JavaScript. Кроссдоменные «json» запросы преобразуются в «jsonp», если в параметрах запроса не указано jsonp: false . Данные JSON парсятся в строгом порядке и должны соответствовать общепринятому формату, любой некорректный JSON отвергается и выдается ошибка. С версии jQuery 1.9, пустой ответ не принимается, сервер должен вернуть в качестве ответа NULL , или <> .
• «jsonp» — загружает данные в формате JSON, используя при этом формат загрузки JSONP. Добавляет дополнительный параметр » ?callback=? » в конец URL адреса для указания имени функции обработчика. Отключает кэширование путем добавления параметра _=[TIMESTAMP] к URL адресу,даже если парамета cache имеет значение true .
• «text» — обычная текстовая строка.
• несколько значений — значения разделяются пробелом. Начиная с версии 1.5, jQuery может преобразовать тип данных, который получен в Content-Type заголовка, в тип данных, который вам требуется. Например, если вы хотите, чтобы текстовый ответ был расценен как XML, используйте «text XML» для этого типа данных. Вы также можете сделать JSONP запрос, получить его в виде текста и интерпретировать его в формате XML: «jsonp text XML» . Следующая строка позволит сделать тоже самое: «jsonp XML» , jQuery будет пытаться конвертировать из JSONP в XML, после неудачной попытки попытается преобразовать JSONP в текст, а затем из текста уже в XML.

• jqXHR — объект jqXHR (в jQuery 1.4.х, объект XMLHttpRequest ).
• textStatus — строка, описывающую тип ошибки, которая произошла. Возможные значения (кроме null ) не «timeout», «error», «abort» и «parsererror».
• errorThrown — дополнительный объект исключения, если произошло. При возникновении ошибки HTTP аргумент получает текстовую часть состояния, например, «Not Found», или «Internal Server Error».

 jsonp: false, jsonpCallback: "callbackName" > 

$.ajax( statusCode:  404: function() // выполнить функцию если код ответа HTTP 404 alert( "страница не найдена" ); >, 403: function() // выполнить функцию если код ответа HTTP 403 alert( "доступ запрещен" ); > > >); 

• data — данные возвращенные с сервера. Данные форматируюся в соответствии с параметрами dataType, или dataFilter, если они указаны
• textStatus — строка описывающая статус запроса.
• jqXHR — объект jqXHR (до версии jQuery 1.4.x объект XMLHttpRequest ).

$.ajax( url: "cross_domain_url", // адрес, на который будет отправлен запрос xhrFields:  withCredentials: true // поддерживается в jQuery 1.5.1 + > >); 

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

   Использование функции $.ajax()  $( document ).ready(function() $( "button" ).click(function() // задаем функцию при нажатиии на элемент $.ajax( method: "POST", // метод HTTP, используемый для запроса url: "about.php", // строка, содержащая URL адрес, на который отправляется запрос data:  // данные, которые будут отправлены на сервер name: "Denis", city: "Erebor" >, success: [function ( msg )  // функции обратного вызова, которые вызываются если AJAX запрос выполнится успешно (если несколько функций, то необходимо помещать их в массив) $( "p" ).text( "User saved: " + msg ); // добавляем текстовую информацию и данные возвращенные с сервера >, function ()  // вызов второй функции из массива console.log( "next function" ); >], statusCode:  200: function ()  // выполнить функцию если код ответа HTTP 200 console.log( "Ok" ); > > >) >); >);  Клик  

В этом примере с использованием jQuery функции $.ajax() мы при нажатии на элемент (кнопка) выполняем асинхронный AJAX запрос со следующими параметрами:

• method — указываем метод HTTP POST, используемый для запроса.
• url — файл, к которому мы обращаемся (» about.php «), он содержит следующий PHP код:

 $name = $_POST['name']; // создаем переменную name, которая содержит переданные скрипту через HTTP метод POST данные (с ключом name) $city = $_POST['city']; // создаем переменную name, которая содержит переданные скрипту через HTTP метод POST данные (с ключом city) echo $name.", ".$city; // выводим текстовое содержимое (значение выше созданных переменных, перечисленных через запятую) ?> 

В следующем примере мы выполним AJAX запрос с помощью которого загрузим и выполним файл JavaScript.

   Использование функции $.ajax()  $( document ).ready(function() $( "button" ).click(function() // задаем функцию при нажатиии на элемент $.ajax( method: "GET", // метод HTTP, используемый для запроса url: "ajax_script.js", // строка, содержащая URL адрес, на который отправляется запрос dataType: "script" // расценивает ответ как JavaScript и возвращает его как обычный текст >) >); >);  Клик  

• method — указываем метод HTTP GET, используемый для запроса.
• url — файл, к которому мы обращаемся (» ajax_script.js «), он содержит следующий JavaScript код:

$( "p" ).text( "Hello" ); // находим элемент 
и добавляем текстовое содержимое 

jQuery AJAX

© 2016-2023 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу basicweb.ru@gmail.com

Кажется, вы используете блокировщик рекламы 🙁

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

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.

Источник

$.Ajax Data Type in jQuery

The data type in jQuery ajax request is the type of data we expect from the server. This tutorial describes the use of datatype in jQuery ajax.

the Ajax Data Type in jQuery

The datatype in the ajax request refer to the type of data that we are expecting from the server. If no data is specified, the jQuery will make it based on the MIME type of the response.

Usually, the data is plain text, HTML or JSON. A simple ajax request with datatype is given below.

$.ajax(< type : "POST", url : user, datatype : "application/json", contentType: "text/plain", success : function(employee_data) < //some code here >, error : function(error) < //some error error here >, 

The data type we’re expecting from the server in the above request is JSON. The type for datatype is always a string.

XML will return an XML file of a document that can be processed by jQuery.

HTML will return HTML as plain text where the script tags are evaluated while inserted in the DOM.

script will evaluate the response as JavaScript and return it as plain text. We need to disable caching using a query string parameter =[TIMESTAMP] with the URL until the cache option is true, and this method will convert the POST request into GET for remote domain requests.

JSON will evaluate the response as JSON and return a JavaScript object. The cross-domain JSON requests will be converted to jsonp unless it includes jsonp : false in the request options.

The JSON data will be parsed strictly; any malfunctioned JSON will be rejected, and an error will be thrown. In the newer version of jQuery, the empty response is also rejected.

jsonp will be loaded in a JSON block using the JSONP. We can add an extra callback at the end of our URL to specify it.

We can also disable the caching by appending the _=[TIMESTAMP] to the URL until the cache option is true .

The following examples are some ajax requests using the above data types.

Use XML for an Ajax Request

An ajax request for transferring data in custom XML Schema.

$.ajax(  url: 'http://demoxmlurl',  type: 'GET',  dataType: "xml",  success: parseXml  >); >); 

Use HTML for an Ajax Request

An ajax request for transferring HTML blocks to somewhere on the page.

$.ajax(  type : 'POST',  url : 'post.php',  dataType : 'json',  data:   id : $('#id').val()  >, >); 

Use Script for an Ajax Request

An ajax request for adding a new script to the page.

$.ajax(  url: 'http://unknown.jquery.com/foo',  dataType: 'script',  cache: true >)  .then(function ()   console.log( 'Success' ); >,  function ()   console.log( 'Failed' ); >); 

Use JSON for an Ajax Request

An ajax request for transferring JSON data will include any type of data.

$.ajax(  url: "delftstack.php",  type: "POST",  data:   ID: ID,  First_Name: First_Name,  Last_Name: Last_Name,  Salary: Salary  >,  dataType: "JSON",  success: function (employee_data)   console.log("Success");  $("#result").text(employee_data);  > >); 

Use JSONP for an Ajax Request

An ajax request for transferring JSON data from another domain.

$.ajax(  type: 'GET',  url: url,  async: false,  jsonpCallback: 'jsonCallback',  contentType: "application/json",  dataType: 'jsonp',  success: function(json)   console.dir(json.sites);  >,  error: function(er)   console.log(er.message);  > >); 

Use Text for an Ajax Request

An ajax request to transfer a plain text string.

$.ajax(  type: "POST",  url:"delftstack.php",  data: "<>",  async: true,  dataType: "text",  success: function( data )   console.log(data);  > >); 

Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.

Источник