WDDX の使用

検索
ColdFusion

ColdFusion

アプリを開く

ColdFusion には、一般的な用途で WDDX を作成または変換するためのさまざまなツールが用意されています。

cfwddx タグの使用

このタグでは、次の変換が行えます。

変換元

変換後

CFML

WDDX

CFML

JavaScript

WDDX

CFML

WDDX

JavaScript

CFML クエリーオブジェクトを WDDX に変換する cfwddx タグは、一般的に次のようになります。

<cfwddx action="cfml2wddx" input="#MyQueryObject#" output="WddxTextVariable">

この例の MyQueryObject は、クエリーオブジェクト変数の名前です。WddxTextVariable は、変換された WDDX XML を保管する変数の名前です。

注意：{{cfwddx}} タグの詳細については、『CFML リファレンス』を参照してください。

WDDX データの検証

The  cfwddx タグには、WDDX を CFML または JavaScript に変換するときに使用できる Validate 属性があります。この属性を True に設定すると、WDDX データのシリアル化が解除される前に、WDDX DTD を使用して WDDX データが検証されます。WDDX が無効な場合は、エラーが発生します。デフォルトでは、WDDX データを ColdFusion または JavaScript データに変換するときに検証は行われません。
IsWDDX 関数は、変数が有効な WDDX データパケットである場合に True を返し、それ以外の場合は False を返します。この関数を使用すると、WDDX パケットを別の形式に変換する前に検証できます。例えば、 cfwddx の validate 属性の代わりに使用すれば、エラー処理ロジックではなく条件ロジックで無効な WDDX を処理できます。また、この関数を使用して、JavaScript でシリアル化を解除するデータをブラウザであらかじめ検証することもできます。

JavaScript オブジェクトの使用

ColdFusion には、JavaScript でデータを WDDX に変換するときに使用できる 2 つの JavaScript オブジェクトがあります。それは、WddxSerializer オブジェクト と WddxRecordset オブジェクトです。これらは webroot/cfide/scripts/wddx.js ファイルで定義されています。
『CFML リファレンス』では、これらのオブジェクトとそのメソッドについて詳細に説明しています。「ブラウザからサーバーへのデータ転送」の例では、これらのオブジェクトを使用して JavaScript を WDDX にシリアル化する方法を示しています。

CFML データから JavaScript オブジェクトへの変換

次の例では、サーバー上の ColdFusion ページで取得した cfquery レコードセットを、ブラウザで処理する JavaScript オブジェクトに変換します。
このアプリケーションは、次の 4 つのセクションから構成されています。

  • データクエリーの実行
  • WDDX JavaScript ユーティリティクラスのインクルード
  • 変換関数の呼び出し
  • HTML でのオブジェクトデータの記述
    次の例では、ColdFusion に付属する cfdocexamples データソースを使用します。

<cfquery name = "q" datasource ="cfdocexamples">
SELECT Message_Id, Thread_id, Username, Posted
FROM messages
</cfquery>

<!--- Load the wddx.js file, which includes the dump function --->
<script type="text/javascript" src="/CFIDE/scripts/wddx.js"></script>

<script>
// Use WDDX to move from CFML data to JavaScript
<cfwddx action="cfml2js" input="#q#" topLevelVariable="qj">

// Dump the recordset to show that all the data has reached
// the client successfully.
document.write(qj.dump(true));
</script>

 

注意： cfwddx Action="cfml2js" の動作を確認するには、このコードを Web ルートディレクトリ内に（例えば、 wwwroot / myapps / wddxjavascript . cfm として）保存し、ブラウザでこのページを実行して、ブラウザの「ソースの表示」コマンドを選択します。

ブラウザからサーバーへのデータ転送

次の例では、フォームフィールドデータをシリアル化し、それをサーバーに転送し、シリアル化を解除して、そのデータを表示します。簡単にするために、データ量は少なくしています。複雑な JavaScript データコレクションを生成するアプリケーションでは、この基本的な方法を効果的に応用できます。この例では、データのシリアル化に WddxSerializer JavaScript オブジェクトを、データの非シリアル化に cfwddx タグを使用しています。

