Home Home AJAX Request Example

AJAX Request Example

Here are example codes showing how to make a basic GET and POST request using XMLHttpRequest object

GET Request using XMLHttpRequest

Here is an example which works on all devices and browsers

var request;
if(window.XMLHttpRequest)
{
  request = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
  try
  {
    request = new ActiveXObject('Msxml2.XMLHTTP');
  }
  catch (e)
  {
    try
    {
      request = new ActiveXObject('Microsoft.XMLHTTP');
    }
    catch (e) {}
  }
}

var url = 'http://qnimate.com/ajax.php?key=' + encodeURIComponent(value);

request.open('GET', url);

request.onreadystatechange = function() {
  if(request.readyState === 4)
  {
    if(request.status === 200)
    {
      console.log(request.responseText)
    }
  }
};

function ajaxCallback(e){}
request.addEventListener("progress", ajaxCallback, false);
request.addEventListener("load", ajaxCallback, false);
request.addEventListener("error", ajaxCallback, false);
request.addEventListener("abort", ajaxCallback, false);

request.send(null);

POST Request using XMLHttpRequest

Here is an example which works on all devices and browsers

var request;
if(window.XMLHttpRequest)
{
  request = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
  try
  {
    request = new ActiveXObject('Msxml2.XMLHTTP');
  }
  catch (e)
  {
    try
    {
      request = new ActiveXObject('Microsoft.XMLHTTP');
    }
    catch (e) {}
  }
}

var url = 'http://qnimate.com/ajax.php?key=' + encodeURIComponent(value);

request.open('POST', url);

//use "multipart/form-data" as Content-Type if sending binary files
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

request.onreadystatechange = function() {
  if(request.readyState === 4)
  {
    if(request.status === 200)
    {
      console.log(request.responseText)
    }
  }
};

function ajaxCallback(e){}
request.addEventListener("progress", ajaxCallback, false);
request.addEventListener("load", ajaxCallback, false);
request.addEventListener("error", ajaxCallback, false);
request.addEventListener("abort", ajaxCallback, false);

request.send("key=value&key1=value1");
Narayan Prusty
Create a Drag and Drop Page Builder for WordPressAngularJS Example APP Project

Leave a Reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

3 years ago Web Development
Share this
Related Articles