Event Handling Programming with AJAX

1. Event Handling Programming with AJAX By: Courtney Ball and Brian Robbins

2. Traditional AJAX • AJAX – Asynchronous JavaScript and XML

3. 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

4. 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

5. Traditional Ajax

6. 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

7. Event Driven AJAX

8. 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

9. User Interface

10. Screen Shots

11. 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()" />

12. XMLHttpRequest object • function blue() { • varxhr; • //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 XmlHttpRequestObject • } • catch (e3) { xhr = false; } • } • } • xhr.onreadystatechange = function() • { • if(xhr.readyState == 4) • { • if(xhr.status == 200) • document.bgColor = "blue"; • else • document.ajax.dyn="Error code " ; • } • };

13. 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

14. 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