Demande HTTP GET en JavaScript?

Réponses:

1208

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éreront 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 utilisateur.

Vous devez effectuer une demande asynchrone et gérer 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);
}
Joan
la source
2
Bien sûr, Javascript l'a intégré, ou comment une bibliothèque Javascript pourrait-elle offrir une méthode pratique pour cela? La différence étant que les méthodes de commodité offrent, enfin, la commodité et une syntaxe plus claire et plus simple.
Pistos
37
Pourquoi le préfixe XML?
AlikElzin-kilaka
9
Préfixe XML car il utilise le X d'AJAX ~ JavaScript asynchrone et XML . De plus, bon point concernant "l' API qui a et la liaison ECMAScript " est dû au fait que JavaScript peut être dans beaucoup de choses, autres que les navigateurs supportant HTTP (par exemple comme Adobe Reader ...). Oreilles pointues.
le
7
@ AlikElzin-kilaka En fait, toutes les réponses ci-dessus sont hors de propos (en fait, les documents W3 liés expliquent "chaque composant de ce nom est potentiellement trompeur"). Bonne réponse? son stackoverflow.com/questions/12067185/…
Ashley Coolman
2
L' API fetch offre un meilleur moyen de le faire et peut être remplie si nécessaire (voir la réponse de @ PeterGibson ci-dessous ).
Dominus.Vobiscum
190

Dans jQuery :

$.get(
    "somepage.php",
    {paramOne : 1, paramX : 'abc'},
    function(data) {
       alert('page content: ' + data);
    }
);
Pistos
la source
4
notez que cela ne fonctionne pas dans IE 10 lorsque vous essayez d'accéder à l'URL dans un domaine différent de celui de la page
BornToCode
5
@BornToCode, vous devriez enquêter davantage et éventuellement ouvrir un bogue sur le suivi des problèmes jQuery dans ce cas
ashes999
92
Je sais que certaines personnes veulent écrire du Javascript pur. Je comprends ça. Je n'ai aucun problème avec les gens qui font ça dans leurs projets. Mon "Dans jQuery:" devrait être interprété comme "Je sais que vous avez demandé comment le faire en Javascript, mais permettez-moi de vous montrer comment vous le feriez avec jQuery, afin que votre curiosité soit piquée en voyant quel type de concision de syntaxe et clarté dont vous pouvez profiter en utilisant cette bibliothèque, qui vous offrirait également de nombreux autres avantages et outils ".
Pistos
34
Notez également que l'affiche originale a dit plus tard: "Merci pour toutes les réponses! Je suis allé avec jQuery basé sur certaines choses que j'ai lues sur leur site.".
Pistos
153

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

Voici une classe Javascript que nous avons créée, réutilisable et facile à utiliser. Actuellement, il n'a qu'une méthode GET, mais cela fonctionne pour nous. L'ajout d'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
});
tggagne
la source
Erreur UnCaughtReference, HttpClient n'est pas défini. Je reçois cette première ligne elle-même.
sashikanta
Comment l'appelez-vous à partir de HTML onClick?
Gobliins
Créez une fonction ailleurs où il contient le client var ... et exécutez simplement functionName (); retour faux; dans le onClick
mail929
1
ReferenceError: XMLHttpRequest is not defined
Bugs Buggy
123

La nouvelle window.fetchAPI est un remplacement plus propre XMLHttpRequestqui utilise les promesses ES6. Il y a une belle 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");
});

La prise en charge du navigateur est désormais bonne dans les dernières versions (fonctionne dans Chrome, Firefox, Edge (v14), Safari (v10.1), Opera, Safari iOS (v10.3), navigateur Android et Chrome pour Android), mais IE le fera n'obtiendra probablement pas de soutien officiel. GitHub a un polyfill disponible qui est recommandé pour prendre en charge 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 async / wait ES7, cela devient simplement (basé sur cet Gist ):

