HTTP-GET-Anfrage in JavaScript?

Question

Ich muss eine HTTP GET Anfrage in JavaScript. Wie kann man das am besten machen?

Ich muss dies in einem Dashcode-Widget für Mac OS X tun.

Answer 1

Browser (und Dashcode) stellen ein XMLHttpRequest-Objekt zur Verfügung, das für HTTP-Anfragen aus JavaScript verwendet werden kann:

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

Von synchronen Anfragen wird jedoch abgeraten, und es wird eine Warnung in der Art von:

Hinweis: Beginnend mit Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27), synchrone Anfragen auf dem Hauptthread sind veraltet wegen der negativen Auswirkungen auf das Nutzererlebnis.

Sie sollten eine asynchrone Anfrage stellen und die Antwort in einem Event-Handler verarbeiten.

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

Die neue window.fetch API ist ein sauberer Ersatz für XMLHttpRequest die auf ES6-Versprechen zurückgreift. Es gibt eine schöne Erklärung aquí aber es läuft auf Folgendes hinaus (aus dem Artikel):

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

Browser-Unterstützung ist jetzt in den neuesten Versionen gut (funktioniert in Chrome, Firefox, Edge (v14), Safari (v10.1), Opera, Safari iOS (v10.3), Android-Browser und Chrome für Android), aber IE wird wahrscheinlich keine offizielle Unterstützung erhalten. GitHub hat ein Polyfill verfügbar, die empfohlen wird, um ältere Browser zu unterstützen, die noch weitgehend in Gebrauch sind (insbesondere Versionen von Safari vor März 2017 und mobile Browser aus demselben Zeitraum).

Ich denke, ob dies bequemer ist als jQuery oder XMLHttpRequest oder nicht, hängt von der Art des Projekts ab.

Hier ist ein Link zu den Spezifikationen https://fetch.spec.whatwg.org/

Modifier :

Mit ES7 async/await wird dies einfach (basierend auf dieser Gist ):

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

Answer 3

In jQuery :

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

Answer 4

Viele große Ratschläge oben, aber nicht sehr wiederverwendbar, und zu oft mit DOM Unsinn und andere Fluff, dass die einfache Code versteckt gefüllt.

Hier ist eine Javascript-Klasse, die wir erstellt haben und die wiederverwendbar und einfach zu benutzen ist. Derzeit gibt es nur eine GET-Methode, aber das reicht für uns aus. Das Hinzufügen einer POST-Methode sollte niemandes Fähigkeiten überfordern.

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

Die Verwendung ist so einfach wie:

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

Answer 5

Eine Version ohne Rückruf

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