jsonp跨域获取数据的基础教程


Posted in Javascript onJuly 01, 2018

前言

由于浏览器有同源策略,所以要想获取非同源(协议,域名,端口三者有一不同都算非同源)的页面的数据,就得进行跨域

(1) jsonp原理

由于script标签的src属性可以访问非同源的js脚本,所以通过src属性访问服务器会返回函数的js代码,而我们想要的数据就作为函数参数返回,而我们会先定义这个函数,返回的js代码就可执行

(2) jsonp实现代码

请求页面

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
<script type="text/javascript">
 function jsonp(data){
  console.log(username)
 }
</script>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<script type="text/javascript">
 $(document).ready(function(){
  var url = "http://www.example.com/jsonp.php?callback=jsonp";
  var script = $('<script><\/script>');
  script.attr("src",url);
  $("body").append(script);
 });
</script>
</body>
</html>
<?php

$data = {'name': '张三'};
$callback = $_GET['callback'];
echo $callback."(".json_encode($data).")";

?php>

之后php会返回

jsonp({
 name:'niuni
})

然后PHP返回的代码h会被请求页面的jsonp方法执行

(3)jQuery的简便jsonp跨域

<script>
 function showData (data) {
  console.info(data);
 }
 $(document).ready(function () {
  $("#btn").click(function () {
   $.ajax({
    url: "http://www.example.comjsonp",
    type: "GET",
    dataType: "jsonp",// 返回数据类型
    jsonpCallback: "showData",//回调函数
    // 获取数据成功就执行success函数
    success: function (data) {
     console.info("data");
    }
   });
  });
 });
</script>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jQuery控制iFrame(实例代码)
Nov 19 Javascript
ECMAScript6函数默认参数
Jun 12 Javascript
jQuery实现可移动选项的左右下拉列表示例
Dec 26 Javascript
jQuery点击导航栏选中更换样式的实现代码
Jan 23 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
Vue源码解析之数据响应系统的使用
Apr 24 Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 Javascript
Vue分页插件的前后端配置与使用
Oct 09 Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
Nov 06 Javascript
详解vue中v-for的key唯一性
May 15 Vue.js
vue + webpack如何绕过QQ音乐接口对host的验证详解
Jul 01 #Javascript
关于Vue组件库开发详析
Jul 01 #Javascript
D3.js实现拓扑图的示例代码
Jun 30 #Javascript
详解angular如何调用HTML字符串的方法
Jun 30 #Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
Jun 30 #Javascript
基于webpack4搭建的react项目框架的方法
Jun 30 #Javascript
AngularJs分页插件使用详解
Jun 30 #Javascript
You might like
ajax缓存问题解决途径
2006/12/06 PHP
php 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
2010/06/03 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
PHP如何使用Memcached
2016/04/05 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
JavaScript对象之间的转换 jQuery对象和原声DOM
2011/03/07 Javascript
JavaScript版的TwoQueues缓存模型
2014/12/29 Javascript
Angular中的interceptors拦截器
2017/06/25 Javascript
基于JavaScript实现数码时钟效果
2020/03/30 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
2018/04/18 jQuery
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
react+antd 递归实现树状目录操作
2020/11/02 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
Speedo美国:澳大利亚顶尖泳衣制造商
2016/08/03 全球购物
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
魅力惠奢品线上平台:MEI.COM
2016/11/29 全球购物
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
.net软件工程师应聘上机试题
2015/03/10 面试题
请说出这段代码执行后a和b的值分别是多少
2015/03/28 面试题
办公室文员工作自我评价
2013/12/01 职场文书
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
大学生求职信例文
2014/06/29 职场文书
银行转正自我鉴定
2014/09/29 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
浅谈Python numpy创建空数组的问题
2021/05/25 Python