Question Demande HTTP GET en JavaScript?


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

Je dois le faire dans un widget de dashcode Mac OS X.


621
2017-10-29 16:31


origine


Réponses:


Vous pouvez utiliser les fonctions fournies par l'environnement d'hébergement via 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 requêtes synchrones sont déconseillées, vous pouvez donc utiliser ceci à la place:

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

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é abandonnées en raison des effets négatifs sur l'expérience de l'utilisateur.


992
2017-10-27 12:43



En jQuery:

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

175
2017-10-29 16:38



Beaucoup de bons conseils ci-dessus, mais pas très réutilisables, et trop souvent rempli de non-sens DOM et autres fluff qui cache le code facile.

Voici une classe Javascript que nous avons créée, réutilisable et facile à utiliser. Actuellement, il a seulement une méthode GET, mais cela fonctionne pour nous. L'ajout d'un POST ne devrait pas imposer 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 );
    }
}

L'utiliser est aussi simple que:

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

122
2018-02-27 18:03



Une version sans rappel

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

83
2017-11-08 09:50



Voici le code pour le faire directement avec JavaScript. Mais, comme mentionné précédemment, vous seriez beaucoup mieux avec une bibliothèque JavaScript. Mon préféré est jQuery.

Dans le cas ci-dessous, une page ASPX (service en tant que service REST pauvre) est appelée pour renvoyer un objet JSON JavaScript.

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

68
2017-10-29 16:35



Le nouveau window.fetch API est un remplacement plus propre pour XMLHttpRequest qui fait usage des promesses ES6. Il y a une bonne explication ici, mais cela se résume à (de l'article):

fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function() {
  console.log("Booo");
});

Support du navigateur est maintenant bon dans les dernières versions (travaux dans Chrome, Firefox, Edge (v14), Safari (v10.1), Opera, Safari iOS (v10.3), navigateur Android, et Chrome pour Android), mais IE ne sera probablement pas obtenir un soutien officiel. GitHub a un polyfill disponible qui est recommandé pour soutenir les navigateurs plus anciens encore largement utilisés (en particulier les versions de Safari avant mars 2017 et les navigateurs mobiles de la même période).

Je suppose que cela est plus pratique que jQuery ou XMLHttpRequest ou non dépend de la nature du projet.

Voici un lien vers la spécification https://fetch.spec.whatwg.org/

modifier:

En utilisant ES7 async / await, cela devient simple (basé sur ce Gist):

async function fetchAsync (url) {
  let response = await fetch(url);
  let data = await response.json();
  return data;
}

56
2017-07-11 00:45



Une version prête à copier-coller

var request = new XMLHttpRequest();
request.onreadystatechange = function() {
    if (request.readyState === 4) {
        if (request.status === 200) {
            document.body.className = 'ok';
            console.log(request.responseText);
        } else if (!isValid(this.response) && this.status == 0) {
            document.body.className = 'error offline';
            console.log("The computer appears to be offline.");                
        } else {
            document.body.className = 'error';
        }
    }
};
request.open("GET", url , true);
request.send(null);

28
2017-08-18 07:23



IE mettra en cache les URL pour accélérer le chargement, mais si vous interrogez un serveur à intervalles réguliers pour essayer d'obtenir de nouvelles informations, IE mettra en cache cette URL et renverra probablement le même ensemble de données que vous avez toujours eu.

Indépendamment de la façon dont vous finissez votre requête GET (JavaScript, Prototype, jQuery, etc.), assurez-vous de mettre en place un mécanisme pour combattre la mise en cache. Afin de lutter contre cela, ajouter un jeton unique à la fin de l'URL que vous allez frapper. Cela peut être fait par:

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

Cela ajoutera un horodatage unique à la fin de l'URL et empêchera toute mise en cache.


16
2017-10-29 16:40



Court et pur:

const http = new XMLHttpRequest()

http.open("GET", "https://api.lyrics.ovh/v1/shakira/waka-waka")
http.send()

http.onload = () => console.log(http.responseText)


13
2017-10-28 18:42



Prototype le rend mort simple

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

12
2017-10-29 16:35