最新项目遇到jsonp请求数据的方式,温习一下jsonp和跨域的相关问题。
前端代码:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
function cyb(a)
{
console.log(a)
}
</script>
<script src="http://www.cyb.com/deal.php?jsonpCallback=cyb">
</script>
</body>
</html>
jsonp原理:主要讲一下跨域中的应用,jsonp应用中首先在前端定义一个回调函数callback,这个callback一定要在jsonp请求之前定义好,因为script是从上到下解析和执行的,不提前定义会出现函数未定义的问题,而且那个callback不能在jsonp请求的那个script定义,浏览器对于有src的script,好像是不会去解析<script>和</script>之间的脚本的,说完注意的点,再说一下原理,jsonp利用script标签可以跨域加载资源的特性,也需要服务器端语言的支持,服务端语言,这里用的php,会利用$_GET['callback']."(数据参数)"拼接起一个字符串,然后返回给前端,前端把返回的字符串写到script标签之间,然后执行callback。
后端代码:
<?php
echo $_GET["jsonpCallback"].'("hello jsonp!")';
?>
下面顺便说一下跨域的问题:
代码:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js">
</script>
</head>
<body>
<script>
$.ajax({url:"http://www.cyb.com/as.txt",type:"get"})
</script>
</body>
</html>
访问这个代码的url是http://localhost/ajax.html也就是说这个代码的域是localhost,所以上面的代码里的ajax会发生跨域错误,但是这里想说的不是这个问题,因为ajax是不允许跨域访问的,上面代码就会出错,但是www.cyb.com这个域名是我修改了hosts文件做了一个到本地的映射的,也就是说cyb这个域名的ip和localhost是一样,由此可以知道同源策略中的域名一样只是相对域名的名字来说的,即使ip一样,也可能是不同源,也会发生访问错误。