Implementing AJAX in PHP. Asynchronous JavaScript and XML

AJAX in PHP
by
Ms.V. SANTHI
Dept. of Computer Applications,
Bon Secours College for Women,
Thanjavur.

What is PHP?
 PHP is an open-source server-side scripting language.
 It is used for a wide range of different tasks, including
generating dynamic page content.
 PHP scripts are executed on the web server.
 PHP files contain HTML, CSS, JavaScript, and PHP
code.
 Once PHP code is executed on the server, it returns to the
web browser as HTML code.
 PHP is very popular with web developers because it runs
on almost all servers and most operating systems.

PHP is used for:
 Creating and editing files on the server
 Collecting data from web forms
 Sending and receiving cookies
 Adding, deleting, and modifying data in your database
 Encrypting data
 Controlling user-access
 Furthermore, PHP code outputting HTML, XML, Flash
movies, PDFs, images, and XHTML.

What is AJAX?
 AJAX Asynchronous JavaScript and XML.
 AJAX is not a new programming language, but a new
way to use existing standards.
 AJAX is a technique for creating fast and dynamic
web pages.
 AJAX is a new technique for creating better, faster, and
more interactive web applications with the help of XML,
HTML, CSS and Java Script.

 AJAX allows web pages to be updated
asynchronously by exchanging small amounts of
data with the server behind the scenes. This
means that it is possible to update parts of a
web page, without reloading the whole page.
 Classic web pages, (which do not use AJAX) must
reload the entire page if the content should
change.

Examples of applications using
AJAX
 Google Maps,
 Gmail,
 Youtube,
 and Facebook tabs.

Google Suggest
 AJAX was made popular in 2005 by Google, with Google
Suggest.
 Google Suggest is using AJAX to create a very dynamic
web interface: When you start typing in Google's search
box, a JavaScript sends the letters off to a server and the
server returns a list of suggestions.
 AJAX is browser and platform-independent.
 However, as previously mentioned, AJAX is used on the
client-side and will still require server-side
communication. This is where PHP enters the
conversation.

AJAX Working Procedure :
 1. An event occurs in a web page (the page is loaded, a
button is clicked)
 2. An XMLHttpRequest object is created by JavaScript
 3. The XMLHttpRequest object sends a request to a
web server
 4. The server processes the request
 5. The server sends a response back to the web page
 6. The response is read by JavaScript
 7. Proper action (like page update) is performed by
JavaScript

AJAX is Based on Internet
Standards
AJAX is based on internet standards, and uses a
combination of:
 XMLHttpRequest object (to exchange data
asynchronously with a server/to request data from a web
server)
 JavaScript/DOM (to display/interact with the information)
 CSS (to style the data)
 XML (often used as the format for transferring data)

AJAX - The XMLHttpRequest Object
 To exchange data with a server behind the scenes.
Create an XMLHttpRequest Object:
 All modern browsers (Chrome, Firefox, Edge (and
IE7+), Safari, Opera) have a built-in
XMLHttpRequest object.
Syntax for creating an XMLHttpRequest object:
variable = new XMLHttpRequest();
Example :
var xhttp = new XMLHttpRequest();

XMLHttpRequest Object Methods
Method Description
new XMLHttpRequest() Creates a new XMLHttpRequest object
abort() Cancels the current request
getAllResponseHeaders() Returns header information
getResponseHeader() Returns specific header information
open(method,url,async,user,psw) Specifies the request
send() Sends the request to the server
Used for GET requests
send(string) Sends the request to the server.
Used for POST requests
setRequestHeader() Adds a label/value pair to the header to
be sent

AJAX - Send a Request To a Server
 The XMLHttpRequest object is used to exchange data
with a server.
Send a Request To a Server
To send a request to a server, the open() and send()
methods of the XMLHttpRequest object is used:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

Methods to Send a Request To a
Server
Method Description
open(method, url, async) Specifies the type of request
method: the type of request: GET or
POST
url: the server (file) location
async: true (asynchronous) or false
(synchronous)
send() Sends the request to the server (used for
GET)
send(string) Sends the request to the server (used for
POST)

