这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。
直接用ajax调用不同域的数据：
调用的文件
文件内容
<html>
<head>
<title>跨域测试_ajax</title>
<script src="/public/wechat/javascripts/jquery-2.0.3.min.js"></script>
<script>
$(function() {
$("#but").click(function(){
$.ajax({
type:"post",
url:"http://localhost:8081/category2.json",
success:function(data){
/* console(data); */
$("#text").html(data);
}
})
})
})
</script>
</head>
<body>
<button type="button" id="but">获取跨域的数据</button>
<textarea id="text" style="width: 400px; height: 100px;"></textarea>
</body>
</html>
|
报错：Failed to load http://localhost:8081/category2.json: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9003' is therefore not allowed access.
跨域请求被拒绝，其实数据已经获取成功了，只不过是被浏览器给拒绝了
通过js引用将数据引进来：
<html>
<head>
<title>跨域测试-引用js片段的形式将数据引进来</title>
<script src="/public/wechat/javascripts/jquery-2.0.3.min.js"></script>
<script>
//回调函数
function service (result) {
var data = JSON.stringify(result); //json对象转成字符串
$("#text").val(data);
}
</script>
</head>
<body>
跨域的数据：<textarea id="text" style="width: 400px; height: 100px;"></textarea>
<!-- 要在上面的回调函数、文本域标签加载完了再跨域引用 -->
<script src='http://localhost:8081/category2.json'></script>
</body>
</html>
|
页面
数据获取成功
所以通过http://localhost:8081/category2.json得到的js文件，就是我们之前定义的service函数,并且它的参数就是我们需要的json数据，这样我们就跨域获得了我们需要的数据。
这样jsonp的原理就很清楚了，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。
其实ajax有对jsonp的访问进行处理：
<html>
<head>
<title>跨域测试_ajax</title>
<script src="/public/wechat/javascripts/jquery-2.0.3.min.js"></script>
<script>
$(function() {
$("#but").click(function(){
$.ajax({
url:"http://localhost:8081/category2.json",
dataType: 'jsonp',
// jsonp: 'callback', //为服务端准备的参数
jsonpCallback: 'service', //回调函数
success:function(){
/* console(data); */
}
})
})
})
function service(data){
var str=JSON.stringify(data);
$("#text").text(str);
}
</script>
</head>
<body>
<button type="button" id="but">获取跨域的数据1111</button>
<textarea id="text" style="width: 400px; height: 100px;"></textarea>
</body>
</html>
|
这样也可以获取到数据
