两种简单的跨域方法(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 相关文章推荐
B/S模式项目中常用的javascript汇总
Dec 17 Javascript
可插入图片的TEXT文本框
Dec 27 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 Javascript
jquery中append()与appendto()用法分析
Nov 14 Javascript
浅谈EasyUI中编辑treegrid的方法
Mar 01 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
Jun 13 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
微信小程序 冒泡事件原理解析
Sep 27 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
用文本文件制作留言板提示(上)
2006/10/09 PHP
Adodb的十个实例(清晰版)
2006/12/31 PHP
php自动加载的两种实现方法
2010/06/21 PHP
php whois查询API制作方法
2011/06/23 PHP
PHP函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
php计算整个mysql数据库大小的方法
2015/06/19 PHP
如何在PHP环境中使用ProtoBuf数据格式
2020/06/19 PHP
jQuery 使用手册(七)
2009/09/23 Javascript
js 上传图片预览问题
2010/12/06 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
JavaScript 基础篇之运算符、语句(二)
2012/04/07 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
小议JavaScript中Generator和Iterator的使用
2015/07/29 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
python通过nmap扫描在线设备并尝试AAA登录(实例代码)
2019/12/30 Python
Python基础之字典常见操作经典实例详解
2020/02/26 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
关于Assembly命名空间的三个面试题
2015/07/23 面试题
经济学博士求职自荐信范文
2013/11/23 职场文书
高中毕业自我鉴定
2013/12/16 职场文书
银行工作检查书范文
2014/01/31 职场文书
个人安全生产责任书
2014/07/28 职场文书
毕业生实习证明
2014/09/19 职场文书
旷课检讨书
2015/01/26 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书