async function fetchAsync (url) {
  let response = await fetch(url);
  let data = await response.json();
  return data;
}
Peter Gibson
la source
9
Je pourrais faire gagner du temps à quelqu'un en mentionnant que vous pouvez le faire pour inclure les informations d'identification dans la demande:fetch(url, { credentials:"include" })
Enselic
@ bugmenot123 window.fetchn'est pas fourni avec un analyseur XML, mais vous pouvez analyser la réponse vous-même si vous la gérez comme du texte (pas json comme dans l'exemple ci-dessus). Voir stackoverflow.com/a/37702056/66349 pour un exemple
Peter Gibson
94

Une version sans rappel

var i = document.createElement("img");
i.src = "/your/GET/url?params=here";
aNieto2k
la source
2
Excellent! J'avais besoin d'un script Greasemonkey pour maintenir une session en vie et cet extrait est parfait. Je l'ai juste enveloppé dans un setIntervalappel.
Carcamano
9
comment obtenir le résultat?
user4421975
@ user4421975 Vous n'avez pas - pour avoir accès à la réponse à la demande, vous devez utiliser XMLHttpRequest susmentionné à la place.
Jakub Pastuszuk
74

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 (qui sert de service REST pour un 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;
        }                    
    }
}
rp.
la source
33
Comme cette réponse est l'un des meilleurs résultats pour googler "http request javascript", il convient de mentionner que l'exécution d'eval sur les données de réponse comme celle-ci est considérée comme une mauvaise pratique
Kloar
9
@Kloar bon point, mais il serait encore mieux de donner la raison pour laquelle c'est mauvais, ce qui, je suppose, est la sécurité. Expliquer pourquoi les pratiques sont mauvaises est le meilleur moyen d'inciter les gens à changer leurs habitudes.
Balmipour
43

Une version moderne copier-coller (en utilisant la fonction fetch et flèche ) :

//Option with catch
fetch( textURL )
   .then(async r=> console.log(await r.text()))
   .catch(e=>console.error('Boo...' + e));

//No fear...
(async () =>
    console.log(
            (await (await fetch( jsonURL )).json())
            )
)();

Une version classique 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);
Daniel De León
la source
36

Court et propre:

const http = new XMLHttpRequest()

http.open("GET", "https://api.lyrics.ovh/v1/toto/africa")
http.send()

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

Damjan Pavlica
la source
19

IE mettra en cache les URL afin d'accélérer le chargement, mais si, par exemple, 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.

Quelle que soit la façon dont vous finissez par faire votre demande GET - vanilla JavaScript, Prototype, jQuery, etc. - assurez-vous de mettre en place un mécanisme pour 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.

À M
la source
12

Un prototype simplifie la vie

new Ajax.Request( '/myurl', {
  method:  'get',
  parameters:  { 'param1': 'value1'},
  onSuccess:  function(response){
    alert(response.responseText);
  },
  onFailure:  function(){
    alert('ERROR');
  }
});
Mark Biek
la source
2
Le problème est que Mac OS X n'est pas livré avec le prototype préinstallé. Comme le widget doit fonctionner sur n'importe quel ordinateur, y compris Prototype (ou jQuery) dans chaque widget n'est pas la meilleure solution.
kiamlaluno
@kiamlaluno utilise le prototype cdn de cloudflare
Vladimir Stazhilov
10

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 vous allez certainement en sécurité avec ce code.

Usage:

//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();
flyingP0tat0
la source
2
Les gens pourraient-ils faire des commentaires sur ce que j'ai fait de mal? Pas très utile de cette façon!
flyingP0tat0
La meilleure réponse à mon avis, si l'on code en ES5 en utilisant du javascript simple.
CoderX
8

Je ne connais pas 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 ferais quelque chose comme ceci:

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

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

Andrew Hedges
la source
5

La meilleure façon est d'utiliser AJAX (vous pouvez trouver un tutoriel simple sur cette page Tizag ). La raison en est que toute autre technique que vous pouvez utiliser nécessite plus de code, il n'est pas garanti de fonctionner sur plusieurs navigateurs sans retravailler et vous oblige à utiliser plus de mémoire client en ouvrant des pages cachées à l'intérieur des cadres en passant des URL en analysant leurs données et en les fermant. AJAX est la voie à suivre dans cette situation. Que mes deux années de développement lourd en javascript parlent.