この例の実行
  1. このファイルを Web ルートディレクトリの下、例えば wwwroot/myapps/ wddxserializedeserialze .cfm に保存します。
  2. ブラウザに http://localhost/myapps/wddxserializedeserialze.cfm と入力します。
  3. フォームフィールドに氏名を入力します。
  4. 「次へ」をクリックします。入力した氏名は、[今までに追加された名前] ボックスに表示されます。
  5. 複数の名前を追加するには、手順 3 ～ 4 を繰り返します。
  6. 「シリアル化」をクリックし、データをシリアル化します。WDDX パケットが生成され、[WDDX パケットの表示] ボックスに表示されます。この手順はテスト専用で、実際のアプリケーションには適していません。実際のアプリケーションでは、シリアル化を自動的に行うようにします。

  7. 「送信」をクリックしてデータを送信します。WDDX パケットがサーバーサイドの処理コードに転送され、WDDX パケットのシリアル化が解除され、その情報が表示されます。

    <script type="text/javascript" src="/CFIDE/scripts/wddx.js"></script>

    <!--- Data binding code --->
    <script>

    // Generic serialization to a form field
    function serializeData(data, formField) {
    wddxSerializer = new WddxSerializer();
    wddxPacket = wddxSerializer.serialize(data);
    if (wddxPacket != null) {
    formField.value = wddxPacket;
    }
    else {
    alert("Couldn't serialize data");
    }
    }
    // Person info recordset with columns firstName and lastName
    // Make sure the case of field names is preserved
    var personInfo = new WddxRecordset(new Array("firstName", "lastName"), true);

    // Add next record to end of personInfo recordset
    function doNext() {
    // Extract data
    var firstName = document.personForm.firstName.value;
    var lastName = document.personForm.lastName.value;

    // Add names to recordset
    nRows = personInfo.getRowCount();
    personInfo.firstName[nRows] = firstName;
    personInfo.lastName[nRows] = lastName;

    // Clear input fields
    document.personForm.firstName.value = "";
    document.personForm.lastName.value = "";

    // Show added names on list
    // This gets a little tricky because of browser differences
    var newName = firstName + " " + lastName;
    if (navigator.appVersion.indexOf("MSIE") == -1) {
    document.personForm.names[length] =
    new Option(newName, "", false, false);
    }
    else {
    // IE version
    var entry = document.createElement("OPTION");
    entry.text = newName;
    document.personForm.names.add(entry);
    }
    }
    </script>

    <!--- Data collection form --->
    <form action="#cgi.script_name#" method="Post" name="personForm">

    <!--- Input fields --->
    Personal information<br>
    First name: <input type=text name=firstName><br>
    Last name: <input type=text name=lastName><br>
    <br>

    <!--- Navigation & submission bar --->
    <input type="button" value="Next" onclick="doNext()">
    <input type="button" value="Serialize"
    onclick="serializeData(personInfo, document.personForm.wddxPacket)">
    <input type="submit" value="Submit">
    <br><br>
    Names added so far:<br>
    <select name="names" size="5">
    </select>
    <br>

    <!--- The WDDX packet is stored here.--->
    <!--- In a real application this text area would be a hidden
    input field. --->
    <br>
    WDDX packet display:<br>
    <textarea name="wddxPacket" rows="10" cols="80" wrap="Virtual">
    </textarea>

    </form>


    <!--- Server-side processing --->
    <hr>
    <b>Server-side processing</b><br>
    <br>
    <cfif isdefined("form.wddxPacket")>
    <cfif form.wddxPacket neq "">

    <!--- Deserialize the WDDX data --->
    <cfwddx action="wddx2cfml" input=#form.wddxPacket#
    output="personInfo">

    <!--- Display the query --->
    The submitted personal information is:<br>
    <cfoutput query=personInfo>
    Person #CurrentRow#: #firstName# #lastName#<br>
    </cfoutput>
    <cfelse>
    The client did not send a well-formed WDDX data packet!
    </cfif>
    <cfelse>
    No WDDX data to process at this time.
    </cfif>

文字列への複合データの格納

次に示す簡単な例では、WDDX を使用して、複合データ（配列が保持されているデータ構造体）をクライアント変数に文字列として保存します。シリアル化の前とシリアル化解除の後には、cfdump タグを使用して構造体の内容を表示しています。cfoutput タグ内では、HTMLEditFormat 関数を使用してクライアント変数の内容を表示しています。HTMLEditFormat 関数は、ブラウザが変数内の XML タグを解釈しないようにするために必要です。

<cfapplication name="relatives" clientmanagement="Yes">

<!--- Build a complex data structure --->
<cfscript>
relatives = structNew();
relatives.father = "Bob";
relatives.mother = "Mary";
relatives.sisters = arrayNew(1);
arrayAppend(relatives.sisters, "Joan");
relatives.brothers = arrayNew(1);
arrayAppend(relatives.brothers, "Tom");
arrayAppend(relatives.brothers, "Jesse");
</cfscript>

A dump of the original relatives structure:<br>
<br>
<cfdump var="#relatives#"><br>
<br>

<!--- Convert data structure to string form and save it in the client scope --->
<cfwddx action="cfml2wddx" input="#relatives#" output="Client.wddxRelatives">

The contents of the Client.wddxRelatives variable:<br>
<cfoutput>#HtmlEditFormat(Client.wddxRelatives)#</cfoutput><br>

<!--- Now read the data from client scope into a structure --->
<cfwddx action="wddx2cfml" input="#Client.wddxRelatives#" output="sameRelatives">
<br>
A dump of the sameRelatives structure generated from client.wddxRelatives<br>
<cfdump var="#sameRelatives#">

ヘルプをすばやく簡単に入手

新規ユーザーの場合

クイックリンク

すべてのプランを表示 プランを管理
クイックリンクを表示する
クイックリンクを非表示にする

リーガルノーティス    |    プライバシーポリシー