7.4.  Use Ajax to access a JAX-RS resource.

Because RESTful web services deployed are exposed using the standard HTTP protocol and methods, they can be easily accessed from browsers. In addition to using simple GET and POST requests directly from browsers, developers can leverage the capabilities of the JavaScript technology XMLHttpRequest object that most modern browsers support. This is the same object used for building AJAX user interfaces (UIs):


<html>
<head>
<title>AJAX RESTFul example</title>

<script type="text/javascript" language="javascript">
    var http_request = false;

    function makeAJAXRequest(method, url, parameters) {
        http_request = false;

        if (window.XMLHttpRequest) { // Mozilla, Safari
             http_request = new XMLHttpRequest();
             if (http_request.overrideMimeType) {
                // set type accordingly to anticipated content type
                http_request.overrideMimeType('text/xml');

             }
        } else if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }
        if (!http_request) {
            alert('Cannot create XMLHTTP instance');
            return false;
        }

        http_request.onreadystatechange = alertContents;

        if(method=='GET') {
            http_request.open(method, url+parameters, true);
            http_request.setRequestHeader("Content-type", "text/xml");
            http_request.setRequestHeader("Content-length", parameters.length);
            http_request.setRequestHeader("Connection", "close");
            http_request.send(null);
        }

	    if(method=='POST') {
            http_request.open(method, url, true);
            http_request.setRequestHeader("Content-type", "text/xml");
            http_request.setRequestHeader("Content-length", parameters.length);
            http_request.setRequestHeader("Connection", "close");
            http_request.send(parameters);
        }

        if(method=='PUT') {
            http_request.open(method, url, true);
            http_request.setRequestHeader("Content-type", "text/xml");
            http_request.setRequestHeader("Content-length", parameters.length);
            http_request.setRequestHeader("Connection", "close");

            http_request.send(parameters);
        }

        if(method=='DELETE'){
            http_request.open(method, url+parameters, true);
            http_request.setRequestHeader("Content-type", "text/xml");
            http_request.setRequestHeader("Content-length", parameters.length);
            http_request.setRequestHeader("Connection", "close");
            http_request.send(null);
        }
    } // function makeAJAXRequest

    function alertContents() {
        if (http_request.readyState == 4) {
            if (http_request.status == 200 || http_request.status==201) {

                alert('Response received from server:\n'+http_request.responseText);
                result = http_request.responseText;

			    // Turn < and > into &lt; and &gt; (case matters)
		        result = result.replace(/\<([^!])/g, '&lt;$1');
		        result = result.replace(/([^-])\>/g, '$1&gt;');

                document.getElementById('serverresponse').innerHTML = result;
            } else {
                alert('There was a problem with the request.' +http_request.responseText +' '+http_request.status);
			    document.getElementById('serverresponse').innerHTML = http_request.responseText;
            }
        }
    } // alertContents

    function postTheForm() {
        var postStr = document.myform.xmldata.value ;
        alert('Sending XML to server:\n' + postStr);
        makeAJAXRequest('POST', document.myform.endpointURL.value , postStr);
   }

    function getTheForm() {
        var getStr = encodeURI(document.myform.xmldata.value) ;
        alert('Sending XML to server:\n' + getStr);
        makeAJAXRequest('GET', document.myform.endpointURL.value , getStr);
    }

    function putTheForm() {
        var putStr = document.myform.xmldata.value ;
        alert('Sending XML to server:\n' + putStr);
        makeAJAXRequest('PUT', document.myform.endpointURL.value , putStr);
    }

    function deleteTheForm() {
        var delStr = encodeURI(document.myform.xmldata.value);
        alert('Sending XML to server:\n' + delStr);
        makeAJAXRequest('DELETE',document.myform.endpointURL.value , delStr);
    }
</script>
</head>

<body>

    <form action="javascript:get(document.getElementById('myform'));" name="myform" id="myform">

        <input name="endpointURL" type="text" value="http://java.boot.by/restfulwebservice/" >
        <textarea name="xmldata">        </textarea>

        <input type="button" name="postbutton" value="send via POST" onclick="javascript:postTheForm();">
        <input type="button" name="getbutton" value="send via GET"  onclick="javascript:getTheForm();">
        <input type="button" name="putbutton" value="send via PUT" onclick="javascript:putTheForm();">
	    <input type="button" name="deletebutton" value="send via DELETE" onclick="javascript:deleteTheForm();">

    </form>

    <span name="serverresponse" id="serverresponse"></span>

</body>
</html>

					

Professional hosting         'Oracle Certified Expert Web Services Developer 6' Quiz     Free SCDJWS 5.0 Guide