Wie mache ich einen AJAX-Anruf ohne jQuery?

789

Wie erstelle ich einen AJAX-Aufruf mit JavaScript ohne jQuery?

discky
quelle
20
Bitte beachten Sie, dass viele der Antworten hier darauf hindeuten, auf Readystatechange zu warten . Moderne Browser unterstützen jetzt jedoch die Lade- , Abbruch- , Fortschritts- und Fehlerereignisse für XMLHttpRequest (Sie werden sich wahrscheinlich nur um das Laden kümmern ).
Paul S.
2
@ImadoddinIbnAlauddin zum Beispiel, wenn die Hauptfunktionalität (DOM-Traversing) nicht benötigt wird.
SET
8
youmightnotneedjquery.com viele reine js Beispiele inkl. Ajax für ie8 +, ie9 + und ie10 +
Sanya_Zol
1
w3schools haben eine schöne schrittweise Einführung in Ajax ohne jquery: w3schools.com/js/js_ajax_intro.asp
eli
Sie können auch EHTML verwenden: github.com/Guseyn/EHTML Verwenden Sie das e-json-Element zum Abrufen von json und zum
Zuordnen

Antworten:

591

Mit "Vanille" JavaScript:

<script type="text/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('There was an error 400');
           }
           else {
               alert('something else other than 200 was returned');
           }
        }
    };

    xmlhttp.open("GET", "ajax_info.txt", true);
    xmlhttp.send();
}
</script>

Mit jQuery:

$.ajax({
    url: "test.html",
    context: document.body,
    success: function(){
      $(this).addClass("done");
    }
});
dov.amir
quelle
1
@Fractaliste Wenn Sie die Rückrufe einfach nach den if-Blöcken aufrufen, die sich auf den xmlhttp.status beziehen, rufen Sie sie einfach dort auf und Sie sind fertig.
Jay
5
@Wade Ich denke, Gokigooooks sagt, als er mit "Vanille" JavaScript las, dachte er, es sei eine JavaScript-Bibliothek, die er herunterladen musste. Er könnte auch auf Vanilla JS verweisen .
Trisped
220

Mit dem folgenden Snippet können Sie ähnliche Aufgaben ganz einfach ausführen:

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

Hier ist der Ausschnitt:

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)
};
Petah
quelle
1
Dies ist ein wirklich guter Starthilfe, aber ich denke, Sie vermissen etwas, das in der Antwort von @ 3nigma enthalten ist. Das heißt, ich bin mir nicht sicher, wie sinnvoll es ist, bestimmte Anfragen (alle erhalten und einige Beiträge) zu stellen, ohne die Serverantwort zurückzugeben. Ich habe am Ende der Sendemethode eine weitere Zeile hinzugefügt - return x.responseText;- und dann jeden der ajax.sendAufrufe zurückgegeben.
Sam
3
@Sam Sie können [normalerweise] nicht als asynchrone Anforderung zurückkehren. Sie sollten die Antwort in einem Rückruf behandeln.
Petah
@ Sam gibt es ein Beispiel dort:ajax.get('/test.php', {foo: 'bar'}, function(responseText) { alert(responseText); });
Petah
Schöner Ausschnitt. Sollte es nicht query.join('&').replace(/%20/g, '+')stattdessen sein?
Afsantos
3
Bitte geben Sie die CORS-Anfrage auch an, indem Sie diese Zeile als Option hinzufügen. 'xhr.withCredentials = true;'
Akam
131

Ich weiß, dass dies eine ziemlich alte Frage ist, aber es gibt jetzt eine schönere API, die in neueren Browsern nativ verfügbar ist . Mit dieser fetch()Methode können Sie Webanfragen stellen. Zum Beispiel, um etwas json anzufordern von /get-data:

var opts = {
  method: 'GET',      
  headers: {}
};
fetch('/get-data', opts).then(function (response) {
  return response.json();
})
.then(function (body) {
  //doSomething with body;
});

