提到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{
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');
今天就说这些吧