Wie kann ich einen AJAX-Aufruf ohne jQuery machen?

Question

Wie kann ich einen AJAX-Aufruf mit JavaScript machen, ohne jQuery zu verwenden?

Answer 1

Mit "Vanilla" (plain) JavaScript:

function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE) { // XMLHttpRequest.DONE == 4
           if (xmlhttp.status == 200) {
               document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
           }
           else if (xmlhttp.status == 400) {
              alert('Es gab einen Fehler 400');
           }
           else {
               alert('Etwas anderes als 200 wurde zurückgegeben');
           }
        }
    };

    xmlhttp.open("GET", "ajax_info.txt", true);
    xmlhttp.send();
}

Mit jQuery:

$.ajax({
    url: "test.html",
    context: document.body,
    success: function() {
      $(this).addClass("done");
    }
});

Answer 2

Mit dem folgenden Schnipsel können Sie ähnliche Dinge ziemlich einfach machen, wie zum Beispiel:

ajax.get('/test.php', {foo: 'bar'}, function() {});

Hier ist der Schnipsel:

var ajax = {};
ajax.x = function () {
    if (typeof XMLHttpRequest !== 'undefined') {
        return new XMLHttpRequest();
    }
    var versions = [
        "MSXML2.XmlHttp.6.0",
        "MSXML2.XmlHttp.5.0",
        "MSXML2.XmlHttp.4.0",
        "MSXML2.XmlHttp.3.0",
        "MSXML2.XmlHttp.2.0",
        "Microsoft.XmlHttp"
    ];

    var xhr;
    for (var i = 0; i < versions.length; i++) {
        try {
            xhr = new ActiveXObject(versions[i]);
            break;
        } catch (e) {
        }
    }
    return xhr;
};

ajax.send = function (url, callback, method, data, async) {
    if (async === undefined) {
        async = true;
    }
    var x = ajax.x();
    x.open(method, url, async);
    x.onreadystatechange = function () {
        if (x.readyState == 4) {
            callback(x.responseText)
        }
    };
    if (method == 'POST') {
        x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    }
    x.send(data)
};

ajax.get = function (url, data, callback, async) {
    var query = [];
    for (var key in data) {
        query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
    }
    ajax.send(url + (query.length ? '?' + query.join('&') : ''), callback, 'GET', null, async)
};

ajax.post = function (url, data, callback, async) {
    var query = [];
    for (var key in data) {
        query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
    }
    ajax.send(url, callback, 'POST', query.join('&'), async)
};

Answer 3

Es gibt jetzt eine schönere Fetch API, die nativ in modernen Browsern verfügbar ist. Die Methode fetch() ermöglicht es Ihnen, Webanfragen zu stellen. Zum Beispiel, um JSON von /get-data anzufordern:

let options = {
  method: 'GET',      
  headers: {}
};

fetch('/get-data', options)
.then(response => response.json())
.then(body => {
  // Mach etwas mit dem body
});

Siehe MDN Web Docs: Nutzung der Fetch API für weitere Details.

async/await

Oder wenn Sie die Syntax async und await nutzen möchten, machen Sie dies:

async function doApi(url) {
  const response = await fetch(url);
  if( response.ok ) {
    if( 200 <= response.status && response.status <= 299 ) {
      const result = await response.json();
      // Mach etwas Tolles mit dem Ergebnis
    } else {
      console.log( `erhielt ein ${response.status}` );
    }
  }
}

Natürlich möchten Sie vielleicht die Antwortcodes usw. überprüfen, aber die Dokumentation behandelt das sehr ausführlich.

Answer 4

Sie können die folgende Funktion verwenden:

function callAjax(url, callback){
    var xmlhttp;
    // kompatibel mit IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function(){
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
            callback(xmlhttp.responseText);
        }
    }
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}

Sie können ähnliche Lösungen online auf diesen Links ausprobieren:

• https://www.w3schools.com/xml/tryit.asp?filename=tryajax_first
• https://www.w3schools.com/xml/tryit.asp?filename=tryajax_callback

Answer 5

xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        alert(this.responseText);
    }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

Die asynchrone Version würde so aussehen

var xhttp = new XMLHttpRequest();
xhttp.onload = function() {
    if (this.status == 200) {
        alert(this.responseText);
    }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();