ajax – asynchronous javascript and xml ajax is used to develop fast dynamic web applications ...

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

Upload: amberly-watson

Post on 21-Jan-2016

227 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: AJAX – Asynchronous JavaScript and XML  Ajax is used to develop fast dynamic web applications  Allows web pages to be updated asynchronously by transferring

Event Handling Programming with AJAX

By: Courtney Ball and Brian Robbins

Page 2: AJAX – Asynchronous JavaScript and XML  Ajax is used to develop fast dynamic web applications  Allows web pages to be updated asynchronously by transferring

Traditional AJAX AJAX – Asynchronous JavaScript and

XML

Page 3: AJAX – Asynchronous JavaScript and XML  Ajax is used to develop fast dynamic web applications  Allows web pages to be updated asynchronously by transferring

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: AJAX – Asynchronous JavaScript and XML  Ajax is used to develop fast dynamic web applications  Allows web pages to be updated asynchronously by transferring

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: AJAX – Asynchronous JavaScript and XML  Ajax is used to develop fast dynamic web applications  Allows web pages to be updated asynchronously by transferring

Traditional Ajax

Page 6: AJAX – Asynchronous JavaScript and XML  Ajax is used to develop fast dynamic web applications  Allows web pages to be updated asynchronously by transferring

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: AJAX – Asynchronous JavaScript and XML  Ajax is used to develop fast dynamic web applications  Allows web pages to be updated asynchronously by transferring

Event Driven AJAX

Page 8: AJAX – Asynchronous JavaScript and XML  Ajax is used to develop fast dynamic web applications  Allows web pages to be updated asynchronously by transferring

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: AJAX – Asynchronous JavaScript and XML  Ajax is used to develop fast dynamic web applications  Allows web pages to be updated asynchronously by transferring

User Interface

Page 10: AJAX – Asynchronous JavaScript and XML  Ajax is used to develop fast dynamic web applications  Allows web pages to be updated asynchronously by transferring

Screen Shots

Page 11: AJAX – Asynchronous JavaScript and XML  Ajax is used to develop fast dynamic web applications  Allows web pages to be updated asynchronously by transferring

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: AJAX – Asynchronous JavaScript and XML  Ajax is used to develop fast dynamic web applications  Allows web pages to be updated asynchronously by transferring

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: AJAX – Asynchronous JavaScript and XML  Ajax is used to develop fast dynamic web applications  Allows web pages to be updated asynchronously by transferring

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: AJAX – Asynchronous JavaScript and XML  Ajax is used to develop fast dynamic web applications  Allows web pages to be updated asynchronously by transferring

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