XHTML, Javascript, AJAX, PHP - Informatika...

XHTML, XHTML, JavascriptJavascriptJavascriptJavascript, AJAX, PHP, AJAX, PHP

AJAXAJAX

AAsynchronous JJavaScript

AJAX is only a name given to a set of tools that were previously existing.

AJAX is a technique for creating web pages.

AJAX allows web pages to be AJAX allows web pages to be asynchronouslyasynchronously by exchanging small amounts of data with the server behind the scenesthat it is possible to update parts of a web page, withoutwithout reloading the whole pagereloading the whole page

Classic web pages, (which do not use AJAX) must reload the entire page if the content should change (this slows down your web page).

AJAXAJAX

avaScript AAnd XXML

is only a name given to a set of tools that were

is a technique for creating fastfast and dynamicdynamic

allows web pages to be updatedupdatedallows web pages to be updatedupdatedby exchanging small amounts of

behind the scenes. This means that it is possible to update parts of a web page,

reloading the whole pagereloading the whole page.

Classic web pages, (which do not use AJAX) must reload the entire page if the content should change (this slows down your web page).

http://w3schools.com/ajax/ajax_intro.asp

AJAXAJAX

The processing of web page formerly was only in the server-side, using web services or PHP scripts, before the whole page was sent within the network.

Ajax allows to perform processing in the client computer (in JavaScriptJavaScript) with data taken from the server.server.

“AsynchronousAsynchronous”, means that the response of the server will be processed only when available; not having to wait and to freeze the display of the page.

Examples of applications using AJAX: Google Maps (since 2005), Gmail, Youtube, and

Facebook tabs.

AJAXAJAX

The processing of web page formerly was only in the side, using web services or PHP scripts,

before the whole page was sent within the network.

Ajax allows to perform processing in the client ) with data taken from the

”, means that the response of the server will be processed only when available; not having to wait and to freeze the display of the page.

Examples of applications using AJAX:Google Maps (since 2005), Gmail, Youtube, and

http://www.xul.fr/en-xml-ajax.html

AJAX SERVER??AJAX SERVER??

No such thing!No such thing!

Server-side applications just need to serve data

using HTTPHTTP

Clients using AJAXAJAX framework can communicate Clients using AJAXAJAX framework can communicate

with any type of server applications PHP script

Java servlet

JSP

etc.

AJAX SERVER??AJAX SERVER??

side applications just need to serve data

framework can communicateframework can communicate

with any type of server applications

ClientClient--Side ProgrammingSide Programming

Recall the technologies comprising

1. HTML (contentcontent)

