两种简单的跨域方法(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 相关文章推荐
HTML代码中标签的全部属性 中文注释说明
Mar 26 Javascript
javascript控制frame,iframe的src属性代码
Dec 31 Javascript
Javascript实现CheckBox的全选与取消全选的代码
Jul 20 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 Javascript
详解Vue 方法与事件处理器
Jun 20 Javascript
详解vue 配合vue-resource调用接口获取数据
Jun 22 Javascript
微信小程序分页加载的实例代码
Jul 11 Javascript
微信小程序之GET请求的实例详解
Sep 29 Javascript
JS获取input[file]的值并显示在页面的实现方法
Mar 09 Javascript
JS几个常用的函数和对象定义与用法示例
Jan 15 Javascript
jQuery 动态粒子效果示例代码
Jul 07 jQuery
vant 自定义 van-dropdown-item的用法
Aug 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预定义常量
2006/12/25 PHP
PHP自动生成后台导航网址的最佳方法
2013/08/27 PHP
php获取目录所有文件并将结果保存到数组(实例)
2013/10/25 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
node.js入门教程
2014/06/01 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
2015/01/13 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
vue实现路由监听和参数监听
2019/10/29 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
[02:03]永远的信仰DOTA2 中国军团历届国际邀请赛回顾
2016/06/26 DOTA
Python中的迭代器与生成器高级用法解析
2016/06/28 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
使用pandas对矢量化数据进行替换处理的方法
2018/04/11 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
django框架两个使用模板实例
2019/12/11 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
婚庆公司的创业计划书
2014/01/22 职场文书
精通CAD能手自荐书
2014/01/31 职场文书
致接力运动员广播稿
2014/02/17 职场文书
学校对教师的评语
2014/04/28 职场文书
学校师德承诺书
2014/05/23 职场文书
商业计划书之服装
2019/09/09 职场文书
pandas中DataFrame重置索引的几种方法
2021/05/24 Python
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python