Sehen Sie hier für weitere Details.

Will Munn
quelle
9
Eigentlich wäre es falsch zu behaupten, dass die Fetch-API in "neueren Browsern" funktioniert, da IE und Edge sie nicht unterstützen. (Edge 14 erfordert, dass der Benutzer diese Funktion speziell aktiviert.) Caniuse.com/#feat=fetch
Saluce
7
GitHubs Polyfill sollte hier erwähnt werden. github.com/github/fetch
TylerY86
7
Fügen Sie einfach <script src="https://cdn.rawgit.com/github/fetch/master/fetch.js"></script>Fetch hinzu und verwenden Sie es wie einen Champion.
TylerY86
7
@saluce Jetzt ist es standardmäßig in Edge 14 aktiviert (und IE ist kein "neuer" Browser mehr :-)
Supersharp
1
Verwenden Sie Fetch nicht auf Mobilgeräten. Es gibt ein Problem mit dem unteren Gehäuse des HTTP-Headers unter Android. Funktioniert gut unter iOS.
Kenny Lim
103

Sie können die folgende Funktion verwenden:

function callAjax(url, callback){
    var xmlhttp;
    // compatible with 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 über diese Links ausprobieren:

AbdelHady
quelle
Es wäre auch schön, eine Eingabevariable für die Anfrage hinzuzufügen (wird in xmlhttp.send (Anfrage) verwendet;)
Pavel Perna
2
@PavelPerna, da das Beispiel hier ein ist GET, können Sie sie einfach zur Anfrage hinzufügen, aber um allgemeiner zu sein, ich bin bei Ihnen, ich habe wirklich darüber nachgedacht, die Antwort zu aktualisieren, um Anforderungsparameter als Parameter für die Funktion hier zu akzeptieren , & auch um die Methode ( GEToder POST) zu bestehen, aber was mich daran gehindert hat, ist, dass ich die Antwort hier so einfach wie möglich halten möchte, damit die Leute sie so schnell wie möglich ausprobieren können. Eigentlich hasste ich einige andere Antworten, weil sie zu lang waren, weil sie versuchen, perfekt zu sein :)
AbdelHady
40

Wie wäre es mit dieser Version in einfachem ES6 / ES2015 ?

function get(url) {
  return new Promise((resolve, reject) => {
    const req = new XMLHttpRequest();
    req.open('GET', url);
    req.onload = () => req.status === 200 ? resolve(req.response) : reject(Error(req.statusText));
    req.onerror = (e) => reject(Error(`Network Error: ${e}`));
    req.send();
  });
}

Die Funktion gibt ein Versprechen zurück . Hier ist ein Beispiel für die Verwendung der Funktion und den Umgang mit dem zurückgegebenen Versprechen :

get('foo.txt')
.then((data) => {
  // Do stuff with data, if foo.txt was successfully loaded.
})
.catch((err) => {
  // Do stuff on error...
});

Wenn Sie eine JSON-Datei laden müssen, können Sie JSON.parse()die geladenen Daten in ein JS-Objekt konvertieren.

Sie können sich auch req.responseType='json'in die Funktion integrieren, aber leider gibt es keine IE-Unterstützung dafür , also würde ich dabei bleiben JSON.parse().

