flash與資料庫 讀取資料庫數據

今天，天氣依舊很熱。整個房間像火爐一般熾熱。今天來寫寫這方面的筆記，做個實驗。看看如何運作，首先來講這方面需要準備一些資料。就是關於資料庫方面資料。因為手上資料很少，很多事情都是需要一步步探索。flash 不能直接和資料庫進行交互（除air 之外），故此我們需要找一種平台搭配一些協作開發。目前很多流行的方案是多種多樣，每一個家公司用的伺服器都有所不同。據一些同事介紹，

搭配平台如下（1）：java +flash +mysql 組合開發

（2）：c++ +flash+sql組合開發

（3）：php +flash+mysql 組合開發

還有FMS ，等等更多組合..........

flash 只是用於前端顯示數據和交互，大部分交互數據方面需要藉助其他語言幫助

目前而言mysql 已經可以滿足很多開發公司，除非有特別需求動用到oracle 甲骨文這樣的大型數據，但無論怎樣組合目的就是要實現到產品。

好，現在開始做實驗了。需要準備的材料是：java sdk tomcat ，mysql等一些工具。準備好之後，開始一步步摸索怎樣交互。

我的目的是讀取到資料庫的數據。

當中實驗當中遇到問題是（1） 怎樣利用讀取資料庫的資料？

（2） 怎樣返回數據給flash接收？

（3） 採用什麼方式格式來交互？

（4） 格式應該如何選擇？xml json 字元串？等

（5） 應該如何顯示數據？

接下來，嘗試實驗第一種方式，也是最簡單，最傻瓜的方式，我所知道的就是這樣水平，所以要將這個實驗帶入一個開始階段將不會摻雜更多完善的設計。出發的過程就需要盡量簡單化。（O(∩_∩)O哈哈~）

初步意向:

flash 發送數據---->服務端 -------> 資料庫

flash 接收數據<-----伺服器<--------資料庫

要進行這樣，我們需要採用flash.net 包下URLLoader 進行發送數據（而flex 就採用Http 組件或者其他遠程訪問）。準備好之後，我們擁有的條件已經可以進行一個簡單的發送了。

封裝一個發送數據的類。用於交互 發送

創建news表

手動設計表：設置兩個項 一個是id 另外一個 是title 這樣的數據項。如圖所示。

資料庫名稱為test ，表名為news 。

然後

手動為表添加一些數據入去。

測試資料庫是否成功和資料庫交互：

添加完資料庫後，在這裡會使用jsp 進行測試，而這種方式比較笨拙，而且效率不高，一般不會這樣使用，但是這樣做好處是為了省下時間做快速設計。而我們所在水平是如何，這些並不重要，關鍵是要適合我們，在方法當中尋找過程解決方案。這些才重要。技術水平因人而異

而其他更加優秀的做法，有一些人會嚴格使用框架技術，這樣操作和鏈接資料庫在效率提升不少。下面是已經鏈接到資料庫的測試。

[c-sharp] view plain copy

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>

<%

Connection con = null;

try{

Class.forName("com.mysql.jdbc.Driver");

String dbUrl = "jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8";

String dbUser = "root";

String dbPwd = "123";

String sql="select * from news";

con = DriverManager.getConnection(dbUrl,dbUser,dbPwd);

out.print("已連接。。。。。");

}

catch(Exception ex)

{

out.print("連接失敗！！<br>"+ex.toString());

}

%>

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %><%Connection con = null; try{Class.forName("com.mysql.jdbc.Driver"); String dbUrl = "jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8"; String dbUser = "root"; String dbPwd = "123"; String sql="select * from news";con = DriverManager.getConnection(dbUrl,dbUser,dbPwd); out.print("已連接。。。。。"); }catch(Exception ex) { out.print("連接失敗！！<br>"+ex.toString()); }%>

資料庫測試成功之後，我們需要的工作就是利用SQL 語句，查詢數據並輸出。jsp做法是

