Ajax

AJAX
What is AJAX?
Update a web page without reloading the page
Request data from a server - after the page has loaded
Receive data from a server - after the page has loaded
Send data to a server - in the background
AJAX = Asynchronous JavaScript and XML.
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.
How AJAX Works
AJAX is Based on Internet Standards

AJAX is based on internet standards,
and uses a combination of:
XMLHttpRequest object (to retrieve data
from a web server)
JavaScript/DOM (to display/use the data)
XMLHttpRequest is a misleading name. You
don't have to understand XML to use AJAX.
The XMLHttpRequest Object

All modern browsers support the
XMLHttpRequest object.
The XMLHttpRequest object is used
to exchange data with a server
behind the scenes. This means that it
is possible to update parts of a web
page, without reloading the whole
page.
Create an XMLHttpRequest Object

All modern browsers (Chrome, IE7+, Firefox,
Safari, and Opera) have a built-in XMLHttpRequest
object.
Syntax for creating an XMLHttpRequest object:
variable=newXMLHttpRequest();
Old versions of Internet Explorer (IE5 and IE6) use
an ActiveX Object:
variable=newActiveXObject("Microsoft.XM
LHTTP");
To handle all browsers, including IE5 and IE6,
check if the browser supports the XMLHttpRequest
object. If it does, create an XMLHttpRequest
object, if not, create an ActiveXObject:
Example
varxhttp;
if(window.XMLHttpRequest) {
xhttp =newXMLHttpRequest();
}else{
// code for IE6, IE5
xhttp
=newActiveXObject("Microsoft.XMLHTTP"
);
}
<!DOCTYPE html>
<html>
<body>
<p id="demo">Let AJAX change this text.</p>

<button type="button" onclick="loadDoc()">Change Content</button>
<script>
function loadDoc() {
var xhttp;
if (window.XMLHttpRequest) {
// code for modern browsers
xhttp = new XMLHttpRequest();
} else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
</script>
</body>
</html>
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, we use the open()
and send() methods of the XMLHttpRequest object:
xhttp.open("GET","ajax_info.txt",true);
xhttp.send();
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 or POST?
GET is simpler and faster than POST, and
can be used in most cases.
However, always use POST requests when:
A cached file is not an option (update a file or
database on the server).
Sending a large amount of data to the server
(POST has no size limitations).
Sending user input (which can contain unknown
characters), POST is more robust and secure
than GET.
GET Requests
A simple GET request:
Example
xhttp.open("GET","demo_get.php",t
rue);
xhttp.send();
<!DOCTYPE html>
<html>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
}
};
xhttp.open("GET", "demo_get.php", true);
xhttp.send();
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
}
};
xhttp.open("GET", "demo_get2.php?fname=Henry&lname=Ford", true);
xhttp.send();
}
</script>
</body>
</html>
POST Requests
Example
xhttp.open("POST","demo_post.php",true);
xhttp.send();
To POST data like an HTML form, add an HTTP header with
setRequestHeader(). Specify the data you want to send in
the send() method:
Example
xhttp.open("POST","ajax_test.php",true);
xhttp.setRequestHeader("Content-type","application/xwww-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
Method
Description
setRequestHeader(heade Adds HTTP headers to the request

r, value)
header: specifies the header name
value: specifies the header value
The url - A File On a Server

The url parameter of the open()
method, is an address to a file on a
server:
xhttp.open("GET", "ajax_test.php",
true);
The file can be any kind of file, like
.txt and .xml, or server scripting files
like .asp and .php (which can perform
actions on the server before sending
the response back).
Asynchronous - True or False?

AJAX stands for Asynchronous JavaScript and XML, and for the
XMLHttpRequest object to behave as AJAX, the async parameter
of the open() method has to be set to true:
xhttp.open("GET", "ajax_test.asp", true);
Sending asynchronous requests is a huge improvement for web
developers. Many of the tasks performed on the server are very
time consuming. Before AJAX, this operation could cause the
application to hang or stop.
With AJAX, the JavaScript does not have to wait for the server
response, but can instead:
execute other scripts while waiting for server response
deal with the response when the response ready
When you execute something synchronously, you wait for it to

finish before moving on to another task.
When you execute something asynchronously, you can move on
to another task before it finishes.
Async=true
When using async=true, specify a function to
execute when the response is ready in the
onreadystatechange event:
Example
document.getElementById("demo").innerHTML =
xhttp.responseText;
}
};
xhttp.send();
<!DOCTYPE html>
<html>
<body>
<div id="demo"><h2>Let AJAX change this text</h2></div>

