View Full Document

25 views

Unformatted text preview:

AJAX Workshop Karen A Coombs University of Houston Libraries Jason A Clark Montana State University Libraries What is AJAX AJAX stands for Asynchronous Javascript and XML However not all AJAX apps involve XML AJAX uses a combination of technologies including XHTML CSS DOM XML XSLT XMLHttp JavaScript and a server scripting language such as PHP or Coldfusion AJAX was created because web developers needed a method for building more responsive and interactive applications AJAX Components XHTML and CSS Ajax applies these familiar Web standards for styling the look and feel of a page and to markup those areas on a page that will be targeted for data updates DOM document object model Ajax uses the DOM to manipulate dynamic page views for data and to walkthrough documents to cherrypick data The DOM enables certain pieces of an Ajax page to be transformed and updated with data XML JSON Javascript Object Notation HTML or plain text Ajax can use any of these standards to provide structure to the data it passes to and from a page XMLHttpRequest object The heavy lifter for Ajax It s a javascript object embedded in most modern browsers that sets up data request response pipelines between client and server Javascript Lightweight programming language that Ajax uses for instructions to bind all of the components together Why Use AJAX You want to make your applications more interactive You want to incorporate data from external Web Services You don t want your users to have to download a plugin Client vs Server Scripting Client scripting o Web browser does all the work Server Scripting o Web server does all the work AJAX leverages both client and server side scripting How AJAX Works AJAX Web Interaction What you don t see Data reload happens in the background JavaScript queries the server to get the proper data without you knowing it Page updates without a screen reload Potential Problems Javascript MUST be enabled Back button doesn t always work Pages can be difficult to bookmark Search engines may not be able to index all portions of an AJAX site Cross browser differences in how XML is dealt with Some AJAX examples Gmail Flickr Rojo Google Suggest Tada Lists Basic AJAX Components Server side Component Communicates with the database or web service Can be written in any server side language PHP ASP Coldfusion etc Client side Component Written in Javascript often uses XMLHttp Accesses the server side page in the background Hidden Frame Method Communication with server takes place in a frame that user can t see Back and Forward buttons still work If something goes wrong user receives no notification XMLHttp Method Code is cleaner and easier to read Able to determine if there is a failure No browser history Back and Forward buttons break Potential Uses for AJAX Error checking in forms AutoSuggest Drag and Drop objects functionality Move around on image or map so you can see different parts Preload content you want to show later Apply limits to search results and get new results quickly AJAX for Libraries Browsing subject headings Pre displaying indexes and databases categories Complex ILL or contact forms Federated Search OPAC and digital library interfaces AJAX Library Use Cases Phoenix Live OPAC OCLC Research http phoenix orhost org Federated Search Curtin University of Technology Library Perth Western Australia http library curtin edu au cgibin search search cgi query submit Search Guesstimate Virginia Tech Libraries http addison vt edu AJAX Sample Applications PageInsert WorldCat Form http localhost ajax BrowseSearch LOC Subject Headings http localhost ajax browseloc php Code Sample 1 WorldCat Form WorldCat XML file to provide content xml version 1 0 encoding UTF 8 standalone yes content header What is Open WorldCat header description The Open WorldCat program makes records of library owned materials in OCLC s WorldCat database available to Web users on popular Internet search bibliographic and bookselling sites Links to content in library collections books serials digital images and many other formats appear alongside links to traditional Web content description sourceDomain worldcatlibraries org sourceDomain sourceUrl http worldcatlibraries org wcpa isbn 0471777781 sourceUrl content Explanation Our source file Various and sundry factoids about WorldCat some associated urls header and description element to populate the heading and description of the content sourceDomain will give an action value to our WorldCat search form sourceUrl element will provide a link to an Open Worldcat record Code Sample 2 WorldCat Form Web page for user interface and display div id container div id main a name mainContent a h1 Find it in a Library Use Open WorldCat h1 p a onclick createRequest xml worldcat xml href show Learn more about Open Worldcat a p div id content div div end main div div end container div Explanation XHTML form that gives action to our script Notice the javascript onclick event handler on p tag div id content will be populated with script messages OR new html tags received via our Ajax requests Code Sample 3 WorldCat Form Using the XMLHttpRequest Object creates browser specific request using XmlHttpRequest Object function createRequest url if window XMLHttpRequest request new XMLHttpRequest else if window ActiveXObject request new ActiveXObject MSXML2 XMLHTTP else alert Please upgrade to a newer browser to use the full functionality of our site makeRequest url sends request using GET HTTP method to grab external data function makeRequest url request onreadystatechange parseData request open GET url true request send null Explanation First part of our javascript Creates the XMLHttpRequest Using the if and else statements to check for Web browsers different implementations of XMLHttpRequest Ends with makeRequest function Code Sample 4 WorldCat Form Communicating the status of our request checks state of HTTP request and gives brief status note to user function communicateStatus obj if obj readyState 0 document getElementById content innerHTML Sending Request if obj readyState 1 document getElementById content innerHTML Loading Response if obj readyState 2 document getElementById content innerHTML Response Loaded if obj readyState 3 document getElementById content innerHTML Response Ready if obj readyState 4 if obj status 200 return true else if obj status 404 Add a custom message or redirect the user to another page document getElementById content innerHTML File not found else document


Access the best Study Guides, Lecture Notes and Practice Exams

Loading Unlocking...
Login

Join to view AJAX Workshop and access 3M+ class-specific study document.

or
We will never post anything without your permission.
Don't have an account?
Sign Up

Join to view AJAX Workshop and access 3M+ class-specific study document.

or

By creating an account you agree to our Privacy Policy and Terms Of Use

Already a member?