GET Request
 GET is basically used for just getting (retrieving) some
data from the server.
Example :
xhttp.open("GET", "demo_get.php", true);
xhttp.send();
Note: The GET method may return cached data.

POST Request
POST can also be used to get some data from the server.
However, the POST method NEVER caches data, and is
often used to send data along with the request.
Example :
xhttp.open("POST", "demo_post.php", true);
xhttp.send();
To POST data like an HTML form, add an HTTP header
with setRequestHeader().

How AJAX and PHP Works
Together
 Example - Google Search bar
 When you begin typing into an auto-complete bar, AJAX
techniques send this information to the web server.
 This information is then collected and processed on the
server-side by PHP code.
 Once the appropriate data has been collected, edited, etc.,
it is sent back to the client-side as XML data.
 Finally, after the information returns from the server, it is
dynamically displayed to the user by AJAX standards.

General Break:
 Conventional web applications transmit information
to and from the server using synchronous requests.
 It means you fill out a form, hit submit, and get
directed to a new page with new information from the
server.
 With AJAX, when submit is pressed, JavaScript will
make a request to the server, interpret the results and
update the current screen.
 In the purest sense, the user would never know that
anything was even transmitted to the server.

AJAX PHP Example
The following example will demonstrate how a web page
can communicate with a web server while a user type
characters in an input field:
https://www.w3schools.com/php/php_ajax_php.asp
Start typing a name in the input field below:
 First name:
 Suggestions:

<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.response
Text;
}
};
xmlhttp.open("GET", "gethint.php?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>

<p><b>Start typing a name in the input field
below:</b></p>
<form action="">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" onkeyu
p="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>

Code explanation:
 First, check if the input field is empty (str.length == 0). If it
is, clear the content of the txtHint placeholder and exit the
function.
 However, if the input field is not empty, do the following:
 Create an XMLHttpRequest object
 Create the function to be executed when the server
response is ready
 Send the request off to a PHP file (gethint.php) on the
server
 Notice that q parameter is added to the url
(gethint.php?q="+str)
 And the str variable holds the content of the input field

The PHP File - "gethint.php"
 The PHP file checks an array of names, and returns the corresponding name(s)
to the browser:
<?php
// Array with names
$a[] = "Anna";
$a[] = "Brittany";
$a[] = "Cinderella";
$a[] = "Diana";
$a[] = "Eva";
$a[] = "Fiona";
$a[] = "Gunda";
$a[] = "Hege";
$a[] = "Inga";
$a[] = "Johanna";
$a[] = "Kitty";
$a[] = "Linda";
$a[] = "Nina";
$a[] = "Ophelia";
$a[] = "Petunia";
$a[] = "Amanda";
$a[] = "Raquel";
$a[] = "Cindy";
$a[] = "Doris";

 $a[] = "Eve";
$a[] = "Evita";
$a[] = "Sunniva";
$a[] = "Tove";
$a[] = "Unni";
$a[] = "Violet";
$a[] = "Liza";
$a[] = "Elizabeth";
$a[] = "Ellen";
$a[] = "Wenche";
$a[] = "Vicky";
// get the q parameter from URL
$q = $_REQUEST["q"];
$hint = "";
 // lookup all hints from array if $q is different from ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {

if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= ", $name";
}
}
}
}
// Output "no suggestion" if no hint was found or output correct
values
echo $hint === "" ? "no suggestion" : $hint;
?>
Start typing a name in the input field below:
 First name:
 Suggestions: Anna, Amanda
a

Reference:
https://www.w3schools.com/php/php_ajax_database.
asp

Implementing AJAX in PHP. Asynchronous JavaScript and XML

More Related Content

Similar to Implementing AJAX in PHP. Asynchronous JavaScript and XML

More from SanthiNivas

Recently uploaded

Implementing AJAX in PHP. Asynchronous JavaScript and XML