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 defines the clickable areas inside the image map?

<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>

Which CSS property defines what is done if the content in a box is too big for its defined space?

display overflow position

#id {
  overflow: auto;
}

Click on the event which is triggered when the mouse is positioned over an object.

onclick onmouseover onmouseout

document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}

Indicate the PHP variable that contains data added in URL address after the "?" character.

$_SESSION $_GET $_POST

if(isset($_GET["id"])) {
  echo $_GET["id"];
}

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