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

最新推荐文章于 2024-07-10 14:03:37 发布

weixin_34029949

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量102

点赞数

文章标签： javascript php json ViewUI

原文链接：https://my.oschina.net/eechen/blog/785642

版权

为什么80%的码农都做不了架构师？>>>

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"}
});

转载于:https://my.oschina.net/eechen/blog/785642