js学习总结----同源与非同源(jsonp)

JSONP和AJAX相同,都是客户端向服务器端发送请求：给服务器端传递内容 或者 从服务端获取数据

AJAX属于同源策略

JSONP属于非同源策略(跨域请求) ->实现跨域请求的方式有很多种，只不过JSONP是最常用的

区分同源和非同源:

　当前页面的地址 && 数据请求的接口地址

　1）、协议

　2）、域名或者IP

　3）、端口号　

　以上三部分完全相同属于同源策略，我们使用AJAX技术获取数据；只要有一个不一样，就属于非同源，我们一般使用jsonp获取数据。　

如果我们想要在本地文件index.html中把本地的data.txt的内容获取到，直接通过本地URL地址就可以获取到localhost:8080/data.txt

如果想请求本地之外的地址例如www.baidu.com,这就涉及的跨域了。

JSONP的原理:（JSONP请求一定需要对方的服务器做支持才可以）

在script的世界中，没有同源跨域这一说，只要你给我src属性中的地址是一个合法的地址，script标签就可以把对应的内容请求回来。

JSONP就是利用了SCRIPT的这个原理

　　1）、我们把需要请求数据的那个跨域的API数据接口的地址赋值给SCRIPT的SRC

　　2）、把当前页面中的某一个函数名当做参数值传递给需要跨域请求数据的服务器（URL问号传参：？callback=fn）

　　3）、服务器接收到你的请求后，需要进行特殊的处理：把你传递进来的函数名和它需要给你的数据拼接成一个字符串 例如我们传递进去的函数名是fn，它准备好的数据是'fn([{"name":"zhangsan"}])' ->我们传递的函数名（需要给我们的数据）

　　4）、最后服务器把准备的数据通过协议返回给我们客户端，客户端发现其实就是让我们的fn执行，而且还给fn传递了一堆的数据，那些数据就是我们想要的

代码如下:

<script>
        function fn(data){
            console.log(data);//这里面就是服务器传递给我们的数据
        }
    </script>
    <script charset='utf-8' type='text/javascript' src='http://matchweb.sports.qq.com/kbs/calendar?columnId=100000&callback=fn'></script>

模拟后台jsonp处理代码

if(pathname==="/getAll"){
        //接收客户端传递进来的函数名
        var fnName = query["callback"];
        //准备数据
        var con = fs.readFileSync('./custom.json','utf-8');
        //返回给客户端内容
        res.writeHead(200,{'content-type':'text/javascript;charset=utf-8'});
        res.end(fnName+"("+con+")");
    }

在JSONP中服务器端返回给客户端的数据一般都是JSON格式的字符串