HTTP GET request in Javascript?

Question

I need to do an HTTP GET request in JS, what's the best way to do that?

Thanks

EDIT: I need to do this in a Mac OS X dashcode widget

Answer 1

AJAX.

You'd be best off using a library such as prototype or jquery

Answer 2

Here's the example in jQuery

Answer 3

This is the basis of AJAX - Google for that and XMLHttpRequest and you'll find plenty of code samples.

Answer 4

Here is code to do it directly with JavaScript. But, as previously mentioned, you'd be much better off with a JavaScript library. My favorite is jQuery.

In the case below, an ASPX page (that's servicing as a poor man's REST service) is being called to return a JavaScript JSON object.

var xmlHttp = null;

function GetCustomerInfo()
{
    var CustomerNumber = document.getElementById( "TextBoxCustomerNumber" ).value;
    var Url = "GetCustomerInfoAsJson.aspx?number=" + CustomerNumber;

    xmlHttp = new XMLHttpRequest(); 
    xmlHttp.onreadystatechange = ProcessRequest;
    xmlHttp.open( "GET", Url, true );
    xmlHttp.send( null );
}

function ProcessRequest() 
{
    if ( xmlHttp.readyState == 4 && xmlHttp.status == 200 ) 
    {
        if ( xmlHttp.responseText == "Not found" ) 
        {
            document.getElementById( "TextBoxCustomerName"    ).value = "Not found";
            document.getElementById( "TextBoxCustomerAddress" ).value = "";
        }
        else
        {
            var info = eval ( "(" + xmlHttp.responseText + ")" );

            // No parsing necessary with JSON!        
            document.getElementById( "TextBoxCustomerName"    ).value = info.jsonData[ 0 ].cmname;
            document.getElementById( "TextBoxCustomerAddress" ).value = info.jsonData[ 0 ].cmaddr1;
        }                    
    }
}

Answer 5

Prototype makes it dead simple

new Ajax.Request( '/myurl', {
  method:  'get',
  parameters:  { 'param1': 'value1'},
  onSuccess:  function(response){
    alert(response.responseText);
  },
  onFailure:  function(){
    alert('ERROR');
  }
});

Answer 6

In jQuery:

$.get(
    "somepage.php",
    {paramOne : 1, paramX : 'abc'},
    function(data) {
       alert('page content: ' + data);
    }
);

Answer 7

IE will cache URLs in order to make laoding faster, but if you're, say, polling a server at intervals trying to get new information, IE will cache that URL and will likely return the same data set you've always had.

Regardless of how you end up doing your GET request - vanilla JavaScript, Prototype, jQuery, etc - make sure that you put a mechanism in place to combat caching. In order to combat that, append a unique token to the end of the URL you're going to be hitting. This can be done by:

var sURL = '/your/url.html' + new Date.getTime();

This will append a unique timestamp to the end of the URL and will prevent any caching from happening.

Answer 8

In your widget's Info.plist file, don't forget to set your AllowNetworkAccess key to true.

Answer 9

The best way is to use AJAX ( you can find a simple tutorial on this page Tizag). The reason is that any other technique you may use requires more code, it is not guaranteed to work cross browser without rework and requires you use more client memory by opening hidden pages inside frames passing urls parsing their data and closing them. AJAX is the way to go in this situation. That my two years of javascript heavy development speaking.

Answer 10

I'm not familiar with Mac OS Dashcode Widgets, but if they let you use javascript libraries and support XMLHTTPRequests, I'd use jQuery and do something like this:

var page_content;
$.get( "somepage.php", function(data){
  page_content = data;
});

Answer 11

what if I want to take from the site http://host/somepage.php

like

var page_content; $. Get ("http://host/somepage.php", function (data) ( page_content = data; ));

Answer 12

If you want to use the code for a Dashboard widget, and you don't want to include a JavaScript library in every widget you created, then you can use the object XMLHttpRequest that Safari natively supports.

As reported by Andrew Hedges, a widget doesn't have access to a network, by default; you need to change that setting in the info.plist associated with the widget.

Answer 13

What the heel about all those fancy libraries, JavaScript has it built-in:

function httpGet(theUrl) { var xmlHttp = null;

    xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", theUrl, false );
    xmlHttp.send( null );
    return xmlHttp.responseText;

}