Demande GET HTTP en JavaScript ?

Question

Je dois faire un HTTP GET en JavaScript. Quelle est la meilleure façon de le faire ?

J'ai besoin de faire cela dans un widget dashcode Mac OS X.

Answer 1

Les navigateurs (et Dashcode) fournissent un objet XMLHttpRequest qui peut être utilisé pour effectuer des requêtes HTTP à partir de JavaScript :

function httpGet(theUrl)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
    xmlHttp.send( null );
    return xmlHttp.responseText;
}

Cependant, les demandes synchrones sont déconseillées et génèrent un avertissement du type :

Remarque : à partir de Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27), les requêtes synchrones sur le thread principal ont été dépréciées en raison des effets négatifs sur l'expérience de l'utilisateur.

Vous devez faire une demande asynchrone et traiter la réponse dans un gestionnaire d'événements.

function httpGetAsync(theUrl, callback)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() { 
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
            callback(xmlHttp.responseText);
    }
    xmlHttp.open("GET", theUrl, true); // true for asynchronous 
    xmlHttp.send(null);
}

Answer 2

Dans jQuery :

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

Answer 3

Beaucoup d'excellents conseils ci-dessus, mais pas très réutilisables, et trop souvent remplis d'absurdités DOM et d'autres trucs qui cachent le code facile.

Voici une classe Javascript que nous avons créée et qui est réutilisable et facile à utiliser. Actuellement, elle n'a qu'une méthode GET, mais cela fonctionne pour nous. L'ajout d'une méthode POST ne devrait pas mettre à l'épreuve les compétences de quiconque.

var HttpClient = function() {
    this.get = function(aUrl, aCallback) {
        var anHttpRequest = new XMLHttpRequest();
        anHttpRequest.onreadystatechange = function() { 
            if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200)
                aCallback(anHttpRequest.responseText);
        }

        anHttpRequest.open( "GET", aUrl, true );            
        anHttpRequest.send( null );
    }
}

Pour l'utiliser, rien de plus simple :

var client = new HttpClient();
client.get('http://some/thing?with=arguments', function(response) {
    // do something with response
});

Answer 4

Une version sans callback

var i = document.createElement("img");
i.src = "/your/GET/url?params=here";

Answer 5

Voici un code pour le faire directement avec JavaScript. Mais, comme indiqué précédemment, il est préférable d'utiliser une bibliothèque JavaScript. Ma préférée est jQuery.

Dans le cas ci-dessous, une page ASPX (qui sert de service REST pour les pauvres) est appelée pour renvoyer un objet JavaScript JSON.

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;
        }                    
    }
}