QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Bitcoin BankingBuy, Sell, Store and Earn Interest
  • Home
  • QIdea
  • QTrack
Home Carbon Ads 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");
Apr 18, 2015Narayan Prusty
Create a Drag and Drop Page Builder for WordPressAngularJS Example APP Project

Leave a Reply Cancel 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.

6 years ago Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • GET Request using XMLHttpRequest
  • POST Request using XMLHttpRequest
Related Articles
  • How To Integrate Forms On WordPress
  • Creating Triangles And Circles Using CSS
  • Disable Text Selection in Phonegap
  • Intel XDK Copy to Clipboard
  • JavaScript “…” Operator
Our Sponsor
Freelance: I am available
@narayanprusty
Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





Will get back to you soon!!!
WordPress
ReactJS
Meteor
Blockchain
Serverless
Kubernetes
DevOps
DB & Storage
Ejabberd
Let's get started
My Books

2014 - 2015 © QNimate
All tutorials MIT license