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

Prototyp macht es kinderleicht

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

Answer 2

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.

Uso:

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

Answer 3

Zu diesem Zweck wird die Fetch-API empfohlen, die JavaScript Promises verwendet. XMLHttpRequest (XHR), IFrame-Objekt oder dynamisch <script> 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 Demo abrufen y MDN-Dokumente

Answer 4

Ich bin nicht vertraut mit Mac OS Dashcode Widgets, aber wenn sie die Verwendung von JavaScript-Bibliotheken und Unterstützung XMLHttpRequests würde ich verwenden jQuery und machen Sie etwas Ähnliches:

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

Answer 5

REIHE VON FUNKTIONEN REZEPTE LEICHT UND EINFACH

Ich habe eine Reihe von Funktionen vorbereitet, die in gewisser Weise ähnlich sind, aber dennoch die neue Funktionalität sowie die Einfachheit demonstrieren, die Javascript erreicht hat, wenn man weiß, wie man sie ausnutzen kann.

---

0. Lassen Sie einige Grundkonstanten

---

let data;
const URLAPI = "https://gorest.co.in/public/v1/users";
function setData(dt) {
    data = dt;
}

---

1. Einfachste

---

// MOST SIMPLE ONE 
function makeRequest1() {       
    fetch(URLAPI)
        .then(response => response.json()).then( json => setData(json))
        .catch(error => console.error(error))
        .finally(() => {
            console.log("Data received 1 --> ", data);
            data = null;
    });
}

---

2. Variationen mit Promises und Async-Funktionen

---

// ASYNC FUNCTIONS 
function makeRequest2() { 
    fetch(URLAPI)
        .then(async response => await response.json()).then(async json => await setData(json))
        .catch(error => console.error(error))
        .finally(() => {
            console.log("Data received 2 --> ", data);
            data = null;            
        });
}

function makeRequest3() {    
    fetch(URLAPI)
        .then(async response => await response.json()).then(json => setData(json))
        .catch(error => console.error(error))
        .finally(() => {
            console.log("Data received 3 --> ", data);
            data = null;
        });
}

// Better Promise usages
function makeRequest4() {
    const response = Promise.resolve(fetch(URLAPI).then(response => response.json())).then(json => setData(json) ).finally(()=> {
        console.log("Data received 4 --> ", data);

    })
}

---

3. Demonstration der One-Liner-Funktion!!!

---

// ONE LINER STRIKE ASYNC WRAPPER FUNCTION 
async function makeRequest5() {
    console.log("Data received 5 -->", await Promise.resolve(fetch(URLAPI).then(response => response.json().then(json => json ))) );
}

ERWÄHNENSWERT ---> @Daniel De León wahrscheinlich die sauberste Funktion *

(async () =>
    console.log(
            (await (await fetch( URLAPI )).json())
            )
)();

---

4. Die beste Antwort -> by @tggagne zeigt die Funktionalität mit HttpClient API.

Das gleiche kann mit Fetch erreicht werden. Gemäß dieser Fetch verwenden von MDN zeigt, wie man ein INIT als zweites Argument übergeben kann, was grundsätzlich die Möglichkeit eröffnet, eine API mit klassischen Methoden (get, post...) einfach zu konfigurieren.

---

// Example POST method implementation:
async function postData(url = '', data = {}) {
  // Default options are marked with *
  const response = await fetch(url, {
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, *cors, same-origin
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, *same-origin, omit
    headers: {
      'Content-Type': 'application/json'
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: 'follow', // manual, *follow, error
    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data) // body data type must match "Content-Type" header
  });
  return response.json(); // parses JSON response into native JavaScript objects
}

postData('https://example.com/answer', { answer: 42 })
  .then(data => {
    console.log(data); // JSON data parsed by `data.json()` call
  });

Knotenpunkt

Fetch ist auf Node nicht verfügbar ( Server-Seite )

Die einfachste Lösung (Ende 2021) ist die Verwendung von Axios .

$ npm install axios

Dann laufen:

const axios = require('axios');
const request = async (url) => await (await axios.get( url ));
let response = request(URL).then(resp => console.log(resp.data));