2. Document Object Model (DOM) (

3. JavaScript (behaviourbehaviour

4. Cascading Style Sheets (

JavaScriptJavaScript is a powerful tool for dynamic clientprogramming

But what if we wanted to frequently communicate with the server?

Side ProgrammingSide Programming

Recall the technologies comprising DHTMLDHTML

Document Object Model (DOM) (data structuredata structure)

behaviourbehaviour)

Cascading Style Sheets (presentationpresentation)

is a powerful tool for dynamic client-side

But what if we wanted to frequently communicate

Recall: Recall: Incorporating Incorporating

<html><body><script type="text/javascript">

</script>

Handling browsers that do not support Javascript

</script>

<noscript><h2>Your Browser doesn’t support JavaScript! </h2>

</noscript></body></html>

– use HTML comments so that browsers that do not support JavaScript do not display your code

Incorporating Incorporating JavaSciptJavaScipt

Handling browsers that do not support Javascript

<h2>Your Browser doesn’t support JavaScript! </h2>

so that browsers that do not support JavaScript do not display your code

ClientClient--Server CommunicationServer Communication

JavaScriptJavaScript runs inside a sandbox attached to the browser

Sequence of steps:

1.1. JavaScriptJavaScript code uses DOM to build document.

2. GET/POST string is formed.2. GET/POST string is formed.

3. Browser encodes HTMLqueries into an HTTPHTTP string.

4. Browser establishes contact with server and sends the HTTPHTTP request.

5. Browser receives HTTPHTTPserver and displays the body of the page.

It would be nice if one could write JavaScript code that can directly communicate with the

Server CommunicationServer Communication

runs inside a sandbox attached to the

code uses DOM to build HTML

string is formed.string is formed.

HTML and GET/POSTstring.

establishes contact with server and request.

HTTPHTTP response from the server and displays the body of the page.

It would be nice if one could write JavaScript code that can with the server

• AJAXAJAX uses a programming model with

• These events are user actionsuser actions, they call elements of the web page.

• InteractivityInteractivity is achieved with formsforms

• DOMDOM allows to link elements of the page with

How does How does AJAXAJAX

• DOMDOM allows to link elements of the page with extract data from XMLXML or Text or Text files provided by the server.

uses a programming model with displaydisplay and eventsevents.

, they call functionsfunctions associated with

formsforms and buttonsbuttons.

allows to link elements of the page with actionsactions and also to

AJAXAJAX work?work?

allows to link elements of the page with actionsactions and also to files provided by the server.


BrowserBrowser

An event occurs...

Create an XMLHttpRequest object

SendXMLHttpRequest

BrowserBrowser

Wait until document has finished loading

Process the returned data using Javascript

Update page content

AJAXAJAX work?work?

ServerServer

Internet

ProcessHttpRequestHttpRequest

Create a response and send data back to the browser

Internet

To get data on the serverTo get data on the server, XMLHttpRequestXMLHttpRequest

• openopen: create a connection.• sendsend: send a request to the server.

•• Data furnished by the server Data furnished by the server the XMLHttpRequestXMLHttpRequest objectobject:


• responseXml for an XMLXML• responseText for a plain textplain text

XMLHttpRequestXMLHttpRequest provides two methods:

: send a request to the server.

Data furnished by the server Data furnished by the server will be found in the attributes of :

AJAXAJAX work?work?

XMLXML file orplain textplain text.

readyState The value ranges from 0 to 4,

status200 means OK404 if the page is not found.

responseText holds loaded data as a string of characters.

responseXml holds an XML loaded file, DOM's method allows to extract data.

XMLHttpRequestXMLHttpRequest

onreadystatechangeproperty that takes a functionreadystatechange event

These are the propertiesproperties of an objectobject that we are going to utilise to retrieve a response from the server.

0 to 4, 4 means "ready".

if the page is not found.

holds loaded data as a string of characters.

holds an XML loaded file, DOM's method allows to extract data.

XMLHttpRequestXMLHttpRequest objectobject

function as value that is invoked when the event is dispatched.

http://www.xul.fr/en-xml-ajax.html

of an XMLHttpRequest XMLHttpRequest that we are going to utilise to retrieve a

•• MySQLMySQL database database

Files

•• MySQLMySQL database database

•• PHP script PHP script ((*.php*.php

•• HTML document HTML document

•• JavascriptJavascript ((*.js*.js

database database ((*.sql*.sql))database database ((*.sql*.sql))

*.php*.php))

HTML document HTML document ((*.htm*.htm))

*.js*.js))Communicates with the

MySQL server to retrieve records based on a user’s

query

DatabaseDatabase Stock ExampleStock Example

The database is queriedqueried when the application, delivering accurate information without the inconvenience of a page reload.

AJAXAJAX can be used to runrun PHP scriptsminute information stored on a database.

Stock ExampleStock Example

Contains the user’s query

when the user interacts user interacts with the application, delivering accurate information without the inconvenience of a page reload.

PHP scripts that obtain up-to-the-minute information stored on a database.

PHP scriptPHP scriptoutputoutput


<!DOCTYPE html PUBLIC ""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head><title>Stock Script</title>

We have two JavascriptJavascript filesfiles in our example. They are loaded in the <head> <head> section of our HTML file.

<title>Stock Script</title><meta http-equiv="Contentcharset=ISO-

<script type="text/javascript" src="</script><script type="text/javascript" src="</script> </head>...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


<title>Stock Script</title>

example18-2.htm

in our example. They are loaded section of our HTML file.

<title>Stock Script</title>equiv="Content-Type" content="text/html; -8859-1" />

<script type="text/javascript" src="getxmlhttprequest.js">

<script type="text/javascript" src="example18-2.js">


<body>

<h2>Fruit Stock Information:</h2><form action="" method="post"><p><label for="strStock">Stock Query: </label><input type="text" name="

example18

We have a query input text fieldtext field

<input type="text" name="</p>

<p><input type="button" value="Check" </p>…

The submit button submit button includes an onclickonclickstartJSstartJS()() function when clicked (example18(example18


<h2>Fruit Stock Information:</h2><form action="" method="post">

<label for="strStock">Stock Query: </label><input type="text" name="strStock" id="strStock"/>

example18-2.htm (continuation…)

and a submit buttonsubmit button

<input type="text" name="strStock" id="strStock"/>

<input type="button" value="Check" onclick="startJS();"/>

onclickonclick event event which invokes the(example18(example18--2.js).2.js).


<body>

<h2>Fruit Stock Information:</h2><form action="" method="post"><p><label for="strStock">Stock Query: </label><input type="text" name="

example18

The <div> <div> element defines a sectionsectionthe PHP scriptPHP script.

<input type="text" name="</p>

<p><input type="button" value="Check" </p><div id="strStockResult</form>

</body></html>


<h2>Fruit Stock Information:</h2><form action="" method="post">

<label for="strStock">Stock Query: </label><input type="text" name="strStock" id="strStock"/>

example18-2.htm (continuation…continuation…)

sectionsection used to display the outputoutput from

<input type="text" name="strStock" id="strStock"/>

<input type="button" value="Check" onclick="startJS();"/>

strStockResult"></div>

AJAX AJAX –– connectconnect to server, to server,

function startJS() {

xhrequest = null;try {

xhrequest = getXMLHttpRequest();}catch(error) {

document.write("Cannot run Ajax code using this browser");}

if(xhrequest != null) {

startJS() startJS() is invoked when the button is clicked.

if(xhrequest != null) {// get form valuesvar strStock = document.getElementById("

var strUrl = "example18-2.php??strStock=" +

xhrequest.onreadystatechange = changePagechangePagexhrequest.open("GETGET", strUrl, true);xhrequest.send(null);

}}...

Null because we have appended the query parameters already

to server, to server, sendsend requestrequest

document.write("Cannot run Ajax code using this browser");

example18-2.js

Checks if AJAX is supported.It checks if the xmlhttprequest

object can be created.

Obtain query data entered on the form

is invoked when the button is clicked.

var strStock = document.getElementById("strStock").value;

strStock=" + strStock;

changePagechangePage;Sets a function that obtains the data output from PHP script

Open a connection to the PHP script, then pass the data

PHP script file + User’s query

Null because we have appended the

AJAX AJAX –– obtain output obtain output

function changePage() {if (xhrequest.readyState == 44 && xhrequest.status ==

var strResponse strResponse = xhrequest.responseTextdocument.getElementById("strStockResult

}

example18

changePage() obtains the data output obtains the data output then stores it into a variable named

}}

The data is then injected into the section defined in the HTML. This is accomplished using the innerHTML methodinnerHTML method.

obtain output obtain output from serverfrom server

&& xhrequest.status == 200200) {responseText;

strStockResult").innerHTML = strResponsestrResponse;

example18-2.js (continuation…)

Check if data is available

obtains the data output obtains the data output from the PHP script then stores it into a variable named strResponse.

The data is then injected into the strStockResult <div> <div> section defined in the HTML. This is accomplished using the

Retrieve response from the server

• an objectobject used both for making the retrieving the server’s response

• We have to wait for the data to be available to process it.

• In this purpose, the state of availability of data state of availability of data given by the readyState attribute of

XMLHttpRequestXMLHttpRequest

0: not initialized. 1: connection established. 2: request received. 3: answer in process. 4: finished.

given by the readyState attribute of

only the last one is really useful!

States of readyStatereadyState

used both for making the XMLHttpRequest and response

We have to wait for the data to be available to process it.

state of availability of data state of availability of data is attribute of XMLHttpRequestXMLHttpRequest.

XMLHttpRequestXMLHttpRequest objectobject

: not initialized. : connection established. : request received. : answer in process.

attribute of XMLHttpRequestXMLHttpRequest.

only the last one is really useful!

readyStatereadyState

getXMLHttpRequestgetXMLHttpRequest

function getXMLHttpRequest() {var xhrequest = null;

if(window.XMLHttpRequestXMLHttpRequest) {

// If IE7, Mozilla, Safari, etc: Use native object

getxmlhttprequest.js

// If IE7, Mozilla, Safari, etc: Use native objecttry {

xhrequest = new XMLHttpRequest()return xhrequest;

}catch(exception) {

// OK, just carry on looking}

}

Our Javascript needs to be able to acquire the appropriate type of depending on the browser the script is running in.

getXMLHttpRequestgetXMLHttpRequest() () –– useruser--defineddefined


The window object represents an open window in a browser.

Check if this property is present


XMLHttpRequest();

Continued...Continued...

Our Javascript needs to be able to acquire the appropriate type of XMLHttpRequest object, depending on the browser the script is running in.

Use native scripting

getXMLHttpRequestgetXMLHttpRequest

else {// ...otherwise, use the ActiveX control for IE5.x and IE6

var IEControls = ["MSXML2.XMLHttp.5.05.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];

for(var i=0; i<IEControls.length; i++) {

try {xhrequest = new ActiveXObject(IEControls[i]);

getxmlhttprequest.js

xhrequest = new ActiveXObject(IEControls[i]);return xhrequest;

}catch(exception) {// OK, just carry on looking}

}// if we got here we didn’t find any matches// if we got here we didn’t find any matchesthrow new Error("Cannot create an XMLHttpRequest");

}}

getXMLHttpRequestgetXMLHttpRequest() () –– useruser--defineddefined

// ...otherwise, use the ActiveX control for IE5.x and IE6

","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];

(IEControls[i]);

Testing is done starting from the most recent backwards.

(IEControls[i]);

// if we got here we didn’t find any matches// if we got here we didn’t find any matchesthrow new Error("Cannot create an XMLHttpRequest");

Microsoft has developed different implementations of the XMLHttpRequest object over time.

ActiveXObject is an older version implementation.

<?php$strStock = $_GET$_GET["strStock"];

$dbLocalhost = mysql_connect("localhost", "root", "")

mysql_select_db("stockstock", $dbLocalhost ) or die("Could not find database: " . mysql_error());

$dbRecords = mysql_query("SELECT * FROM$dbLocalhost ) or die("Problem reading table: " . mysql_error());

PHP PHP ScriptScript

$intRecords = mysql_num_rows($dbRecords );

if ($intRecords == 0)echo "<p>Stock Item '$strStock' Unknown.</p>";

else {while ($arrRecords $arrRecords = mysql_fetch_array($dbRecords

$strDescription = $arrRecords $arrRecords ["Description$intQuantity = $arrRecords$arrRecords["Quantity"];echo "<p>$strDescription: Currently we have $intQuantity of boxes.</p>";

}}?>

• Queries the database and outputs the corresponding records found

("localhost", "root", "") or die("Could not connect: " . mysql_error());

) or die("Could not find database: " . mysql_error());

stock stock WHERE Name='$strStock' ", ) or die("Problem reading table: " . mysql_error());

ScriptScript

example18-2.php

);

echo "<p>Stock Item '$strStock' Unknown.</p>";

$dbRecords)) {Description"];

"];echo "<p>$strDescription: Currently we have $intQuantity of boxes.</p>";

Queries the database and outputs the corresponding records found

Contains the user’s query

Table named stockstock

Stock Table Stock Table

You need to createcreate your database first using then import the stock.sqlstock.sql file containing the structure and data entries.

IdId is a primary keyprimary key, also set to

Stock Table Stock Table (Structure)(Structure)

your database first using phpMyAdminphpMyAdmin, file containing the structure and data

, also set to auto_incrementauto_increment..

Stock Table Stock Table

•You can populate the database easily using •You can import the stock.sqlstock.sql file containing the structure and initial data entries.•You can select the INSERTINSERT tag to add more data entries.

Stock Table Stock Table (data)(data)

You can populate the database easily using phpMyAdminphpMyAdmin..file containing the structure and

tag to add more data entries.

Files

•• Images (Images (*.jpg*.jpg))




Files

))

*.php*.php))


*.js*.js))