sql語句：String sql="select * from news";

創建一個Statement 對象，通過執行executeQuery返回。

Statement stmt=con.createStatement();

ResultSet rs=stmt.executeQuery(sql); //執行查詢

查詢的結果集，採用循環輸出來

while(rs.next())

{

msg+=rs.getString("title")+"##";

}

out.clear();

out.print("newList="+msg);

你會看到一系列的數據出現了

[c-sharp] view plain copy

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>

<%

Connection con = null;

try{

Class.forName("com.mysql.jdbc.Driver");

String dbUrl = "jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8";

String dbUser = "root";

String dbPwd = "123";

String sql="select * from news";

con = DriverManager.getConnection(dbUrl,dbUser,dbPwd);

out.print("已連接。。。。。");

Statement stmt=con.createStatement();

ResultSet rs=stmt.executeQuery(sql); //執行查詢

String msg="";

while(rs.next())

{

msg+=rs.getString("title")+"##";

}

out.clear();

out.print("newList="+msg);

stmt.close();

con.close();

}

catch(Exception ex)

{

out.print("連接失敗！！<br>"+ex.toString());

}

%>

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %><%Connection con = null; try{Class.forName("com.mysql.jdbc.Driver"); String dbUrl = "jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8"; String dbUser = "root"; String dbPwd = "123"; String sql="select * from news";con = DriverManager.getConnection(dbUrl,dbUser,dbPwd); out.print("已連接。。。。。"); Statement stmt=con.createStatement(); ResultSet rs=stmt.executeQuery(sql); //執行查詢String msg="";while(rs.next()){ msg+=rs.getString("title")+"##";}out.clear();out.print("newList="+msg);stmt.close(); con.close();}catch(Exception ex) { out.print("連接失敗！！<br>"+ex.toString()); }%>

輸出數據：

這裡是由於在資料庫預先插入去了。（方式依舊是人工和手動設計。呵呵）

flash接收數據

接下來，我們就需要解決發送的問題？問題是 怎樣發送數據到flash客戶端？

發送的 方式是多種多樣，當中可以是名稱/值 的方式發送，也可以按xml ，json 還有其他格式發送。

這裡是從資料庫接收到的數據。並顯示出來的

按實驗來進行一步步來製作。

封裝一個類，進行發送數據

[c-sharp] view plain copy

//用於與網頁通信的類

package org.summerTree.net

{

import flash.net.URLLoader;

import flash.net.URLRequest;

import flash.events.*;

import flash.net.URLVariables;

import flash.net.URLLoaderDataFormat;

import flash.net.*;

public class HttpConnection extends EventDispatcher

{

public static const VARIABLES:String=URLLoaderDataFormat.VARIABLES;

public static const BINARY:String=URLLoaderDataFormat.BINARY;

public static const TEXT:String=URLLoaderDataFormat.TEXT;

public function HttpConnection()

{

}

/*

*para 設置發送數據的

*http_url 設置發送數據的方式連接地址

*type post and get

*format 格式

*/

public function sendMessage(para:Object,http_url:String,type:String="post",format:String="VARIABLES"):void

{

var request:URLRequest=new URLRequest();

request.data=para;

request.url=http_url;

switch (type)

{

case "post" :

request.method=URLRequestMethod.POST;//發送的方式

break;

case "get" :

request.method=URLRequestMethod.GET;//發送的方式

break;

}

//發送數據

var loader:URLLoader=new URLLoader();

switch (format)

{

case "VARIABLES" :

loader.dataFormat=URLLoaderDataFormat.VARIABLES;//發送數據的格式

break;

case "BIN" :

loader.dataFormat=URLLoaderDataFormat.BINARY;//發送二進位數據的格式

break;

case "TEXT" :

loader.dataFormat=URLLoaderDataFormat.TEXT;//發送文本數據的格式

break;

}

loader.addEventListener(Event.COMPLETE,completeHandler);

loader.addEventListener(IOErrorEvent.IO_ERROR ,IoHandler);

try

{

loader.load(request);

}

catch (e:Error)

{

throw new Error(e);

}

}

private function completeHandler(e:Event):void

{

//處理返回的結果，如果插入資料庫成功那麼就可以

var evt:ConnectionEvent=new ConnectionEvent(ConnectionEvent.COMPLETE);

evt.data=URLLoader(e.target);

this.dispatchEvent(evt);

}

private function IoHandler(e:Event):void

{

this.dispatchEvent(new ConnectionEvent(ConnectionEvent.WRONG));

}

}

}

//用於與網頁通信的類package org.summerTree.net{ import flash.net.URLLoader; import flash.net.URLRequest; import flash.events.*; import flash.net.URLVariables; import flash.net.URLLoaderDataFormat; import flash.net.*; public class HttpConnection extends EventDispatcher { public static const VARIABLES:String=URLLoaderDataFormat.VARIABLES; public static const BINARY:String=URLLoaderDataFormat.BINARY; public static const TEXT:String=URLLoaderDataFormat.TEXT; public function HttpConnection() { } /* *para 設置發送數據的 *http_url 設置發送數據的方式連接地址 *type post and get *format 格式 */ public function sendMessage(para:Object,http_url:String,type:String="post",format:String="VARIABLES"):void { var request:URLRequest=new URLRequest(); request.data=para; request.url=http_url; switch (type) { case "post" : request.method=URLRequestMethod.POST;//發送的方式 break; case "get" : request.method=URLRequestMethod.GET;//發送的方式 break; } //發送數據 var loader:URLLoader=new URLLoader(); switch (format) { case "VARIABLES" : loader.dataFormat=URLLoaderDataFormat.VARIABLES;//發送數據的格式 break; case "BIN" : loader.dataFormat=URLLoaderDataFormat.BINARY;//發送二進位數據的格式 break; case "TEXT" : loader.dataFormat=URLLoaderDataFormat.TEXT;//發送文本數據的格式 break; } loader.addEventListener(Event.COMPLETE,completeHandler); loader.addEventListener(IOErrorEvent.IO_ERROR ,IoHandler); try { loader.load(request); } catch (e:Error) { throw new Error(e); } } private function completeHandler(e:Event):void { //處理返回的結果，如果插入資料庫成功那麼就可以 var evt:ConnectionEvent=new ConnectionEvent(ConnectionEvent.COMPLETE); evt.data=URLLoader(e.target); this.dispatchEvent(evt); } private function IoHandler(e:Event):void { this.dispatchEvent(new ConnectionEvent(ConnectionEvent.WRONG)); } }}

其次：

[c-sharp] view plain copy

//用於通信連接的事件類

package org.summerTree.net

{

import flash.events.Event;

import flash.net.*;

public class ConnectionEvent extends Event

{

public static const COMPLETE:String="complete";

public var data:URLLoader;

public static const WRONG:String="wrong";

public function ConnectionEvent(type:String,bubbles:Boolean=false,cancelable:Boolean=false)

{

super(type,false,false);

}

override public function clone():Event

{

return new ConnectionEvent(type,false,false);

}

}

}

//用於通信連接的事件類package org.summerTree.net{ import flash.events.Event; import flash.net.*; public class ConnectionEvent extends Event { public static const COMPLETE:String="complete"; public var data:URLLoader; public static const WRONG:String="wrong"; public function ConnectionEvent(type:String,bubbles:Boolean=false,cancelable:Boolean=false) { super(type,false,false); } override public function clone():Event { return new ConnectionEvent(type,false,false); } }}

[c-sharp] view plain copy

package

{

import flash.display.Sprite;

import flash.events.*;

import flash.net.*;

import org.summerTree.net.HttpConnection;

import org.summerTree.net.ConnectionEvent;

public class Main extends Sprite

{

private var sql:HttpConnection;

private var url:String=ManagerURL.Address()+"index.jsp";

public function Main()

{

init();

}

private function init():void

{

sql=new HttpConnection();

var obj:URLVariables=new URLVariables();

sql.sendMessage(obj,url);

sql.addEventListener(ConnectionEvent.COMPLETE,onComplete);

}

private function onComplete(event:ConnectionEvent):void

{

var sqldata:*=event.data;

var msg:String=sqldata.data.newList.toString();

var list:Array=msg.split("##");

var len:int=list.length;

for(var i:int=0;i<len;i++)

{

trace(list[i]+"/r");

var news:NewList=new NewList();

addChild(news);

news.Title.text=list[i];

news.x=100;

news.y=i*news.height;

}

}

}

}

package { import flash.display.Sprite; import flash.events.*; import flash.net.*; import org.summerTree.net.HttpConnection; import org.summerTree.net.ConnectionEvent; public class Main extends Sprite { private var sql:HttpConnection; private var url:String=ManagerURL.Address()+"index.jsp"; public function Main() { init(); } private function init():void { sql=new HttpConnection(); var obj:URLVariables=new URLVariables(); sql.sendMessage(obj,url); sql.addEventListener(ConnectionEvent.COMPLETE,onComplete); } private function onComplete(event:ConnectionEvent):void { var sqldata:*=event.data; var msg:String=sqldata.data.newList.toString(); var list:Array=msg.split("##"); var len:int=list.length; for(var i:int=0;i<len;i++) { trace(list[i]+"/r"); var news:NewList=new NewList(); addChild(news); news.Title.text=list[i]; news.x=100; news.y=i*news.height; } } }}

[c-sharp] view plain copy

package

{

public final class ManagerURL

{

public function ManagerURL()

{

}

public static function Address():String

{

return "http://localhost:8080/sql/"

}

}

}

package { public final class ManagerURL { public function ManagerURL() { } public static function Address():String { return "http://localhost:8080/sql/" } }}

好乏味的東西已經準備完畢。到了解析的時候了。

在flash 裡面會使用URLLoader進行發送數據，我們選擇發送方式可以是post 和get 。接收數據 可以是二進位，文本，或者名稱/值的方式進行。

jsp 發送的數據的過程，其實就是輸出的過程當中，flash接收的是jsp輸出的數據，out.print裡面輸出頁面的數據。

接收的數據的時候，可以採用上面三種方式，而這些都是看個人需要而定。

在jsp ，使用這種名稱/方式進行對於當flash 將設定的數據格式接收的時候 URLLoaderDataFormat.VARIABLES這種情況的時候。 在as3.0 的時候，設置為以下方式方式 newList是名稱，可以隨意的

out.print("newList="+msg);

這樣flash 發送過來的是以字元串形式發送。在flash 將數據載入完畢之後，會通知flash 處理這些數據

var msg:String=sqldata.data.newList.toString(); 接收數據

採用URLLoader類來進行讀取這個是data 已經填充好的數據裡面。讀取他們所需要的內容了。為了顯示他們數據，我們準備動態文本

用於顯示它的數據。

創建一個元件，在元件裡面添加一個動態文本。如圖，並進行庫鏈接改名稱為NewList 意思為新聞列表

[c-sharp] view plain copy

for(var i:int=0;i<len;i++)

{

trace(list[i]+"/r");

var news:NewList=new NewList();

addChild(news);

news.Title.text=list[i];

news.x=100;

news.y=i*news.height;

}

for(var i:int=0;i<len;i++) { trace(list[i]+"/r"); var news:NewList=new NewList(); addChild(news); news.Title.text=list[i]; news.x=100; news.y=i*news.height; }

創建新聞條數，並顯示出數據來。循環讀取出來。

到目前為此，顯示數據實驗已經初步完成了。

後面的工具就是選擇其他更加有效設計了和擴展。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！