jsonp的简单原理

最新推荐文章于 2023-11-09 16:24:46 发布

theanarkh

最新推荐文章于 2023-11-09 16:24:46 发布

阅读量709

点赞数

分类专栏： javascript php html

本文链接：https://blog.csdn.net/THEANARKH/article/details/51100296

版权

javascript 同时被 3 个专栏收录

121 篇文章 1 订阅

订阅专栏

html

18 篇文章 0 订阅

订阅专栏

php

8 篇文章 0 订阅

订阅专栏

最新项目遇到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一样，也可能是不同源，也会发生访问错误。