JSONP 是什么
JSONP 是什么
说实话,我学了这么久,其实也没有好好了解这个东西,当然平常自己在前端方面也涉猎较浅。
1) jsonp 是什么
JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的 跨域 数据访问的问题。跨域? 由于同源策略的原因,也就是说你请求资源时,浏览器对于不是你当前域名或者端口号都相同的地址给与禁止访问,不允许你获取资源
同源策略:
- examle.com:8080 与 examle.com:9090 不同源
- examle.com:8080 与 examle.com:9090 不同源
- a.examle.com 与 examle.com 不同源
2) 如何解决同源策略带来的问题
浏览器中对<script>、<img>、<iframe> 是给予支持的,所以我们可以采用类似引用数据的方式来获取资源处理流程:
- 远程服务器取得js前端处理数据的函数名
- 将相关需要返回的数据保存
- 将数据串进行拼接,以函数的方式返回:showData(['a','b'])
3) 使用例子
// JS <button class="getRequest">发起跨域请求</button> <textarea name="" id="" cols="30" rows="10" disabled></textarea> <script> function showdata(result) { console.log(result); } $('.getRequest').on('click', function(){ //1) // $('head').append("<script src='http://localhost/jsonp/service.php?jsonp=showdata'><\/script>"); //2) $.ajax({ url : 'http://localhost/jsonp/service.php', type: 'GET', dataType: 'jsonp', jsonp: 'jsonp', // 自定义,保证后端能通过这个key值获取函数名 jsonpCallback: "showdata",//自定义的jsonp回调函数名称 success: function (json) { alert('success'); }, error: function () { alert('fail'); } }) }) </script> -------------------- header('Content-type: application/json'); //获取回调函数名 $jsonp = htmlspecialchars($_REQUEST ['jsonp']); //json数据 $json_data = '["customername1","customername2"]'; //输出jsonp格式的数据 echo $jsonp . "(" . $json_data . ")"; // 格式进行拼接,得到showdata(["customername1","customername2"]); --------------由此可见,其实就是远程服务器代前端处理了相关函数,通过返回一个带参数的函数表达式,来进行执行相关逻辑代码。 有效避免了直接向远程服务器请求数据
相关推荐
fengchao000 2020-06-17
adonislu 2020-05-16
zmosquito 2020-05-10
adonislu 2020-05-10
somebodyoneday 2020-04-22
fengchao000 2020-04-22
fengchao000 2020-04-11
Richardxx 2020-03-07
somebodyoneday 2020-03-06
fengchao000 2020-03-05
somebodyoneday 2020-02-16
xiaouncle 2020-02-13
baijinswpu 2020-01-29
fengchao000 2020-01-10
fengchao000 2019-12-25
newthon 2019-12-23
somebodyoneday 2013-07-11