大家都知道在实际应用中常常会遇到跨域请求的问题，由于第三方插件的封装，跨域请求已经不是什么难题，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函数。将数据扔到这个回调函数中去做处理，这样就绕开了浏览器的跨域限制。