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