jQuery Get Request on HTTP URL

Question

i've recently tried to get some Response from an URL using jQuery. Therefore I copied a get request sample of jQuery API Get Request Tutorial into my project and tried to run it, but my debugging messages showed me, that it can't go further. I tried the javascript Ajax Library using a simple request, but it didn't work.

So i'm asking you, if you could help me somehow.

And this is all what i do, but there is no response.

var url = "http://www.google.com";

$.get(url, function(data){


    alert("Data Loaded: " + data);
    });

Did i probably forgot to include a ajax or jQuery library. For a better understanding, i have c and obj-c experince, this is why i think, that a library is missing.

In each sample there is just a short url like "test.php". Is my complete HTTP url wrong?

Thanks for your answers in advanced.

Br Nic

Solution 1

I have provided an example scenario to help get you started:

<!-- Include this jQuery library in your HTML somewhere: -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script

This is probably best to include inside of an external JS file:

//Listen when a button, with a class of "myButton", is clicked
//You can use any jQuery/JavaScript event that you'd like to trigger the call
$('.myButton').click(function() {
//Send the AJAX call to the server
  $.ajax({
  //The URL to process the request
    'url' : 'page.php',
  //The type of request, also known as the "method" in HTML forms
  //Can be 'GET' or 'POST'
    'type' : 'GET',
  //Any post-data/get-data parameters
  //This is optional
    'data' : {
      'paramater1' : 'value',
      'parameter2' : 'another value'
    },
  //The response from the server
    'success' : function(data) {
    //You can use any jQuery/JavaScript here!!!
      if (data == "success") {
        alert('request sent!');
      }
    }
  });
});

Solution 2

You're hitting the Same Origin Policy with regard to ajax requests.

In a nutshell, JS/Ajax is by default only allowed to fire requests on the same domain as where the HTML page is been served from. If you intend to fire requests on other domains, it has to support JSONP and/or to set the Access-Control headers in order to get it to work. If that is not an option, then you have to create some proxy on the server side and use it instead (be careful since you can be banned for leeching too much from other sites using a robot).

Solution 3

As others have said you can't access files on another server. There is a hack tho. If you are using a server side language (as i assume you are) you can simply do something like:

http://myserver.com/google.php:

<?php
  echo get_file_contents('http://www.google.com');
?>

http://myserver.com/myscript.js

$.get('google.php',function(data){ console.log(data) });

That should work!

Comments

[NicTesla]

so it isn't possible to send a request on a http url?

[ave4496]

just if the url is on the same server as the script. you could request a php-page from your server which reads the URL you need.

[NicTesla]

is there a possibility to send a request to an url, that is "out of my domain"

[BalusC]

Yes, create a proxy yourself using the server side language. Basically, let your server request an URL and return the response. Then you can use ajax to connect to your server. In for example PHP, you can use curl() for this. Let it take an URL as request parameter and echo the curl() result to the response. Be careful with this though! Depending on the policy, other sites are eligible to ban your server's IP from connecting to them in odd patterns. Better would be to look if the host doesn't have a public ajax api. Google has several public ajax APIs.

[NicTesla]

how would you perform a http request to for excample google using javascript?

[BalusC]

Just change the URL to your server. E.g. $.get('leech.php?url=' + encodeURIComponent('http://www.google.com')). But still, better is to utilize public ajax API provided by Google (or whatever host you intend to connect to). E.g. http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=‌​your+search+term

[ave4496]

change your "var url = " to a php-file stored on your server. then read the page you need with curl or something similar

[NicTesla]

i tried this: var invocation = new XMLHttpRequest(); var url = 'bar.other/resources/public-data'; if(invocation) { invocation.open('GET', url, true); invocation.onreadystatechange = handler; invocation.send(); } and now i get a response. Thanks alot

[NicTesla]

Thank you very much spryno724, i'm going to try this one later, when i'm off work. Thank you

[NicTesla]

Thanks you very much!! After validating several possibilities, i took that one you mentioned. For all others, who would like to have some more solutions use a Proxy (like others have shown here with PHP, or YQL, which is a Yahoo Proxy, or if you use a tomcat, you can write a proxy by your own), or use script tags, like the solution i've chosen. I needed it for my bachelor thesis and so thanks to all of you!!! BR

[Oliver Spryn]

Not a problem, glad I could help!