Wie man einen AJAX Anruf ohne jQuery macht?

Mit dem folgenden Codefragment können Sie ähnliche Dinge tun, ziemlich leicht, so wie hier:

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

Hier ist das snippet:

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

InformationsquelleAutor der Antwort Petah

Ich weiß, das ist eine ziemlich alte Frage, aber es ist jetzt ein schöner verfügbare API, die nativ in neuere Browser. Die fetch() Methode ermöglichen es Ihnen, um web-Anfragen.
Zum Beispiel verlangen einige json von /get-data:

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

Sehen hier für mehr details.

InformationsquelleAutor der Antwort Will Munn

Wie wäre es mit dieser version in plain 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();
  });
}

Gibt die Funktion einen Versprechen. Hier ist ein Beispiel zur Verwendung der Funktion und der Handhabung der Versprechen es gibt:

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

Wenn Sie brauchen, um zu laden, eine json-Datei, die Sie verwenden können, JSON.parse() zum konvertieren der geladenen Daten in ein JS-Objekt.

Können Sie auch integrieren req.responseType='json' in der Funktion, aber leider gibt es keine IE-Unterstützung für Sie, so würde ich stick mit JSON.parse().

InformationsquelleAutor der Antwort Rotareti

War ich auf der Suche nach Weg, zu enthalten verspricht mit ajax und ausschließen jQuery. Es gibt einen Artikel auf HTML5 Rocks, dass die Gespräche über ES6 promises (könnte polyfill mit einem Versprechen-Bibliothek wie Q), verwenden Sie das code-snippet, dass ich kopiert aus dem Artikel.

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 schrieb auch einen Artikel über dieses.

InformationsquelleAutor der Antwort Aligned

Eine kleine Kombination aus ein paar von den Beispielen, und hat 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-Objekt(s) - 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 browser + version kompatibel.

InformationsquelleAutor der Antwort tfont

Alt, aber ich werde versuchen, vielleicht wird jemand finden, der diese info nützlich.

Dies ist die minimale Menge an code, den Sie tun müssen, um eine GET Anfrage und Holen JSON formatierte Daten. Dies gilt nur für moderne Browser wie die aktuellen Versionen von Chrome, FF, Safari, Oper und Microsoft Rand.

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 neue Fetch API das ist ein Versprechen-basierten Ersatz für XMLHttpRequest-API.

InformationsquelleAutor der Antwort Ogalb

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

InformationsquelleAutor der Antwort Mikel

Gut, es ist nur ein 4 Schritt einfach proceess,

Ich hoffe, es hilft

Step 1. Speichern die Referenz auf das XMLHttpRequest-Objekt

var xmlHttp = createXmlHttpRequestObject();

Step 2. Abrufen, das XMLHttpRequest-Objekt

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

InformationsquelleAutor der Antwort Prateek Joshi

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

  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 abort Vorherige Anfragen

      my_ajax_call.abort(function(result){
       console.log(result);
       });

InformationsquelleAutor der Antwort karthikeyan ganesan

in plain 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 verwenden möchten Browserify zu bündeln, um Ihre Module zu verwenden node.js. Sie können superagent:

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

InformationsquelleAutor der Antwort steven iseki