ajax跨域问题
Posted 关关大大
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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‘)；
今天就说这些吧
以上是关于ajax跨域问题的主要内容，如果未能解决你的问题，请参考以下文章