JavaScript中的跨域详解(二)

4、AJAX

  • 同源政策规定,AJAX请求只能发给同源的网址,否则就报错。
  • 除了架设服务器代理(浏览器请求同源服务器,再由后者请求外部服务),有三种方法规避这个限制。
    JSONP
    WebSocket
    CORS
  • 1、JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用,老式浏览器全部支持,服务器改造非常小。
    它的基本思想是,网页通过添加一个<script>元素,向服务器请求JSON数据,这种做法不受同源政策限制;服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。
    首先,网页动态插入<script>元素,由它向跨源网址发出请求。
function addScriptTag(src) {
      var script = document.createElement('script');
      script.setAttribute("type","text/javascript");
      script.src = src;
      document.body.appendChild(script);
    }
    
    window.onload = function () {
      addScriptTag('http://example.com/ip?callback=foo');
    }
    
    function foo(data) {
      console.log('Your public IP address is: ' + data.ip);
    };

上面代码通过动态添加

posted @ 2017-06-10 15:31  Juphy  阅读(179)  评论(0)    收藏  举报