记一次Ajax的跨站访问

近期，好久没更新博客了，好像开始赖起来了(有点觉得博客园的不支持markdown)

自从上次面试以来，被问起Ajax怎么进行跨域访问没有答上来后，就像试试这个高大上的功能是怎么实现的呢，百度了一下好像也不是那么难

 

在通常情况下，Ajax是不能跨站访问的,必须要遵守同源策略(same origin policy).但是现在有了JSONP(JSON with Padding),它用<script>标签来包装自己在不同的站点之间穿梭。

 

为什么要特别强调跨站访问这个问题，还是要说回安全性上来:

--假如我点了一个有恶意脚本的链接(有可能藏在图片里面)，这个脚本把我带进银行的某一个更改个人信息的页面。同时有可能我有这个银行的cookie，导致有可能就直接完成了

 

完成这个功能要两方面来进行协商,就是说服务器端必须知道并且配合客户端的跨站点访问请求。

 

client-side：

$.getJSON(<要请求的url>?callback=?, function(data){    //这里的callback=？，并不是真的传？过去，jquery会自己生成一串随机值替换这个？的 
    data=eval(data)                                                                   //这里就可以对收到的数据转化成object格式了 
    alert(data[1].title)                                                               //直接按属性访问 
});

 

 

server-side：

先要收到callback传来的值，这里记作jsonp（类似的格式可能是这样”jsonp47981231933”）

再来准备返回数据了，比如要返回的数据类似于[{“id”:1,”title”:”aa”},{“id”:2,”title”:”bb”}]

那么要配合一个跨站访问，必须要对原有返回数据进行一次包装成:

jsonp([{“id”:1,”title”:”aa”},{“id”:2,”title”:”bb”}])

 

 

Note: 上面的callback是可以自己换成其他名字的，我感觉这个属性像是一个密钥一样，只有知道服务器端到底接受什么名字的密钥才能进行通信

 

$.getJSON(<要请求的url>?anything=?, function(data){  
    data=eval(data)                                                                    
    alert(data[1].title)                                                                
});