Rotareti
quelle
2
Mit XMLHttpRequestmachen Sie einen asynchronen Versuch, eine Datei zu laden. Das bedeutet, dass Ihre Codeausführung fortgesetzt wird, während Ihre Datei im Hintergrund geladen wird. Um den Inhalt der Datei in Ihrem Skript verwenden zu können, benötigen Sie einen Mechanismus, der Ihrem Skript mitteilt, wann die Datei vollständig geladen wurde oder nicht geladen wurde. Hier kommen Versprechen zum Tragen. Es gibt andere Möglichkeiten, dieses Problem zu lösen, aber ich denke, Versprechen sind am bequemsten.
Rotareti
@ Rotareti Unterstützen mobile Browser diesen Ansatz?
Bodruk
Nur neuere Browserversionen unterstützen dies. Es ist üblich, Ihren Code in das neueste ES6 / 7 / .. zu schreiben und ihn mit Babel oder ähnlichem für eine bessere Browserunterstützung wieder auf ES5 zu übertragen.
Rotareti
2
@ Rotareti Können Sie auch erklären, warum dies bequemer wäre als ein "einfacher" Rückruf? Lohnt sich dieser zusätzliche Aufwand, um ihn für die Unterstützung alter Browser zu transpilieren?
Lennyklb
@LennartKloppenburg Ich denke, diese Antwort erklärt es gut: stackoverflow.com/a/14244950/1612318 "Lohnt sich dieser zusätzliche Aufwand, um es für die Unterstützung alter Browser zu transpilieren ?" Versprechen sind nur eine von vielen Funktionen, die mit ES6 / 7 geliefert wurden. Wenn Sie einen Transpiler verwenden, können Sie aktuelles JS schreiben. Das ist es wert!
Rotareti
38
 var xhReq = new XMLHttpRequest();
 xhReq.open("GET", "sumGet.phtml?figure1=5&figure2=10", false);
 xhReq.send(null);
 var serverResponse = xhReq.responseText;
 alert(serverResponse); // Shows "15"
Rafay
quelle
58
Führen Sie keine synchronen Anrufe durch. Verwenden Sie xhReq.onload und verwenden Sie die Rückrufe.
19.
3
@FellowStranger oReq.onload = function () {/*this.responseText*/};
19h
3
@kenansulayman Was ist los mit synchronen Anrufen? Manchmal passt es am besten.
Andrii Nemchenko
@Andrey: Nichts, soweit Sie feststellen, dass Sie die Ausführung von allem stoppen, bis die Antwort vom Server zurückkehrt. Nichts außergewöhnlich Schlechtes, aber für manche Anwendungen vielleicht nicht gerade ausreichend.
Mrówa
Wenn der Server aus irgendeinem Grund nie antwortet, wird der Rest Ihres Codes niemals ausgeführt.
Zufälliger Elefant
35

Verwenden Sie XMLHttpRequest .

Einfache GET-Anfrage

httpRequest = new XMLHttpRequest()
httpRequest.open('GET', 'http://www.example.org/some.file')
httpRequest.send()

Einfache POST-Anfrage

httpRequest = new XMLHttpRequest()
httpRequest.open('POST', 'http://www.example.org/some/endpoint')
httpRequest.send('some data')

Wir können angeben, dass die Anforderung asynchron (true), standardmäßig oder synchron (false) mit einem optionalen dritten Argument sein soll.

// Make a synchronous GET request
httpRequest.open('GET', 'http://www.example.org/some.file', false)

Wir können vor dem Aufruf Header setzen httpRequest.send()

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

Wir können die Antwort verarbeiten, indem wir httpRequest.onreadystatechangevor dem Aufruf eine Funktion festlegenhttpRequest.send()

httpRequest.onreadystatechange = function(){
  // Process the server response here.
  if (httpRequest.readyState === XMLHttpRequest.DONE) {
    if (httpRequest.status === 200) {
      alert(httpRequest.responseText);
    } else {
      alert('There was a problem with the request.');
    }
  }
}
HarlemSquirrel
quelle
1
Beachten Sie, dass es andere erfolgreiche Status als 200 gibt, z. B. 201
Nate Vaughan
30

Sie können das richtige Objekt je nach Browser mit erhalten

function getXmlDoc() {
  var xmlDoc;

  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlDoc = new XMLHttpRequest();
  }
  else {
    // code for IE6, IE5
    xmlDoc = new ActiveXObject("Microsoft.XMLHTTP");
  }

  return xmlDoc;
}

Mit dem richtigen Objekt kann ein GET abstrahiert werden zu:

