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://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 ;
    }
 
    /*
        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 ;
    } ;
}