jsonp实例

jsonp实例

1.JSONP原理
在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,但img、iframe、script等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据。 而JSONP就是通过script节点中的src属性调用跨域的请求。当我们通过JSONP模式请求跨域资源时,服务器返回给客户端一段javascript代码,这段javascript代码自动调用客户端回调函数。

2.前端


<head>
    <title>jsonptitle>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
head>
<body>
<script>
    //动态创建script标签,并请求
    function addScriptTag(src){
        var script = document.createElement('script');
        script.setAttribute('type', 'text/javascript');
        script.src = src;
        document.body.appendChild(script);
    };
    //在onload后,跨域请求
    window.onload = function(){
        addScriptTag('http://127.0.0.1:8080/jsonp?callback=test');
    };
    //回调函数,必须为全局,不然会报错
    function test(data){
        alert(data.name);
    };
script>
body>
html>

3.搭建node server

//告诉Node.js引入http模块给该服务器应用使用
var http = require('http');
//引入url模块解析url字符串
var url = require('url');
//引入querystring模块处理query字符串
var querystring = require('querystring');
//创建新的HTTP服务器
var server = http.createServer();
//通过request事件来响应request请求
server.on('request',function(req, res){
    var urlPath = url.parse(req.url).pathname;
    var qs = querystring.parse(req.url.split('?')[1]);
    if(urlPath === '/jsonp' && qs.callback){
        res.writeHead(200,{'Content-Type':'application/json;charset=utf-8'});
        var data = {
            "name": "Monkey"
        };
        data = JSON.stringify(data);
        var callback = qs.callback+'('+data+');';
        res.end(callback);
    }
    else{
        res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'});
        res.end('Hell World\n');
    }
});
//监听8080端口
server.listen('8080');
//用于提示我们服务器启动成功
console.log('Server running!');

4.运行node server之后,在浏览器打开上面所写的html页面,运行结果为:

jsonp实例_第1张图片

你可能感兴趣的:(JS)