两种简单的跨域方法(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 相关文章推荐
event.keyCode键码值表 附只能输入特定的字符串代码
May 15 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
js 弹出框只弹一次(二次修改之后的)
Nov 26 Javascript
Jquery实现的一种常用高亮效果示例代码
Jan 28 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
浅谈Vue-cli 命令行工具分析
Nov 22 Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 Javascript
JS数组属性去重并校验重复数据
Jan 10 Javascript
JavaScript正则表达式验证登录实例
Mar 18 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 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自定义函数之递归删除文件及目录
2010/08/08 PHP
php将时间差转换为字符串提示
2011/09/07 PHP
php基本函数汇总
2015/07/09 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
css把超出的部分显示为省略号的方法兼容火狐
2008/07/23 Javascript
javascript 写类方式之八
2009/07/05 Javascript
Javascript JSQL,SQL无处不在,
2010/05/05 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
node.js部署之启动后台运行forever的方法
2018/05/23 Javascript
JavaScript中创建原子的方法总结
2018/08/26 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
用js编写留言板
2020/03/17 Javascript
使用Python脚本来获取Cisco设备信息的示例
2015/05/04 Python
解决python3 json数据包含中文的读写问题
2018/05/10 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
在linux系统下安装python librtmp包的实现方法
2019/07/22 Python
简单了解python元组tuple相关原理
2019/12/02 Python
Python类及获取对象属性方法解析
2020/06/15 Python
python3爬虫中异步协程的用法
2020/07/10 Python
Linux操作面试题
2015/02/11 面试题
结婚邀请函范文
2014/01/14 职场文书
个人简历中的自我评价怎么写
2014/01/26 职场文书
师说教学反思
2014/02/07 职场文书
市场开发计划书
2014/05/07 职场文书
贷款委托书怎么写
2014/08/02 职场文书
工程部经理岗位职责
2015/02/02 职场文书
行政前台岗位职责
2015/04/16 职场文书
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL