Thursday, May 23, 2013

Simple html page with JQuery to call an API

I had been developing an API using EJB and some of the interns (they are supposed to develop the client application) had a problem in understanding how to communicate with the API. When I asked them to initiate POST request to an API using javascript only, they looked puzzled.

Thus, I thought to share a sample code with you.

Important code segments to take note.
jQuery.support.cors = true: Force cross site scripting (XSS). Importantly, to work in internet explorer
jQuery.parseJSON(result): A well-formed JSON string is turned to a javascript object.

index.html page is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<title>Sample jQuery Web Page</title>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

Login = function() {

 var resultDiv = $("#resultDiv");
 jQuery.support.cors = true;    //force cross site scripting - XSS
$.ajax({
        url: "http://xyz.abc.com/user/login",
        type: "POST",
        data: { username: $("#username").val(), password: $("#password").val(), callback: "?" },
        dataType: "text",
        success: function (result) {
            alert(result);
            var res = jQuery.parseJSON(result);
            var status= res.status;
            alert(status);
            switch (status) {
                case 0:
                   alert("sessionId: " + res.sessionId);
                   alert("My profileId: "+ res.profileId);
                   resultDiv.html(result);
                   break;
                default: //e.g. at invalide username, status=2
                    resultDiv.html(result);
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.status);
        alert(thrownError);
        }
    });
};

</script>
</head>
<body>

<h1>Sample jQuery Web Page - Login</h1>

<form>
<label>Username</label>
<input name="Username" type="text" id="username"  /> <br/><br/>
<label>Password</label>
<input name="Password" type="password" id = "password" />
<input name="Submit" type="button" id="submit" onclick="Login()" value="Submit" />
</form>


<div id="resultDiv"></div>


</body>
</html

Error "No Transport" - with AJAX/jQuery

Back to my blog after sometime..

I developed a web application to call a remote API (done using EJB) using javascript. Using javascript the data will be requested from the server and the returned data will be displayed in the html page in my local browser. I was ready to deploy as the code worked fine in firefox, chrome and safari.. but found it is not working in Internet Explorer.. :(

I am getting the error AJAX error message mentioned above. AJAX code is not working.. :(
How to handle this..???

Add   jQuery.support.cors = true;    before jQuery.ajax

It is working now even in IE.. :)

This is due to an IE cross domain issue.  JQuery checks whether cross site scripting (XSS) is allowed, and IE under normal browser context blocks cross site scripting. Since it is partially controlled by jQuery.support.cors, with the above tweak we can fix the issue. Thus, XSS is enabled for jQuery.

Reference:
http://mike-ward.net/blog/post/00660/force-jquery-1-5-to-always-allow-cross-site-scripting