Zooming photo thumbnail applicationZooming photo thumbnail application

• user is presented with a seriesseriesphotos• Upon moving a mouse over mouse over larger image larger image is displayed.


seriesseries of small thumbnails small thumbnails of

mouse over mouse over one of the thumbnails, a


• Using standard Javascript and (X)HTML would require all of the images to be downloaded whenever a user moves a mouse over an image.

• Using AJAXAJAX, only the images that the user wishes to zoom in on are downloaded and a full page refresh is full page refresh is avoidedavoided


Using standard Javascript and (X)HTML would require all of the images to be downloaded whenever a user moves a mouse over an image.

, only the images that the user wishes to zoom in on are avoidedavoided.

<html><head><style type="text/css">img {

float:right;}</style></head>

CSS float: CSS float: applied on an Image applied on an Image

Image_float.htm

CSS-style definition

<body><p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p><p><img src="logocss.gif" width="95" height="84" />This is some text. This is some text. This is some text.This is some text. This is some text. This is some text.This is some text. This is some text. This is some text.This is some text. This is some text. This is some text.</p></body></html>

•Elements are floated horizontally, this means that an element can only be floatedfloated

applied on an Image applied on an Image

Image_float.htm

style definition

Image file

<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>

" width="95" height="84" />This is some text. This is some text. This is some text.This is some text. This is some text. This is some text.This is some text. This is some text. This is some text.This is some text. This is some text. This is some text.

