DONATE  
MENU
JSON
AJAX
JAVASCRIPT
HTML

AJAX Tutorials

JAVASCRIPT AJAX

» Introduction

» HTTP Request Object

» AJAX Example

» AJAX GET Request

» AJAX POST Request

.. » AJAX » Javascript Ajax » AJAX POST Request
Share Tweet WhatsApp

AJAX POST Request

The POST method is the best way to send AJAX request to a file. It is secure and there is no limit to the amount of parameter and parameter values to send alongside such requests. When we send a POST request, we are actually sending whatever values of that request in another separate body from the request. This offers both security as values can only be sent to the receiving file in a request body and not via URLs. With this method, you can send whatever amount of values. Hundreds, Thousands and yes, whatever amount. How To Send AJAX POST Request
  1. Create XMLHttpRequest() or ActiveXObject() object on a variable.
  2. Open request using the open() method. The arguments should be the POST, filepath, SYNC method.
  3. Set a request header for the request body where your various values will be contained using the setRequestHeader().
  4. Send request using send() method. It should have an argument which should be the values to send with the request if any.
  5. Handle request using the object properties.
EXAMPLE register_20210128010046.php file - a PHP file where our request will be sent to.
<?php
if ($_SERVER['REQUEST_METHOD'] == "POST"){
$username = $_POST['username'];
$password = $_POST['password'];
if (!isset($username) || empty($username)){
echo "Username cannot be empty.";
}
else if (!isset($password) || empty($password)){
echo "Password is needed.";
}
else
{
echo "Registration Successful. Thank you.";
}
}
?>

Copy SEE RESULT

Our webpage - From where our AJAX request to the PHP file will be sent.
<html>
    <head>
        <title>REGISTER ACCOUNT</title>
    </head>
    <body>
<div>
    <h2>REGISTER ACCOUNT</h2>
<p><b>Username:</b><p>
    <input style='border-radius:5px; border:1px solid #1561ad; padding:6px;' type='text' id='username'/>
        <p><b>Password:</b><p>
    <input type='text' style='border-radius:5px; border:1px solid #1561ad; padding:6px;' id='password'/>
<p style='display:none' id='fdbk'></p>
            <p><button style='padding:5px; font-weight:bold; background-color:white; color:#1561ad; border:1px solid #1561ad;' onclick='register()'>REGISTER</button></p>
      </div>  
        <script>
            //Function to handle registration
function register(){
var fdbk = document.getElementById("fdbk"); //Get our feedback paragraph element
var username = document.getElementById("username").value; //Username value
var password = document.getElementById("password").value; //Password value

var http = new XMLHttpRequest(); //Create HTTP request object

http.open("POST","register_20210128010046.php",true); //Open file request is being sent to
http.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //Set request header
http.send("username="+username+"&password="+password); //Send request with values

//HANDLING REQUEST RESPONSE
http.onreadystatechange = function(){//Function when readystate changes
if (this.readyState == 4 && this.status == 200)
{
//Server response is positive i.e request processed

var response = this.responseText; //Response from our php page
fdbk.style.display = "";
fdbk.innerText = response;
}
};
}
            </script>
            </body>
    </html>

Copy PRACTICE IT

SUMMARY
  1. The POST method is the best way to send AJAX request to a file.
  2. It is secure.
  3. There is no limit to the amount of values to send.
  4. Sending a request with this method involves creating an AJAX request object, opening the file with the open() method, setting a request header using the setRequestHeader() method, sending the request and whatever values using the send() method and finally, handling the request state and response using the AJAX object properties.
  5. If no request header is set, the request will be sent but no values will be sent.
Take a short quiz on AJAX POST Request.
Ask a question or tell us if AJAX POST Request is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode