Download
1 / 13
130 likes | 241 Views
Lecture 9: AJAX, Javascript review. How to Create Your Own Website. 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.
E N D
Lecture 9: AJAX, Javascript review. How to Create Your Own Website
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.
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.
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.
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; • xhr.open(“GET”, “http://www.google.com”, true); • xhr.send(null); //Necessary, but always passed null for GET requests. • function updateXHR() { • if (xhr.readyState == 4) • alert(xhr.responseText); • }
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.
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.
Next Time • Final Lecture: putting it all together. • Design of a fully interactive website in its entirety, from concept to completed design.
A Nonprofit Organization of New Jersey, USA http://www.projectpolymath.org