function myGet(url, callback) {
  var xmlDoc = getXmlDoc();

  xmlDoc.open('GET', url, true);

  xmlDoc.onreadystatechange = function() {
    if (xmlDoc.readyState === 4 && xmlDoc.status === 200) {
      callback(xmlDoc);
    }
  }

  xmlDoc.send();
}

Und ein POST an:

function myPost(url, data, callback) {
  var xmlDoc = getXmlDoc();

  xmlDoc.open('POST', url, true);
  xmlDoc.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

  xmlDoc.onreadystatechange = function() {
    if (xmlDoc.readyState === 4 && xmlDoc.status === 200) {
      callback(xmlDoc);
    }
  }

  xmlDoc.send(data);
}
Brunops
quelle
18

Ich suchte nach einer Möglichkeit, Versprechen mit Ajax aufzunehmen und jQuery auszuschließen. Es gibt einen Artikel über HTML5 Rocks , in dem es um ES6-Versprechen geht. (Sie könnten eine Versprechensbibliothek wie Q polyfillieren. ) Sie können das Code-Snippet verwenden, das ich aus dem Artikel kopiert habe.

function get(url) {
  // Return a new promise.
  return new Promise(function(resolve, reject) {
    // Do the usual XHR stuff
    var req = new XMLHttpRequest();
    req.open('GET', url);

    req.onload = function() {
      // This is called even on 404 etc
      // so check the status
      if (req.status == 200) {
        // Resolve the promise with the response text
        resolve(req.response);
      }
      else {
        // Otherwise reject with the status text
        // which will hopefully be a meaningful error
        reject(Error(req.statusText));
      }
    };

    // Handle network errors
    req.onerror = function() {
      reject(Error("Network Error"));
    };

    // Make the request
    req.send();
  });
}

Hinweis: Ich habe auch einen Artikel darüber geschrieben .

Ausgerichtet
quelle
15

Eine kleine Kombination aus einigen der folgenden Beispiele und erstellt dieses einfache Stück:

function ajax(url, method, data, async)
{
    method = typeof method !== 'undefined' ? method : 'GET';
    async = typeof async !== 'undefined' ? async : false;

    if (window.XMLHttpRequest)
    {
        var xhReq = new XMLHttpRequest();
    }
    else
    {
        var xhReq = new ActiveXObject("Microsoft.XMLHTTP");
    }


    if (method == 'POST')
    {
        xhReq.open(method, url, async);
        xhReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhReq.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        xhReq.send(data);
    }
    else
    {
        if(typeof data !== 'undefined' && data !== null)
        {
            url = url+'?'+data;
        }
        xhReq.open(method, url, async);
        xhReq.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        xhReq.send(null);
    }
    //var serverResponse = xhReq.responseText;
    //alert(serverResponse);
}

// Example usage below (using a string query):

ajax('http://www.google.com');
ajax('http://www.google.com', 'POST', 'q=test');

ODER wenn Ihre Parameter Objekte sind - geringfügige zusätzliche Code-Anpassung:

var parameters = {
    q: 'test'
}

var query = [];
for (var key in parameters)
{
    query.push(encodeURIComponent(key) + '=' + encodeURIComponent(parameters[key]));
}

ajax('http://www.google.com', 'POST', query.join('&'));

Beide sollten vollständig mit Browser + Version kompatibel sein.

tfont
quelle
Lohnt es sich, hasOwnProperty hier in der for-Schleife zu verwenden?
Kibibu
15

Wenn Sie JQuery nicht einschließen möchten, würde ich einige leichtgewichtige AJAX-Bibliotheken ausprobieren.

Mein Favorit ist reqwest. Es ist nur 3,4 KB groß und sehr gut ausgebaut: https://github.com/ded/Reqwest

Hier ist ein Beispiel für eine GET-Anfrage mit reqwest:

reqwest({
    url: url,
    method: 'GET',
    type: 'json',
    success: onSuccess
});