Elements are floated horizontally, this means that an floatedfloated left or right, not up or down.

CSS float: CSS float: applied on an Image applied on an Image applied on an Image applied on an Image

<script type="text/javascript" src="getxmlhttprequest.js</script><script type="text/javascript" src="example18</script>

<style type="text/css">

#big {float: left;

}

htmlhtml


}

#small {float: left;width: 320px;

}

</style></head>

• Embedded CSS-style definition is included to define theStyle of the small thumbnail photos and the larger zoomed image.

getxmlhttprequest.js">

example18-3.js">

htmlhtml

Example18-3.htm

style definition

Image file

style definition is included to define theStyle of the small thumbnail photos and the larger

<h2>Zooming Pictures:</h2><div id="small"><img src="graphics/1s.jpg" onmouseover="startJS(1);" alt="small picture"/><img src="graphics/2s.jpg" onmouseover="startJS(2);" alt="small picture"/><img src="graphics/3s.jpg" onmouseover="startJS(3);" alt="small picture"/><img src="graphics/4s.jpg" onmouseover="startJS(4);" alt="small picture"/><img src="graphics/5s.jpg" onmouseover="startJS(5);" alt="small picture"/><img src="graphics/6s.jpg" onmouseover="startJS(6);" alt="small picture"/><img src="graphics/7s.jpg" onmouseover="startJS(7);" alt="small picture"/><img src="graphics/8s.jpg" onmouseover="startJS(8);" alt="small picture"/>

htmlhtml

Example18

