js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词
1、跨域请求
所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操作。
跨域指的协议、域名、端口 有一个不同的情况下都是跨域
例:在本站点请求外站的数据是不允许的
//在本站点请求外站点的资源是不允许的
$(function () {
$.ajax({
url: "http://127.0.0.1:14847/Web/jsonp.js",
success: function (data) {
console.log(data);
}
});
});
2、URL详解
http://www.baidu.com/a.html?key=1111
https://www.baidu.com:8080/a.html?key=2222
协议:http、https
域名:www.baidu.com
端口:8080 默认是80端口不显示
路径:/a.html
参数:key=2222
3、json
在页面中一般都会用ajax进行数据请求返回的是json格式,json(JavaScript Object Notation)是一种轻量级的数据交换格式,采用文本格式,兼容各大语言
表示一个对象:
{"name":"tom","sex":"F","age":"22"}
表示一组对象
[
{"name":"tom","sex":"F","age":"22"},
{"name":"jim","sex":"M","age":"21"}
]
4、jsonp
JSONP(JSON with Padding)是JSON的一种“使用模式”,主要用于解决浏览器的跨域数据访问的问题
采用一种变通的方法解决跨域请求的限制
在ajax请求中出于安全考虑是绝对不允许跨域请求;
但是有些确可以跨域请求例如:<img> <script> <style>这些标签是可以实现跨域请求的,不然也实现不了CDN请求;
//jsonp主要就是通过<script>嵌入外站点的js代码实现跨域请求,但是目标js文件不能直接输出json数据了;
//需要定义一个方法名,以参数的形式来调用,例如下面所示
//在目标js文件中定义了一个jsonp_20150316方法 括号号内的是参数
//在当前页引用时就通过参数的形式得到数据,从而实现了跨域请求 <script type="text/javascript">
// 得到航班信息查询结果后的回调函数
var jsonp_20150316 = function (data) {
console.log(data["name"]);
console.log(data["sex"]);
console.log(data["age"]);
}; var url = "http://127.0.0.1:14847/Web/jsonp.js?callback=flightHandler";
//jsonp_20150316({ "name": "tom", "sex": "F", "age": "22" });
//以下是动态引用目标请求文件 等价于<script src="http://127.0.0.1:14847/Web/jsonp.js" type="text/javascript"></script>
var script = document.createElement('script');
script.setAttribute('src', url);
document.getElementsByTagName('head')[0].appendChild(script);
</script> //http://127.0.0.1:14847/Web/jsonp.js?callback=flightHandler
jsonp_20150316({ "name": "tom", "sex": "F", "age": "22" });