HTTP GET Anfrage in JavaScript?

Ich muss eine HTTP-GET- Anfrage in JavaScript ausführen. Was ist der beste Weg das zu tun?

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

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

In jQuery :

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

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

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

Eine Version ohne Rückruf

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

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

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

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)

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.

Prototyp macht es ganz einfach

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

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

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

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

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.

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

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

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

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

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

Ajax

Verwenden Sie am besten eine Bibliothek wie Prototype oder jQuery .

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

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.

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

Modern, sauber und am kürzesten

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

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

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

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