<img src="graphics/8s.jpg" onmouseover="startJS(8);" alt="small picture"/><img src="graphics/9s.jpg" onmouseover="startJS(9);" alt="small picture"/><img src="graphics/10s.jpg" onmouseover="startJS(10);" alt="small picture"/><img src="graphics/11s.jpg" onmouseover="startJS(11);" alt="small picture"/><img src="graphics/12s.jpg12s.jpg" onmouseover="startJS(12);" alt="small picture"/></div>

<div id="big"><img src="graphics/1l.jpg1l.jpg" width='600' </body></html>

• Each of the thumbnail images is displayed within a division with an id “small”.

Large imageLarge image

<img src="graphics/1s.jpg" onmouseover="startJS(1);" alt="small picture"/><img src="graphics/2s.jpg" onmouseover="startJS(2);" alt="small picture"/><img src="graphics/3s.jpg" onmouseover="startJS(3);" alt="small picture"/><img src="graphics/4s.jpg" onmouseover="startJS(4);" alt="small picture"/><img src="graphics/5s.jpg" onmouseover="startJS(5);" alt="small picture"/><img src="graphics/6s.jpg" onmouseover="startJS(6);" alt="small picture"/><img src="graphics/7s.jpg" onmouseover="startJS(7);" alt="small picture"/><img src="graphics/8s.jpg" onmouseover="startJS(8);" alt="small picture"/>

htmlhtml

Example18-3.htm (continuation…)(continuation…)

<img src="graphics/8s.jpg" onmouseover="startJS(8);" alt="small picture"/><img src="graphics/9s.jpg" onmouseover="startJS(9);" alt="small picture"/><img src="graphics/10s.jpg" onmouseover="startJS(10);" alt="small picture"/><img src="graphics/11s.jpg" onmouseover="startJS(11);" alt="small picture"/>

" onmouseover="startJS(12);" alt="small picture"/>

" width='600' alt="large picture"/></div>

Each of the thumbnail images is displayed within a division with an id “small”.

The The altalt attribute provides alternative attribute provides alternative information for an image if a user for information for an image if a user for

some reason cannot view it some reason cannot view it


function startJS(intPictureintPicture) {



document.write("Cannot run Ajax code using this browser");}

if(xhrequest != null) {


if(xhrequest != null) {// get form values

var strUrl = "example18-3.php??intPicture=

xhrequest.onreadystatechange = changePagechangePagexhrequest.open("GETGET", strUrl, true);xhrequest.send(null);

}}...

Null because we have appended the query parameters already


document.write("Cannot run Ajax code using this browser");

example18-2.js



Contains a number representing the image the mouse has moved over.


intPicture=" + intPicture;

changePagechangePage;


Sets a function that obtains the data output from PHP script


PHP script file + User’s query

Null because we have appended the



var strResponse strResponse = xhrequest.responseTextdocument.getElementById(“big").innerHTML =

}

example18


}}

The data is then injected into the section defined in the HTML. This is accomplished using the innerHTML methodinnerHTML method.


&& xhrequest.status == 200200) {responseText;").innerHTML = strResponsestrResponse;




The data is then injected into the strStockResult <div> <div> section defined in the HTML. This is accomplished using the


<?php

$intPicture = $_GET$_GET["intPicture"];

echo "<img src='graphics/$intPicture

?>


• the PHP script obtains the value of the image the mouse has moved over, passed via the GETGET method and stores it in a variable called $intPicture$intPicture.

• It then outputs the (X)HTML element pointing to the corresponding large image.

Name retrieved via GET

$intPicture" . "l.jpgl.jpg' width='600' />";

ScriptScript

example18-3.php

the PHP script obtains the value of the image the mouse has moved and stores it in a variable called

It then outputs the (X)HTML element pointing to the corresponding

Append an Extension to the file name

Name retrieved via

Files

•• Images (Images (*.jpg*.jpg))

•• MySQLMySQL ((*.sql*.sql))




Files

))

))

*.php*.php))


*.js*.js))

Consider developing a website that displays a showing in almost realin almost real--time time customers, sales, etc.

Using AJAXAJAX, we can minimise the effectminimise the effectcontinuously updating graph on the users of your website.

Consider developing a website that displays a graphgraphtime time some data about your

minimise the effectminimise the effect of that continuously updating graph on the users of your website.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


<head><title>Graph Script</title><meta http-equiv="Content-Type" content="text/html; charset=ISO

<script type="text/javascript" src="getxmlhttprequest.js"></script><script type="text/javascript" src="example18

htmlhtml

<script type="text/javascript" src="example18</script><style type="text/css">#graphBars {

float: left; }

#graphScale {float: left; width: 40px;

}</style></head>

• Embedded CSSdefine the Style of the graphing area

CSS

Defines a CSSthat will display the scale of the chart

//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


Type" content="text/html; charset=ISO-8859-1" />

<script type="text/javascript" src="getxmlhttprequest.js">


