7.22.3 Create a JSON HTML Browser Client
The following HTML illustrates how to send and receive a JavaScript object using a browser client.
The JavaScript object needs to be created using the same field elements as the JSON Type.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<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 = "" ;
/*
Create MyOrder object
*/
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 ) ;
/*
Send MyOrder
*/
var session = new JSONSession ( "http://lansa01: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 ;
}
/*
Update form inputs with response object values
*/
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 ;
/*
Private functions
*/
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 ;
}
}
/*
Public functions
*/
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 ;
} ;
}