javascript 跨域解决方案之二----利用flash作为跨域工具

一般情况，编写脚本的时候都会遇到javascript跨域的情形。有用iframe的，有用jsonp的，也有用flash的，今天我也编写一个flash的插件配合js来调用跨域请求。

actionscript文件：

package util
{
/**
* 该类封装了相关请求的操作方法。
* **/
import com.adobe.serialization.json.JSON;
import com.adobe.serialization.json.JSONDecoder;
import com.adobe.serialization.json.JSONEncoder;

import flash.events.Event;
import flash.events.HTTPStatusEvent;
import flash.events.IOErrorEvent;
import flash.events.SecurityErrorEvent;
import flash.external.*;
import flash.net.URLLoader;
import flash.net.URLLoaderDataFormat;
import flash.net.URLRequest;
import flash.net.URLRequestMethod;
import flash.net.URLVariables;

//var jsonArray:Array = JSON.decode( URLLoader( event.target ).data );

public class ReqHandler
{
public function ReqHandler()
{
}

var _status_code:int=0;
public function sendReq(url:String,method:String,paras:String,dataType:String,js_succss_func:String,js_error_func:String):void{
var requestVars:URLVariables = new URLVariables();

var request:URLRequest = new URLRequest();
var jsonobj :Object={};
try{
jsonobj =  com.adobe.serialization.json.JSON.decode(paras);
}
catch (error:Error)
{
this.showError("无法将json字符串转换为json！");
this.showError(error.toString());
return;
}

debug(paras);

if(method.toLocaleLowerCase()=="post"){
request.url = url;
request.method = URLRequestMethod.POST;

for(var x in jsonobj){
requestVars[x]=jsonobj[x];
}
request.data = requestVars;//构造参数。
}
else{
request.url = url;
request.method = URLRequestMethod.GET;
//--构造get参数。
for(var x in jsonobj){
requestVars[x]=jsonobj[x];
}
request.data = requestVars;//构造参数。
}

var loader:URLLoader = new URLLoader();
loader.dataFormat = URLLoaderDataFormat.TEXT;
loader.addEventListener(Event.COMPLETE, loaderCompleteHandler);
loader.addEventListener(HTTPStatusEvent.HTTP_STATUS, httpStatusHandler);
loader.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler);
loader.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);

try
{
loader.load(request);
}
catch (error:Error)
{
this.showError("无法加载url地址【"+url+"】！现在将回调js方法："+js_error_func);
this.showError(error.toString());
ExternalInterface.call(js_error_func, 404,error.toString())
}

function loaderCompleteHandler(e:Event):void
{
//debug(e.target.data);
var returndata=e.target.data;
if(dataType.toLocaleLowerCase()=="json"){
try{
returndata=com.adobe.serialization.json.JSON.decode(returndata)
}
catch(ex:Error){
debug("服务端返回数据格式并非标准的json格式，无法转换！");
debug(ex.toString());
}
}
else{
}

ExternalInterface.call(js_succss_func,returndata)

//var variables:URLVariables = new URLVariables( e.target.data );
//if(variables.success)
//{
//trace(variables.path);
//}
}
function httpStatusHandler (e:Event):void
{
//trace("httpStatusHandler:" + e);
_status_code=e["status"];
return;
debug(e.toString());

if(e["status"]>=400){
ExternalInterface.call(js_error_func, e["status"],"服务端错误")
}//假如大于或等于四百，400-5xx都是错误的意思。那么执行错误方法。
else{
}
//debug(e.to);
}
function securityErrorHandler (e:Event):void
{
debug("flash安全异常："+e.toString());
ExternalInterface.call(js_error_func,  _status_code,e.toString())

}
function ioErrorHandler(e:Event):void
{
//trace("ioErrorHandler: " + e);
debug("flashIO异常："+e.toString());
ExternalInterface.call(js_error_func,  _status_code,e["text"])
}
//该代码片段来自于: http://www.sharejs.com/codes/flash/3896 
}

public function debug(msg:String):void{
trace(msg);
ExternalInterface.call("console.log", "来自flash CRF-AJAX的调试信息： "+msg);
}
public function showError(msg):void{
trace(msg);
ExternalInterface.call("console.log", "来自flash CRF-AJAX的错误： "+msg);
}
}
}

package
{
/**
* 该类负责注册调用接口，接收参数等。
* **/
import flash.display.Sprite;

import util.ReqHandler;
import flash.external.*;
import flash.events.Event;
import flash.system.Security;

public class crf_ajax extends Sprite
{
public function crf_ajax()
{
//this.testsendReq();

if (stage)
{

this.init();
}
else
{
addEventListener(Event.ADDED_TO_STAGE, this.init);
}

}
private function init(event:Event = null) : void
{
removeEventListener(Event.ADDED_TO_STAGE, this.init);
Security.allowDomain("*");
this.regInterface();
debug("运行init方法中。");
//testsendReq();

}

public function testsendReq():void{
var _req:ReqHandler=new ReqHandler();
var jsonstring='{"x":"x val","y":99,"birth":"19990-12-12 12:14:05.4","xxyy":"hello ,how are you? you should say \'okay\', no ,is that \"you mad.\"."}';
jsonstring='{"x":"x val","y":99,"birth":"19990-12-12 12:14:05.4","xx yy":"hello ,how are you? you should say  \'okay\'  "}';
_req.sendReq("http://192.168.4.12:8123/getMexxdiaFileList.do","get",jsonstring,"json","alert","alert");
}

public function sendReq(url:String,method:String,paras:String,dataType:String,js_succss_func:String,js_error_func:String):void{
var _req:ReqHandler=new ReqHandler();
_req.sendReq(url,method,paras,dataType,js_succss_func,js_error_func);
}
//注册js可以使用的接口。
private function regInterface(){
ExternalInterface.addCallback("sendReq",  sendReq);
}
public function debug(msg:String):void{
trace(msg);
ExternalInterface.call("console.log", "来自flash CRF-AJAX的调试信息： "+msg);
}

}
}