htmlhtmlExample18-4.htm


Embedded CSS-style definition is included to Style of the graphing area


Defines a CSS-style for an Image file that will display the scale of the chart

<body onloadonload="startJS()startJS();">

<h2>Graph:</h2>

<div id="graph">

</div>

htmlhtml

Example18

a a <div> <div>

</div>

</body></html>

• The <div> <div> section will be populated programmatically via a combination of php script and AJAX.

htmlhtml

Example18-4.htm (continuation…)(continuation…)

<div> <div> section that defines the section that defines the graphing areagraphing area

when the web page is loaded, an when the web page is loaded, an onloadonload event invokes the event invokes the startJS() startJS()

functionfunction

section will be populated programmatically via a combination of php script


function startJS( ) {



document.write("Cannot run Ajax!");}

if(xhrequest != null) {if(xhrequest != null) {// get form values

var objDate = new Date();var intSecs = objDate.getTime();

var strUrl = "example18-4.php??intSecs=" + xhrequest.onreadystatechange = changePagexhrequest.open("GET", strUrl, true);xhrequest.send(null);setTimeout("startJS()", 500);

} }}...

Call startJS() function (itself!500 milliseconds



example18-4.js



A Data object is created and used to return the number of seconds

elapsed since 1/1/1970 using the getTime() function

intSecs=" + intSecs;changePage; Sets a function that obtains

the data output from PHP script


We want to force the browser to obtain new data

via the PHP script

itself!) after


getTime() function



var strResponse strResponse = xhrequest.responseTextdocument.getElementById(“graph").innerHTML =

}

example18


}}

The data is then injected into the in the HTML. This is accomplished using the methodmethod.



&& xhrequest.status == 200200) {responseText;

").innerHTML = strResponsestrResponse;




The data is then injected into the graph <div> <div> section defined in the HTML. This is accomplished using the innerHTML innerHTML


<?php$dbLocalhost = mysql_connect("localhost", "root", "") mysql_select_db(“graphgraph", $dbLocalhost ) or die("Could not find database: " . mysql_error());

srand((double) microtime() * 1000000);$intPercentage = rand(0,99);

$dbWriteRecords= mysql_query("INSERT INTO '$intPercentage')", $dbLocalhost) or die("Problem reading table: " . mysql_error());


$dbRecords = mysql_query("SELECT * FROMor die("Problem reading table: " . mysql_error());$intCount = mysql_num_rows($dbRecords );

if ($intCount > 20) {$intStart = $intCount - 20;$dbRecords = mysql_query(" SELECT * FROM

$dbLocalhost) or die("Problem reading table: " . mysql_error()); }...

• the PHP script queries (INSERT & SELECT) the database and outputs the corresponding records found.

Last 20 entries

Continued...Continued...

("localhost", "root", "") or die("Could not connect: " . mysql_error());

) or die("Could not find database: " . mysql_error());

INSERT INTO percentageValues VALUES ('', or die("Problem reading table: " . mysql_error());

ScriptScriptexample18-4.php

Generate a random number between [0, 99]

percentageValues", $dbLocalhost )

FROM percentageValues LIMIT $intStart, 20", ) or die("Problem reading table: " . mysql_error());

the PHP script queries (INSERT & SELECT) the database and outputs the corresponding records

Table named percentageValuespercentageValues

Last 20 entries

$arrPercent = array (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0);$intSize = count($arrPercent);$intCount = 0;while ($arrRecords= mysql_fetch_array($dbRecords$arrPercent[$intCount++] = $arrRecords["Percentage"];}graph($arrPercent, $intSize);

function graph($arrData, $intSize) { $intBarWidth = 10;

// $intBarSpacing = 10;


// $intBarSpacing = 10;$intMultiplier = 1.5;

$intSize = count($arrData);echo "<div id='graphScale'><img src='graphics/echo "<div id='graphBars'>";echo "<img src='graphics/hiddenbar.gif' width='0' height='" . 99 * $intMultiplier . "'>";for($intCount=0; $intCount<$intSize; $intCount++)

echo "<img src='graphics/redbar.gif' width='$intBarWidth' height='" . * $intMultiplier . "'>";

}}echo "</div>";

}?>

• the graph function uses 2 <div> sections to define the scale and the graphing area.

= array (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0);

$dbRecords)) {["Percentage"];

ScriptScriptexample18-4.php

(continuation…)

Fetch the records

A field in the table

<img src='graphics/scale.gif' width='27' height='150' /></div>";

' width='0' height='" . 99 * $intMultiplier . "'>";for($intCount=0; $intCount<$intSize; $intCount++) {{

' width='$intBarWidth' height='" . $arrData[$intCount]

the graph function uses 2 <div> sections to define the scale and the graphing area.

Generate a graph by displaying an image repetitively

jqueryjquery

jQueryjQuery is a library of JavaScript Functions.

jQueryjQuery is a lightweight "write less, do more"

The jQueryjQuery library contains the following features:

HTML element selections

HTML element manipulation

CSS manipulation

HTML event functions

JavaScript Effects and animations

HTML DOM traversal and modification

AJAX

Utilities

jqueryjquery

is a library of JavaScript Functions.

is a lightweight "write less, do more" JavaScript libraryJavaScript library.

library contains the following features:

animations

HTML DOM traversal and modification

http://w3schools.com/jquery/jquery_intro.asp

jqueryjquery

The jQuery library is stored in a singlesinglejQuery functions.

It can be added to a web page with the following mark

<head><script type="text/javascript" src="<script type="text/javascript" src="

</head>

Note:Note: the <script> tag should be inside the page's the <script> tag should be inside the page's <head> <head> section.section.

jqueryjquery

JavaScript file, containing all the

It can be added to a web page with the following mark-up:

<script type="text/javascript" src="jquery.jsjquery.js"></script>


<script type="text/javascript" src="jquery.jsjquery.js"></script>

the <script> tag should be inside the page's the <script> tag should be inside the page's

Jquery library

JqueryJquery

If you don't want to store the jQuery library on your own computer, you can use the hosted jQuery library from Google or Microsoft.

<head><script type="text/javascript" <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

</head>

Note:Note: the <script> tag should be inside the page's the <script> tag should be inside the page's

<head><script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery

</head>

librarylibrary

If you don't want to store the jQuery library on your own computer, you can use the hosted jQuery library from


src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

the <script> tag should be inside the page's the <script> tag should be inside the page's <head> <head> section.section.

Jquery library

src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>

jQuery uses CSS selectorsselectors to select HTML elements.

Recall: Recall: 1. Incorporating CSS1. Incorporating CSS

Example: External style sheet

hr {color:sienna;}p {margin-left:20px;}

mystyle.css

<head><link rel="stylesheet" type="text/css" href="

</head>

p {margin-left:20px;}body {background-image:url("images/back40.gif");}

myHTML.htm

1. Incorporating CSS1. Incorporating CSS

<link rel="stylesheet" type="text/css" href="mystyle.css”>

image:url("images/back40.gif");}

