关于同源策略的问题可以参考:http://hcc0926.blog.51cto.com/172833/1557204

虽然跨域的问题很多,但是有时候又无法避免这样的使用,比如说加载远程的一个json文件或者是远程的js文件,具体的用法如下:

(1)使用jquery的ajax方法

     jQuery $.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的. 加载远程文件代码示例如下:

                    $.ajax({

                         url: 'http://www.panoramio.com/wapi/data/get_photos?                                        v=1&key=dummykey&tag=test&offset=0&length=20',

 type: 'get',

  dataType: 'jsonp',

})

.done(function() {

console.log("success");

})

.fail(function() {

console.log("error");

})

});

或者可以直接执行http://jsfiddle.net/houyaowei/o5mcv4hq/

$.ajax()加载本地json文件的示例如下:

                        $.ajax({

url: 'phone.json',

dataType: 'json'

})

.done(function() {

console.log("success");

})

.fail(function() {

console.log("error");

})

jquery的其他方法如:get(),getJSON()方法的使用可以参考官方的API,

(2)   HTML5中处理跨域请求的方法。

   HTML5中也提供了实时跨域通信的两个重要的模块:跨文档域消息通信(postMessage)和XMLHttpRequest level2

   1、postMessage

      我们使用postMessage前首先应该检测下浏览器是否支持该特性:

      if(typeof window.postMessage){

            //浏览器支持

     }

    具体的支持情况可以参考:http://fmbip.com/litmus 

    如果浏览器支持该特性了,该怎么发送请求呢?

   调用目标页面window对象中的postMessage即可发送消息,如下:

    window.postMessage(data,url);

   data : 包含要发送的数据

   url : 目标url

  2、XMLHttpRequest level2

     xmlhttprequest level1仅限于同源通信,XHR L2通过CORS(Cross Origin Resource Sharing,跨源资源共享)实现跨源XmlHttpRequests,由于现在原生的实现方式用的比较少,这部分后续介绍。

参考:https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage

     http://caniuse.com/

     HTML5程序设计第二版