两种简单的跨域方法(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 相关文章推荐
非阻塞动态加载javascript广告实现代码
Nov 17 Javascript
JavaScript基础知识之数据类型
Aug 06 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
Apr 04 Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
jQuery匹配文档链接并添加class的方法
Jun 26 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
bootstrap table插件的分页与checkbox使用详解
Jul 23 Javascript
VUE长按事件需求详解
Oct 18 Javascript
js最全的数组的降维5种办法(小结)
Apr 28 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 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在线打包程序源码
2008/07/27 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
使用PHPCMS搭建wap手机网站
2015/09/20 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
JavaScript 高级语法介绍
2009/06/15 Javascript
简单几行JS Code实现IE邮件转发新浪微博
2013/07/03 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
字符串反转_JavaScript
2016/04/28 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
jquery html添加元素/删除元素操作实例详解
2020/05/20 jQuery
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
[00:14]PWL:老朋友Mushi拍VLOG与中国玩家问好
2020/11/04 DOTA
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
python实现京东订单推送到测试环境,提供便利操作示例
2019/08/09 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
python3.6使用SMTP协议发送邮件
2020/05/20 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
介绍一下Make? 为什么使用make
2013/12/08 面试题
十岁生日家长答谢词
2014/01/17 职场文书
一分钟演讲稿
2014/04/30 职场文书
民事答辩状范本
2015/05/21 职场文书
Python selenium模拟网页点击爬虫交管12123违章数据
2021/05/26 Python
php png失真的原因及解决办法
2021/11/17 PHP
bootstrapv4轮播图去除两侧阴影及线框的方法
2022/02/15 HTML / CSS
分享Python异步爬取知乎热榜
2022/04/12 Python