AJAX with GET and PHP

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:

A simple URL address to a php file: https://coursesweb.net/index.php (absolute URL) or index.php (relative URL)
a URL that contains value pairs that must be transferred to a php file: https://coursesweb.net/index.php?l=ajax&p=ajax-get-php

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:

<?php
// 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">
<head>
<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;
    }
  }
}
--></script>
</head>
<body>

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

</body>
</html>

- 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.

Click

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.

<<-XMLHttpRequest object -- AJAX with POST and ..->>

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 GET and PHP

Ajax Course

Click

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Last accessed pages

Popular pages this month