CODEWITHSUNDEEP
jqueryajaxfirefoxgoogle-chromebrowser
mrduongnv
mrduongnv

Reputation: 81

jQuery Ajax problems on Firefox and Chrome, Opera (works well on Safari)

I have a small code of HTML with jQuery. In my code, i call a simple ajax call. It's works well on Safari but did work on Firefox and Chrome.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>untitled</title>
    <meta name="generator" content="TextMate http://macromates.com/">
    <meta name="author" content="Daniel">
    <!-- Date: 2011-11-07 -->

    <script type='text/javascript' src='http://media.smashingmagazine.com/themes/smashing/js/jquery-1.5.2.min.js?ver=3.1.3'></script>
    <script type='text/javascript' src='http://media.smashingmagazine.com/themes/smashing/js/jquery-ui-1.8.2-min.js?ver=3.1.3'></script>
</head>

<script type="text/javascript">
    var jwt = "";
    var certUrl = "";

    function getJwt() {
        $.get(
            "http://signerapp.appspot.com/signerapp",
            function(data) { jwt = data;}
        );
    }
    function checkAvailable() {
        var postObject = {};
        postObject.certUrl = certUrl;
        postObject.jwt = jwt;
        postObject.action = "available";
        postObject.shortUrl = $('#shortUrl').attr('value');
        $.ajax( {
                    url: "http://clickin-shorturl.appspot.com/urlshortener/v1/url",
                    type: "POST",
                    data: JSON.stringify(postObject),
                    success: function(data) { alert(data); }
                });
    }
    $(document).ready(function() {
        getJwt();
    });
</script>
<body>
</br>
</br>
</br>
</br>
</br>
<h4>This is sample for creating url shortener</h4>
<p>Check available:</p>
<div>
    <!-- Check availability-->
<table border="1" width="540" height="100%">
    <!-- Check availability-->
    <tr>
        <td>
            <form>
                Action: <input type="textbox" id="action1" name="action1" value="available" disabled="disabled" size="20"></br>
                Short URL: <input type="textbox" id="shortUrl" name="shortUrl" value="aaaa" size="20"></br>
                <input type="button" id="checkButton" name="checkButton" value="Check Available" onClick="checkAvailable();"></br>
            </form>
        </td>
    </tr>
    <tr>
</table>

</div>

</body>
</html>

Problem is with calling to $.get and $.ajax above. With Safari, i get the accurate result: a base64 string at $.get and json at $.ajax But with Firefox i can not receive anything Although the response code is "200 OK", the body did contain anything.

Upvotes: 1

Views: 638

Answers (2)

Chamika Sandamal
Chamika Sandamal

Reputation: 24332

this is because of the same origine policy. you cannot load other website content using ajax request. if you want to do that, you have to use JSONP for this. or you can use server side proxy for this.

Upvotes: 1

Cecille Manalang
Cecille Manalang

Reputation: 223

you can use firefox's firebug or chrome's inspect element to find more information regarding the error

Upvotes: 0

Related Questions