Wenn Sie etwas noch Leichteres wollen, würde ich microAjax mit nur 0,4 KB ausprobieren: https://code.google.com/p/microajax/

Dies ist der gesamte Code hier:

function microAjax(B,A){this.bindFunction=function(E,D){return function(){return E.apply(D,[D])}};this.stateChange=function(D){if(this.request.readyState==4){this.callbackFunction(this.request.responseText)}};this.getRequest=function(){if(window.ActiveXObject){return new ActiveXObject("Microsoft.XMLHTTP")}else{if(window.XMLHttpRequest){return new XMLHttpRequest()}}return false};this.postBody=(arguments[2]||"");this.callbackFunction=A;this.url=B;this.request=this.getRequest();if(this.request){var C=this.request;C.onreadystatechange=this.bindFunction(this.stateChange,this);if(this.postBody!==""){C.open("POST",B,true);C.setRequestHeader("X-Requested-With","XMLHttpRequest");C.setRequestHeader("Content-type","application/x-www-form-urlencoded");C.setRequestHeader("Connection","close")}else{C.open("GET",B,true)}C.send(this.postBody)}};

Und hier ist ein Beispielaufruf:

microAjax(url, onSuccess);
Ryan
quelle
1
Ich denke, es gibt ein Problem mit microAjax, wenn Sie es zweimal aufrufen (aufgrund der zahlreichen "dies", denke ich, muss es eine Kollision geben). Ich weiß nicht, ob es eine gute Lösung ist, zwei "neue microAjax" zu nennen, oder?
Jill-Jênn Vie
13

Alt, aber ich werde es versuchen, vielleicht findet jemand diese Informationen nützlich.

Dies ist die minimale Menge an Code, die Sie benötigen, um eine GETAnforderung auszuführen und einige JSONformatierte Daten abzurufen . Dies gilt nur für moderne Browser wie die neuesten Versionen von Chrome , FF , Safari , Opera und Microsoft Edge .

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data.json'); // by default async 
xhr.responseType = 'json'; // in which format you expect the response to be


xhr.onload = function() {
  if(this.status == 200) {// onload called even on 404 etc so check the status
   console.log(this.response); // No need for JSON.parse()
  }
};

xhr.onerror = function() {
  // error 
};


xhr.send();

Schauen Sie sich auch die neue Fetch-API an, die einen vielversprechenden Ersatz für die XMLHttpRequest-API darstellt .

Blago Eres
quelle
9

XMLHttpRequest ()

Mit dem XMLHttpRequest()Konstruktor können Sie ein neues XMLHttpRequest(XHR) Objekt erstellen , mit dem Sie mithilfe von Standard-HTTP-Anforderungsmethoden (wie GETund POST) mit einem Server interagieren können :

const data = JSON.stringify({
  example_1: 123,
  example_2: 'Hello, world!',
});

const request = new XMLHttpRequest();

request.addEventListener('load', function () {
  if (this.readyState === 4 && this.status === 200) {
    console.log(this.responseText);
  }
});

request.open('POST', 'example.php', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);

holen()

Sie können die fetch()Methode auch verwenden , um eine zu erhalten Promise, die in das ResponseObjekt aufgelöst wird, das die Antwort auf Ihre Anfrage darstellt:

const data = JSON.stringify({
  example_1: 123,
  example_2: 'Hello, world!',
});

fetch('example.php', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
  },
  body: data,
}).then(response => {
  if (response.ok) {
    response.text().then(response => {
      console.log(response);
    });
  }
});

navigator.sendBeacon ()

Wenn Sie jedoch lediglich versuchen, POSTDaten abzurufen, und keine Antwort vom Server benötigen, ist die kürzeste Lösung die Verwendung von navigator.sendBeacon():

const data = JSON.stringify({
  example_1: 123,
  example_2: 'Hello, world!',
});

