Ajax – Simple Ajax POST Request

Ajax is very popular in websites nowadays. You can make a simple Ajax POST Request with only 2 files as shown as below.

First, create the post.html

    <script type="text/javascript" src="js/simple_ajax_post.js"></script>
        <td>First Name:</td>
        <td><textarea id="FirstName" cols="30" rows="1"></textarea></td>
        <td>Last Name:</td>
        <td><textarea id="LastName" cols="30" rows="1"></textarea></td>
        <td colspan=2><input type="button" name="button" value="Submit" onclick="get(this.parentNode);"></td>

    <span name="myspan" id="myspan"></span>


Create the js/simple_ajax_post.js to handle the XMLHttpRequest.

var http_request = false;

function makePOSTRequest(url, parameters) {
  http_request = false;
  if (window.XMLHttpRequest) { // Mozilla, Safari,...
    http_request = new XMLHttpRequest();
    if (http_request.overrideMimeType) {
      /* set type accordingly to anticipated content type */
  } else if (window.ActiveXObject) { // IE
    try {
      http_request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        http_request = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {}
  if (!http_request) {
    alert('Cannot create XMLHTTP instance');
    return false;

  http_request.onreadystatechange = alertContents;
  http_request.open('POST', url, true);
  http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  http_request.setRequestHeader("Content-length", parameters.length);
  http_request.setRequestHeader("Connection", "close");

function alertContents() {
  if (http_request.readyState == 4) {
    if (http_request.status == 200) {
      /* Return from post.php */
      result = http_request.responseText;
      document.getElementById('myspan').innerHTML = result;
    } else {
      alert('There was a problem with the request.');

function get(obj) {
  var poststr = "FirstName=" + encodeURI( document.getElementById("FirstName").value ) +
                "&LastName=" + encodeURI( document.getElementById("LastName").value );
  makePOSTRequest('post.php', poststr);


Also create the post.php in the same directory

  // your code ...


Try your Ajax form now


Reference: AJAX Form POST Request – HTML Form POST/Submit with AJAX/Javascript Example/Tutorial

Done =)js


8 thoughts on “Ajax – Simple Ajax POST Request”

  1. How do I do if I want to send more then two input variables from the form?

    I tried (like is in the line 47) but did not work:

    function get(obj) {
      var poststr = "FirstName=" + encodeURI( document.getElementById("FirstName").value ) +
        "&LastName=" + encodeURI( document.getElementById("LastName").value ) +
        "&Email=" + encodeURI( document.getElementById("Email").value );
      makePOSTRequest('post.php', poststr);

    Please help me 😦


      1. Yeah. I did that. Yesterday I tried it one million times but did not work. But today when I was getting my code ready to post here, it just worked: It was possible to pass Email from the input to post.php file. 0_0′
        Thanks alot Ykyuen 😉


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s