1 / 14

Event Handling Programming with AJAX

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

ivan
Télécharger la présentation

Event Handling Programming with AJAX

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related