大家都知道在实际应用中常常会遇到跨域请求的问题,由于第三方插件的封装,跨域请求已经不是什么难题,jQuery就提供了很好的jsonp请求方法,大家也就习惯的使用着。但是虽然jQuery将jsonp的跨域请求封装进了$.ajax()方法中,让人觉得和普通的ajax请求没有区别,好像是一回事,但实际上,有着本质的区别。
首先,在浏览器没有提供XMLHttpRequest对象时,要想实现无刷新,只能使用古老的办法,一般都是会前后台一起配合,经过iframe、img或者script,指定src(请求后台的链接),实现前后台数据交互。其实jsonp,就是这种最原始的,石器时代的办法!至于现代化的ajax请求,请详看XMLHttpRequest对象,js原生的ajax请求。接下来我们将从代码上讲解jsonp跨域请求的原理。
前台代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf8'>
<title></title>
<script>
function send(){
var theurl='http://www.myhost.com/jsonp/back.php';
theurl+='?name=lilei';
theurl+='&age=28';
theurl+='&callBack=success';
//创建一个script,指定src为要请求的链接地址
var childnode = document.createElement('script');
childnode.setAttribute('id','create_requst');
childnode.setAttribute('src',theurl);
var parentnode = document.getElementsByTagName('head');
parentnode[0].appendChild(childnode);
//请求完毕删除创建的节点
var remove_node = document.getElementById('create_requst');
remove_node.parentNode.removeChild(remove_node);
}
//请求成功后的回调函数
function success( msg ){
document.getElementById('back_data').innerHTML='yourname:'+msg.name+'---yourage:'+msg.age;
}
</script>
</head>
<body>
<a href="javascript:;" target="_self" onclick="send()">点击测试</a>
<h1 id="back_data"></h1>
</body>
</html>
后台代码如下:
<?php
$callBack = $_GET['callBack'];
$bak_data=$callBack."(".json_encode($_GET).")";
echo $bak_data;
点击后将在head中生成一个script标签,src指向你要请求的地址。
同时请求成功,其实返回的数据就是在回调函数success(),中传了一个object。
回调函数success处理数据,将数据写入h1中。
其实总体思路就是创建一个请求,然后后端返回给浏览器一个结果,而这个结果呢正好符合JavaScript执行的规范。callback参数指定的就是请求成功后,要调用的js函数。将数据扔到这个回调函数中去做处理,这样就绕开了浏览器的跨域限制。