两种简单的跨域方法(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 相关文章推荐
超清晰的document对象详解
Feb 27 Javascript
javascript 全角转换实现代码
Jul 17 Javascript
javascript 定义初始化数组函数
Sep 07 Javascript
关于Javascript模块化和命名空间管理的问题说明
Dec 06 Javascript
jquery中交替点击事件的实现代码
Feb 14 Javascript
JavaScript中的console.assert()函数介绍
Dec 29 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 Javascript
原生js实现省市区三级联动代码分享
Feb 12 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
Sep 13 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
Oct 31 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
Mar 09 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
星际争霸任务指南——虫族
2020/03/04 星际争霸
关于使用coreseek并为其做分页的介绍
2013/06/21 PHP
JoshChen_web格式编码UTF8-无BOM的小细节分析
2013/08/16 PHP
20个2014年最优秀的PHP框架回顾
2014/10/22 PHP
修改yii2.0用户登录使用的user表为其它的表实现方法(推荐)
2017/08/01 PHP
使用js在页面中绘制表格核心代码
2013/09/16 Javascript
js中document.referrer实现移动端返回上一页
2017/02/22 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
2017/04/11 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
Python实现抓取城市的PM2.5浓度和排名
2015/03/19 Python
python简单实现获取当前时间
2016/08/27 Python
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
无法使用pip命令安装python第三方库的原因及解决方法
2018/06/12 Python
使用PyOpenGL绘制三维坐标系实例
2019/12/24 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
pandas分批读取大数据集教程
2020/06/06 Python
python 常见的排序算法实现汇总
2020/08/21 Python
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
什么是Smarty变量操作符?如何使用Smarty变量操作符
2014/07/18 面试题
会计学专业学生的求职信范文
2014/01/27 职场文书
聊城大学毕业生自荐书
2014/02/01 职场文书
公司保密承诺书
2014/03/27 职场文书
乡村文明行动实施方案
2014/03/29 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
家庭教育的心得体会
2014/09/01 职场文书
体育运动会广播稿
2014/10/05 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python