总结下Flash和外部的交互

by spud

好像是大三下的时候写过一篇利用amfphp和后端程序交互的文章，那不过是篇经验总结而已，个中原理依然不明白，而现在我也越来越不喜欢这种需要依靠第三方工具的笨重方式，只有简洁的东西在能永恒啊。于是这周的空闲时间里不务正业的拿起这块东西又研究了一下。

不同媒介间的通信，最基本的做法，说白了就是互相通过字符串来传递信息。先来看flash和php之间的消息传递，其实和后端通信，说白了就是发http请求过去，拿到运算结果，再做分析处理罢了，ajax是如此，flash也一样， 只是用来发请求的对象略有不同而已，做法如下。

ajax:

  1. var req;
  2. req = new XMLHttpRequest();
  3. req.open('POST','remote.php');
  4. req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  5. req.onreadystatechange = handler;
  6. req.send('say=hey man');
  7.  
  8. function handler() {
  9.  if(this.readyState == 4 && this.status == 200) {
  10.   console.log(this.responseText);
  11.  }
  12. }

flash:

  1. var loader,req,data；
  2. var loader,req,data;
  3. loader = new URLLoader(); // flash.net.URLLoader
  4. req = new URLRequest(); // flash.net.URLRequest
  5. data = new URLVariables(); // flash.net.URLVariables;
  6.  
  7. data.say = "hey man";  
  8. req.url = 'remote.php';
  9. req.method = URLRequestMethod.POST; // flash.net.URLRequestMethod  
  10. req.data = data;
  11. loader.addEventListener(Event.COMPLETE,handler);
  12. loader.load(req);
  13.  
  14. function handler(e:Event):void{
  15.  trace(loader.data);//use a certain object to parse it as you like
  16. }

得到的response差不多都是这样的

  1. POST http://spud.in/demo/flash/remote/remote.php HTTP/1.1
  2. Host: spud.in
  3. Connection: keep-alive
  4. Content-Length: 13
  5. Origin: http://spud.in
  6. User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/14.0.835.8 Safari/535.1
  7.  
  8. content-type: application/x-www-form-urlencoded
  9. Accept: */*
  10. Referer: http://spud.in/demo/flash/remote/flash.swf
  11. Accept-Encoding: gzip,deflate,sdch
  12. Accept-Language: zh-CN,zh;q=0.8
  13. Accept-Charset: UTF-8,*;q=0.5
  14.  
  15. say=hey%20man

这部分就这点花头了，这些对象还有更多变的用法，但最基本的就这些了。下面来说下flash和页面上的js之间是如何交互的。

自打Flash 8开始，as中引入了ExternalInterface 这个对象（flash.external.ExternalInterface）。

flash -> js:

ExternalInterface.call(funcionName:String, … arguments):*

可以调用到window对象下的functionName方法。

js -> flash:

ExternalInterface.addCallback(functionName:String, closure:Function):void

这个方法会在flash被载入后，将特定的方法丢到承载他的<object>节点上。

有的聪明的同学就好奇了，js里不同类型的参数是怎么和as中不同类型的参数对上号的嘞？

原来flash被载入后会丢一堆方法到window上。

他们会把js方法名，和参数按特定的方式解析成很长一串xml字符串。再用flashobj.CallFunction(theXmlStr)将其传递给flash。更多细节可以参考tencent flash team的这篇文章

这次调用后，flash中的方法的返回值也按照正确的类型会反应到js中，若flash方法的返回类型为js中没有的复杂类型，则会抛出 “Error calling method on NPObject” 错误。

以上讲的是方法间的互相调用，此外，传递参数这件事情还可以通过flashvars来做，具体见此，不高兴写了嘿嘿。

Demos:

with backend (ajax|flash|source)

with js (demo|source)