navigator.sendBeacon('example.php', data);
Grant Miller
quelle
1
Ihre Antworten gefallen mir sehr gut, da Sie die meisten Fälle auch für Internet Explorer mit XMLHttpRequest abdecken, aber ich würde empfehlen, das: "const data = ..." in diesem Beispiel in "var data = ..." zu ändern (XMLHttpRequest) so ist es voll kompatibel damit
Dazag
8

Von youMightNotNeedJquery.com +JSON.stringify

var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(JSON.stringify(data));
Mikel
quelle
7

Dies kann helfen:

function doAjax(url, callback) {
    var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            callback(xmlhttp.responseText);
        }
    }

    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}
Ashish Kumar
quelle
4
<html>
  <script>
    var xmlDoc = null ;

  function load() {
    if (typeof window.ActiveXObject != 'undefined' ) {
      xmlDoc = new ActiveXObject("Microsoft.XMLHTTP");
      xmlDoc.onreadystatechange = process ;
    }
    else {
      xmlDoc = new XMLHttpRequest();
      xmlDoc.onload = process ;
    }
    xmlDoc.open( "GET", "background.html", true );
    xmlDoc.send( null );
  }

  function process() {
    if ( xmlDoc.readyState != 4 ) return ;
    document.getElementById("output").value = xmlDoc.responseText ;
  }

  function empty() {
    document.getElementById("output").value = '<empty>' ;
  }
</script>

<body>
  <textarea id="output" cols='70' rows='40'><empty></textarea>
  <br></br>
  <button onclick="load()">Load</button> &nbsp;
  <button onclick="empty()">Clear</button>
</body>
</html>
Vosobe Kapsimanis
quelle
4

Nun, es ist nur eine einfache 4-Schritt-Prozedur.

Ich hoffe, es hilft

Step 1. Speichern Sie den Verweis auf das XMLHttpRequest-Objekt

var xmlHttp = createXmlHttpRequestObject();

Step 2. Rufen Sie das XMLHttpRequest-Objekt ab

function createXmlHttpRequestObject() {
    // will store the reference to the XMLHttpRequest object
    var xmlHttp;
    // if running Internet Explorer
    if (window.ActiveXObject) {
        try {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            xmlHttp = false;
        }
    }
    // if running Mozilla or other browsers
    else {
        try {
            xmlHttp = new XMLHttpRequest();
        } catch (e) {
            xmlHttp = false;
        }
    }
    // return the created object or display an error message
    if (!xmlHttp)
        alert("Error creating the XMLHttpRequest object.");
    else
        return xmlHttp;
}

Step 3. Stellen Sie eine asynchrone HTTP-Anforderung mit dem XMLHttpRequest-Objekt

function process() {
    // proceed only if the xmlHttp object isn't busy
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) {
        // retrieve the name typed by the user on the form
        item = encodeURIComponent(document.getElementById("input_item").value);
        // execute the your_file.php page from the server
        xmlHttp.open("GET", "your_file.php?item=" + item, true);
        // define the method to handle server responses
        xmlHttp.onreadystatechange = handleServerResponse;
        // make the server request
        xmlHttp.send(null);
    }
}

Step 4. Wird automatisch ausgeführt, wenn eine Nachricht vom Server empfangen wird

function handleServerResponse() {

    // move forward only if the transaction has completed
    if (xmlHttp.readyState == 4) {
        // status of 200 indicates the transaction completed successfully
        if (xmlHttp.status == 200) {
            // extract the XML retrieved from the server
            xmlResponse = xmlHttp.responseText;
            document.getElementById("put_response").innerHTML = xmlResponse;
            // restart sequence
        }
        // a HTTP status different than 200 signals an error
        else {
            alert("There was a problem accessing the server: " + xmlHttp.statusText);
        }
    }
}
Prateek Joshi
quelle
3

