两种简单的跨域方法(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 相关文章推荐
基于jquery的跟随屏幕滚动代码
Jul 24 Javascript
Jquery数字上下滚动动态切换插件
Aug 08 Javascript
javascript下拉列表菜单的实现方法
Nov 18 Javascript
JavaScript仿flash遮罩动画效果
Jun 15 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
AngularJS学习第二篇 AngularJS依赖注入
Feb 13 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
js设置鼠标悬停改变背景色实现详解
Jun 26 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
layui动态绑定事件的方法
Sep 20 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 Javascript
iview实现图片上传功能
Jun 29 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
wampserver改变默认网站目录的办法
2015/08/05 PHP
php实现微信发红包
2015/12/05 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
浅谈PHP命令执行php文件需要注意的问题
2016/12/16 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
PHP const定义常量及global定义全局常量实例解析
2020/05/28 PHP
番茄的表单验证类代码修改版
2008/07/18 Javascript
动态为事件添加js代码示例
2009/02/15 Javascript
javascript面向对象之Javascript 继承
2010/05/04 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
ArtEditor富文本编辑器增加表单提交功能
2016/04/18 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
vue.js实现单选框、复选框和下拉框示例
2017/07/18 Javascript
vue实现点击选中,其他的不选中方法
2018/09/05 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
Python实现完整的事务操作示例
2017/06/20 Python
深入浅析python 中的匿名函数
2018/05/21 Python
python实现大学人员管理系统
2019/10/25 Python
什么是python的列表推导式
2020/05/26 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
python自动化办公操作PPT的实现
2021/02/05 Python
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
学校采购员岗位职责
2014/01/02 职场文书
蛋糕店的商业计划书范文
2014/01/27 职场文书
实习单位评语
2014/04/26 职场文书
物业管理专业求职信
2014/06/11 职场文书
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
秋菊打官司观后感
2015/06/03 职场文书
会计实训总结范文
2015/08/03 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
在python中读取和写入CSV文件详情
2022/06/28 Python