<script>
}
};
xhttp.send();
}
</script>
</body>
</html>
Async=false
To use async=false, change the third parameter in the open() method
to false:
xhttp.open("GET", "ajax_info.txt", false);
Using async=false is not recommended, but for a few small requests
this can be ok.
Remember that the JavaScript will NOT continue to execute, until the
server response is ready. If the server is busy or slow, the application
will hang or stop.
Note: When you use async=false, do NOT write an
onreadystatechange function - just put the code after the send()
statement:
Example
xhttp.send();
<!DOCTYPE html>
<html>
<body>

<button type="button" onclick="loadDoc()">Change
Content</button>
<script>
xhttp.send();
document.getElementById("demo").innerHTML =
xhttp.responseText;
}
</script>
</body>
</html>
AJAX - Server Response

To get the response from a server,
use the responseText or responseXML
property of the XMLHttpRequest
object.
Property
Description
responseText
get the response data as a string
responseXML
get the response data as XML

data
The responseText Property

If the response from the server is not
XML, use the responseText property.
The responseText property returns
the response as a string, and you can
use it accordingly:
Example
document.getElementById("demo").inn
erHTML = xhttp.responseText;
<!DOCTYPE html>
<html>
<body>

<script>
}
};
xhttp.send();
}
</script>
</body>
</html>
The responseXML Property

If the response from the server is XML, and you want
to parse it as an XML object, use the responseXML
property:
Example
Request the file cd_catalog.xml and parse the
response:
xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
<!DOCTYPE html>
<html>
<body>
<h2>My CD Collection:</h2>
<button type="button" onclick="loadDoc()">Get my CD collection</button>
<p id="demo"></p>
<script>
var xhttp, xmlDoc, txt, x, i;
xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt = txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
};
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();
}
</script>
</body>
</html>
AJAX - The onreadystatechange Event

When a request to a server is sent, we want to perform some
actions based on the response.
The onreadystatechange event is triggered every time the
readyState changes.
The readyState property holds the status of the XMLHttpRequest.
Three important properties of the XMLHttpRequest object:
Property
Description
Stores a function (or the name of a function) to be

onreadystatecha
called automatically each time the readyState
nge
property changes
readyState
status
Holds the status of the XMLHttpRequest. Changes

from 0 to 4:
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
200: "OK"
In the onreadystatechange event, we specify

what will happen when the server response is
ready to be processed.
When readyState is 4 and status is 200, the
response is ready:
Example
if (xhttp.readyState == 4 && xhttp.status ==
200) {
document.getElementById("demo").innerHTML
= xhttp.responseText;
}
};
<!DOCTYPE html>
<html>
<body>

<script>
}
};
xhttp.send();
}
</script>
</body>
</html>
Using a Callback
Function
A callback function is a function passed as a parameter to
another function.
If you have more than one AJAX task on your website, you
should create ONE standard function for creating the
XMLHttpRequest object, and call this for each AJAX task.
The function call should contain the URL and what to do on
onreadystatechange (which is probably different for each
call):
Example
function loadDoc(cFunc) {
cFunc(xhttp);
}
<!DOCTYPE html>
<html>
<body>

<button type="button"
onclick="loadDoc('ajax_info.txt', myFunction)">Change Content
</button>
<script>
function loadDoc(url, cfunc) {
var xhttp;
xhttp=new XMLHttpRequest();
cfunc(xhttp);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function myFunction(xhttp) {
}
</script>
</body>
</html>
AJAX & PHP

AJAX is used to create more interactive
applications.
The following example will demonstrate how a
web page can communicate with a web server
while a user type characters in an input field:
In the example above, when a user types a

character in the input field, a function called
"showHint()" is executed.
The function is triggered by the onkeyup event.
<!DOCTYPE html>
<html>
<body>
<h3>Start typing a name in the input field below:</h3>

<form action="">
First name: <input type="text" id="txt1" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
<script>
function showHint(str) {
var xhttp;
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
}
document.getElementById("txtHint").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "gethint.php?q="+str, true);
xhttp.send();
}
</script>
</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 gethint.php?
q="+str
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))) {//The stristr() function searches for the first occurrence of a string inside another string.
if ($hint === "") {
$hint = $name;
} else {
$hint .= ", $name";
}
}
}
}
// Output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>
AJAX & Database

