web-dev-qa-db-fra.com

Requête HTTP GET en JavaScript?

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

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

671
mclaughlinj

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

1059
Joan

En jQuery :

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

Beaucoup de bons conseils ci-dessus, mais pas très réutilisables, et trop souvent remplis de bêtises DOM et autres duvet qui cachent le code facile.

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

Son utilisation est aussi simple que:

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

Une version sans rappel

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

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 (appelée en tant que service REST d'un homme 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;
        }                    
    }
}
71
rp.

La nouvelle window.fetch API remplace plus facilement XMLHttpRequest et utilise les promesses ES6. Il y a une bonne explication ici , mais cela revient à (d'après l'article):

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

La prise en charge du navigateur est désormais bonne dans les dernières versions (fonctionne dans Chrome, Firefox, Edge (version 14), Safari (version 10.1), Opera, Safari iOS (version 10.3), navigateur Android et Chrome pour Android) Cependant, IE ne recevra probablement pas le soutien officiel. GitHub dispose d’un polyfill qui est recommandé pour la prise en charge des navigateurs plus anciens encore largement utilisés (notamment les versions de Safari d’avant mars 2017 et les navigateurs mobiles de la même période).

Je suppose que cela soit 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/wait, cela devient simplement (basé sur ce Gist ):

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

Une version prête à copier-coller

let request = new XMLHttpRequest();
request.onreadystatechange = function () {
    if (this.readyState === 4) {
        if (this.status === 200) {
            document.body.className = 'ok';
            console.log(this.responseText);
        } else if (this.response == null && 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);
31
Daniel De León

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

Quelle que soit la manière dont vous finissez par exécuter votre demande GET - JavaScript vanille, Prototype, jQuery, etc. - assurez-vous de mettre en place un mécanisme permettant de lutter contre la mise en cache. Afin de lutter contre cela, ajoutez 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.

18
Tom

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)

15
Damjan Pavlica

Prototype le rend simple comme mort

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

Je ne connais pas bien les widgets Dashcode de Mac OS, mais s’ils vous permettent d’utiliser des bibliothèques JavaScript et de prendre en charge XMLHttpRequests , j’utiliserais jQuery et je ferais quelque chose comme ceci:

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

Une solution prenant en charge les anciens navigateurs:

function httpRequest() {
    var ajax = null,
        response = null,
        self = this;

    this.method = null;
    this.url = null;
    this.async = true;
    this.data = null;

    this.send = function() {
        ajax.open(this.method, this.url, this.asnyc);
        ajax.send(this.data);
    };

    if(window.XMLHttpRequest) {
        ajax = new XMLHttpRequest();
    }
    else if(window.ActiveXObject) {
        try {
            ajax = new ActiveXObject("Msxml2.XMLHTTP.6.0");
        }
        catch(e) {
            try {
                ajax = new ActiveXObject("Msxml2.XMLHTTP.3.0");
            }
            catch(error) {
                self.fail("not supported");
            }
        }
    }

    if(ajax == null) {
        return false;
    }

    ajax.onreadystatechange = function() {
        if(this.readyState == 4) {
            if(this.status == 200) {
                self.success(this.responseText);
            }
            else {
                self.fail(this.status + " - " + this.statusText);
            }
        }
    };
}

Peut-être un peu exagéré, mais ce code vous protège définitivement.

Utilisation:

//create request with its porperties
var request = new httpRequest();
request.method = "GET";
request.url = "https://example.com/api?parameter=value";

//create callback for success containing the response
request.success = function(response) {
    console.log(response);
};

//and a fail callback containing the error
request.fail = function(error) {
    console.log(error);
};

//and finally send it away
request.send();
6
flyingP0tat0

Dans le fichier Info.plist de votre widget, n'oubliez pas de définir votre clé AllowNetworkAccess sur true.

5
Andrew Hedges
function get(path) {
    var form = document.createElement("form");
    form.setAttribute("method", "get");
    form.setAttribute("action", path);
    document.body.appendChild(form);
    form.submit();
}


get('/my/url/')

La même chose peut être faite pour la demande de poste aussi bien.
Consultez ce lien Demande de publication JavaScript comme un formulaire à envoyer

4
Gaurav Gupta

Vous pouvez obtenir une demande HTTP GET de deux manières:

  1. Cette approche est basée sur le format XML. Vous devez transmettre l'URL de la demande. 

    xmlhttp.open("GET","URL",true);
    xmlhttp.send();
    
  2. Celui-ci est basé sur jQuery. Vous devez spécifier l'URL et le nom_fonction que vous souhaitez appeler.

    $("btn").click(function() {
      $.ajax({url: "demo_test.txt", success: function_name(result) {
        $("#innerdiv").html(result);
      }});
    }); 
    
4
parag.rane

Pour ceux qui utilisent AngularJs , c'est $http.get:

$http.get('/someUrl').
  success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
  }).
  error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });
4

Le meilleur moyen est d’utiliser AJAX (vous trouverez un tutoriel simple sur cette page Tizag ). La raison en est que toute autre technique que vous utilisez nécessite plus de code, il n’est pas garanti qu’il fonctionne avec tous les navigateurs sans retravailler et nécessite que vous utilisiez plus de mémoire client en ouvrant des pages cachées dans des cadres, en passant les URL analysant et fermant leurs données. AJAX est la voie à suivre dans cette situation. Que mes deux années de développement javascript lourd parlent. 

4
Nikola Stjelja

Requête async simple:

function get(url, callback) {
  var getRequest = new XMLHttpRequest();

  getRequest.open("get", url, true);

  getRequest.addEventListener("readystatechange", function() {
    if (getRequest.readyState === 4 && getRequest.status === 200) {
      callback(getRequest.responseText);
    }
  });

  getRequest.send();
}
1
Juniorized

Ajax

Vous feriez mieux d'utiliser une bibliothèque telle que Prototype ou jQuery .

1
Greg

Pour ce faire, l'API d'extraction est l'approche recommandée, à l'aide de promesses JavaScript. XMLHttpRequest (XHR), un objet IFrame ou des balises dynamiques sont des approches plus anciennes (et plus vives).

<script type=“text/javascript”> 
    // Create request object 
    var request = new Request('https://example.com/api/...', 
         { method: 'POST', 
           body: {'name': 'Klaus'}, 
           headers: new Headers({ 'Content-Type': 'application/json' }) 
         });
    // Now use it! 

   fetch(request) 
   .then(resp => { 
         // handle response }) 
   .catch(err => { 
         // handle errors 
    }); </script>

Voici une excellente chercher démo et docs MDN

1
aabiro

Si vous souhaitez utiliser le code d'un widget Dashboard et que vous ne souhaitez pas inclure une bibliothèque JavaScript dans chaque widget que vous avez créé, vous pouvez utiliser l'objet XMLHttpRequest que Safari prend en charge de manière native.

Comme l'a signalé Andrew Hedges, un widget n'a pas accès à un réseau, par défaut; vous devez modifier ce paramètre dans le fichier info.plist associé au widget.

0
kiamlaluno

Vous pouvez aussi le faire avec du JS pur:

// Create the XHR object.
function createCORSRequest(method, url) {
  var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
// XHR for Chrome/Firefox/Opera/Safari.
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined") {
// XDomainRequest for IE.
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
// CORS not supported.
xhr = null;
}
return xhr;
}

// Make the actual CORS request.
function makeCorsRequest() {
 // This is a sample server that supports CORS.
 var url = 'http://html5rocks-cors.s3-website-us-east-1.amazonaws.com/index.html';

var xhr = createCORSRequest('GET', url);
if (!xhr) {
alert('CORS not supported');
return;
}

// Response handlers.
xhr.onload = function() {
var text = xhr.responseText;
alert('Response from CORS request to ' + url + ': ' + text);
};

xhr.onerror = function() {
alert('Woops, there was an error making the request.');
};

xhr.send();
}

Voir: pour plus de détails: tutoriel html5rocks

0
jpereira

Pour actualiser la meilleure réponse de joann avec promesse, voici mon code:

let httpRequestAsync = (method, url) => {
    return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open(method, url);
        xhr.onload = function () {
            if (xhr.status == 200) {
                resolve(xhr.responseText);
            }
            else {
                reject(new Error(xhr.responseText));
            }
        };
        xhr.send();
    });
}
0
negstek