5 новых примеров jQuery.Ajax () jQuery 1.9+

В 2013 году … И то, как мы используем функцию jQuery.Ajax () , изменилось в последних версиях. Имея это в виду, а старые примеры немного устарели, я написал 5 новых примеров jQuery.ajax () jQuery 1.9+, чтобы показать, как вы можете использовать Ajax с более новыми версиями jQuery 1.9.x и 2.0.

Новый способ имеет некоторые преимущества перед старым.

Я постараюсь, чтобы этот пост обновлялся со скелетными фрагментами Ajax для справки. Как всегда комментарии приветствуются.

jQuery 1.9+ Ajax Пример 1 — Подписаться на рассылку

В этом примере показан базовый Ajax-запрос на подписку на новостную рассылку для отправки имени и электронной почты в бэкэнд-скрипт.

var subscribeRequest = $.ajax({
     type: "POST",
     url: "subscribe.php",
     data: { subscriberName: $('#name').val(), emailAddress: $('#email').val() }
});

subscribeRequest.done(function(msg)
{
     alert( "You have successfully subscribed to our mailing list." );
});

subscribeRequest.fail(function(jqXHR, textStatus)
{
     alert( "We could not subscribe you please try again or contact us if the problem persists (" + textStatus + ")." );
});

jQuery 1.9+ Ajax Пример 2 — Тайм-аут запроса

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

Установите время ожидания (в миллисекундах) для запроса. Период ожидания начинается с момента выполнения вызова $ .ajax; если выполняется несколько других запросов, и в браузере нет доступных подключений, запрос может истечь до истечения времени ожидания. Только в Firefox 3.0+ запросы на скрипты и JSONP не могут быть отменены тайм-аутом; скрипт будет работать, даже если он прибудет после истечения времени ожидания.

 var newDataRequest = $.ajax({
     url: "getNewData.php",
     timeout: 30000, // timeout after 30 seconds
     data: { timestamp: new Date().getTime() }
});

newDataRequest.done(function(data)
{
     console.log(data);
});

newDataRequest.fail(function(jqXHR, textStatus)
{
    if (jqXHR.status === 0)
    {
        alert('Not connect.n Verify Network.');
    }
    else if (jqXHR.status == 404)
    {
        alert('Requested page not found. [404]');
    }
    else if (jqXHR.status == 500)
    {
        alert('Internal Server Error [500].');
    }
    else if (exception === 'parsererror')
    {
        alert('Requested JSON parse failed.');
    }
    else if (exception === 'timeout')
    {
        alert('Time out error.');
    }
    else if (exception === 'abort')
    {
        alert('Ajax request aborted.');
    }
    else
    {
        alert('Uncaught Error.n' + jqXHR.responseText);
    }
});

jQuery 1.9+ Ajax Пример 3 — Фильтр данных

В этом примере показано, как вы можете использовать функцию dataFilter для обработки необработанных данных, возвращаемых вашим Ajax-запросом.

 var filterDataRequest = $.ajax({
     url: "getData.php",
     dataFilter: function (data, type)
     {
          //include any conditions to filter data here...
          //some examples below...

          //eg1 - remove all commas from returned data
          return data.replace(",", "");

          //eg2 - if data is json process it in some way
          if (type === 'json')
          {
              var parsed_data = JSON.parse(data);
              $.each(parsed_data, function(i, item)
              {
                  //process the json data
              });
              return JSON.stringify(parsed_data);
          }

     }
});

filterDataRequest.done(function(data)
{
     console.log(data);
});

filterDataRequest.fail(function(jqXHR, textStatus)
{
     console.log( "Ajax request failed... (" + textStatus + ' - ' + jqXHR.responseText ")." );
});

JQuery 1.9+ Ajax Пример 4 — Тип MIME

В этом примере показано, как указать типы заголовков ответа содержимого, доступные в XMLHttpRequest.

 var contentTypeRequest = $.ajax({
     url: "getData.php",
     contentType: 'application/x-www-form-urlencoded; charset=UTF-8' //default

     //or choose from one below
     contentType: 'application/atom+xml' //Atom
     contentType: 'text/css' //CSS
     contentType: 'text/javascript' //JavaScript
     contentType: 'image/jpeg' //JPEG Image
     contentType: 'application/json' //JSON
     contentType: 'application/pdf' //PDF
     contentType: 'application/rss+xml; charset=ISO-8859-1' //RSS
     contentType: 'text/plain' //Text (Plain)
     contentType: 'text/xml' //XML
});

contentTypeRequest.done(function(data)
{
     console.log(data);
});

contentTypeRequest.fail(function(jqXHR, textStatus)
{
     console.log( "Ajax request failed... (" + textStatus + ' - ' + jqXHR.responseText ")." );
});


//set specific accept headers (should work cross browser)
$.ajax({
    headers: {
        Accept : "text/plain; charset=utf-8",
        "Content-Type": "text/plain; charset=utf-8"
    }
})

//an alternative to the above
$.ajax({
    beforeSend: function(xhrObj)
    {
        xhrObj.setRequestHeader("Content-Type","application/json");
        xhrObj.setRequestHeader("Accept","application/json");
    }
});

jQuery 1.9+ Ajax Пример 5 — парсинг XML

Этот пример я взял из документации jQuery. Указание типа данных для запросов ajax . Он показывает загрузку XML, возвращенного из сценария, и анализ данных как XML (если он получен Internet Explorer в виде обычного текста, а не text / xml).

 var getXMLRequest = $.ajax({
     url: "data.xml.php",
     contentType: "text/xml"
});

getXMLRequest.done(function(data)
{
    console.log(data);
    var xml;
    if (typeof data == "string")
    {
        xml = new ActiveXObject("Microsoft.XMLDOM");
        xml.async = false;
        xml.loadXML(data);
    }
    else
    {
        xml = data;
    }
    // Returned data available in object "xml"
});

getXMLRequest.fail(function(jqXHR, textStatus)
{
     console.log( "Ajax request failed... (" + textStatus + ' - ' + jqXHR.responseText ")." );
});