js脚本桥梁：

/**
* 这是利用flash进行跨域的一个封装方法。
* 值得注意的是，进行跨域的时候，主域名下面必须有
* crossdomain.xml文件。
* jquery,util及 swfobject都是必须的。
*/
;window.CRF_AJAX_FLASH_OBJ=null;//这是全局的crf ajax swf对象引用。
;window.CRF_AJAX_FLASH_HasInit=false;//是否已经初始化了。。。请注意，已经初始化表示已经调用init方法了，但是并不一定将swf加载完毕了。
;window.CRF_AJAX=function(swfPath,onReady){
//--【工具】内部使用的通用方法及工具。
var innerTools = {
//浏览器兼容访问DOM
getFlashMovieObject: function (movieName) {
if (window.document[movieName]) {
return window.document[movieName];
}
if (navigator.appName.indexOf("Microsoft Internet") == -1) {
if (document.embeds && document.embeds[movieName])
return document.embeds[movieName];
}
else // if (navigator.appName.indexOf("Microsoft Internet")!=-1)
{
return document.getElementById(movieName);
}
}
};

var _swf_id="crf_ajax_swf";
var _App={
_embedFlash: function () {
$(document.body).append("<div style='display:block; width: 0px; height: 0px; overflow: hidden; position: absolute; visibility: hidden; border: 1px solid red;'><div id='"+_swf_id+"'></div></div>");
// For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection.
var swfVersionStr = "11.1.0";
// To use express install, set to playerProductInstall.swf, otherwise the empty string.
var xiSwfUrlStr = "playerProductInstall.swf";
var flashvars = {

};
var params = {};
params.quality = "high";
params.bgcolor = "#000000";
//params.allowscriptaccess = "*";
params.allowScriptAccess="*";
params.allowfullscreen = "false";
params.wmode="opaque";
var attributes = {};
attributes.id = _swf_id;
attributes.name = _swf_id;
attributes.align = "middle";
swfobject.embedSWF(
swfPath, _swf_id,
"100%", "100%",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
// JavaScript enabled so display the flashContent div in case it is not replaced with a swf object.
}
//--检测flash状态。
,detectFlashStatus:function(){
//--判断是否正常加载flash完成。

var _____flashDonw=false;
var ___endup=false;
var __times=0;
var timer_1=setInterval(function(){

var _flashobj=innerTools.getFlashMovieObject(_swf_id);
try{
var frames=_flashobj.TotalFrames();
if(frames>0){
window.CRF_AJAX_FLASH_OBJ=_flashobj;
if(onReady!=undefined){
onReady();
}
clearInterval(timer_1);
return;
}
else{

}

}
catch (ex){
console.log("is playing 无法运行。"+new Date());
}
__times+=10;
if(__times>=10000){
alert("flash文件加载时间过长，加载失败！");
clearInterval(timer_1);
___endup=true;
return;
}
},10);

}
};

var returnObj={

init:function(){
if(window.CRF_AJAX_FLASH_HasInit==false){
_App._embedFlash();
window.CRF_AJAX_FLASH_HasInit=true;
_App.detectFlashStatus();
}
}
//--当前该flash是否已经加载完成。
,isOkay:function(){

if(window.CRF_AJAX_FLASH_OBJ==null){
return false;
}
return true;
}
//--发送请求。
,ajax:function(opts){

if(window.CRF_AJAX_FLASH_OBJ==null){

console.log("crf ajax swf 尚未加载成功.");
return;
}
var settings={
url:""
,data:{}
,dataType:"json"
,method:"post"
,success:function(serverData){

}
,error:function(status,error){

}
};

settings= $.extend({},settings,opts);
//--生成唯一的回调函数用于回调。
var _random_key=util.getRandomWords(5);
var _func_success_name="crf_ajax_success_"+new Date().getTime()+"_"+_random_key;
var _func_error_name="crf_ajax_error_"+new Date().getTime()+"_"+_random_key;
window[_func_success_name] = function(serverData){
settings.success(serverData);
};
window[_func_error_name] = function(status,error){
settings.error(status,error);
};
var jsonstr=JSON.stringify(settings.data);
window.CRF_AJAX_FLASH_OBJ.sendReq(settings.url,settings.method,jsonstr,settings.dataType,_func_success_name,_func_error_name);

}

};

return returnObj;

};

html测试文件：

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="/static/lib/jquery-1.11.0.min.js"></script>
<script src="/static/lib/util.js"></script>
<script src="/static/lib/swfobject.js"></script>
<script src="/static/vendor/crf-ajax/crf-ajax.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

<script>
$(function(){
var _crfajax=CRF_AJAX("/static/vendor/crf-ajax/crf-ajax.swf",function(){
_crfajax.ajax({
url:"http://192.168.4.12:8123/getMediaFileList.do"
,method:"get"
,data:{
name:"max min"
,gender:"no male no female"
}
,dataType:"json"
,success:function(serverdata){
console.log("服务端返回的是：");
console.log(serverdata);
}
,error:function(state_code,error){
console.log("state code "+state_code);
console.log("error "+error);
}
});
});
_crfajax.init();
window.crf=_crfajax;
});
</script>
</body>
</html>