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

Hier ist der Code, um dies direkt mit JavaScript zu tun. Aber, wie bereits erwähnt, wären Sie viel besser dran mit einer JavaScript-Bibliothek. Mein Favorit ist jQuery.

Im folgenden Fall wird eine ASPX-Seite (die als REST-Dienst eines armen Mannes dient) aufgerufen, um ein JavaScript-JSON-Objekt zurückzugeben.

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

Answer 2

Eine kopierte, moderne Version _( mit abrufen. y Pfeilfunktion )_ :

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

Eine kopierte, klassische Version:

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

Answer 3

Kurz und sauber:

const http = new XMLHttpRequest()

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

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

Answer 4

Modern, sauber und kurzlebig

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

let url = 'https://www.randomtext.me/api/lorem';

// to only send GET request without waiting for response just call 
fetch(url);

// to wait for results use 'then'
fetch(url).then(r=> r.json().then(j=> console.log('\nREQUEST 2',j)));

// or async/await
(async()=> 
  console.log('\nREQUEST 3', await(await fetch(url)).json()) 
)();

Open Chrome console network tab to see request

Answer 5

Der IE wird URLs zwischenspeichern, um das Laden zu beschleunigen, aber wenn Sie, sagen wir, einen Server in Intervallen abfragen, um neue Informationen zu erhalten, wird der IE diese URL zwischenspeichern und wahrscheinlich denselben Datensatz zurückgeben, den Sie schon immer hatten.

Unabhängig davon, wie Sie am Ende tun Ihre GET-Anfrage - Vanilla JavaScript, Prototype, jQuery, etc - stellen Sie sicher, dass Sie einen Mechanismus zur Bekämpfung von Caching. Um das zu bekämpfen, fügen Sie ein eindeutiges Token an das Ende der URL an, auf die Sie zugreifen werden. Dies kann wie folgt geschehen:

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

Dadurch wird ein eindeutiger Zeitstempel an das Ende der URL angehängt und eine Zwischenspeicherung verhindert.