两种简单的跨域方法(jsonp、php)


Posted in Javascript onJanuary 02, 2017

Ajax不能跨域,比如您是www.baidu.com,您就不能请求www.163.com的文件。但您可以请求www.baidu.com/1.json、ent.baidu.com/1.json。这是因为安全原因,对于任何后台语言来说、服务器程序来说,所有的XHR类型的请求,如果来自其他的服务器,将不予应答。

一、使用jsonp

JSONP是JSON with Padding的略称。它是一个非官方的协议,出处不可考,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。--来源百度

JSONP就像是JSON+Padding一样(Padding这里我们理解为调用函数时的填充)。

两种简单的跨域方法(jsonp、php)

绿色部分是JSON,外面的fun();是函数的调用,是padding补充部分。

jsonp的原理很简单,就是把定义写在了HTML源文件里面,而将调用放在script标签引用的文件里面,由于script标签可以跨文件使用,这样就实现了跨域,引用的文件可以有各种格式php 、js、txt等。

下面举个例子:

两种简单的跨域方法(jsonp、php)

jsonp.txt里面的内容如下:

//调用函数
fun({
  "result" : [
    {
      "name" : "小明",
      "age" : 12,
      "sex" : "男"
    },
    {
      "name" : "小红",
      "age" : 13,
      "sex" : "女"
    },
    {
      "name" : "小绿",
      "age" : 16,
      "sex" : "女"
    }
  ]
});

运行结果:

两种简单的跨域方法(jsonp、php)

由于这样使用起来不方便,我们可以将它封装成一个实用轮子:

两种简单的跨域方法(jsonp、php)

jQuery已经有封装好的API可以直接使用:名称是ajax()

可以查看jQuery手册,参考如下

两种简单的跨域方法(jsonp、php)

二、使用PHP偷数据 

几乎每种后台语言都可以实现该功能,以下是PHP的示例: 

<?php
  header("Content-Type:text/html;charset=utf-8");
  $a = file_get_contents("网址");
  print_r($a);
?>

其中,header是设置返回到浏览器中的头文件的字符集和文件类型

两种简单的跨域方法(jsonp、php)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript对象模型-执行模型
Apr 28 Javascript
TextArea 控件的最大长度问题(js json)
Dec 16 Javascript
javascript cookie操作类的实现代码小结附使用方法
Jun 02 Javascript
前端开发必须知道的JS之原型和继承
Jul 06 Javascript
浅谈jQuery中replace()方法
May 13 Javascript
每日十条JavaScript经验技巧(一)
Jun 23 Javascript
Angular ng-class详解及实例代码
Sep 19 Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
微信小程序websocket实现聊天功能
Mar 30 Javascript
浅谈Vue数据响应
Nov 05 Javascript
JavaScript实现图片瀑布流和底部刷新
Jan 02 #Javascript
一个例子轻松学会Vue.js
Jan 02 #Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
Jan 01 #Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
Jan 01 #Javascript
JavaScript cookie详解及简单实例应用
Dec 31 #Javascript
深入理解Angularjs向指令传递数据双向绑定机制
Dec 31 #Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 #Javascript
You might like
PHP file_exists问题杂谈
2012/05/07 PHP
Yii2实现上下联动下拉框功能的方法
2016/08/10 PHP
php之可变变量的实例详解
2017/09/12 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
jquery遍历数组与筛选数组的方法
2013/11/05 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
2016/04/05 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
js实现碰撞检测特效代码分享
2016/10/16 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
js实现随机点名程序
2020/09/17 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
jquery css实现流程进度条
2020/03/26 jQuery
js实现盒子移动动画效果
2020/08/09 Javascript
react+antd 递归实现树状目录操作
2020/11/02 Javascript
[58:58]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第二场
2018/04/05 DOTA
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
详解python中eval函数的作用
2019/10/22 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
波兰家居和花园家具专家:4Home
2019/05/26 全球购物
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
三分钟演讲稿范文
2014/04/24 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
2014年小学教研工作总结
2014/12/06 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
javascript函数式编程基础
2021/09/15 Javascript