HTTP GET Anfrage in JavaScript?

Antworten:

1207

Browser (und Dashcode) stellen ein XMLHttpRequest-Objekt bereit, mit dem HTTP-Anforderungen aus JavaScript gestellt werden können:

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

Von synchronen Anforderungen wird jedoch abgeraten, und es wird eine Warnung in der folgenden Richtung generiert:

Hinweis: Ab Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27) sind synchrone Anforderungen im Hauptthread aufgrund der negativen Auswirkungen auf die Benutzererfahrung veraltet .

Sie sollten eine asynchrone Anforderung stellen und die Antwort in einem Ereignishandler 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);
}
Joan
quelle
2
Natürlich hat Javascript es eingebaut, oder wie könnte eine Javascript-Bibliothek eine bequeme Methode dafür bieten? Der Unterschied besteht darin, dass die Convenience-Methoden Komfort und eine klarere, einfachere Syntax bieten.
Pistos
37
Warum das XML-Präfix?
AlikElzin-Kilaka
9
XML-Präfix, da es das X von AJAX ~ Asynchronous JavaScript und XML verwendet . Ein guter Punkt für die " API mit und ECMAScript-Bindung " ist auch die Tatsache, dass JavaScript in vielen Dingen verwendet werden kann, außer in Browsern, die HTTP unterstützen (z. B. wie Adobe Reader ...) Spitze Ohren.
wird
7
@ AlikElzin-kilaka Tatsächlich sind alle oben genannten Antworten falsch (in den verknüpften W3-Dokumenten wird erläutert, dass "jede Komponente dieses Namens möglicherweise irreführend ist"). Richtige Antwort? Es ist nur schlecht benannt stackoverflow.com/questions/12067185/…
Ashley Coolman
2
Die Abruf-API bietet eine bessere Möglichkeit, dies zu tun, und kann bei Bedarf mehrfach ausgefüllt werden (siehe Antwort von @ PeterGibson unten ).
Dominus.Vobiscum
190

In jQuery :

$.get(
    "somepage.php",
    {paramOne : 1, paramX : 'abc'},
    function(data) {
       alert('page content: ' + data);
    }
);
Pistos
quelle
4
Beachten Sie, dass dies in IE 10 nicht funktioniert, wenn Sie versuchen, auf eine URL in einer anderen Domäne als der Domäne der Seite
zuzugreifen
5
@BornToCode sollten Sie weiter untersuchen und möglicherweise einen Fehler auf dem jQuery Issue Tracker in diesem Fall
öffnen
92
Ich weiß, dass einige Leute reines Javascript schreiben wollen. Ich verstehe das. Ich habe kein Problem damit, dass Leute das in ihren Projekten tun. Mein "In jQuery:" sollte als "Ich weiß, dass Sie gefragt haben, wie es in Javascript gemacht werden soll" interpretiert werden, aber ich möchte Ihnen zeigen, wie Sie das mit jQuery machen würden, damit Ihre Neugier geweckt wird, wenn Sie sehen, welche Art von Syntax Prägnanz und Klarheit, die Sie durch die Verwendung dieser Bibliothek genießen können, die Ihnen auch zahlreiche andere Vorteile und Werkzeuge bietet. "
Pistos
34
Beachten Sie auch, dass auf dem Originalplakat später stand: "Vielen Dank für alle Antworten! Ich habe mich für jQuery entschieden, basierend auf einigen Dingen, die ich auf ihrer Website gelesen habe."
Pistos
153

Viele gute Ratschläge oben, aber nicht sehr wiederverwendbar und zu oft mit DOM-Unsinn und anderen Flusen gefüllt, die den einfachen Code verbergen.

Hier ist eine von uns erstellte Javascript-Klasse, die wiederverwendbar und einfach zu verwenden ist. Derzeit gibt es nur eine GET-Methode, aber das funktioniert bei uns. Das Hinzufügen eines POST sollte die Fähigkeiten von niemandem belasten.

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
});
tggagne
quelle
UnCaughtReference-Fehler, HttpClient ist nicht definiert. Ich bekomme diese erste Zeile selbst.
Sashikanta
Wie nennt man es von HTML onClick?
Gobliins
Erstellen Sie eine andere Funktion, in der sich der var-Client befindet ... und führen Sie einfach functionName () aus. falsch zurückgeben; in der onClick
mail929
1
ReferenceError: XMLHttpRequest is not defined
Bugs Buggy
123

Die neue window.fetchAPI ist ein sauberer Ersatz dafür XMLHttpRequest, der ES6-Versprechen nutzt. Es gibt eine schöne Erklärung hier , aber es läuft darauf hinaus, (aus dem Artikel):

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

