两种简单的跨域方法(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 相关文章推荐
IE和Firefox下javascript的兼容写法小结
Dec 10 Javascript
三级下拉菜单的js实现代码
May 23 Javascript
JavaScript将数据转换成整数的方法
Jan 04 Javascript
JS对文本框值的判断示例
Mar 10 Javascript
angular.JS实现网页禁用调试、复制和剪切
Mar 31 Javascript
Javascript快速实现浏览器系统通知
Aug 26 Javascript
ajax前台后台跨域请求处理方式
Feb 08 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
Node 搭建一个静态资源服务器的实现
May 20 Javascript
vue store之状态管理模式的详细介绍
Jun 13 Javascript
微信小程序跨页面传递data数据方法解析
Dec 13 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Feb 05 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+oracle 分页类
2006/10/09 PHP
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
PHP 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
百度地图API使用方法详解
2015/08/25 PHP
PHP实现递归的三种方法
2020/07/04 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
JavaScript实现快速排序(自已编写)
2012/12/19 Javascript
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
利用Node.js制作爬取大众点评的爬虫
2016/09/22 Javascript
js常用DOM方法详解
2017/02/04 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
2017/03/01 Javascript
python实现哈希表
2014/02/07 Python
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
Python的log日志功能及设置方法
2019/07/11 Python
Python编程中类与类的关系详解
2019/08/08 Python
Python %r和%s区别代码实例解析
2020/04/03 Python
怎么快速自学python
2020/06/22 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
可靠的数据流传输TCP
2016/03/15 面试题
毕业生自荐信
2013/12/14 职场文书
2013年军训通讯稿
2014/02/05 职场文书
便利店投资创业计划书
2014/02/08 职场文书
十八届三中全会报告学习材料
2014/02/17 职场文书
大学生应聘求职信
2014/05/26 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
合理化建议书范文
2015/09/14 职场文书
简历自我评价:教师师德表现自我评价
2019/04/24 职场文书
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python
centos7安装mysql5.7经验记录
2022/05/02 Servers