两种简单的跨域方法(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 30 Javascript
javascript算法学习(直接插入排序)
Apr 12 Javascript
原生js ActiveXObject获取execl里面的值
Nov 01 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
JS传值出现中文参数乱码的解决方法
Jun 30 Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 Javascript
js控制div层的叠加简单方法
Oct 15 Javascript
Node.js中的http请求客户端示例(request client)
May 04 Javascript
JavaScript创建对象的七种方式全面总结
Aug 21 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
Apr 10 Javascript
Vue打包后访问静态资源路径问题
Nov 08 Javascript
node使用async_hooks模块进行请求追踪
Jan 28 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
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
jQuery实现原理的模拟代码 -6 代码下载
2010/08/16 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
2020/09/12 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
jQuery将多条数据插入模态框的示例代码
2014/09/25 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
2015/02/17 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
2015/03/05 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
动态加载JavaScript文件的3种方式
2018/05/05 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
python实现给字典添加条目的方法
2014/09/25 Python
python3+PyQt5使用数据库表视图
2018/04/24 Python
浅谈Django的缓存机制
2018/08/23 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
python清空命令行方式
2020/01/13 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
速比涛英国官网:Speedo英国
2019/07/15 全球购物
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
优秀毕业大学生推荐信
2013/11/13 职场文书
愚人节活动策划方案
2014/03/11 职场文书
商务英语专业大学生职业生涯规划书
2014/09/14 职场文书
群众路线自我剖析及整改措施
2014/11/04 职场文书
工作违纪检讨书范文
2015/01/26 职场文书