项目中遇到一个需求,数据是通过跨域获取的,在百度查了下,跨域获取数据主要有以下几种方式:
A. 嵌套iframe;
B.服务器端充当中转代理方式有很多可以由服务器端程序实现,也可以修改服务器配置实现,下面举例Apache 重写( mod_rewrite proxy 模式)方式:
在Apache 的安装目录下的 conf/httpd.conf 文件添加如下语句:
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so
LoadModule rewrite_module modules/mod_rewrite.so
RewriteEngine On
RewriteRule ^/_proxy/(.*)$ http://$1 [P,L]
C.JS文件注入,因为script的src属性可以跨域的,Jquery.ajax()也是用这种方式实现跨域。
以下C方式的实现代码:
TEST.JsLoader.scriptId = 1; TEST.JsLoader.prototype.load = function(src, doc, charset) { var sId = TEST.JsLoader.scriptId; TEST.JsLoader.scriptId++; var o = this; setTimeout(function() { o._load2.apply(o, [sId, src, doc, charset]); o = null; }, 0); } TEST.JsLoader.prototype._load2 = function(sId, src, doc, charset) { _doc = doc || document; charset = charset || "gb2312"; var _ie = TEST.userAgent.ie, _js = _doc.createElement("script"); TEST.event.addEvent(_js, (_ie ? "readystatechange": "load"), (function(o) { return (function() { if (_ie) { if (_js && !(_js.readyState == "complete" || _js.readyState == "loaded")) { return; } } o.onload(); if (!o.debug) { TEST.dom.removeElement(_js); } _js = null; }); })(this)); if (!_ie) { TEST.event.addEvent(_js, "error", (function(o) { return (function() { o.onerror(); if (!o.debug) { TEST.dom.removeElement(_js); } _js = null; }); })(this)); } _js.id = "js_" + sId; _js.defer = true; _js.charset = charset; _js.src = src; _doc.getElementsByTagName("head")[0].appendChild(_js); }; TEST["js" + "Loader"] = TEST.JsLoader;
调用列子:
var jsLoader = new TEST.JsLoader(); //onload加载完JS后响应 jsLoader.onload = function(){ } jsLoader.load('http://test.js');
<!--EndFragment-->