Ajax only works when I upload the html-page to my server

Question

Is it normal that the code below is returning "error" when the html-file is not uploaded to my server, and if so: why? It works perfectly once I upload it to my server, though...

<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
        function validate() {

                    $.ajax({
                        type:'POST',
                        url:'http://www.mywebsite.com/formvalidate.php',
                        data:{

                        },
                        dataType:'json',
                        success:function (data) {
                            alert('success');


                        },
                        error:function (XMLHttpRequest, textStatus, errorThrown) {
                            alert('error');
                        }
                    });

                }
</script>
</head>
<body>
<input type=button onclick="validate();" value="Click me"/>
</body>

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. — Jeff Noel, Aug 07 '13 at 14:46

Saic Siquot · Answer 1 · 2013-08-07T15:05:46.470

2

It happens becouse "same site origin policy" you can avoid it if you use jsonp type on jquery ajax call.
In your case you can, as your are authoring server and client sides.

edited Aug 07 '13 at 15:05

answered Aug 07 '13 at 14:50

Saic Siquot

6,513
5
34
56

score 1 · Accepted Answer · edited May 23 '17 at 12:20

1

The reason is cross domain ajax is not allowed, when you were running this file from your browser or local host, it was hitting a different website url for ajax call, which is not allowed.

But when you uploaded it on the same server, then there were no cross domain issue, so success message

In order to allow the cross domain ajax call you should use JSONP

$.ajax({
     url:"testserver.php",
     dataType: 'jsonp', // Notice! JSONP <-- P (lowercase)
     success:function(json){
         // do stuff with json (in this case an array)
         alert("Success");
     },
     error:function(){
         alert("Error");
     },
});

REFERENCES:- jQuery AJAX cross domain

edited May 23 '17 at 12:20

Community

1
1

answered Aug 07 '13 at 14:50

Nishant

3,614
1
20
26

That makes sence... thanks! I used the exact same script however to make ajax calls in an android application using phonegap and jQuery Mobile. It that case, the html-page isn't on the same domain either, but it works fine... is ajax cross domain allowed in jQuery Mobile than? – binoculars Aug 07 '13 at 15:04
1

@binoculars You can make cross-domain ajax calls without any issue, no JSONP required. However, your server must handle these calls appropriately by appending necessary headers to the response(s), and possibly handle OPTIONS (preflight) requests as well. You can read more about [CORS on MDN](https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS). – Ray Nicholus Aug 07 '13 at 15:18
"then ajax cross domain allowed in jQuery Mobile?", no it is not alowed by jquery. it is "simplified" by jquery. the one that allows or restrict this is the (moblile) browser. in this case, It works because the "json provider server" implements the "frendly way to share cross-domain", that is: wrapps the anwsered json with a javascript function call. jquery uses this mecanism when you set `dataType: 'jsonp` – Saic Siquot Aug 07 '13 at 15:18

score 0 · Answer 3 · edited May 23 '17 at 12:05

0

Javascript isn't cross domnain lang', so you need to be in the same domain, or allow it in the loading page itself using JSONP.

edited May 23 '17 at 12:05

Community

1
1

answered Aug 07 '13 at 14:49

Yaron Ohana

178
1
1
13

Ajax only works when I upload the html-page to my server

3 Answers3