jsonp的原理很简单,主要利用了HTML中所有有src的属性的标签可以跨域的特点,利用script的src进行get请求,后端输出一段js代码的字符串在script中便会执行。
当然后端输出普通的json字符串是不行的,后台应当输出fn(json)样式的字符串 ,fn代表要调用的js方法;json代表要处理的数据.这也是jsonp得名的原因.后台不会知道要调佣哪个js,所以需要前台把要调用的函数的名字发给后台.
一个简单的jsonp例子
后台 node版本
var http = require('http');
var server = new http.Server();
server.listen(8000);
server.on('request', function(request, response){
var url = require('url');
var params = url.parse(request.url, true).query;
var fn = params.fn;
response.writeHead(200, {'Content-type':'text/plain'});
response.write(fn+'(22)');
response.end();
});
前台
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
var log = function(msg) {
alert(msg);
}
</script>
</head>
<body>
<script type="text/javascript">
function getJsonp(url, fn) {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.onload = function() {
head.removeChild(script);
if (fn) {
fn();
}
}
script.src = url;
head.appendChild(script);
}
getJsonp("http://192.168.1.103:8000/?fn=log");
</script>
</body>
</html>