js中ajax如何解决跨域请求

js中ajax如何解决跨域请求，在讲这个问题之前先解释几个名词

1、跨域请求
所有的浏览器都是同源策略，这个策略能保证页面脚本资源和cookie安全，浏览器隔离了来自不同源的请求，防上跨域不安全的操作。
跨域指的协议、域名、端口有一个不同的情况下都是跨域
例：在本站点请求外站的数据是不允许的

//在本站点请求外站点的资源是不允许的

$(function () {

    $.ajax({

        url: "http://127.0.0.1:14847/Web/jsonp.js",

        success: function (data) {

            console.log(data);

        }

    });

});

js中ajax如何解决跨域请求

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

秒客网

js中ajax如何解决跨域请求

相关文章