JQuery是一款优秀的JS框架,可以方便地进行Ajax请求。但是在跨域请求方面,要特别注意相关的规则。
Ajax跨域请求原理概述
跨域请求的定义
所谓跨域请求,是指在发送Ajax请求的过程中,请求的地址和当前页面的地址不在同一个域下。
跨域请求的限制
浏览器出于安全性考虑,限制了Ajax请求所能请求的范围,即同源策略。同源策略限制了Ajax请求只能请求同一个域下的资源,也就是相同协议、相同主机、相同端口号、相同协议的域名下的资源。
跨域请求的解决办法
有几种方式可以解决跨域请求问题。其中最常用的方式是jsonp(JSON with Padding)和CORS(Cross-Origin Resource Sharing)。
JSONP实例
JSONP是通过动态创建script标签,设置src属性,然后在后台处理请求时,将返回的数据作为回调函数的参数返回到前端页面中。
$.ajax({
type: 'get',
url: 'http://www.example.com/jsonp',
dataType: 'jsonp',
jsonp: 'callback',
success: function(data) {
console.log(data);
},
error: function(err) {
console.log(err);
}
});
上面的代码中,我们指定请求数据的地址为'http://www.example.com/jsonp',同时指定请求数据的类型为jsonp,以及回调函数的名称为'callback'。
在服务端接收到请求之后,将数据作为'callback'函数的参数返回:
// 服务端返回的数据为:
callback({data: 'Hello, JSONP!'});
浏览器自动执行回调函数,并将返回的数据传入成功回调函数。
CORS实例
CORS是一项跨域资源共享的技术。在ajax访问其他域下的数据时,浏览器会先发起一次options预检请求,确认当前请求是否符合CORS的要求,如果符合要求,则发起正式的请求,获取数据。
$.ajax({
url: 'http://www.example.com/content',
type: 'GET',
crossDomain: true,
xhrFields: {
withCredentials: true
},
beforeSend: function(xhr) {
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
},
success: function (data) {
console.log('数据获取成功!');
},
error: function (xhr, errorText, err) {
console.log('数据获取错误!');
}
});
上面的代码中,我们指定访问的地址为'http://www.example.com/content',同时设置crossDomain和xhrFields属性,前者表示跨域请求,后者表示允许携带cookie等信息。我们还设置了beforeSend回调函数,在请求头中添加了X-Requested-With属性,使得后台判断请求是否是Ajax请求。最后,我们通过success和error回调函数处理获取数据成功或者失败的情况。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JQuery的Ajax跨域请求原理概述及实例 - Python技术站