两种简单的跨域方法(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 相关文章推荐
JS 继承实例分析
Nov 04 Javascript
VS2008中使用JavaScript调用WebServices
Dec 18 Javascript
jQuery中clearQueue()方法用法实例
Dec 29 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
js中javascript:void(0) 真正含义
Nov 05 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
从0开始学Vue
Oct 27 Javascript
ES6中Generator与异步操作实例分析
Mar 31 Javascript
js实现HTML中Select二级联动的实例
Jan 05 Javascript
ES6 Class中实现私有属性的一些方法总结
Jul 08 Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 Javascript
js实现简单进度条效果
Mar 25 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 fread读取文件注意事项
2016/09/24 PHP
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
JS之if语句对接事件动作逻辑(详解)
2017/06/28 Javascript
angular2 ng build部署后base文件路径问题详细解答
2017/07/15 Javascript
pm2 部署 node的三种方法示例
2017/10/20 Javascript
js判断节假日实例代码
2017/12/27 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
使用pdb模块调试Python程序实例
2015/06/02 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
Spongelle官网:美国的创意护肤洗护品牌
2019/05/15 全球购物
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
大学生就业推荐信范文
2013/11/29 职场文书
建筑工程毕业生自我鉴定
2014/01/14 职场文书
安全教育感言
2014/03/04 职场文书
工程资料员岗位职责
2014/03/10 职场文书
学习经验交流会主持词
2014/04/01 职场文书
C++程序员求职信
2014/05/07 职场文书
文明单位创建材料
2014/12/24 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
外出考察学习心得体会
2016/01/18 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python
警用民用对讲机找不同
2022/02/18 无线电
python中filter,map,reduce的作用
2022/06/10 Python