Simple AJAX HTTP GET using jQuery

Question

I am very new to jQuery and AJAX,I am trying following code,just simple http get request.

<html>
<head>
</head>
<body>
    <script src = "jquery-2.1.4.js"></script>
    <script src = "app.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $.get("http://google.com", function(data, status){
                    alert("Data: " + data + "\nStatus: " + status);
                });
            });
        });
    </script>
    <button>Send an HTTP GET request to a page and get the result back</button>
</body>
</html>

and I am getting following error

XMLHttpRequest cannot load http://google.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'file://' is therefore not allowed access.

Please help me what am I missing.

It is called Same Origin Policy restrictions related to resource access — Arun P Johny, Aug 18 '15 at 06:08
It states to enable CORS on server side,but in my case it's just `http:://google.com`. How should I do it? — newhorizens, Aug 18 '15 at 06:24
You can not consume google data untill they will allow urs site to use it. — Roli Agrawal, Aug 18 '15 at 06:42

score 2 · Accepted Answer · answered Aug 18 '15 at 06:28

2

Same origin policy will not let you access resources hosted on a different server. In your case, if the target system is not under your control, you can look at utilities like jsonp which can help you fire cross domain requests.

answered Aug 18 '15 at 06:28

Pavan Andhukuri

1,547
3
23
49

score 0 · Answer 2 · answered Aug 18 '15 at 06:41

So according to SOP which is same origin policy Under this policy, a web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin same origin means same URL Scheme , Host name and Port number. to get over this you can use like

$.ajax({
    url: "http://google.com",
    dataType: "jsonp"},
    success: function( response ) {
        console.log( response ); // server response
    }
})

Simple AJAX HTTP GET using jQuery

3 Answers3