文档章节

用jQuery AJAX发出JSONP请求实现跨域获取数据

eechen
 eechen
发布于 2016/11/10 14:13
字数 298
阅读 313
收藏 4

JSONP全称是"JSON with Padding",个人理解就是"填充JSON"的意思.
填充到哪里?就是填充到JS函数调用时的参数里.
可见JSONP的本质就是带有JSON数据的JS函数调用,它是一句合法的JS代码.
JSONP能通过AJAX跨域请求的原理(前提)是:
浏览器不会拦截跨域输出的JS代码,就像<script>标签能跨域加载JS脚本那样.

下面以jQuery的$.ajax函数为例说明:

先用PHP开2个不同域的HTTP服务:
php -S 127.0.0.1:8080 -t /home/eechen/www1
php -S 127.0.0.2:8080 -t /home/eechen/www2
然后是 127.0.0.1:8080 AJAX跨域请求 127.0.0.2:8080 的JSONP数据.

http://127.0.0.2:8080/jsonp.php 内容:

<?php
header('Content-Type: application/javascript'); //建议指定响应头为JS代码
echo $_GET['callback'].'('.json_encode(array('Server'=>'PHP')).')';

http://127.0.0.1:8080 通过AJAX发出JSONP请求:
 

$.ajax({
	type: "GET", //JSONP只能通过GET方式发出请求
	url: "http://127.0.0.2:8080/jsonp.php",
	data: {name:"ele", pass:"123"},
	dataType: "jsonp"
	// 发出的GET请求 http://127.0.0.2:8080/jsonp.php?callback=jQuery112400641287495426539_1477561917569&name=ele&pass=123&_=1477561917570
	// 返回的JSONP数据 jQuery112400641287495426539_1477561917569({"Server":"PHP"})
}).done(function(data){
	console.log(data); //data即为获取到的JSON对象{"Server":"PHP"}
});

 

© 著作权归作者所有

共有 人打赏支持
eechen

eechen

粉丝 1005
博文 107
码字总数 55962
作品 1
深圳
私信 提问
加载中

评论(1)

Ajax跨域原理JQuery之Jsonp使用剖析

Ajax跨域原理JQuery之Jsonp使用剖析技术 maybe yes 发表于2014-12-27 18:21 原文链接 : http://blog.lmlphp.com/archives/49 来自 : LMLPHP后院 有 关Ajax技术,对于我们这些经常在互联网打滚...

hosser
2015/02/09
0
0
用jQuery与JSONP轻松解决跨域访问的问题

跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,所以通过本机服务器端通过类似httpclient方式完成“跨域访问”的工作,然后在浏览器端用AJAX获取本机服务器端“跨域访问...

烽穹寒渊
2015/07/26
0
0
JQuery的Ajax跨域请求的解决方案

今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发现JQuery对于...

Carl_
2014/07/15
0
0
ajax jsonp其本质 用原生js来处理跨域的数据(jsonp)

说明总结: 1.ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。 2.但是ajax和jsonp在...

BearCatYN
2015/06/04
0
0
jquery的ajax和getJson跨域获取json数据

很多开发人员在使用jquery在前端和服务器端进行数据交互,所以很容易会认为在前端利用jquery就可以读取任何站点的数据了。近日在进行开发时,因为要和第三方公司的一个项目进行数据的共享,因...

度外网络
2012/09/26
0
1

没有更多内容

加载失败,请刷新页面

加载更多

Spring Boot 集成 Swagger,生成接口文档就这么简单!

之前的文章介绍了《推荐一款接口 API 设计神器!》,今天栈长给大家介绍下如何与优秀的 Spring Boot 框架进行集成,简直不能太简单。 你所需具备的基础 告诉你,Spring Boot 真是个牛逼货! ...

Java技术栈
25分钟前
3
0
一个简单的js作用域题目(原创)

var name = 'nnmm' var obj = { name: 'name1', func: () => { console.log(this.name) }, func1: function (){ console.log(this.name) }, son: { ......

boogoogle
27分钟前
2
0
SSM整合activeMQ/activeMQ配置

一、引入依赖 <!-- xbean 如<amq:connectionFactory /> -->    <dependency>        <groupId>org.apache.xbean</groupId>        <artifactId>xbean-spring</artifac......

嘴角轻扬30
31分钟前
2
0
小公司出身的程序员,面试咋这么难?!

小公司出身,被大厂竞争者 KO 以下是一个非常真实的案例,是一个大厂工程师和一个小公司工程师同时求职一个独角兽公司的职位的经历。 一个是985本科学历,出身互联网大厂,四五年经验的样子。...

编程SHA
37分钟前
2
0
揭秘:蚂蚁金服bPaaS究竟是什么?

摘要: 分布式金融核心套件,蚂蚁金服bPaaS究竟是什么东东? 文/图 孙浩峰 去年9月,蚂蚁金服在杭州云栖ATEC发布了分布式金融核心套件bPaaS( Business Platform As a Service ),对外开放自...

阿里云官方博客
38分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部