it-swarm.com.de

HTTP GET-Anfrage in JavaScript?

Ich muss eine HTTP GET Anfrage in JavaScript machen. Was ist der beste Weg das zu tun?

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

671
mclaughlinj

Browser (und Dashcode) stellen ein XMLHttpRequest-Objekt bereit, mit dem HTTP-Anforderungen von JavaScript aus gesendet 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 wie folgt ausgegeben:

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

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

In jQuery :

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

Viele gute Ratschläge oben, aber nicht sehr wiederverwendbar und 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 hat es nur eine GET-Methode, aber das funktioniert für 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
});
134
tggagne

Eine Version ohne Rückruf

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

Hier ist der Code, um dies direkt mit JavaScript zu tun. Mit einer JavaScript-Bibliothek wäre es jedoch, wie bereits erwähnt, viel besser. Mein Favorit ist jQuery.

Im folgenden Fall wird eine ASPX-Seite (die als aristischer Dienst REST Dienst "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;
        }                    
    }
}
71
rp.

Die neue window.fetch API ist ein sauberer Ersatz für XMLHttpRequest, der die Versprechen von ES6 nutzt. Es gibt eine nette 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");
});

Browser-Unterstützung ist jetzt in den neuesten Versionen gut (funktioniert in Chrome, Firefox, Edge (Version 14), Safari (Version 10.1), Opera, Safari iOS (Version 10.3), Android-Browser und Chrome für Android) wird jedoch IE wahrscheinlich keine offizielle Unterstützung erhalten. GitHub verfügt über ein Polyfill , das zur Unterstützung älterer Browser, die noch weitgehend verwendet werden, empfohlen wird (vor allem Versionen von Safari vor März 2017 und mobile Browser aus demselben Zeitraum).

Ob das bequemer ist als jQuery oder XMLHttpRequest oder nicht, hängt von der Art des Projekts ab.

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

Bearbeiten:

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

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

Eine kopierfertige 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);
31
Daniel De León

IE speichert URLs im Cache, um das Laden zu beschleunigen. Wenn Sie zum Beispiel einen Server abfragen und versuchen, neue Informationen abzurufen, IE wird diese URL zwischengespeichert, und Sie erhalten wahrscheinlich denselben Datensatz habe schon immer gehabt.

Unabhängig davon, wie Sie Ihre GET-Anfrage erledigen - Vanilla JavaScript, Prototype, jQuery usw. - stellen Sie sicher, dass Sie einen Mechanismus zur Bekämpfung von Caching einrichten. Um dies zu verhindern, hängen Sie ein eindeutiges Token an das Ende der URL an, die Sie treffen werden. Dies kann geschehen durch:

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

Dadurch wird ein eindeutiger Zeitstempel an das Ende der URL angehängt und verhindert, dass Zwischenspeicherungen stattfinden.

18
Tom

Kurz und rein:

const http = new XMLHttpRequest()

http.open("GET", "https://api.lyrics.ovh/v1/shakira/waka-waka")
http.send()

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

15
Damjan Pavlica

Prototyp macht es einfach

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

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

var page_content;
$.get( "somepage.php", function(data){
    page_content = data;
});
7

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 ist man definitiv 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();
6
flyingP0tat0

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

5
Andrew Hedges
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 kann auch für die Post-Anfrage gemacht werden.
Schauen Sie sich diesen Link an JavaScript post request als Formular submit

4
Gaurav Gupta

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. Dieses basiert auf jQuery. Sie müssen die URL und den Funktionsnamen angeben, den Sie aufrufen möchten.

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

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

Der beste Weg ist die Verwendung von AJAX (ein einfaches Tutorial finden Sie auf dieser Seite Tizag ). Der Grund ist, dass für jede andere Technik, die Sie verwenden, mehr Code erforderlich ist. Es ist nicht garantiert, dass der Browser ohne Nacharbeit funktioniert. Außerdem müssen Sie mehr Clientspeicher verwenden, indem Sie versteckte Seiten in Frames öffnen, URLs übergeben, ihre Daten analysieren und schließen. AJAX ist der Weg in diese Situation. Dass meine zwei Jahre Javascript schwere Entwicklung sprechen. 

4
Nikola Stjelja

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

Ajax

Am besten verwenden Sie eine Bibliothek wie Prototype oder jQuery .

1
Greg

Dazu wird Fetch-API empfohlen, wobei JavaScript Promises verwendet wird. XMLHttpRequest (XHR), IFrame-Objekt oder dynamische Tags sind ältere (und lunkere) 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 tolle fetch Demo und MDN docs

1
aabiro

Wenn Sie den Code für ein Dashboard-Widget verwenden möchten und keine JavaScript-Bibliothek in jedes erstellte Widget einschließen möchten, können Sie das von Safari 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 mit dem Widget verknüpften info.plist ändern.

0
kiamlaluno

Das geht auch mit Pure JS:

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

0
jpereira

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