•You can apply CSS-style formatting to an HTML element either by using an ID selectorID selector or a Class selectorClass selector.

Recall: Recall: 1. Applying CSS to an HTML 1. Applying CSS to an HTML elementelement

ID SELECTOR

•The id selector is used to specify a style for a single, unique element•The id selector uses the id attribute of the HTML element, and is defined with a "•The style rule below will be applied to the element with id="para1":•Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.•Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.

General Syntax: #ID-name{

Property:value;Property:value;/*... and so on.. */

}

<h1 id=”ID-name”> Internet programming </h1>

ID selector application:

style formatting to an HTML element either by using an

1. Applying CSS to an HTML 1. Applying CSS to an HTML elementelement

style for a single, unique element.The id selector uses the id attribute of the HTML element, and is defined with a "#".The style rule below will be applied to the element with id="para1":Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.

> Internet programming </h1>

•You can apply CSS-style formatting to an HTML element either by using an selectorselector or a Class Class selectorselector.

Recall: Recall: 22aa. Applying CSS to an HTML . Applying CSS to an HTML elementelement

class SELECTOR

• The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.• This allows you to set a particular style for any HTML elements with the same class.• The class selector uses the HTML class attribute, and is defined with a "."General Syntax:General Syntax:

.class-name{


}

<h1 class=”class-name”> Internet programming </h1><p class=”class-name”> Dynamic HTML: CSS, HTML, DOM, Javascript </p>

class selector application:

style formatting to an HTML element either by using an ID ID

. Applying CSS to an HTML . Applying CSS to an HTML elementelement

The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.

This allows you to set a particular style for any HTML elements with the same class.The class selector uses the HTML class attribute, and is defined with a "."

> Internet programming </h1>> Dynamic HTML: CSS, HTML, DOM, Javascript </p>

•You can apply CSS-style formatting to an HTML element either by using an selectorselector.

Recall: Recall: 22bb. Applying CSS to an HTML . Applying CSS to an HTML elementelement

class SELECTOR

• You can also specify that only specific HTML elements should be affected by a class.

General Syntax:General Syntax:/* this class selector is only applicable to paragraphs*/

p.class-name{


}

<p class=”class-name”> Dynamic HTML: CSS, HTML, DOM, Javascript </p>

class selector application:

style formatting to an HTML element either by using an ID selectorID selector or a Class Class

. Applying CSS to an HTML . Applying CSS to an HTML elementelement

You can also specify that only specific HTML elements should be affected by a

/* this class selector is only applicable to paragraphs*/

name

> Dynamic HTML: CSS, HTML, DOM, Javascript </p>

jqueryjquery

The jQuery library is stored a singlesingle JavaScript filejQuery functions.

$(this).hide()Demonstrates the jQuery hide() function, hiding the current HTML element.

