event handling programming with ajax
DESCRIPTION
Event Handling Programming with AJAX. By: Courtney Ball and Brian Robbins. Traditional AJAX. AJAX – Asynchronous JavaScript and XML. Traditional AJAX. Ajax is used to develop fast dynamic web applications - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Event Handling Programming with AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815e8e550346895dcd1e67/html5/thumbnails/1.jpg)
Event Handling Programming with AJAX
By: Courtney Ball and Brian Robbins
![Page 2: Event Handling Programming with AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815e8e550346895dcd1e67/html5/thumbnails/2.jpg)
Traditional AJAX AJAX – Asynchronous JavaScript and
XML
![Page 3: Event Handling Programming with AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815e8e550346895dcd1e67/html5/thumbnails/3.jpg)
Traditional AJAX Ajax is used to develop fast dynamic
web applications Allows web pages to be updated
asynchronously by transferring data server side behind the scenes
Ajax is not a programming language itself but uses various web development techniques such as JavaScript, PHP, HTML, CSS and XML
![Page 4: Event Handling Programming with AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815e8e550346895dcd1e67/html5/thumbnails/4.jpg)
Traditional AJAX Ajax uses HTTP requests to serve as
the connection between the server and the user
Data is sent to the server, processed and immediately sent back to client side
![Page 5: Event Handling Programming with AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815e8e550346895dcd1e67/html5/thumbnails/5.jpg)
Traditional Ajax
![Page 6: Event Handling Programming with AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815e8e550346895dcd1e67/html5/thumbnails/6.jpg)
Event Driven AJAX Similar execution to traditional Ajax but
uses an XMLHttpRequest object Instead of using a continuous HTTP
connection, after a request is sent, the request is terminated, so there are new requests after each response
![Page 7: Event Handling Programming with AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815e8e550346895dcd1e67/html5/thumbnails/7.jpg)
Event Driven AJAX
![Page 8: Event Handling Programming with AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815e8e550346895dcd1e67/html5/thumbnails/8.jpg)
Our Project Using HTML, JavaScript and PHP, we
are creating a simple web page that displays 5 options of colors in which the user can change the background to their desired color
![Page 9: Event Handling Programming with AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815e8e550346895dcd1e67/html5/thumbnails/9.jpg)
User Interface
![Page 10: Event Handling Programming with AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815e8e550346895dcd1e67/html5/thumbnails/10.jpg)
Screen Shots
![Page 11: Event Handling Programming with AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815e8e550346895dcd1e67/html5/thumbnails/11.jpg)
Coding Examples JavaScript for UI
//Function that is called by the forms in javascript function blue() { document.bgColor = "blue"; }
//Form for calling a specific color<input type="button" value="BLUE" onClick= "blue()" />
![Page 12: Event Handling Programming with AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815e8e550346895dcd1e67/html5/thumbnails/12.jpg)
function blue() { var xhr; //try and catch block for particular web browser
try { xhr = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) { try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e2) { try { xhr = new XMLHttpRequest(); //Instantiates new XmlHttpRequest Object }
catch (e3) { xhr = false; } } }
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) document.bgColor = "blue"; else document.ajax.dyn="Error code " ; }
};
XMLHttpRequest object
![Page 13: Event Handling Programming with AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815e8e550346895dcd1e67/html5/thumbnails/13.jpg)
Conclusion Ajax is effective for fast dynamic web
browsing, it is commonly used so that a user does not have to refresh the we browser to acquire new information
![Page 14: Event Handling Programming with AJAX](https://reader036.vdocuments.us/reader036/viewer/2022062323/56815e8e550346895dcd1e67/html5/thumbnails/14.jpg)
Conclusion Ajax is commonly seen in the popular
social network facebook
It is also used in eCommerce websites such as eBay
Most recent it is seen in Youtube