AJAX Post Implementation in Pure Javascript

Question

is there any implementation of AJAX Post in Pure Javascript (maybe using xmlhttprequest)?

For example if I have a form like this:

<form action="request.php" id="register_form">
  <input type="text" name="first_name" placeholder="First Name">
  <input type="text" name="last_name" placeholder="LastName">
  <input type="submit" value="submit_now">
</form>

and this is my implementation of the AJAX in jQuery

$('#register_form').submit(function(e) {

var postData = $(this).serializeArray();
var formURL = $(this).attr("action");

/* start ajax submission process */
$.ajax({
    url: formURL,
    type: "POST",
    data: postData,
    success: function(data, textStatus, jqXHR) {
        alert('Success!');
    },
    error: function(jqXHR, textStatus, errorThrown) {
        alert('Error occurred!');
    }

});

e.preventDefault(); //STOP default action

/* ends ajax submission process */

});

Can I do the same WITHOUT the use of jQuery? If it is possible, how can I implement the above jQuery code into pure/plain Javascript code?

I have 3 problem here, which is solved by @DDeme which is: 1. capturing the event, and e.preventDefault alternative in pure JS, 2. serializeArray(); implementation in pure JS, and 3. getting the status of the AJAX query/alternative to success: and error:. i can tell that it is not duplicates with the one you mentioned above — Fariz Luqman, May 23 '15 at 16:30

David Demetradze · Accepted Answer · 2015-05-23T16:17:31.463

49

Yes and of course that's possible :)

<form action="request.php" id="register_form">
  <input class='formVal' type="text" name="first_name" placeholder="First Name">
  <input class='formVal' type="text" name="last_name" placeholder="LastName">
  <input type="submit" value="submit_now" onclick="myFunction(); return false;">
</form>

JS

function myFunction()
{
    var elements = document.getElementsByClassName("formVal");
    var formData = new FormData(); 
    for(var i=0; i<elements.length; i++)
    {
        formData.append(elements[i].name, elements[i].value);
    }
    var xmlHttp = new XMLHttpRequest();
        xmlHttp.onreadystatechange = function()
        {
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
            {
                alert(xmlHttp.responseText);
            }
        }
        xmlHttp.open("post", "server.php"); 
        xmlHttp.send(formData); 
}

server.php

<?php
   $firstName = $_POST["first_name"];
   $lastName = $_POST["last_name"];
   echo $firstName." ".$lastName;
   //enter name and lastname into your form and onclick they will be alerted 
?>

Explanation: Function takes form elements by their class names and stores them in array. Then we create FormData object and loop through elements array for each element and append their name and value to FormData object. After that we create XMLHttpRequest() object that monitors state and status change during request and also sends data with post method to server.php When it's over and readystate equals to 4 and status equals to 200, we alert response from server.php, that we save in responseText attribute of XMLHttpRequest object.

edited May 23 '15 at 16:17

answered May 23 '15 at 15:36

David Demetradze

1,361
2
12
18

Hello @DDeme I tried your solution but I got an error "uncaught typeerror undefined is not a function" – Fariz Luqman May 23 '15 at 15:46
@Fariz wait i'll check it again :) – David Demetradze May 23 '15 at 15:47
@Fariz i have edited that, check again :) – David Demetradze May 23 '15 at 15:49
@FarizLuqman have you checked that ? :) – David Demetradze May 23 '15 at 15:57
still working on that... will tell you later :) – Fariz Luqman May 23 '15 at 15:59
1

Hello, how can I know whether the form is submitted successfully or not? – Fariz Luqman May 23 '15 at 16:07
add server.php to your folder and check variables via $_POST["first_name"] and $_POST["last_name"]. If you want i can add that to my answer later :) – David Demetradze May 23 '15 at 16:09
@FarizLuqman check out answer, i added server.php to it and see if it will work :) – David Demetradze May 23 '15 at 16:12
hello, tried that, but however the code given me NO RESPONSE at all. I clicked the button, and nothing is happening... – Fariz Luqman May 23 '15 at 16:16
1

@FarizLuqman I just found some mistake and fixed that, copy/paste my answer again and check that :) – David Demetradze May 23 '15 at 16:18
1

this code works like a magic! +1 and accepted as an answer! you solved 3 problem of mine, capturing the event by the use of onclick="myFunction(); return false;", the alternative to serializedata, and .getting the status of the ajax query. thanks my friend! – Fariz Luqman May 23 '15 at 16:21
1

@FarizLuqman Thank's man, always happy to share my knowledge :) – David Demetradze May 23 '15 at 16:22
You forgot a semicolon... xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState == 4 && xmlHttp.status == 200) { alert(xmlHttp.responseText); } }; – Vozzie May 20 '16 at 14:00
2

If you are using Laravel with CSRF protection then add to your form. It worked for me, thanks. – Universus Oct 25 '19 at 16:50
Need to xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); for the server to see the parameters in the body. – James Newton Feb 11 '20 at 04:32

score 0 · Answer 2 · answered May 23 '15 at 15:37

0

For sure, you can use Ajax only Reqwest lib.

Something like:

reqwest({
    url: 'path/to/json'
  , type: 'json'
  , method: 'post'
  , error: function (err) { }
  , success: function (resp) {
      qwery('#content').html(resp.content)
    }
})

And according to their README you can use:

