5个新的jQuery.Ajax（）示例jQuery 1.9+

进入2013年…并且我们使用jQuery.Ajax（）函数的方式已在最新版本中发生了变化。 考虑到这一点，并且旧示例有些过时，我已经编写了5个新的jQuery.ajax（）示例jQuery 1.9+，以显示如何将Ajax与较新版本的jQuery 1.9.x和2.0结合使用。

与旧方法相比 ，新方法具有一些优势 。

我将尝试使用骨骼Ajax片段更新此帖子，以供参考。 一如既往的欢迎评论。

快速提醒那些学习的人：

• .done（）方法替换了不推荐使用的jqXHR.success（）方法。
• .fail（）方法替换了不建议使用的.error（）方法。
• .always（）方法替换了不建议使用的.complete（）方法。

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上可用的内容响应标头类型 。

如果您将内容类型显式传递给$ .ajax（），则它将始终被发送到服务器（即使没有数据发送）。 如果未指定字符集，则将使用服务器的默认字符集将数据传输到服务器。 您必须在服务器端对此进行适当解码。

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的形式接收到）。

通过将$ .ajax dataType选项指定为“ xml”，请确保服务器发送的MIME类型为“ text / xml”的内容。 发送错误的MIME类型将阻止jQuery正确管理响应中返回的数据，并可能在脚本中引起意外问题。

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 ")." );
});

From: https://www.sitepoint.com/5-jquery-ajax-examples/