HTTP -Anfrage in JavaScript?

Question

Ich muss eine machen Http bekommen Anfrage in JavaScript. Was ist der beste Weg, um das zu tun?

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

Answer 1

Browser (und Dashcode) bieten ein XMLHTTPREquest -Objekt, mit dem HTTP -Anforderungen von JavaScript erstellt 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;
}

Synchrone Anfragen werden jedoch entmutigt und erzeugen eine Warnung nach::

Hinweis: Beginnend mit Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / Seamonkey 2.27), Aufgrund der negativen Auswirkungen auf die Benutzererfahrung.

Sie sollten eine asynchrone Anfrage stellen und die Antwort in einem Ereignishandler behandeln.

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

Answer 2

In jQuery:

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

Answer 3

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

Hier ist eine JavaScript -Klasse, die wir erstellt haben, die wiederverwendbar und einfach zu bedienen ist. Derzeit hat es nur eine GET -Methode, aber das funktioniert für uns. Das Hinzufügen eines Beitrags sollte die Fähigkeiten von niemandem besteuern.

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

Es ist so einfach wie:

var client = new HttpClient();
client.get('http://some/thing?with=arguments', function(response) {
    // do something with response
});

Answer 4

Eine Version ohne Rückruf

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

Answer 5

Das neue window.fetch API ist ein sauberer Ersatz für XMLHttpRequest Das nutzt ES6 -Versprechen. Es gibt eine schöne Erklärung hier, aber es läuft auf (aus dem Artikel) hinaus:

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

Browserunterstützung ist jetzt gut in den neuesten Veröffentlichungen (arbeitet in Chrome, Firefox, Edge (V14), Safari (V10.1), Opera, Safari iOS (V10.3), Android -Browser und Chrome für Android), dh dh wird jedoch wahrscheinlich nicht nicht Holen Sie sich offizielle Unterstützung. Github hat eine Polyfill Erhältlich wird empfohlen, um ältere Browser zu unterstützen, die immer noch weitgehend verwendet werden (ESP -Versionen von Safari vor März 2017 und mobiler Browser aus dem gleichen Zeitraum).

Ich denke, ob dies bequemer ist als JQuery oder XMLHTTPrequest oder nicht von der Art des Projekts.

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

Bearbeiten:

Mit ES7 Async/Awit wird dies einfach (basierend auf Dieser Kern):

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

Answer 6

Hier ist Code, um es direkt mit JavaScript zu tun. Wie bereits erwähnt, wären Sie jedoch mit einer JavaScript -Bibliothek viel besser dran. Mein Favorit ist JQuery.

In dem folgenden Fall wird eine ASPX -Seite (die als Rastdienst eines armen Mannes bedient) 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 7

Eine kopierische Version fertige 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 8

IE wird URLs zwischenspeichern, um das Laden schneller zu gestalten. Wenn Sie jedoch in Intervallen einen Server befragen, um neue Informationen zu erhalten, wird der IE die URL zwischengespeichert und wird wahrscheinlich denselben Datensatz zurückgeben, den Sie immer hatten.

Unabhängig davon, wie Sie Ihre Get -Anfrage - Vanilla JavaScript, Prototyp, JQuery usw. - durchführen - stellen Sie sicher, dass Sie einen Mechanismus zur Bekämpfung des Caching einrichten. Um das zu bekämpfen, fügen Sie eine einzigartige Token bis zum Ende der URL an, die Sie treffen werden. Dies kann erledigt werden durch:

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

Dadurch wird ein einzigartiger Zeitstempel bis zum Ende der URL angehängt und verhindern, dass ein Zwischenspeicher stattfindet.

Answer 9

Kurz und rein:

const http = new XMLHttpRequest()

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

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

Answer 10

Prototyp macht es einfach tot

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

Answer 11

Ich bin mit Mac OS -Dashcode -Widgets nicht vertraut, aber wenn Sie JavaScript -Bibliotheken und Unterstützung verwenden können Xmlhttprequests, Ich würde benutzen JQuery Und so etwas tun:

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

Answer 12

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 Sie sind definitiv mit diesem Code in Sicherheit.

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

Answer 13

Vergessen Sie in der info.plist -Datei Ihres Widgets nicht, Ihre festzulegen AllowNetworkAccess Schlüssel zu wahr.

Answer 14

Der beste Weg ist die Verwendung von AJAX (Sie finden ein einfaches Tutorial auf dieser Seite Tizag). Der Grund dafür ist, dass jede andere Technik, die Sie verwenden können, mehr Code erfordert. Es wird nicht garantiert, dass er ohne Nacharbeit Kreuzbrowser funktioniert. Sie müssen mehr Client -Speicher verwenden, indem Sie versteckte Seiten in Frames öffnen, die URLs übergeben, die ihre Daten analysieren und sie schließen. Ajax ist der richtige Weg in diese Situation. Dass meine zwei Jahre javaScript schwere Entwicklung spricht.

Answer 15

Für diejenigen, die benutzen Angularjs, es ist $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.
  });

Answer 16

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

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

   xmlhttp.open("GET","URL",true);
   xmlhttp.send();
   

2. Dieser basiert auf JQuery. Sie müssen die URL und den Funktionsname angeben, den Sie anrufen möchten.

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

Answer 17

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 Anfrage nach Anfragen getan werden.
Schauen Sie sich diesen Link an JavaScript -Postanforderung wie ein Formular Senden

Answer 18

Zu dieser Fetch -API ist der empfohlene Ansatz unter Verwendung von JavaScript -Versprechen. 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 ein großartiger Demo holen und MDN -Dokumente

Answer 19

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

Answer 20

Ajax

Sie wären am besten mit einer Bibliothek wie dem Prototyp oder JQuery.

Answer 21

Wenn Sie den Code für ein Dashboard -Widget verwenden möchten und keine JavaScript -Bibliothek in jedes von Ihnen erstellte Widget einbeziehen möchten, können Sie das Objekt XMLHTTPREquest verwenden, das Safari nativ unterstützt.

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

Answer 22

Um die beste Antwort von Joann mit Versprechen zu aktualisieren, 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();
    });
}

Answer 23

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: Weitere Details: HTML5ROCKS -Tutorial

Answer 24

Hier finden Sie eine Alternative zu XML -Dateien, um Ihre Dateien als Objekt zu laden und auf Eigenschaften als Objekt auf sehr schnelle Weise zugreifen zu können.

• Aufmerksamkeit, damit JavaScript ihn und den Inhalt richtig interpretieren kann, muss Ihre Dateien im selben Format wie Ihre HTML -Seite gespeichert werden. 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 diese:

      Property1: value
      Property2: value
      etc.

Speichern Sie Ihre Datei .. Rufen Sie jetzt die Funktion an ....

    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 die Gruppe zu kontaktieren. Danke von dir wie :)

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

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