in einfachem JavaScript im Browser:

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
  if (xhr.readyState == XMLHttpRequest.DONE ) {
    if(xhr.status == 200){
      console.log(xhr.responseText);
    } else if(xhr.status == 400) {
      console.log('There was an error 400');
    } else {
      console.log('something else other than 200 was returned');
    }
  }
}

xhr.open("GET", "mock_data.json", true);

xhr.send();

Oder wenn Sie Browserify verwenden möchten, um Ihre Module mithilfe von node.js zu bündeln. Sie können superagent verwenden :

var request = require('superagent');
var url = '/mock_data.json';

 request
   .get(url)
   .end(function(err, res){
     if (res.ok) {
       console.log('yay got ' + JSON.stringify(res.body));
     } else {
       console.log('Oh no! error ' + res.text);
     }
 });
svnm
quelle
3

Hier ist ein JSFiffle ohne JQuery

http://jsfiddle.net/rimian/jurwre07/

function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();
    var url = 'http://echo.jsontest.com/key/value/one/two';

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == XMLHttpRequest.DONE) {
            if (xmlhttp.status == 200) {
                document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
            } else if (xmlhttp.status == 400) {
                console.log('There was an error 400');
            } else {
                console.log('something else other than 200 was returned');
            }
        }
    };

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

loadXMLDoc();
Rimian
quelle
3
var load_process = false;
function ajaxCall(param, response) {

 if (load_process == true) {
     return;
 }
 else
 { 
  if (param.async == undefined) {
     param.async = true;
 }
 if (param.async == false) {
         load_process = true;
     }
 var xhr;

 xhr = new XMLHttpRequest();

 if (param.type != "GET") {
     xhr.open(param.type, param.url, true);

     if (param.processData != undefined && param.processData == false && param.contentType != undefined && param.contentType == false) {
     }
     else if (param.contentType != undefined || param.contentType == true) {
         xhr.setRequestHeader('Content-Type', param.contentType);
     }
     else {
         xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
     }


 }
 else {
     xhr.open(param.type, param.url + "?" + obj_param(param.data));
 }

 xhr.onprogress = function (loadTime) {
     if (param.progress != undefined) {
         param.progress({ loaded: loadTime.loaded }, "success");
     }
 }
 xhr.ontimeout = function () {
     this.abort();
     param.success("timeout", "timeout");
     load_process = false;
 };

 xhr.onerror = function () {
     param.error(xhr.responseText, "error");
     load_process = false;
 };

 xhr.onload = function () {
    if (xhr.status === 200) {
         if (param.dataType != undefined && param.dataType == "json") {

             param.success(JSON.parse(xhr.responseText), "success");
         }
         else {
             param.success(JSON.stringify(xhr.responseText), "success");
         }
     }
     else if (xhr.status !== 200) {
         param.error(xhr.responseText, "error");

     }
     load_process = false;
 };
 if (param.data != null || param.data != undefined) {
     if (param.processData != undefined && param.processData == false && param.contentType != undefined && param.contentType == false) {
             xhr.send(param.data);

     }
     else {
             xhr.send(obj_param(param.data));

     }
 }
 else {
         xhr.send();

 }
 if (param.timeout != undefined) {
     xhr.timeout = param.timeout;
 }
 else
{
 xhr.timeout = 20000;
}
 this.abort = function (response) {

     if (XMLHttpRequest != null) {
         xhr.abort();
         load_process = false;
         if (response != undefined) {
             response({ status: "success" });
         }
     }

 }
 }
 }

function obj_param(obj) {
var parts = [];
for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
        parts.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
    }
}
return parts.join('&');
}

Mein Ajax-Anruf

  var my_ajax_call=ajaxCall({
    url: url,
    type: method,
    data: {data:value},
    dataType: 'json',
    async:false,//synchronous request. Default value is true 
    timeout:10000,//default timeout 20000
    progress:function(loadTime,status)
    {
    console.log(loadTime);
     },
    success: function (result, status) {
      console.log(result);
    },
      error :function(result,status)
    {
    console.log(result);
     }
      });

