lecture 9 ajax javascript review n.
Skip this Video
Loading SlideShow in 5 Seconds..
How to Create Your Own Website PowerPoint Presentation
Download Presentation
How to Create Your Own Website

How to Create Your Own Website

98 Vues Download Presentation
Télécharger la présentation

How to Create Your Own Website

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Lecture 9: AJAX, Javascript review. How to Create Your Own Website

  2. Today’s Lecture: • AJAX • Synchronous vs. asynchronous browsing. • Refreshing only “part of a page” from a URL. • Frameworks: Prototype, Scriptaculous, etc. • Javascript Review • All coding. • Changing the behavior of links by file extension. • Moving and fading page elements. • Changing the page based on the time of day.

  3. Synchronicity • Ordinary (Synchronous) page loading: • Browse to one page. • Click a link. • New page pops up in its entirety. • The old page is lost. • Asynchronous loading: • Event triggered (not necessarily a link click). • New page data loaded. • Alteration made to the current page. • The current page is retained. • Asynchronous browsing is accomplished using a popular technique called AJAX: Asynchronous Javascript and XML.

  4. XMLHttpRequest • Recall the list of standard Javascript classes. • Most classes were named intuitively, e.g.: • Math • Date • Number • But there was also one class called XMLHttpRequest. • This is the class used with AJAX. • It instructs the browser to create an “HTTP Request” (i.e. request a new page) and return XML (or any sort of data). • The result is populated with the contents of the page we asked the browser to request. • XHTML 1.0 is valid XML (which is why we preferred using it to HTML 4.0). • The contents can either be returned as a raw String of code or as a DOM tree node. • The String is parsed using the String class or inserted into the page with document.write(). • The DOM node can be appended into the page using appendChild() or insertBefore(). • What can this be used for? • Form validation is usually performed twice: once on the client-side for user convenience and once on the server-side for actual security. • Using AJAX, we can validate once on the server side and return the results without leaving the current page: convenient and secure, and it saves effort! • We can retrieve content from the server (e.g. user preferences) only when required, avoiding burdening users who don’t make use of that feature with the overhead. • We can selectively load only the parts of a page that we need, without needing to reload the whole page. • We can make navigation appear smoother, more like a desktop application.

  5. XMLHttpRequest Details • Called using objects and constructors; i.e. varxhr = new XMLHttpRequest(); • Two useful (in fact, required) functions: • open(method, url, asynchronous): connects to the specified url. Method is either “GET” or “POST”. Asynchronous is true/false; if false, the function will not return until the page is loaded. (AJAX always uses true). • send(postdata): Sends POST variables (such as form data) to the server. Postdata is a string. If method is GET, call send(null); GET requests do not include POST variables. • Five variables: • status: Once the request completes, the numeric status code sent back by the server (i.e. 200 (OK), 404 (Not Found), 500 (Internal Server Error)). • responseText: The raw text of the response. • responseXml: A DOM node representing the response. • readyState: The current state of the connection (connecting, waiting for response, received, etc. 4 means received). • onreadystatechange: An event which fires when the state of the connection changes. Can be used to determine when an asynchronous request completes. Manipulate this by passing the name of a function, like any other event. • Example usage: • varxhr = new XMLHttpRequest(); • xhr.onreadystatechange = updateXHR; •“GET”, “”, true); • xhr.send(null); //Necessary, but always passed null for GET requests. • function updateXHR() { • if (xhr.readyState == 4) • alert(xhr.responseText); • }

  6. Graceful Degradation • Use AJAX, but do not rely on AJAX. • Some users may not have Javascript enabled. • Some may have Javascript enabled and may not support XMLHttpRequest • IE6 requires a different means of invocation. • You can check for this and use it, but the point still stands that not all browsers may support AJAX. • When using advanced web development features, practice a philosophy known as graceful degradation. • Do not rely on advanced features. • Use them to enhance the user experience, not enable it. • Allow the user to perform all possible actions without relying on the feature. • AJAX often degrades to normal hyperlinks or form behavior.

  7. AJAX Demonstration

  8. Javascript Frameworks • There are several libraries which make AJAX easier to use: • Prototype • Scriptaculous • jQuery • These also allow you to create interesting dynamic effects on your pages. • Use of these frameworks is outside of the scope of this course, but they’re intuitive.

  9. Review: Updating Link Destinations

  10. Review: Musophobia

  11. Review: Time of Day

  12. Next Time • Final Lecture: putting it all together. • Design of a fully interactive website in its entirety, from concept to completed design.

  13. A Nonprofit Organization of New Jersey, USA