Die Browserunterstü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), IE jedoch wahrscheinlich keine offizielle Unterstützung bekommen. GitHub verfügt über eine Polyfüllung , die empfohlen wird, um ältere Browser zu unterstützen, die noch weitgehend verwendet werden (insbesondere Versionen von Safari vor März 2017 und mobile Browser aus derselben Zeit).

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

Hier ist ein Link zur Spezifikation https://fetch.spec.whatwg.org/

Bearbeiten :

Bei Verwendung von ES7 async / await wird dies einfach (basierend auf dieser Zusammenfassung ):

async function fetchAsync (url) {
  let response = await fetch(url);
  let data = await response.json();
  return data;
}
Peter Gibson
quelle
9
Ich könnte jemandem etwas Zeit sparen, indem ich erwähne, dass Sie dies tun können, um Anmeldeinformationen in die Anfrage aufzunehmen:fetch(url, { credentials:"include" })
Enselic
@ bugmenot123 window.fetchwird nicht mit einem XML-Parser geliefert, aber Sie können die Antwort selbst analysieren, wenn Sie sie als Text behandeln (nicht json wie im obigen Beispiel). Ein Beispiel finden Sie unter stackoverflow.com/a/37702056/66349
Peter Gibson,
94

Eine Version ohne Rückruf

var i = document.createElement("img");
i.src = "/your/GET/url?params=here";
aNieto2k
quelle
2
Ausgezeichnet! Ich brauchte ein Greasemonkey-Skript, um eine Sitzung am Leben zu erhalten, und dieses Snippet ist perfekt. Einfach in einen setIntervalAnruf eingewickelt .
Carcamano
9
Wie bekomme ich das Ergebnis?
user4421975
@ user4421975 Sie erhalten nicht - um Zugriff auf die Anforderungsantwort zu erhalten, müssen Sie stattdessen die oben genannte XMLHttpRequest verwenden.
Jakub Pastuszuk
74

Hier ist Code, um dies direkt mit JavaScript zu tun. Wie bereits erwähnt, sind Sie mit einer JavaScript-Bibliothek viel besser dran. Mein Favorit ist jQuery.

Im folgenden Fall wird eine ASPX-Seite (die als REST-Service eines armen Mannes fungiert) 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;
        }                    
    }
}
rp.
quelle
33
Da diese Antwort eines der Top-Ergebnisse für das Googeln von "http request javascript" ist, ist es erwähnenswert, dass das Auswerten von solchen Antwortdaten als schlechte Praxis angesehen wird
Kloar
9
@Kloar guter Punkt, aber es wäre noch besser, den Grund anzugeben, warum es schlecht ist, was ich für Sicherheit halte. Zu erklären, warum Praktiken schlecht sind, ist der beste Weg, um Menschen dazu zu bringen, ihre Gewohnheiten zu ändern.
Balmipour
43

Eine moderne Version zum Kopieren und Einfügen (mit Abruf- und 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 klassische Version zum Kopieren und Einfügen:

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

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)

Damjan Pavlica
quelle
19

Der IE speichert URLs zwischen, um das Laden zu beschleunigen. Wenn Sie jedoch beispielsweise in regelmäßigen Abständen einen Server abfragen, um neue Informationen abzurufen, speichert der IE diese URL zwischen und gibt wahrscheinlich denselben Datensatz zurück, den Sie immer hatten.

Unabhängig davon, wie Sie am Ende Ihre GET-Anforderung ausführen - Vanille-JavaScript, Prototyp, jQuery usw. - stellen Sie sicher, dass Sie einen Mechanismus zur Bekämpfung des Caching eingerichtet haben. Um dem entgegenzuwirken, hängen Sie ein eindeutiges Token an das Ende der URL an, auf die Sie zugreifen möchten. Dies kann erfolgen durch:

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

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

Tom
quelle
12

Prototyp macht es ganz einfach

new Ajax.Request( '/myurl', {
  method:  'get',
  parameters:  { 'param1': 'value1'},
  onSuccess:  function(response){
    alert(response.responseText);
  },
  onFailure:  function(){
    alert('ERROR');
  }
});
Mark Biek
quelle
2
Das Problem ist, dass auf Mac OS X Prototype nicht vorinstalliert ist. Da das Widget auf jedem Computer ausgeführt werden muss, einschließlich Prototype (oder jQuery) in jedem Widget, ist dies nicht die beste Lösung.
Kiamlaluno
@kiamlaluno verwenden Prototyp cdn von cloudflare
Vladimir Stazhilov
10

Eine Lösung, die ältere Browser unterstützt:

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

Vielleicht etwas übertrieben, aber mit diesem Code gehen Sie definitiv auf Nummer sicher.

Verwendungszweck:

