7.19.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 ;
    } ;
}