两种简单的跨域方法(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 相关文章推荐
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 Javascript
轻量级 JS ToolTip提示效果
Jul 20 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
Feb 26 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
Nov 07 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
node.js Web应用框架Express入门指南
May 28 Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 Javascript
JS表单数据验证的正则表达式(常用)
Feb 18 Javascript
微信小程序实战之自定义toast(6)
Apr 18 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 Javascript
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
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 class中public,private,protected的区别以及实例分析
2013/06/18 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
PHP预定义变量9大超全局数组用法详解
2016/04/23 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
2007/05/08 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
2014/06/23 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
JavaScript实现隐藏省略文字效果的方法
2017/04/27 Javascript
jQuery 开发之EasyUI 添加数据的实例
2017/09/26 jQuery
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
JavaScript实现文件下载并重命名代码实例
2019/12/12 Javascript
Python类的多重继承问题深入分析
2014/11/09 Python
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
Python中time模块和datetime模块的用法示例
2016/02/28 Python
Django 中间键和上下文处理器的使用
2019/03/17 Python
PyCharm中代码字体大小调整方法
2019/07/29 Python
python求质数列表的例子
2019/11/24 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
python 穷举指定长度的密码例子
2020/04/02 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
银行求职推荐信范文
2013/11/30 职场文书
技术转让协议书
2016/03/19 职场文书
你会写报告?产品体验报告到底该怎么写?
2019/08/14 职场文书
js中Map和Set的用法及区别实例详解
2022/02/15 Javascript