Ajax Course

Ajax is more than using the XMLHttpRequest object, consists in using, in addition to JavaScript, a server side language too.
In a URL can be included values to be transferred to a PHP file. These values are added in the URL after the page name and the '?', in a pair mode "index=value" (separated by the & character, if there are several such pairs).

For example: This way of transferring data to a processing file via URL, is known as GET mode.

The open() method of the "XMLHttpRequest object creates the request that will be sent to the server. This method sets the transfer method (GET or POST) and the URL, where can be added these value pairs (index=value). Then, with the "send()" method the script sends these datas.
The file on the server receives and process the data (added in the URL of the Ajax request) and can return a response that will be received by the Ajax script.
So, if you want to use Ajax and understand the examples presented in this course, you need to know PHP at least at the beginner level.

- To understand how to use Ajax with PHP and GET, here's a simple example:
  1) Create on the server a PHP file, named "test_get.php", and add in it the following code:
// if data are received via GET, with index of 'test'
if (isset($_GET['test'])) {
    $str = $_GET['test'];             // get data
    echo "The string '<i>".$str."</i>' contains ". strlen($str). ' characters and '. str_word_count($str, 0). ' words.';
  2) Create an HTML file on the server (for example, named "ajax_get.html") in the same directory where the file "test_get.php" is, and add the following code in 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="en">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<title>Example Ajax GET</title>

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

  // create the URL with data that will be sent to the server (a pair index=value)
  var  url = serverPage+'?test='+document.getElementById('txt1').innerHTML;

  request.open("GET", url, true);      // define the request
  request.send(null);    // sends data

  // 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;

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

- The "test_get.php" file contains a relatively simple PHP script. If it receives data via GET, 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.
- 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="txt1" and add it in the URL that contain the name of the php file. After the request is sent, 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_get.html" file from the server, will display the falowing result. Test it yourself.
A string that will be sent with Ajax to the server and processed with PHP
Here will be displayed the response from the php script.

You can use Ajax to call a PHP script not only to display the received answer, but also to process and record certain data (eg. into a database). This depends on the PHP script.

Daily Test with Code Example

Which tag create a highlighted bolded text?
<q> <strong> <em>
<p>Address: <strong>http://CoursesWeb.net/</strong> - Tutorials.</p>
Which of these CSS codes displays the text bolded?
text-size: 18px; font-style: italic; font-weight: 800;
#id {
  font-weight: 800;
What JavaScript function can be used to call another function multiple times, to a specified time interval?
setInterval() setTimeout() push()
function someFunction() { alert("CoursesWeb.net"); }
setInterval("someFunction()", 2000);
Click on the correctly defined variable in PHP.
var vname = 8; $vname = 8; $vname == 8;
$vname = 8;
echo $vname;
AJAX with GET and PHP

Last accessed pages

  1. Convert BBCode to HTML and HTML to BBCode with JavaScript (8979)
  2. 101 Zen stories (1748)
  3. Create simple Website with PHP (43157)
  4. Script comments with pagination (4353)
  5. Drag and Drop with jQuery UI (6727)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (382)
  2. SHA1 Encrypt data in JavaScript (292)
  3. PHP Unzipper - Extract Zip, Rar Archives (275)
  4. SHA256 Encrypt hash in JavaScript (264)
  5. Read Excel file data in PHP - PhpExcelReader (245)