Serialize and Deserialize data

The notion of presenting JSON or XML data directly to users isn’t ideal. To present the data in a more usable way you need to convert them from one form to another.

You can do this:

With serialization, the data is put into a format for transmission.
With deserialization, the transmitted data is converted into something that can be worked with, such as a custom object.

In addition an application can work with binary data by serializing them into a binary stream.

Sending data by using XMLHttpRequest

To send data, the send method must have data passed into it, and that data can be transmitted to the endpoint specified in the URL of the open method.

The following code sends the XML data to the server:

<body>
<button id="sendData">SEND DATA using XMLHttpRequest</button>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script type="text/javascript" >
    $("document").ready(function () {
        $("#btnSendXMLData").click(function () {
            try {
                var xmlData = "<Person firstname='John' lastName='Codew'/> ";
                var xReq = new XMLHttpRequest();
                //sending data to the server
                xReq.open("POST", "myXMLData.xml", false);
                xReq.response;
                xReq.send(xmlData);
            } catch (e) {
                alert(e.message);
            }
        });
    });
</script>
</body>

Serializing and deserializing JSON data

The JSON object is available for converting a JSON string to and from an object (serialize/deserialize).

There are two methods available:

JSON.stringify() to serialize data
JSON.parse() to deserialize data

The following code demonstrates this:

<body>
<button id="btnJSONPerson">JSON Serialization</button>
<button id="btnJSONDeserialize">JSON deserialization</button>
<div id="result"></div>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script>
    $("document").ready(function () {
        $("#btnJSONPerson").click(function () {
            var person = {
                FirstName: "John",
                HairColor: "Codew"
            };
            //DESERIALIZE DATA USING THE STRINGIFY METHOD
            var jsonPerson = JSON.stringify(person);
            $("#result").text(jsonPerson);
        });
        $("#btnJSONDeserialize").click(function () {
            var req = new XMLHttpRequest();
            req.open("GET", "MyJsonData.json", false);
            req.send(null);
            //DESERIALIZE OBJECT USING THE PARSE METHOD
            var jsonPerson = JSON.parse(req.responseText);
        });
    
    });
</script>
</body>

Serializing and deserializing binary data

You can retrieve binary data object and deserializing it into the webpage. The data also can serialized before being submitted to the server.

To serialize and deserialize binary data you need to:

use the GET method for retrieving binary data from the server and set the reponseType property to blob and pass it to URL.createObjectURL(); method
use the POST method for submitting binary data to the server and set the reponseType property to blob

The following code example serialize and desieralize binary data:

<body>
<div>
    <input type="file" id="upload" />
    <button id="btnGetBinaryData">Get Imgage</button>
    <button id="btnSubmitBinaryData">Send Image</button>
    <img id="result" src="" /> 
</div>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $("document").ready(function () {
        $("#btnGetBinaryData").click(function () {
            try {
                var xReq = new XMLHttpRequest();
                xReq.open("GET", "image.jpg", false);
                //DESERIALIZE BINARY DATA (IMAGE IN THIS CASE)
                xReq.responseType = 'blob'
                xReq.send(null);
                var blob = xReq.response;
                document.getElementById("result").src = URL.createObjectURL(blob);
            } catch (e) {
                alert(e.message);
            }
        });
        $("#btnSubmitBinaryData").click(function () {   
            $('#upload').submit(function () {
                try {
                    var xReq = new XMLHttpRequest();
                    xReq.open("POST", "saveImage.aspx", false);
                    //SERIALIZE BINARY DATA
                    xReq.responseType = 'blob'
                    xReq.send(data);
                } catch (e) {
                    alert(e.message);
                }
            });
    
        });
    });
</script>
</body>

Ads Right