AJAX with POST and PHP

Another way to send data from a Web page to the server is via POST method.
With Ajax, the request for sending data with POST uses the open() method of the XMLHttpRequest object, its syntax is:

open ("POST", URL, bool)

- the "POST "is the method of transfer
- the URL represents the address of the PHP file
- bool is a Boolean value (true or false)
The difference from GET, in sending data via POST, consists of two things:
1. After creating the request with "open()" and before calling the "send()" method, it is used another method of the XMLHttpRequest object, namely setRequestHeader(), using the syntax:

request.setRequestHeader("Content-type", "application/x-www-form-urlencoded")

- This function indicate what type of content we are including, it sends a header to tell the server to recognize the sent data as if they were sent with POST (like data from Forms).
2. The data we want to transmit to the PHP script, value pairs "index=value", are added as a string parameter in the send() method.

Processing the server response is the same as with the GET.
- To understand how to send data with AJAX using POST, apply and study the following example:
1) Create on the server a PHP file, named "test_post.php", and add into it the following code:

<?php
// if data are received via POST, with index of 'test'
if (isset($_POST['test'])) {
    $str = $_POST['test'];             // get data
    echo "The string: '<i>".$str."</i>' contains ". strlen($str). ' characters and '. str_word_count($str, 0). ' words.';
}
?>

- This is a relatively simple PHP script. If it receives data via POST, with index of 'test', takes its value in the $str variable and, with "echo" returns a string that contains the received text and the number of characters and words in that text.
2) Create an HTML file on the server (for example, named "ajax_post.html") in the same directory where the file "test_post.php" is, and add the following code into it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ro">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<title>Example Ajax POST</title>

<script type="text/javascript"><!--
// sends data to a php file, via POST, and displays the received answer
function ajaxrequest(php_file, tagID) {
  var request = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');  // XMLHttpRequest object

  // create pairs index=value with data that must be sent to server
  var  the_data = 'test='+document.getElementById('txt2').innerHTML;

  request.open("POST", php_file, true);      // set the request

  // adds  a header to tell the PHP script to recognize the data as is sent via POST
  request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  request.send(the_data);    // calls the send() method with datas as parameter

  // Check request status
  // If the response is received completely, will be transferred to the HTML tag with tagID
  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      document.getElementById(tagID).innerHTML = request.responseText;
    }
  }
}
--></script>
</head>
<body>

<h5 style="cursor:pointer;" onclick="ajaxrequest('test_post.php', 'context')"><u>Click</u></h5>
<div id="txt2">This string will be sent with Ajax to the server, via POST, and processed with PHP</div>
<div id="context">Here will be displayed the response from the php script.</div>

</body>
</html>

- The Ajax script is executed when the user click on the "Click" word. It calls the ajaxrequest() function with two parameters. The first parameter represents the name of the php file where the data will be sent, and the second parameter is the ID of the tag where the server response will be displayed.
- The ajaxrequest() function gets the text from the tag with id="txt2" and add it in the "the_data" variable, as the pair of the index "test".
- The open() contain the sending method (POST), the name of the php file and true to handle the request asynchronously ( request.open("POST", php_file, true); ).
- The setRequestHeader() method is added to the request, to indicate that we send data as a content of a Form (with POST)
- After the request is sent with data we want to transmit to PHP ( request.send(the_data); ), when the response is completely received (request.readyState==4), it displays it with the document.getElementById(tagID).innerHTML = request.responseText; instruction.
- When you open the "ajax_post.html" file from the server, will display the falowing result. Test it yourself.

Click

This string will be sent with Ajax to the server, via POST, and processed with PHP

Here will be displayed the response from the php script.

The advantage of using POST is that you can send more data content than with the GET method (which is limited to a total of 1024 characters).

<<-AJAX with GET and .. -- AJAX and Forms->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag is used to add lists into <ul> and <ol> elements?

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>

Which value of the "display" property creates a block box for the content and ads a bullet marker?

block list-item inline-block

.some_class {
  display: list-item;
}

Which instruction converts a JavaScript object into a JSON string.

JSON.parse() JSON.stringify eval()

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

Indicate the PHP class used to work with HTML and XML content in PHP.

stdClass PDO DOMDocument

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net

AJAX with POST and PHP

Ajax Course

Click

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Last accessed pages

Popular pages this month