How to make an AJAX call without jQuery

Question

How to make an AJAX call using JavaScript  without using jQuery

User · Answer

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

User · Answer

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  amp  amp  xmlhttp status    200               callback xmlhttp responseText                       xmlhttp open  GET   url  true       xmlhttp send        You can try similar solutions online on these links    https   www w3schools com xml tryit asp filename tryajax first https   www w3schools com xml tryit asp filename tryajax callback

User · Answer

With  vanilla  JavaScript    lt script type  text javascript  gt  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       lt  script gt    With jQuery     ajax       url   test html       context  document body      success  function            this  addClass  done

User · Answer

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  amp  amp  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  amp  amp  xmlDoc status     200          callback xmlDoc                xmlDoc send data

User · Answer

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  amp  amp  param processData    false  amp  amp  param contentType    undefined  amp  amp  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  amp  amp  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  amp  amp  param processData    false  amp  amp  param contentType    undefined  amp  amp  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   amp         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

User · Answer

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  https   github com ded Reqwest  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  https   code google com p microajax   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

User · Answer

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  lt  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   amp           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   amp     async

User · Answer

This may help   function doAjax url  callback        var xmlhttp   window XMLHttpRequest   new XMLHttpRequest     new ActiveXObject  Microsoft XMLHTTP         xmlhttp onreadystatechange   function             if  xmlhttp readyState    4  amp  amp  xmlhttp status    200                callback xmlhttp responseText                        xmlhttp open  GET   url  true       xmlhttp send

User · Answer

HTML     lt  DOCTYPE html gt       lt html gt       lt head gt       lt script gt      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  amp  amp  xmlhttp status  200                    document getElementById  myDiv   innerHTML xmlhttp responseText                        xmlhttp open  GET   1 php id 99freebies blogspot com  true       xmlhttp send               lt  script gt       lt  head gt       lt body gt        lt div id  myDiv  gt  lt h2 gt Let AJAX change this text lt  h2 gt  lt  div gt       lt button type  button  onclick  loadXMLDoc    gt Change Content lt  button gt        lt  body gt       lt  html gt    PHP    lt  php   id     GET id   print   id      gt

User · Answer

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  lt  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  lt  php     check if the variable   POST  data   exists isset    amp  amp   empty      data           POST  data       decodedData  json decode   POST  data         show a single item from the form   echo  decodedData- gt name     gt        Usage   MakeRequest

User · Answer

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  amp  amp  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   gt      if  response ok        response text   then response   gt          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

User · Answer

Use XMLHttpRequest   Simple GET request  httpRequest   new XMLHttpRequest   httpRequest open  GET    http   www example org some file   httpRequest send     Simple POST request  httpRequest   new XMLHttpRequest   httpRequest open  POST    http   www example org some endpoint   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    http   www example org some file   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

User · Answer

Here s a JSFiffle without 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

User · Answer

I know this is a fairly old question  but there is now a nicer API available natively in newer browsers  The fetch   method allow you to make web requests  For example  to request some json from  get-data   var opts       method   GET           headers        fetch   get-data   opts  then function  response      return response json        then function  body        doSomething with body        See here for more details

User · Answer

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

User · Answer

xhttp onreadystatechange   function         if  this readyState    4  amp  amp  this status    200            alert this responseText            xhttp open  quot GET quot    quot ajax info txt quot   true   xhttp send

User · Answer

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

User · Answer

How about this version in plain ES6 ES2015   function get url      return new Promise  resolve  reject    gt        const req   new XMLHttpRequest        req open  GET   url       req onload        gt  req status     200   resolve req response    reject Error req statusText        req onerror    e    gt  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    gt         Do stuff with data  if foo txt was successfully loaded      catch  err    gt         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

User · Answer

Try using the Fetch Api  Fetch API   fetch  http   example com movies json   then response   gt  response json    then data   gt  console log data      Its really clear  and 100  vanilla

User · Answer

lt html gt     lt script gt      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     lt empty gt          lt  script gt    lt body gt     lt textarea id  output  cols  70  rows  40  gt  lt empty gt  lt  textarea gt     lt br gt  lt  br gt     lt button onclick  load    gt Load lt  button gt   amp nbsp     lt button onclick  empty    gt Clear lt  button gt   lt  body gt   lt  html gt

User · Answer

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    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      Also check out new Fetch API which is a promise-based replacement for XMLHttpRequest API

User · Answer

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

User · Answer

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   amp  amp  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      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  http   www google com    POST   query join   amp        Both should be fully browser   version compatible

[javascript] How to make an AJAX call without jQuery?

Examples related to javascript

Examples related to ajax