$(form).serialize()

answered May 23 '15 at 15:37

Jonatas Walker

13,583
5
53
82

1

Come on, you want all the job done?? – Jonatas Walker May 23 '15 at 15:48
Hello @Jonatas, +1 for the Reqwest lib! – Fariz Luqman May 23 '15 at 15:49

Richard · Answer 3 · 2015-05-23T15:26:53.457

Yes, it is.

As you said, it works with XMLHttpRequest.

var http = new XMLHttpRequest();
var postData = serialize(arr);
var params = "postdata=" + postData;
http.open("POST", url, true);
http.send(params);

For a serialize function is JS see this page.

function serialize(mixed_value) {
  //  discuss at: http://phpjs.org/functions/serialize/
  // original by: Arpad Ray (mailto:arpad@php.net)
  // improved by: Dino
  // improved by: Le Torbi (http://www.letorbi.de/)
  // improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net/)
  // bugfixed by: Andrej Pavlovic
  // bugfixed by: Garagoth
  // bugfixed by: Russell Walker (http://www.nbill.co.uk/)
  // bugfixed by: Jamie Beck (http://www.terabit.ca/)
  // bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net/)
  // bugfixed by: Ben (http://benblume.co.uk/)
  //    input by: DtTvB (http://dt.in.th/2008-09-16.string-length-in-bytes.html)
  //    input by: Martin (http://www.erlenwiese.de/)
  //        note: We feel the main purpose of this function should be to ease the transport of data between php & js
  //        note: Aiming for PHP-compatibility, we have to translate objects to arrays
  //   example 1: serialize(['Kevin', 'van', 'Zonneveld']);
  //   returns 1: 'a:3:{i:0;s:5:"Kevin";i:1;s:3:"van";i:2;s:9:"Zonneveld";}'
  //   example 2: serialize({firstName: 'Kevin', midName: 'van', surName: 'Zonneveld'});
  //   returns 2: 'a:3:{s:9:"firstName";s:5:"Kevin";s:7:"midName";s:3:"van";s:7:"surName";s:9:"Zonneveld";}'

  var val, key, okey,
    ktype = '',
    vals = '',
    count = 0,
    _utf8Size = function (str) {
      var size = 0,
        i = 0,
        l = str.length,
        code = '';
      for (i = 0; i < l; i++) {
        code = str.charCodeAt(i);
        if (code < 0x0080) {
          size += 1;
        } else if (code < 0x0800) {
          size += 2;
        } else {
          size += 3;
        }
      }
      return size;
    },
  _getType = function (inp) {
    var match, key, cons, types, type = typeof inp;

    if (type === 'object' && !inp) {
      return 'null';
    }

    if (type === 'object') {
      if (!inp.constructor) {
        return 'object';
      }
      cons = inp.constructor.toString();
      match = cons.match(/(\w+)\(/);
      if (match) {
        cons = match[1].toLowerCase();
      }
      types = ['boolean', 'number', 'string', 'array'];
      for (key in types) {
        if (cons == types[key]) {
          type = types[key];
          break;
        }
      }
    }
    return type;
  },
  type = _getType(mixed_value);

  switch (type) {
  case 'function':
    val = '';
    break;
  case 'boolean':
    val = 'b:' + (mixed_value ? '1' : '0');
    break;
  case 'number':
    val = (Math.round(mixed_value) == mixed_value ? 'i' : 'd') + ':' + mixed_value;
    break;
  case 'string':
    val = 's:' + _utf8Size(mixed_value) + ':"' + mixed_value + '"';
    break;
  case 'array':
  case 'object':
    val = 'a';
    /*
        if (type === 'object') {
          var objname = mixed_value.constructor.toString().match(/(\w+)\(\)/);
          if (objname == undefined) {
            return;
          }
          objname[1] = this.serialize(objname[1]);
          val = 'O' + objname[1].substring(1, objname[1].length - 1);
        }
        */

    for (key in mixed_value) {
      if (mixed_value.hasOwnProperty(key)) {
        ktype = _getType(mixed_value[key]);
        if (ktype === 'function') {
          continue;
        }

        okey = (key.match(/^[0-9]+$/) ? parseInt(key, 10) : key);
        vals += this.serialize(okey) + this.serialize(mixed_value[key]);
        count++;
      }
    }
    val += ':' + count + ':{' + vals + '}';
    break;
  case 'undefined':
    // Fall-through
  default:
    // if the JS object has a property which contains a null value, the string cannot be unserialized by PHP
    val = 'N';
    break;
  }
  if (type !== 'object' && type !== 'array') {
    val += ';';
  }
  return val;
}

yes, but how can I implement the jQuery code above to XMLHttpRequest especially the serialize part? That part gives me quite some time in google to implement in in pure JS. and also how can I get the success/error part? thanks! — Fariz Luqman, May 23 '15 at 15:25
Answers should contain the actual solution, not just a link to one. — jfriend00, May 23 '15 at 15:25
+1 for the serialize implementation in pure JS. and I'm sorry for the -1 I don't know who did that and why — Fariz Luqman, May 23 '15 at 15:36
The commentator before you, I think. @Musa: Good that you know which is missing and do not give this knowledge... — Richard, May 23 '15 at 15:37

AJAX Post Implementation in Pure Javascript

3 Answers3

Linked

Related