Nikola Stjelja
la source
5

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.
  });
Vitalii Fedorenko
la source
5

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

  1. Cette approche 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 de fonction que vous souhaitez appeler.

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

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

<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 démonstration de récupération et des documents MDN

aabiro
la source
4
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 également.
Jetez un oeil à ce lien Demande de publication JavaScript comme un formulaire envoyer

Gaurav Gupta
la source
4

Demande d'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();
}
Juniorized
la source
2

Ajax

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

Greg
la source
2
// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest()

// Open a new connection, using the GET request on the URL endpoint
request.open('GET', 'restUrl', true)

request.onload = function () {
  // Begin accessing JSON data here
}

// Send request
request.send()
Pradeep Maurya
la source
1

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 pris en charge nativement par Safari.

Comme indiqué par 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.

kiamlaluno
la source
1

Pour rafraîchir 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();
    });
}
negstek
la source
1

Moderne, propre et le plus court

fetch('https://www.randomtext.me/api/lorem')

Kamil Kiełczewski
la source
0

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

jpereira
la source
0
<button type="button" onclick="loadXMLDoc()"> GET CONTENT</button>

 <script>
        function loadXMLDoc() {
            var xmlhttp = new XMLHttpRequest();
            var url = "<Enter URL>";``
            xmlhttp.onload = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == "200") {
                    document.getElementById("demo").innerHTML = this.responseText;
                }
            }
            xmlhttp.open("GET", url, true);
            xmlhttp.send();
        }
    </script>
Rama
la source
-1

Voici une alternative aux fichiers xml pour charger vos fichiers en tant qu'objet et accéder aux propriétés en tant qu'objet de manière très rapide.

  • Attention, pour que javascript puisse lui et pour interpréter correctement le contenu il faut sauvegarder vos fichiers au même format que votre page HTML. Si vous utilisez UTF 8, enregistrez vos fichiers en UTF8, etc.

XML fonctionne comme un arbre ok? au lieu d'écrire

     <property> value <property> 

écrire un fichier simple comme celui-ci:

      Property1: value
      Property2: value
      etc.

Enregistrez votre fichier .. Appelez maintenant la fonction ....

    var objectfile = {};

function getfilecontent(url){
    var cli = new XMLHttpRequest();

    cli.onload = function(){
         if((this.status == 200 || this.status == 0) && this.responseText != null) {
        var r = this.responseText;
        var b=(r.indexOf('\n')?'\n':r.indexOf('\r')?'\r':'');
        if(b.length){
        if(b=='\n'){var j=r.toString().replace(/\r/gi,'');}else{var j=r.toString().replace(/\n/gi,'');}
        r=j.split(b);
        r=r.filter(function(val){if( val == '' || val == NaN || val == undefined || val == null ){return false;}return true;});
        r = r.map(f => f.trim());
        }
        if(r.length > 0){
            for(var i=0; i<r.length; i++){
                var m = r[i].split(':');
                if(m.length>1){
                        var mname = m[0];
                        var n = m.shift();
                        var ivalue = m.join(':');
                        objectfile[mname]=ivalue;
                }
            }
        }
        }
    }
cli.open("GET", url);
cli.send();
}

vous pouvez maintenant obtenir vos valeurs efficacement.

getfilecontent('mesite.com/mefile.txt');

window.onload = function(){

if(objectfile !== null){
alert (objectfile.property1.value);
}
}

C'est juste un petit cadeau à contribuer au groupe. Merci de votre amour :)

Si vous souhaitez tester la fonction sur votre PC localement, redémarrez votre navigateur avec la commande suivante (prise en charge par tous les navigateurs sauf safari):

yournavigator.exe '' --allow-file-access-from-files
Cherif
la source