Paddy's Weblog: RESTful client in JavaScript

In the line of my posts regarding consumption of JSON RESTful services in different technologies (JavaFX, Java), I wrote a small client in JavaScript.
As in my previous posts, I use the RESTful service described in RESTful service with JAX-RS (and JPA 2 for the access to the data.

Write a Restful client in JavaScript is relatively easy.
First you have to use Ajax to call the Restful service

                var req = null;
                        
                if (begining.length==0){
                    document.getElementById("result").innerHTML="";
                    return;
                }
                         
                if (window.XMLHttpRequest){
                    req =new XMLHttpRequest();
                }
                else {
                    req = new ActiveXObject("Microsoft.XMLHTTP");
                }
                  
                // var url="http://localhost:8080/RESTfulServices/rs/ArtisteNameBeginningBy/" + begining;
                var url="http://192.168.1.17:8080/RESTfulServices/rs/ArtisteNameBeginningBy/" + begining;
                        
                req.onreadystatechange = function () {
                        
                    if (req.readyState == 4 && req.status == 200) {

                        // do something with the results

                    } else {
                        // wait for the call to complete
                    }
                }
                req.open("GET",url,true);
                req.send(null);
            }

Then, because JSON is a subset of the object literal notation of JavaScript, you only have to use the eval() function to convert a JSON text to a JavaScript object.

var ret = eval ('('+req.responseText+')');

And finally, do something with the result.
In my case, the writeResult() function is used to dynamically display the result in a html table.

full source code of the example

restfulClient.html

<htlm>
    <head>
        <script type="text/javascript">
                
            function getArtisteNameBeginningBy(begining){
                        
                var req = null;
                        
                if (begining.length==0){
                    document.getElementById("result").innerHTML="";
                    return;
                }
                         
                if (window.XMLHttpRequest){
                    req =new XMLHttpRequest();
                }
                else {
                    req = new ActiveXObject("Microsoft.XMLHTTP");
                }
                  
                // var url="http://localhost:8080/RESTfulServices/rs/ArtisteNameBeginningBy/" + begining;
                var url="http://192.168.1.17:8080/RESTfulServices/rs/ArtisteNameBeginningBy/" + begining;
                        
                req.onreadystatechange = function () {
                        
                    if (req.readyState == 4 && req.status == 200) {

                        var ret = eval ('('+req.responseText+')');
                        
                        writeResult(ret);

                    } else {
                        // wait for the call to complete
                    }
                }
                req.open("GET",url,true);
                req.send(null);
            }

            function writeResult(ret){

                var tableRes = document.getElementById("tableRes");
                if (tableRes!=null){
                    document.getElementById("result").removeChild(tableRes);
                }

                if (ret!=null){

                    var table = document.createElement("table");
                    table.border = 1;
                    table.id = "tableRes";

                    for (i=0;i<ret.music.length;i++){

                        var id = ret.music[i].id;
                        var artisteName = ret.music[i].artisteName;
                        var albumTitle = ret.music[i].albumTitle;

                        var row = table.insertRow(i);

                        var cell1 = row.insertCell(0);
                        var valueCell1 = document.createTextNode(id);
                        cell1.appendChild(valueCell1);

                        var cell2 = row.insertCell(1);
                        var valueCell2 = document.createTextNode(artisteName);
                        cell2.appendChild(valueCell2);

                        var cell3 = row.insertCell(2);
                        var valueCell3 = document.createTextNode(albumTitle);
                        cell3.appendChild(valueCell3);


                    }

                    document.getElementById("result").appendChild(table);
                }

            }
        </script> 

    </head>

    <body>
        <input type="text" id="searchTextBox" onkeyup="getArtisteNameBeginningBy(this.value)"></input>
        <p>
            <span id="result"></span>
        <p>
    </boby>
</html>

Get the NetBeans project

Paddy's Weblog

jeudi 11 novembre 2010

RESTful client in JavaScript

2 commentaires: