使用chrome扩展程序及jsonp实现跨域访问

    做为跨域访问，不少人都知道，因为同源策略（所谓同源，即域名、协议、端口相同），形成js不能操做非同源的web页面的内容，随着前端的不断发展，使用的不断深刻，这也产生了不少的不便。下面，我将经过两种方式进行跨域访问：

一、经过chrome扩展程序：

    对于使用chrome浏览器的用户，能够经过此方式方便的进行跨域访问，并且不须要进行后台数据的操做，只需在前端就能进行跨域访问且取得里面你想要的内容，例如当想要取得http://files.qidian.com/Author6/2877557/46513147.txt里面内容的时候，就可使用此方法方便取得。

在这以前，首先得对chrome扩展程序进行简单的配置，从而产生一个属于本身的chrome扩展程序。下面一个简洁步骤：

首先，在桌面，也能够在你任何磁盘里新建一个文件夹，而我则建了个名chrome文件夹，里面最重要的是包含一个manifest.json的文件,详细信息可参阅http://docs.lmk123.com/getstarted.html；

manifest.json文件内容以下：

其中最重要的是permissions中“http://*/*”,其表明可以运行的网址范围，还有就是content_scripts中的js，其表示须要使用的js文件。

在myOwn.js中代码为：$.get("http://files.qidian.com/Author6/2877557/46513147.txt",function(res){
                console.log(res)；
})；

最后就是将你本身写的扩展程序安装至chrome，方法是：打开chrome——>右上角“自定义及控制”——>工具——>扩展程序；进入后，点击“加载正在开发的扩展程序”，选择你上面建立的文件夹，个人就是chrome，后获得：

只要启动就说明成功了；可是因为在每一个http网站都会执行此myOwn.js；因此测试完后能够删除就行；

如今只要你随便进入一个http://*/*网站，它就会执行，并获得你想要的结果但因为请求的文件的编码问题，会出现乱码，只须要使用我上个博客中提供的函数进行请求处理，就能够成功获得天朝文；注意就是在使用这个扩展程序的时候，当你每次修改你的js文件后，须要在刚刚加载扩展程序页面进行刷新才能更新；即按F5或ctrl+R；

二、使用jsonp进行跨域访问；

最简单理解jsonp理解，就是说经过script元素做为ajax传输机制，只须要设置其src地址，就能够不受同源策略的影响，就能够进行跨域访问：

我进行测试，是先在我本身的apache服务器上建了一个ajax.txt文件，内容是：

    document.write("测试ajax跨域中文代码");

而在webstorm 7上建立一个csjsonp.html文件；里面代码为：

<script src="http://localhost/phpstorm/ajax.txt"></script>

结果，在网页中打印：说明进行了跨域访问，由于个人csjsonp.html地址为：http://localhost:63342/across_domain/csjsonp.html;两个端口号不一样；若经过ajax请求；即将csjsonp代码改成：

<script>
        $.get("http://localhost/phpstorm/ajax.txt",function(res){
            alert(res);
        })
    </script>
后刷新，则不会打印结果，且报错：

这就是最简单的jsonp跨域；可是有时候在使用，须要的不是一开始就将其写入script标签中，而是动态获得，此时就须要动态添加script标签进行请求，可是，这种须要先后台均进行修改，咱们先将csjsonp.html修改成：

<script>
        var oScript = document.createElement("script");
        oScript.src="http://localhost/phpstorm/ajax.txt";
        document.body.appendChild(oScript);
        function jsonpback(res){
            alert(res);
        }
    </script>
若是你不改请求文件中内容，刷新后将不会有任何反应，可是，若是咱们将ajax.txt文件内容改成：

jsonpback("测试ajax跨域中文代码");

结果呢，刷新就将打印出结果：，也就是说，须要在先后台添加一个回调函数jsonpback；

使用jquery进行jsonp为：

<script>         $.ajax({             url:"http://localhost/phpstorm/ajax.txt",             dataType:"jsonp",             jsonpCallback:"jsonpback",             success:function(res){                 alert(res);             }         })     </script> 对于跨域访问，还有不少方式和不一样的状况，可根据状况进行选择。