AJAX can be used for interactive
communication with a database.
The following example will demonstrate
how a web page can fetch information
from a database with AJAX:
Example Explained - The

showCustomer() Function
When a user selects a customer in the dropdown list above, a function called
"showCustomer()" is executed. The function is triggered by the "onchange" event:
showCustomer
function showCustomer(str) {
var xhttp;
if (str == "") {
return;
}
document.getElementById("txtHint").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "getcustomer.php?q="+str, true);
xhttp.send();
}
The showCustomer() function does the following:

Check if a customer is selected
Create the function to be executed when the server response is ready
Send the request off to a file on the server
Notice that a parameter (q) is added to the URL (with the content of the dropdown list)
Example Explained - The MySQL Database
The database table we use in the

example above looks like this:
id
FirstName LastName Age
Hometow
Job
n
Peter
Griffin
41
Quahog
Brewery
Lois
Griffin
40
Newport
Piano
Teacher
Joseph
Swanson
39
Quahog
Police
Officer
Glenn
Quagmire 41
Quahog
Pilot
Example Explained
In the example above, when a user selects a person in the
dropdown list above, a function called "showUser()" is executed.
The function is triggered by the onchange event.
<html>
<head>
<script>
function showUser(str) {
if (str == "") {
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Joseph Swanson</option>
<option value="4">Glenn Quagmire</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
</body>
</html>
Code explanation:
First, check if no person is selected
(str == ""). If no person is selected,
clear the content of the txtHint
placeholder and exit the function.
If a person is selected, do the
following:
Create the function to be executed
when the server response is ready
Send the request off to a file on the
server
Notice that a parameter (q) is added
to the URL (with the content of the
The PHP File

The page on the server called by the
JavaScript above is a PHP file called
"getuser.php".
The source code in "getuser.php"
runs a query against a MySQL
database, and returns the result in
an HTML table:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<?php
$q = intval($_GET['q']);
$con = mysqli_connect('localhost','peter','abc123','my_db');
if (!$con){
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"ajax_demo"); // ...some PHP code for database "my_db Change database to "test"
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
echo "<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "<td>" . $row['Hometown'] . "</td>";
echo "<td>" . $row['Job'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
</body>
</html>
Explanation: When the query is sent

from the JavaScript to the PHP file,
the following happens:
PHP opens a connection to a MySQL
server
The correct person is found
An HTML table is created, filled with
data, and sent back to the "txtHint"
placeholder
AJAX XML
AJAX can be used for interactive
communication with an XML file.
AJAX XML Example
The following example will
demonstrate how a web page can
fetch information from an XML file
with AJAX:
Example Explained
When a user clicks on the "Get CD info"
button above, the loadDoc() function is
executed.
The loadDoc() function creates an
XMLHttpRequest object, adds the function to
be executed when the server response is
ready, and sends the request off to the
server.
When the server response is ready, an HTML
table is built, nodes (elements) are extracted
from the XML file, and it finally updates the
txtCDInfo placeholder with the HTML table
filled with XML data:
LoadXMLDoc()
myFunction(xhttp);
}
};
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Artist</th><th>Title</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
<!DOCTYPE html>
<html>
<style>
table,th,td {
border : 1px solid black;
border-collapse: collapse;
}
th,td { padding: 5px;}
</style>
<body>
<button type="button" onclick="loadDoc()">Get my CD collection</button>
<br><br>
<table id="demo"></table>
<script>
myFunction(xhttp);
}
};
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Artist</th><th>Title</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;}
</script>
</body>
</html>
The common gateway interface

(CGI)
The common gateway interface (CGI) is a standard way for

a Web server to pass a Web user's request to an application
program and to receive data back to forward to the user.
When the user requests a Web page (for example, by
clicking on a highlighted word or entering a Web site
address), the server sends back the requested page.
However, when a user fills out a form on a Web page and
sends it in, it usually needs to be processed by an
application program. The Web server typically passes the
form information to a small application program that
processes the data and may send back a confirmation
message. This method or convention for passing data back
and forth between the server and the application is called
the common gateway interface (CGI). It is part of the Web's
Hypertext Transfer Protocol (HTTP).
Applet
An applet is a little application. Prior to the
World Wide Web, the built-in writing and
drawing programs that came with Windows
were sometimes called "applets." On the Web,
using Java, the object-oriented programming
language, an applet is a small program that
can be sent along with a Web page to a user.
Java applets can perform interactive
animations, immediate calculations, or other
simple tasks without having to send a user
request back to the server.
Servlet
A servlet is a small program that runs
on a server. The term was coined in
the context of the Java applet, a
small program that is sent as a
separate file along with a Web (HTML
) page. Java applets, usually intended
for running on a client, can result in
such services as performing a
calculation for a user or positioning
an image based on user interaction.
Java Server Page (JSP)

