jsonp跨域获取数据小解
jsonp跨域获取数据小解
由于浏览器有同源策略，所以要想获取非同源（协议，域名，端口三者有一不同都算非同源）的页面的数据，就得进行跨域
(1) jsonp原理
由于script标签的src属性可以访问非同源的js脚本，所以通过src属性访问服务器会返回函数的js代码，而我们想要的数据就作为函数参数返回，而我们会先定义这个函数，返回的js代码就可执行
(2) jsonp实现代码
请求页面
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function jsonp(data){
console.log(username)
}
</script>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
var url = "http://www.example.com/jsonp.php?callback=jsonp";
var script = $('<script><\/script>');
script.attr("src",url);
$("body").append(script);
});
</script>
</body>
</html>
<?php
$data = {'name': '张三'};
$callback = $_GET['callback'];
echo $callback."(".json_encode($data).")";
?php>
之后php会返回
jsonp（{
name:'niuni
}）
然后PHP返回的代码h会被请求页面的jsonp方法执行
（3）jQuery的简便jsonp跨域
<script>
function showData (data) {
console.info(data);
}
$(document).ready(function () {
$("#btn").click(function () {
$.ajax({
url: "http://www.example.comjsonp",
type: "GET",
dataType: "jsonp",// 返回数据类型
jsonpCallback: "showData",//回调函数
// 获取数据成功就执行success函数
success: function (data) {
console.info("data");
}
});
});
});
</script>
jsonp跨域获取数据小解的更多相关文章
- jsonp跨域获取数据实现百度搜索
本菜鸡最近在写某个页面请求数据时,报了如下的错误. Failed to load https://...:No 'Access-Control-Allow-Origin' header is pres ...
- asp.net MVC jsonp跨域获取数据
public class JsonpResult : JsonResult { object _data = null; public JsonpResult() { } public JsonpRe ...
- jQuery之ajax的跨域获取数据
如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面.服务 ...
- 利用location.hash+iframe跨域获取数据详解
前言 如果看懂了前文利用window.name+iframe跨域获取数据,那么此文也就很好理解了.一样都是动态插入一个iframe,然后把iframe的src指向服务端地址,而服务端同样都是输出一段j ...
- 利用window.name+iframe跨域获取数据详解
详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...
- XMLHTTPRequest对象不能跨域获取数据？！
写了一小段代码,是用XMLHTTPRequest对象来获取数据的,在本地服务器中,运行的很顺利,但是转向实际服务器(实质上就是转向http://gumball.wickedlysmart.com获取一 ...
- iframe 跨域问题解决方案 利用window.name+iframe跨域获取数据详解
详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...
- 使用JSONP跨域请求数据
下面代码,可以使用JSONP进行跨域请求数据,Insus.NET记录以下,以备忘记.
- java之初识服务器跨域获取数据
当一个项目膨大到无法进行整理时,而作为新负责维护的团队是非常苦恼的.对于想实现两个系统的数据访问,使用Ajax数据请求方式获取jsonp格式的数据 需要有前端jquery库文件. 前端代码通过jque ...
随机推荐
- Libgdx 1.6.0发布，跨平台游戏开发框架
[1.6.0] -英文原文:http://www.badlogicgames.com/wordpress/?p=3682 -API更改:GlyphLayout xAdvances现在有了额外的开始入口 ...
- (NO.00001)iOS游戏SpeedBoy Lite成形记(十一)
之前的10篇内容主要实现了选手从起点移动至终点的动作,比较随机的模拟了选手的速度变化,另外完成了选手到达终点时该做的事情. 接下来的几篇中我们进一步完善SpeedBoy Lite项目,使它真正成为一个 ...
- 深入理解Android IPC机制之Binder机制
Binder是Android系统进程间通信(IPC)方式之一.Linux已经拥有的进程间通信IPC手段包括(Internet Process Connection): 管道(Pipe).信号(Sign ...
- unity实现玻璃效果
一.使用Cubemap,做一个假反射 shader代码如下: Shader "Custom/glassShader" { Properties { _MainColor(" ...
- Cocos2D的平台检查宏
为了避免在非iOS平台包含UIKit.h文件,需要在Prefix.pch文件中添加一个条件判断: #if __CC_PLATFORM_IOS #import <UIKit/UIKit.h> ...
- AngularJS进阶(十七)在AngularJS应用中实现微信认证授权遇到的坑
在AngularJS应用中集成微信认证授权遇到的坑 注:请点击此处进行充电! 前言 项目开发过程中,移动端新近增加了一个功能"微信授权登录",由于自己不是负责移动端开发的,但最后他 ...
- 基于Reactjs实现webapp（加精）
git原文链接:https://github.com/my-fe/wiki/issues/1 由于最近的reactjs实在太火,而且距离第一版已经快2年的时间了,已经相对稳定和成熟了,基于这两个前提下 ...
- Media Player Classic - HC 源代码分析 2：核心类 （CMainFrame）（1）
===================================================== Media Player Classic - HC 源代码分析系列文章列表: Media P ...
- ZeroC Ice Ice Registry实现负载均衡
Registry介绍 对于多个IceBox集群该怎么负载均衡?以服务注册表Registry为依托的Service Locator组件,以及依赖其而诞生的强大的分分布式框架-IceGri ...
- PS 滤镜——素描算法（一）
这个算法结合高斯滤波和图层混合中的颜色减淡模式实现. 可以参考相关博客: http://blog.csdn.net/wsfdl/article/details/7610634 本文增加了一点调色,使得 ...