$("#test").hide()Demonstrates the jQuery hide() function, hiding the element with id="test".Demonstrates the jQuery hide() function, hiding the element with id="test".

$("p").hide()Demonstrates the jQuery hide() function, hiding all <p> elements.

$(".test").hide()Demonstrates the jQuery hide() function, hiding all elements with class="test".

jqueryjquery

JavaScript file, containing all the

Demonstrates the jQuery hide() function, hiding the current HTML element.

Demonstrates the jQuery hide() function, hiding the element with id="test".

http://w3schools.com/jquery/jquery_syntax.asp

Demonstrates the jQuery hide() function, hiding the element with id="test".

Demonstrates the jQuery hide() function, hiding all <p> elements.

Demonstrates the jQuery hide() function, hiding all elements with

jqueryjquery

jQuery uses XPath expressions to select elements with given attributes.

$("[href]") select all elements with an href attribute.

$("[href='#']") select all elements with an href value equal to "#".

$("[href!='#']") select all elements with an href attribute NOT equal to "#".

$("[href$='.jpg']") select all elements with an href attribute that ends with ".jpg".

<a href="http://www.massey.ac.nz/~nhreyes"> 159339 </a>

jqueryjquery

jQuery uses XPath expressions to select elements with given attributes.

select all elements with an href attribute.

select all elements with an href value equal to "#".

select all elements with an href attribute NOT equal to "#".

select all elements with an href attribute that ends with ".jpg".

<a href="http://www.massey.ac.nz/~nhreyes"> 159339 </a>

Document Ready FunctionDocument Ready Function

• to prevent any jQuery code from running before the document is finished loading (

$(document).ready(function(){

// jQuery functions go here...

});

Document Ready FunctionDocument Ready Function

code from running before the document is finished loading (is it ready?is it ready?)

function(){

// jQuery functions go here...

jqueryjquery<html><head>

<script type="text/javascript" src="jquery-1.4.2.min.js<script type="text/javascript">$(document).ready( function() {$("button").click( function() {$("div").load('test1.txt');

} );} );</script>

http://docs.jquery.com/Downloading_jQuery#Current_Release

</script></head><body>

<div><h2>Let AJAX change this text</h2></div><button>Change Content</button>

</body></html>

jqueryjquery

1.4.2.min.js"></script>

jquery1.htm

Jquery library

On click event, load the contents from test1.txttest1.txt into the

div section

http://docs.jquery.com/Downloading_jQuery#Current_Release

</h2></div>

div section

Modify the contents of the <div> <div> section

jqueryjquery

The jQuery library is stored as a singlesinglejQuery functions.

The jQuery syntax is tailor made for selecting HTML elements and perform some action on the element(s).

Basic syntax is: $(selector).action()

• $ (dollar sign) to define jQuery• (selector) to "query (or find)" • jQuery action() to be performed on the element(s)

jqueryjquery

singlesingle JavaScript file, containing all the

The jQuery syntax is tailor made for selecting HTML elements and perform some action on the element(s).

http://w3schools.com/jquery/jquery_syntax.asp

$(selector).action()

(dollar sign) to define jQueryto "query (or find)" HTML elementsHTML elements

to be performed on the element(s)

<html><head><script type="text/javascript" src="jquery-1.4.2.min.js"></script><script type="text/javascript">$(document).ready(function(){$(".flip").click(function(){

$(".panel").slideToggle("slow");});

});</script><style type="text/css"> div.panel,p.flip

jqueryjquery

div.panel,p.flip{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3c3;}div.panel{height:120px;display:none;}</style></head>…

Do not show the panel initially

Settings for both the panel and flip classes

1.4.2.min.js"></script>

jqueryjquery

Jquery library

On click event, (toggle) slide-up or slide-down the html

element of class panel

Jquery2-slide.htm

element of class panel

Settings for both the panel and flip classes

jqueryjquery

<body>

<div class="panel"><p>Special effects like this could be easily incorporated.<p>into your website using jquery! :)</p></div>

<p class="flip">Show/Hide Panel</p>

</body></html>

jqueryjquery

Special effects like this could be easily incorporated.</p>

Jquery2-slide.htm

<div> <div> section of class panel

Serves as a title bar

• It is recommended that you put your functions in a separate ..

jqueryjquery

It is recommended that you put your jQuery..jsjs file

jqueryjquery

ReferencesReferences

Dynamic Web Application Development using

PHP and MySQL – by Stobart and Parsons


http://www.xul.fr/en-xml

http://www.jquery.com

http://w3schools.com/jquery

ReferencesReferences

Dynamic Web Application Development using

by Stobart and Parsons


xml-ajax.html

http://w3schools.com/jquery

Date post:	29-Jun-2020
Category:	Documents
Upload:	others
View:	2 times
Download:	0 times

XHTML, Javascript, AJAX, PHP - Informatika...

Documents