ajax跨域问题

      提到ajax 大家比较头疼的是跨域问题,在项目中大多说都是以json格式来存储数据的,所以说我们今天就简单说一下利用jsonp形式来解决跨域问题,大家都知道只要带有src的标签都可以跨域请求,如img、script、、、

      所以说解决ajax 跨域问题的关键是src标签,我们可以用script src 标签,然后再来个回调函数的方法解决跨域。

           假如我们远程服务器有个alert.js,然后里面有alert("跨域成功");

           然后我们在有index.html,

      

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

</body>

<script src="alert.js"></script>
</html>

 我们就会看到弹出个跨域成功;

当然这只是证明src跨域能力,真实项目中不会这样的,真实项目中会有个回调函数来接收请求回来的数据

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
    // 得到航班信息查询结果后的回调函数
    var flightHandler = function(data){
        alert('你查询的航班结果是:票价 ' + data.price + ' 元,' + '余票 ' + data.tickets + ' 张。');
    };
    // 提供jsonp服务的url地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码)
    var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
    // 创建script标签,设置其属性
    var script = document.createElement('script');
    script.setAttribute('src', url);
    // 把script标签加入head,此时调用开始
    document.getElementsByTagName('head')[0].appendChild(script); 
    </script>
</head>
<body>

</body>
</html>
这样的话就获取所需要的数据了,当然这是原生的写法,在做项目的时候我们会用封装好的jq中的ajax来获取想要的数据。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.1.min.js" type="text/javascript"></script>
<style>
.bk{
width:100%;
border:1px solid;
}
</style>
</head>
<body>

<input type="button" name="bt" id="bt" class="bk"/>
</body>

<script>
bt.onclick=function(){
$.ajax({
type:"get",//请求的方式
url:"http://flightQuery.com/jsonp/flightResult.php?code=CA1998",//航班的地址
async:false,//是否同步
dataType: "jsonp",//请求的格式
jsonp:"callback",//代表回调函数
jsonpCallback:'?',//回调函数的名字,默认为?
success:function(json){
alert("你查询的航班是:"+json.price)
},
error:function(){
alert("fail");
}
});
}


</script>

</html>

好了,这是前端的解决跨域的方法,其实还有一种后端的解决方法

如果是php文件就在文件头部添加 header('Access-Control-Allow-Origin:*') 标签

使用如下标头可以接受指定网站请求:

header('Access-Control-Allow-Origin:http://www.abc.com');

今天就说这些吧

     

posted @ 2017-04-18 23:28  关关大大  阅读(367)  评论(0编辑  收藏  举报