//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();
fliegenP0tat0
quelle
2
Könnten die Leute bitte einige Kommentare dazu abgeben, was ich falsch gemacht habe? Auf diese Weise nicht sehr hilfreich!
FlyingP0tat0
Die beste Antwort meiner Meinung nach, wenn man in ES5 mit einfachem Javascript codiert.
CoderX
8

Ich bin nicht mit Mac OS Dashcode-Widgets vertraut, aber wenn Sie damit JavaScript-Bibliotheken verwenden und XMLHttpRequests unterstützen können , würde ich jQuery verwenden und Folgendes tun:

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

Vergessen Sie nicht, in der Info.plist-Datei Ihres Widgets Ihren AllowNetworkAccessSchlüssel auf true zu setzen.

Andrew Hedges
quelle
5

Am besten verwenden Sie AJAX (ein einfaches Tutorial finden Sie auf dieser Seite Tizag ). Der Grund dafür ist, dass für jede andere Technik, die Sie möglicherweise verwenden, mehr Code erforderlich ist. Es ist nicht garantiert, dass sie ohne Nacharbeit browserübergreifend funktioniert. Außerdem müssen Sie mehr Client-Speicher verwenden, indem Sie versteckte Seiten in Frames öffnen, die URLs übergeben, deren Daten analysieren und schließen. AJAX ist der richtige Weg in dieser Situation. Dass meine zwei Jahre Javascript schwere Entwicklung sprechen.

Nikola Stjelja
quelle
5

Für diejenigen, die AngularJs verwenden , ist es $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
quelle
5

Sie können eine HTTP-GET-Anforderung auf zwei Arten erhalten:

  1. Dieser Ansatz basiert auf dem XML-Format. Sie müssen die URL für die Anfrage übergeben.

    xmlhttp.open("GET","URL",true);
    xmlhttp.send();
  2. Dieser basiert auf jQuery. Sie müssen die URL und den Funktionsnamen angeben, die Sie aufrufen möchten.

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

Zu diesem Zweck wird die Fetch-API unter Verwendung von JavaScript-Versprechungen empfohlen. XMLHttpRequest (XHR), IFrame-Objekt oder dynamische Tags sind ältere (und klobigere) Ansätze.

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

Hier ist eine großartige Fetch-Demo und MDN-Dokumente

aabiro
quelle
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/')

Gleiches gilt auch für Post-Anfragen.
Werfen Sie einen Blick auf diesen Link JavaScript-Post-Anfrage wie ein Formular senden

Gaurav Gupta
quelle
4

Einfache asynchrone Anfrage:

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();
}
Juniorisiert
quelle
2

Ajax

Verwenden Sie am besten eine Bibliothek wie Prototype oder jQuery .

Greg
quelle
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
quelle
1

Wenn Sie den Code für ein Dashboard-Widget verwenden möchten und nicht in jedes von Ihnen erstellte Widget eine JavaScript-Bibliothek aufnehmen möchten, können Sie das von Safari nativ unterstützte Objekt XMLHttpRequest verwenden.

Wie von Andrew Hedges berichtet, hat ein Widget standardmäßig keinen Zugriff auf ein Netzwerk. Sie müssen diese Einstellung in der dem Widget zugeordneten info.plist ändern.

kiamlaluno
quelle
1

Um die beste Antwort von Joann mit Versprechen aufzufrischen, ist dies mein 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
quelle
1

Modern, sauber und am kürzesten

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

Kamil Kiełczewski
quelle
0

Sie können es auch mit reinem JS tun:

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

Siehe: für weitere Details: html5rocks Tutorial

jpereira
quelle
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
quelle
-1

Hier ist eine Alternative zu XML-Dateien, mit der Sie Ihre Dateien als Objekt laden und sehr schnell auf Eigenschaften als Objekt zugreifen können.

  • Achtung, damit Javascript ihn kann und um den Inhalt richtig zu interpretieren, ist es notwendig, Ihre Dateien im gleichen Format wie Ihre HTML-Seite zu speichern. Wenn Sie UTF 8 verwenden, speichern Sie Ihre Dateien in UTF8 usw.

XML funktioniert als Baum ok? anstatt zu schreiben

     <property> value <property> 

Schreiben Sie eine einfache Datei wie folgt:

      Property1: value
      Property2: value
      etc.

Speichern Sie Ihre Datei .. Rufen Sie nun die Funktion auf ....

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

Jetzt können Sie Ihre Werte effizient erhalten.

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

window.onload = function(){

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

Es ist nur ein kleines Geschenk, um zur Gruppe beizutragen. Danke von dir :)

Wenn Sie die Funktion lokal auf Ihrem PC testen möchten, starten Sie Ihren Browser mit dem folgenden Befehl neu (von allen Browsern außer Safari unterstützt):

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