7.20.3 JSONHTML ブラウザ・クライアントの作成

以下の HTML は、ブラウザ・クライアントを使用して JavaScript オブジェクトを送受信する方法を示しています。

JSONタイプと同じフィールド・エレメントを使用してJavaScriptオブジェクトを作成する必要があります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>JSON AJAX Sample</title>

＜script type="text/javascript" src="json2.js"＞＜/script＞
＜script type="text/javascript" src="jsonajax.js"＞＜/script＞

＜script type="text/javascript"＞

function sendOrder ()
{
/*
Get some input and reset form inputs
*/

var myInput = document.getElementById ( "ID_1" ).value ;

document.getElementById ( "ID_1" ).value = "" ;
document.getElementById ( "ID_2" ).value = "" ;
document.getElementById ( "ID_3" ).value = "" ;

/*
オブジェクト MyOrder の作成
*/

var myOrder = new Object () ;

myOrder.fieldString = myInput ;
myOrder.fieldBoolean = true ;
myOrder.fieldDouble = 24.56 ;
myOrder.fieldInt = 987 ;
myOrder.fieldLong = 123456 ;

var myOrderItem1 = new Object () ;
myOrderItem1.itemCode = 231 ;
myOrderItem1.itemQuantity = 25 ;

var myOrderItemPrice11 = new Object () ;
myOrderItemPrice11.priceAmount = 10.67 ;
myOrderItemPrice11.priceType = "PT_A" ;

var myOrderItemPrice12 = new Object () ;
myOrderItemPrice12.priceAmount = 10.67 ;
myOrderItemPrice12.priceType = "PT_A" ;

myOrderItem1.itemPrices = new Array ( myOrderItemPrice11, myOrderItemPrice12 ) ;

myOrder.fieldItem = myOrderItem1 ;

myOrder.fieldItems = new Array ( myOrderItem1, myOrderItem1 ) ;

/*
MyOrder の送信
*/

var session = new JSONSession ( "http://server1:1099/cgi-bin/jsmproxy?json" ) ;

// var responseObject = session.send () ;
// var responseObject = session.receive () ;

var responseObject = session.send ( myOrder ) ;

if ( responseObject == null )
{
alert ( session.getStatus () ) ;

alert ( session.getResponseText () ) ;

return ;
}

/*
応答オブジェクトの値でフォーム入力を更新
*/

document.getElementById ( "ID_1" ).value = responseObject.fieldString ;
document.getElementById ( "ID_2" ).value = responseObject.fieldDouble ;
document.getElementById ( "ID_3" ).value = responseObject.fieldInt ;
}

＜/script＞

</head>

<body>

<form>

<input type="text" size="15" id="ID_1"><p/>
<input type="text" size="15" id="ID_2"><p/>
<input type="text" size="15" id="ID_3"><p/>
<input type="button" value="Send Order" onClick="sendOrder()">

</form>

</body>

</html>

jsonajax.js

/*jslint browser: true, undef: true, nomen: true, eqeqeq: true, strict: true */

/*global window, ActiveXObject */

"use strict";

function JSONSession ( endpoint )
{
var m_xhr = null ;
var m_endpoint = endpoint ;

/*
プライベートファンクション
*/

function createXMLHttpRequest ()
{
if ( m_xhr === null )
{
if ( window.XMLHttpRequest )
{
/*
IE8, IE7, Firefox, Chrome, Safari, Opera
*/

m_xhr = new XMLHttpRequest () ;

return true ;
}

if ( window.ActiveXObject )
{
/*
IE6
*/

m_xhr = new ActiveXObject ( "Msxml2.XMLHTTP" ) ;

return true ;
}

return false ;
}

return true ;
}

function doGET ()
{
try
{
m_xhr.open ( "GET", m_endpoint, false ) ;

m_xhr.setRequestHeader ( "Connection", "close" ) ;

m_xhr.send ( null ) ;

if ( m_xhr.readyState !== 4 )
{
return false ;
}

if ( m_xhr.status === 200 )
{
return true ;
}

return false ;
}
catch ( e )
{
alert ( "doGET: " + e ) ;

return false ;
}
}

function doPOST ( content )
{
try
{
m_xhr.open ( "POST", m_endpoint, false ) ;

m_xhr.setRequestHeader ( "Content-Type", "application/json" ) ;
m_xhr.setRequestHeader ( "Connection", "close" ) ;

m_xhr.send ( content ) ;

if ( m_xhr.readyState !== 4 )
{
return false ;
}

if ( m_xhr.status === 200 )
{
return true ;
}

return false ;
}
catch ( e )
{
alert ( "doPOST: " + e ) ;

return false ;
}
}

function isJSON ()
{
var value = m_xhr.getResponseHeader ( "Content-Type" ) ;

if ( value === null )
{
return false ;
}

/*
application/json
*/

if ( value.length < 16 )
{
return false ;
}

value = value.substring ( 0, 16 ).toLowerCase () ;

if ( value === "application/json" )
{
return true ;
}

return false ;
}

function parseJSON ()
{
try
{
return JSON.parse ( m_xhr.responseText ) ;
}
catch ( e )
{
var date = new Date () ;

var name = "error" + date.getTime () ;

var error = window.open ( "",
name,
"width=800,height=600,menubar=0,toolbar=0,status=0,scrollbars=1,resizable=1" ) ;

error.document.title = "JSON parse error" ;

var element = error.document.createElement ( "pre" ) ;

element.appendChild ( error.document.createTextNode ( m_xhr.responseText ) ) ;

error.document.body.appendChild ( element ) ;

return null ;
}
}

/*
パブリックファンクション
*/

this.send = function ( objectSend )
{
if ( !createXMLHttpRequest () )
{
alert ( "Cannot create XMLHttpRequest object" ) ;

return null ;
}

var content = null ;

if ( objectSend === undefined || objectSend === null )
{
/*
If the send function is called with no parameters, then objectSend is undefined
*/

content = "" ;
}
else
{
content = JSON.stringify ( objectSend ) ;
}

if ( !doPOST ( content ) )
{
return null ;
}

if ( isJSON () )
{
return parseJSON () ;
}

return null ;
} ;

this.receive = function ()
{
if ( !createXMLHttpRequest () )
{
alert ( "Cannot create XMLHttpRequest object" ) ;

return null ;
}

if ( !doGET () )
{
return null ;
}

if ( isJSON () )
{
return parseJSON () ;
}

return null ;
} ;

this.getStatus = function ()
{
if ( m_xhr === null )
{
return 0 ;
}

return m_xhr.status ;
} ;

this.getResponseText = function ()
{
if ( m_xhr === null )
{
return null ;
}

return m_xhr.responseText ;
} ;

this.getXMLHttpRequest = function ()
{
return m_xhr ;
} ;
}

Content

Space Tools

7.20.3 JSONHTML ブラウザ・クライアントの作成