两种简单的跨域方法(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 相关文章推荐
JS上传前预览图片实例
Mar 25 Javascript
jquery动态加载js三种方法实例
Aug 03 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
JS一次前端面试经历记录
Mar 19 Javascript
JavaScript代码实现简单计算器
Dec 27 Javascript
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
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/10/09 PHP
PHP的一个基础知识 表单提交
2011/07/04 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
jquery.ajax之beforeSend方法使用介绍
2014/12/08 Javascript
jQuery ajax应用总结
2016/06/02 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
vue的基本用法与常见指令
2017/08/15 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
JavaScript ES6中的简写语法总结与使用技巧
2018/12/30 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
Hadoop中的Python框架的使用指南
2015/04/22 Python
详解Django中间件执行顺序
2018/07/16 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
使用django的ORM框架按月统计近一年内的数据方法
2019/07/18 Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
2019/08/12 Python
Html5定位终极解决方案
2020/02/05 HTML / CSS
韩国商务邀请函
2014/01/14 职场文书
高中地理教学反思
2014/01/29 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
高中军训感言800字
2014/03/05 职场文书
教师遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
老公给老婆的检讨书(精华篇)
2014/10/18 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
纪检监察立案决定书
2015/06/24 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
保险公司2016开门红口号集锦
2015/12/24 职场文书
反四风问题学习心得体会
2016/01/22 职场文书
初中美术教学反思
2016/02/17 职场文书
浅谈Python类的单继承相关知识
2021/05/12 Python
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android