近期,好久没更新博客了,好像开始赖起来了(有点觉得博客园的不支持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) });
新闻热点
疑难解答