从JS简单HTTP请求延伸到JSONP跨域

JavaScript 2012-08-29 JavaScript,jsonp

JS的跨域的跨域问题,是众多新手首要遇见的问题。网上解决跨域的方案有很多,本文就前面我写过的《JS简单模拟HTTP请求比Ajax方便》延伸到JSONP跨域方案。

JSONP原理

为什么叫JSONP呢?其实这种跨域实现方式跟JSON一点关系也没有,所以不要局限于这种跨域方式一定跟JSON有关系。JSONP实现的原理是通过<script>标签的src跨域访问,被访问页把最终结果通过回调本地一个JS函数从而达到跨域功能。然而从正常的表面上看,也可以当作是包含一个JS文件,只不过这个JS文件是主要用来传输页面结果而已。

DEMO

本地JS通过<script>请求一个某IP上的一个PHP文件,PHP文件通过date()函数获取当前的服务器时间并通过调用本地的JS函数call_date()接收到服务器传回的值,从而实现JSONP跨域请求。

本地

JS代码

/**
 * JSONP跨域请求
 * 琼台博客
 */

//json.php处理回调函数
function call_date(data){
	alert(data);
}

//发起jsonp请求函数
function get(){
	var o = document.createElement("script"); 
	o.src="http://192.168.5.149/jsonp.php"; 
	o.type="text/javascript";
	document.body.appendChild(o);		
}

目标

json.php代码

/**
 * JSONP处理回调页面
 * 琼台博客
 */

$date = '当前服务器时间:'.date('Y-m-d H:i:s').'|琼台博客';

// 调用请求源JS函数call_date
echo 'call_date("'.$date.'");';

json.php通过浏览器直接访问结果

call_date("当前服务器时间:2012-08-29 09:55:15|琼台博客");

json.php只是输出了一行字符串,但在JS中就是调用call_date函数,并且传入一个字符串。于是我们在本地请求json.php页面的时候会调用call_date()函数。

测试

我们通过本地发起get()请求http://192.168.5.149/jsonp.php页面,jsonp.php处理结果通过call_date回调回来。

没有请求之前

JSONP跨域请求 - 琼台博客

请求之后

JSONP跨域请求 - 琼台博客

注意看控制台里多出了以下内容

JSONP跨域请求 - 琼台博客

多出的这一段正是点击按钮请求以后被填充到页面的,并且在不刷新的情况下点击一次就填充一个,但不影响页面的正常功能。

从执行结果来看,jsonp.php页面回调的call_date()函数已经成功并且返回相关数据,而call_date()函数里的alert()已经把结果弹出来。这样就实现了一个简单的jsonp跨域请求。

也可以返回JSON对象

既然是json是目前异步请求里使用最多的数据格式,我们在以上DEMO的基础上,实现json数据的回传。

因此,jsonp.php的代码改写为:

/**
 * JSONP处理回调页面
 * 琼台博客
 */

// 声明一个空数组
$arr = array();

// 把处理结果放入数组里
$arr['msg'] = $date = '这是使用json格式传回的数据:当前服务器时间:'.date('Y-m-d H:i:s').'|琼台博客';

// 数组转换json格式
$json = json_encode($arr);

// 调用请求源JS函数call_date
echo  'call_date('.$json.');';

JS的弹出代码也改写为:

//json.php处理回调函数
function call_date(data){
	// 弹出返回的json对象里的msg成员
	alert(data.msg);
}

看看执行结果

JSONP跨域请求 - 琼台博客

测试通过,结果正常获取到json数据。

注意:

1、这种方式只能GET

2、处理页面最好是保证安全,否则容易被人利用漏洞

3、不能跟Ajax做比较

文字链接:《从JS简单HTTP请求延伸到JSONP跨域

文章地址:http://www.qttc.net/201208197.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 2

  • 暂时还看不懂,目前javascript还学习的没有那么深刻,等回到学校之后,再深入学习javascript,到时候就能看懂了,现在先占个沙发
    2012-08-29 12:32:00 [ 跟帖 ]
    现在看看,都很轻松看懂了,说明这段时间进步了哈。
    2013-05-18 16:09:52 [ 跟帖 ]
    1 #