两种简单的跨域方法(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实现预览待上传的本地图片
Mar 15 Javascript
extjs之去除s.gif的影响
Dec 25 Javascript
javascript textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
extjs表格文本启用选择复制功能具体实现
Oct 11 Javascript
javascript包装对象实例分析
Mar 27 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 Javascript
详解vue slot插槽的使用方法
Jun 13 Javascript
关于vue路由缓存清除在main.js中的设置
Nov 06 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 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+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
PHP中extract()函数的定义和用法
2012/08/17 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
Yii框架安装简明教程
2020/05/15 PHP
window.parent与window.openner区别介绍
2012/04/12 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
js表单验证实例讲解
2016/03/31 Javascript
快速解决js开发下拉框中blur与click冲突
2016/10/10 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
Vue DevTools调试工具的使用
2017/12/05 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
2020/10/01 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
python采集微信公众号文章
2018/12/20 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
python实现网站微信登录的示例代码
2019/09/18 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
opencv python图像梯度实例详解
2020/02/04 Python
Python configparser模块常用方法解析
2020/05/22 Python
CSS3实现酷炫的3D旋转透视效果
2019/11/21 HTML / CSS
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
策划助理岗位职责
2013/11/18 职场文书
实习生个人的自我评价
2013/12/08 职场文书
高中校园广播稿
2014/01/11 职场文书
公证委托书模板
2014/04/03 职场文书
大专学生求职自荐信
2014/07/06 职场文书
开除员工通知
2015/04/22 职场文书
法人代表证明书范本
2015/06/18 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
在Spring-Boot中如何使用@Value注解注入集合类
2021/08/02 Java/Android
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python