Lecture 9: AJAX, Javascript review.

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

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

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

 Called using objects and constructors; i.e. var xhr = 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:  var xhr = new XMLHttpRequest();  xhr.onreadystatechange = updateXHR;  xhr.open(“GET”, “ true);  xhr.send(null);//Necessary, but always passed null for GET requests.  function updateXHR() { ▪ if (xhr.readyState == 4) ▪ alert(xhr.responseText);  }

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

 There are several libraries which make AJAX easier to use:  Prototype Prototype  Scriptaculous Scriptaculous  jQuery 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.

 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