Java Server Page (JSP) is a technology for controlling
the content or appearance of Web pages through the
use of servlets, small programs that are specified in the
Web page and run on the Web server to modify the
Web page before it is sent to the user who requested it.
Sun Microsystems, the developer of Java, also refers to
the JSP technology as the Servlet application program
interface (API). JSP is comparable to Microsoft's Active
Server Page (ASP) technology. Whereas a Java Server
Page calls a Java program that is executed by the Web
server, an Active Server Page contains a script that is
interpreted by a script interpreter (such as VBScript or
JScript) before the page is sent to the user.
Active Server Page (ASP)

An Active Server Page (ASP) is an HTML page that
includes one or more scripts (small embedded
programs) that are processed on a Microsoft Web
server before the page is sent to the user. An ASP is
somewhat similar to a server-side include or a
common gateway interface (CGI) application in that
all involve programs that run on the server, usually
tailoring a page for the user. Typically, the script in
the Web page at the server uses input received as the
result of the user's request for the page to access
data from a database and then builds or customizes
the page on the fly before sending it to the requestor.
PHP
PHP is an alternative to Microsoft's
Active Server Page (ASP) technology.
As with ASP, the PHP script is
embedded within a Web page along
with its HTML. Before the page is
sent to a user that has requested it,
the Web server calls PHP to interpret
and perform the operations called for
in the PHP script.
XML
XML stands for EXtensible Markup
Language
XML is a markup language much like
HTML
XML was designed to store and
transport data
XML was designed to be selfdescriptive
XML is a W3C Recommendation
Dynamic Hypertext Markup

Language (DHTML)
Dynamic Hypertext Markup Language (DHTML) is a

combination of Web development technologies used to
create dynamically changing websites. Web pages may
include animation, dynamic menus and text effects. The
technologies used include a combination of HTML,
JavaScript or VB Script,
CSS and the document object model (DOM).
Designed to enhance a Web users experience, DHTML
includes the following features:
Dynamic content, which allows the user to dynamically

change Web page content
Dynamic positioning of Web page elements
Dynamic style, which allows the user to change the Web
pages color, font, size or content

Ajax

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Ajax

Încărcat de

Drepturi de autor:

Formate disponibile

AJAX

How AJAX Works

AJAX is Based on Internet Standards

The XMLHttpRequest Object

Create an XMLHttpRequest Object

<p id="demo">Let AJAX change this text.</p>

Send a Request To a Server

Specifies the type of request

Sends the request to the server (used for GET)

Sends the request to the server (used for POST)

setRequestHeader(heade Adds HTTP headers to the request

The url - A File On a Server

Asynchronous - True or False?

When you execute something synchronously, you wait for it to

<div id="demo"><h2>Let AJAX change this text</h2></div>

<p id="demo">Let AJAX change this text.</p>

AJAX - Server Response

get the response data as a string

get the response data as XML

The responseText Property

<div id="demo"><h2>Let AJAX change this text</h2></div>

The responseXML Property

AJAX - The onreadystatechange Event

Stores a function (or the name of a function) to be

Holds the status of the XMLHttpRequest. Changes

In the onreadystatechange event, we specify

<div id="demo"><h2>Let AJAX change this text</h2></div>

<p id="demo">Let AJAX change this text.</p>

AJAX & PHP

In the example above, when a user types a

<h3>Start typing a name in the input field below:</h3>

The PHP File - "gethint.php"

AJAX & Database

Example Explained - The

The showCustomer() function does the following:

Example Explained - The MySQL Database

The database table we use in the

FirstName LastName Age

The PHP File

Explanation: When the query is sent

The common gateway interface

The common gateway interface (CGI) is a standard way for

Java Server Page (JSP)

Active Server Page (ASP)

Dynamic Hypertext Markup

Dynamic Hypertext Markup Language (DHTML) is a

Dynamic content, which allows the user to dynamically

S-ar putea să vă placă și