两种简单的跨域方法(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 24 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
js DOM的事件常见操作实例详解
Dec 16 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 Javascript
JavaScript实现随机点名小程序
Oct 29 Javascript
Vue实现小购物车功能
Dec 21 Vue.js
javascript实现简单留言板案例
Feb 09 Javascript
Vue ECharts实现机舱座位选择展示功能
May 15 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中的全局变量
2016/06/17 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
360搜索引擎自动收录php改写方案
2018/04/28 PHP
thinkPHP框架RBAC实现原理分析
2019/02/01 PHP
javascript void(0)的妙用
2009/10/21 Javascript
手把手教你自己写一个js表单验证框架的方法
2010/09/14 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
json数据的列循环示例
2013/09/06 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
js获取视频时长代码
2014/04/10 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
js获取鼠标位置实例详解
2015/12/09 Javascript
通过扫描二维码打开app的实现代码
2016/11/10 Javascript
jQuery UI插件实现百度提词器效果
2016/11/21 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
在vue+element ui框架里实现lodash的debounce防抖
2019/11/13 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
python中的时区问题
2021/01/14 Python
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
2014年上半年工作自我评价
2014/01/18 职场文书
英语教学随笔感言
2014/02/20 职场文书
工作迟到检讨书
2014/02/21 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
中班上学期个人总结
2015/02/12 职场文书
繁星春水读书笔记
2015/06/30 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书