How can I make an AJAX call using JavaScript, without using jQuery?

24 Answers

With "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('There was an error 400'); } else { alert('something else other than 200 was returned'); } } }; xmlhttp.open("GET", "ajax_info.txt", true); xmlhttp.send(); } 

With jQuery:

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

Using the following snippet you can do similar things pretty easily, like this:

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

Here is the 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) }; 

There is now a nicer Fetch API available natively in modern browsers. The fetch() method allows you to make web requests. For example, to request some JSON from /get-data:

let options = { method: 'GET', headers: {} }; fetch('/get-data', options) .then(response => response.json()) .then(body => { // Do something with body }); 

See MDN Web Docs: Using the Fetch API for more details.

You can use the following function:

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

You can try similar solutions online on these links:

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

How about this 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(); }); } 

The function returns a promise. Here is an example on how to use the function and handle the promise it returns:

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

If you need to load a json file you can use JSON.parse() to convert the loaded data into an JS Object.

You can also integrate req.responseType='json' into the function but unfortunately there is no IE support for it, so I would stick with JSON.parse().

Use XMLHttpRequest.

Simple GET request

httpRequest = new XMLHttpRequest() httpRequest.open('GET', ') httpRequest.send() 

Simple POST request

httpRequest = new XMLHttpRequest() httpRequest.open('POST', ') httpRequest.send('some data') 

We can specify that the request should be asynchronous(true), the default, or synchronous(false) with an optional third argument.

// Make a synchronous GET request httpRequest.open('GET', ' false) 

We can set headers before calling httpRequest.send()

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

We can handle the response by setting httpRequest.onreadystatechange to a function before calling httpRequest.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.'); } } } 

You can get the correct object according to the browser with

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

With the correct object, a GET might can be abstracted to:

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

And a POST to:

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

I was looking for a way to include promises with ajax and exclude jQuery. There's an article on HTML5 Rocks that talks about ES6 promises. (You could polyfill with a promise library like Q) You can use the code snippet that I copied from the article.

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

Note: I also wrote an article about this.

A small combination from a couple of the examples below and created this simple piece:

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('); ajax(' 'POST', 'q=test'); 

OR if your parameters are object(s) - minor additional code adjustment:

var parameters = { q: 'test' } var query = []; for (var key in parameters) { query.push(encodeURIComponent(key) + '=' + encodeURIComponent(parameters[key])); } ajax(' 'POST', query.join('&')); 

Both should be fully browser + version compatible.

If you don't want to include JQuery, I'd try out some lightweight AJAX libraries.

My favorite is reqwest. It's only 3.4kb and very well built out:

Here's a sample GET request with reqwest:

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

Now if you want something even more lightweight, I'd try microAjax at a mere 0.4kb:

This is all the code right here:

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

And here's a sample call:

microAjax(url, onSuccess); 

XMLHttpRequest()

You can use the XMLHttpRequest() constructor to create a new XMLHttpRequest (XHR) object which will allow you to interact with a server using standard HTTP request methods (such as GET and POST):

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

fetch()

You can also use the fetch() method to obtain a Promise which resolves to the Response object representing the response to your request:

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

On the other hand, if you are simply attempting to POST data and do not need a response from the server, the shortest solution would be to use navigator.sendBeacon():

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

Old but I will try, maybe someone will find this info useful.

This is the minimal amount of code you need to do a GET request and fetch some JSON formatted data. This is applicable only to modern browsers like latest versions of Chrome, FF, Safari, Opera and Microsoft Edge.

const xhr = new XMLHttpRequest(); xhr.open('GET', '); // 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(); 

Also check out new Fetch API which is a promise-based replacement for XMLHttpRequest API.

Try using the Fetch Api (Fetch API)

fetch(').then(response => response.json()).then(data => console.log(data)); 

Its really clear, and 100% vanilla.

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

This may help:

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

<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 cols='70' rows='40'><empty></textarea> <br></br> <button onclick="load()">Load</button> &nbsp; <button onclick="empty()">Clear</button> </body> </html> 

Well it is just a 4 step easy proceess,

I hope it helps

Step 1. Store the reference to the XMLHttpRequest object

var xmlHttp = createXmlHttpRequestObject(); 

Step 2. Retrieve the XMLHttpRequest object

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. Make asynchronous HTTP request using the XMLHttpRequest object

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. Executed automatically when a message is received from the server

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

in plain JavaScript in the 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(); 

Or if you want to use Browserify to bundle your modules up using node.js. You can use 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); } }); 

Here's a JSFiffle without JQuery

function loadXMLDoc() { var xmlhttp = new XMLHttpRequest(); var url = ' 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(); 

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('&'); } 

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

for abort previous requests

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

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><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"; ?> 

A verry good solution with pure javascript is here

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

Fast code fetch without jQuery

async function product_serach(word) { var response = await fetch('<?php echo base_url(); ?>home/product_search?search='+word); var json = await response.json(); for (let [key, value] of Object.entries(json)) { console.log(json) } }