Requête HTTP GET en JavaScript?

En jQuery:

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

La nouvelle window.fetch API est un nettoyeur de remplacement pour XMLHttpRequest qui rend l'utilisation de l'ES6 promesses. Il y a une bonne explication ici, mais elle se résume à l' (de l'article):

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

Prise en charge du navigateur est maintenant le bon dans les dernières versions (fonctionne dans Chrome, Firefox, Edge (v14), Safari (v10.1), Opera, Safari iOS (v10.3), le navigateur Android et de Chrome pour Android), mais IE ne sera probablement pas obtenir un soutien officiel. GitHub a un polyfill disponible, il est recommandé de soutenir les anciens navigateurs encore largement en usage (esp versions de Safari avant Mars 2017 et les navigateurs mobiles à partir de la même période).

Je suppose que c'est plus pratique que jQuery ou XMLHttpRequest ou pas ne dépend pas de la nature du projet.

Voici un lien pour les specs https://fetch.spec.whatwg.org/

Modifier:

À l'aide de ES7 async/await, cela devient tout simplement (basé sur ce Gist):

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

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 (c'est de l'entretien comme un pauvre homme du RESTE un service) est appelée pour retourner 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;
        }                    
    }
}

IE cache des URLs afin de rendre le chargement plus rapide, mais si vous êtes, disons, de l'interrogation d'un serveur à intervalles d'essayer d'obtenir de nouvelles informations, IE ne cache que l'URL et retourne probablement le même ensemble de données que vous avez toujours eu.

Indépendamment de la façon dont vous finissez par faire votre demande GET - vanille JavaScript, Prototype, jQuery, etc - assurez-vous de mettre en place un mécanisme pour lutter contre la mise en cache. Pour 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 ajoute un unique horodatage à la fin de l'URL et empêche toute mise en cache de passe.

Prototype rend simple morts

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

Une solution de soutenir les navigateurs plus anciens:

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

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

Le meilleur moyen 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 pour fonctionner de la croix-navigateur, sans retouches et nécessite l'utilisation de plus de mémoire dans le client par l'ouverture des pages cachées à l'intérieur de cadres en passant url de l'analyse de leurs données et de les fermer.
AJAX est le chemin à parcourir dans cette situation. Que mes deux années de javascript lourds développement de parler.

Vous pouvez obtenir une demande HTTP GET de deux façons:

1. Cette approche basée sur le format xml. Vous devez passer l'URL de la requête.

   xmlhttp.open("GET","URL",true);
   xmlhttp.send();

2. Celui-ci est basé sur jQuery. Vous devez spécifier l'URL et function_name que vous souhaitez appeler.

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

Pour ce faire, aller Chercher de l'API est l'approche recommandée, à l'aide de JavaScript Promesses. XMLHttpRequest (XHR), objet IFrame ou tags dynamiques sont plus âgés (et moins agiles) approches.

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

Ici est un grand récupérer la démo et MDN docs

Ajax

Vous seriez mieux à l'aide d'une bibliothèque comme Prototype ou jQuery.

Pour actualiser meilleure réponse de joann avec promesse, c'est 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();
    });
}

Ici est une alternative à des fichiers xml pour charger vos fichiers comme un objet, et d'accéder à des propriétés comme un objet de façon très rapide.

• Attention, de sorte que le javascript peut à lui et à interpréter le contenu correctement, il est nécessaire d'enregistrer vos fichiers dans le même format que votre page HTML. Si vous utilisez UTF 8 enregistrer vos fichiers en UTF8, etc.

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

     <property> value <property> 

écrire un simple fichier comme ceci:

      Property1: value
      Property2: value
      etc.

Enregistrer votre fichier ..
Maintenant appeler 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();
}

maintenant vous pouvez 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 pour contribuer au groupe. Merci de votre goût 🙂

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

yournavigator.exe '' --allow-file-access-from-files