für den Abbruch früherer Anfragen

      my_ajax_call.abort(function(result){
       console.log(result);
       });
karthikeyan ganesan
quelle
2

HTML:

<!DOCTYPE html>
    <html>
    <head>
    <script>
    function loadXMLDoc()
    {
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","1.php?id=99freebies.blogspot.com",true);
    xmlhttp.send();
    }
    </script>
    </head>
    <body>

    <div id="myDiv"><h2>Let AJAX change this text</h2></div>
    <button type="button" onclick="loadXMLDoc()">Change Content</button>

    </body>
    </html>

PHP:

<?php

$id = $_GET[id];
print "$id";

?>
99freebies.blogspot.com
quelle
Einzeilige, wenn keine geschweiften Klammern benötigt werden, niemand verwendet IE6. Dies wurde wahrscheinlich kopiert, verwendet Onload anstelle von onreadystatechange, fängt Fehler für mögliche rekursive Aufrufe ab, xmlhttp ist ein schrecklicher Variablenname, nennen Sie es einfach x.
Super
1

Eine sehr gute Lösung mit reinem Javascript ist hier

/*create an XMLHttpRequest object*/

let GethttpRequest=function(){  
  let httpRequest=false;
  if(window.XMLHttpRequest){
    httpRequest   =new XMLHttpRequest();
    if(httpRequest.overrideMimeType){
    httpRequest.overrideMimeType('text/xml');
    }
  }else if(window.ActiveXObject){
    try{httpRequest   =new ActiveXObject("Msxml2.XMLHTTP");
  }catch(e){
      try{
        httpRequest   =new ActiveXObject("Microsoft.XMLHTTP");
      }catch(e){}
    }
  }
  if(!httpRequest){return 0;}
  return httpRequest;
}

  /*Defining a function to make the request every time when it is needed*/

  function MakeRequest(){

    let uriPost       ="myURL";
    let xhrPost       =GethttpRequest();
    let fdPost        =new FormData();
    let date          =new Date();

    /*data to be sent on server*/
    let data          = { 
                        "name"      :"name",
                        "lName"     :"lName",
                        "phone"     :"phone",
                        "key"       :"key",
                        "password"  :"date"
                      };

    let JSONdata =JSON.stringify(data);             
    fdPost.append("data",JSONdata);
    xhrPost.open("POST" ,uriPost, true);
    xhrPost.timeout = 9000;/*the time you need to quit the request if it is not completed*/
    xhrPost.onloadstart = function (){
      /*do something*/
    };
    xhrPost.onload      = function (){
      /*do something*/
    };
    xhrPost.onloadend   = function (){
      /*do something*/
    }
    xhrPost.onprogress  =function(){
      /*do something*/
    }

    xhrPost.onreadystatechange =function(){

      if(xhrPost.readyState < 4){

      }else if(xhrPost.readyState === 4){

        if(xhrPost.status === 200){

          /*request succesfull*/

        }else if(xhrPost.status !==200){

          /*request failled*/

        }

      }


   }
  xhrPost.ontimeout = function (e){
    /*you can stop the request*/
  }
  xhrPost.onerror = function (){
    /*you can try again the request*/
  };
  xhrPost.onabort = function (){
    /*you can try again the request*/
  };
  xhrPost.overrideMimeType("text/plain; charset=x-user-defined-binary");
  xhrPost.setRequestHeader("Content-disposition", "form-data");
  xhrPost.setRequestHeader("X-Requested-With","xmlhttprequest");
  xhrPost.send(fdPost);
}

/*PHP side
<?php
  //check if the variable $_POST["data"] exists isset() && !empty()
  $data        =$_POST["data"];
  $decodedData =json_decode($_POST["data"]);
  //show a single item from the form
  echo $decodedData->name;

?>
*/

/*Usage*/
MakeRequest();
Ir Calif
quelle