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 ...
随机推荐
- JAVA之旅(十四)——静态同步函数的锁是class对象,多线程的单例设计模式,死锁,线程中的通讯以及通讯所带来的安全隐患,等待唤醒机制
JAVA之旅(十四)--静态同步函数的锁是class对象,多线程的单例设计模式,死锁,线程中的通讯以及通讯所带来的安全隐患,等待唤醒机制 JAVA之旅,一路有你,加油! 一.静态同步函数的锁是clas ...
- UIView、UIViewLayout UI_01
1.首先:在UI里面我们使用的是MRC,需要把ARC改成NO: 若学习比较吃力,可以先学习一下基础: http://blog.sina.com.cn/s/blog_814ecfa90102vuzg.h ...
- C 语言内存区域分配(进程的各个段)详解
C语言可执行代码结构 名称 内容 代码段 可执行代码.字符串常量 数据段 已初始化全局变量.已初始化全局静态变量.局部静态变量.常量数据 BSS段 未初始化全局变量,未初始化全局静态变量 栈 ...
- VS2010安装Boost库
source URL: http://stackoverflow.com/questions/2629421/how-to-use-boost-in-visual-studio-2010 While ...
- Android For JNI(六)——交叉编译,NDK概述以及文件结构,编写自己的第一个JNI工程
Android For JNI(六)--交叉编译,NDK概述以及文件结构,编写自己的第一个JNI工程 终于回到我们的 android了,我们先要配置这个NDK的环境,但是之前,我们还要了解一下基本的术 ...
- 【Qt编程】基于Qt的词典开发系列<三>--开始菜单的设计
这篇文章讲讲如何实现开始菜单(或者称为主菜单)的设计.什么是开始菜单呢?我们拿常用的软件来用图例说明,大多数软件的开始菜单在左下角,如下图: 1.window 7的开始菜单 2.有道词典的主菜单 3. ...
- C语言设计模式-封装-继承-多态
快过年了,手头的工作慢慢也就少了,所以,研究技术的时间就多了很多时间,前些天在CSDN一博客看到有大牛在讨论C的设计模式,正好看到了,我也有兴趣转发,修改,研究一下. 记得读大学的时候,老师就告诉我们 ...
- TCP的核心系列 — 重传队列的更新和时延的采样(二)
在tcp_clean_rtx_queue()中,并非对每个ACK都进行时延采样.是否进行时延采样,跟这个ACK是否为 重复的ACK.这个ACK是否确认了重传包,以及是否使用时间戳选项都有关系. 本文主 ...
- 第一个Polymer应用 - (0)准备工作
原文链接: Getting Started - Your first Polymer application翻译时间: 2014年7月5日翻译人员: 铁锚 关于Polymer 的简介,请参考 CSD ...
- EBS form 之间跳转实现(form 关闭)
实现 form CUXOMWB 使用 app_navigate.execute 打开 form CUXOEXPRAVA :然后 FROM CUXOEXPRAVA 上点击按钮 跳回from CUXOMW ...