Differences

This shows you the differences between two versions of the page.

--- eg-259:lecture12 [2012/03/01 16:30] – [End of Part 2] eechris
+++ eg-259:lecture12 [2012/03/07 08:06] (current) – [What's Next?] eechris
@@ Line 89: / Line 89: @@
 ===== Narrowing the Gap =====
-  * In 2005 there were example web applications which illustrated that the gap between web application and desktop application was being narrowed. E.g. [[http://www.google.com/webhp?complete=1&hl=en|Google Suggest]] and [[http://maps.google.com/|Google Maps]].
+  * In 2005 there were example web applications which illustrated that the gap between web application and desktop application was being narrowed. E.g. [[http://www.google.com/|Google Suggest]] (now built into search) and [[http://maps.google.com/|Google Maps]].
   * Google Suggest and Google Maps are examples of an approach to web applications that was termed Ajax by Jesse James Garrett and his colleagues at Adaptive Path.
 ----
-Take a look at [[http://www.google.com/webhp?complete=1&hl=en|Google Suggest]] (http://www.google.com/webhp?complete=1&hl=en). Watch the way the suggested terms update as you type, almost instantly. Now look at [[http://maps.google.com/|Google Maps]] (http://maps.google.com/). Zoom in. Use your cursor to grab the map and scroll around a bit. Again, everything happens almost instantly, with no waiting for pages to reload.
+Take a look at [[http://www.google.com/|Google Search]] (http://www.google.com/). Watch the way the suggested terms update as you type, almost instantly. Now look at [[http://maps.google.com/|Google Maps]] (http://maps.google.com/). Zoom in. Use your cursor to grab the map and scroll around a bit. Again, everything happens almost instantly, with no waiting for pages to reload.
@@ Line 109: / Line 109: @@
   * Standards-based presentation using XHTML and CSS;
   * Dynamic display and interaction using the Document Object Model;
-  * Data interchange and manipulation using XML and XSLT;
+  * Data interchange and manipulation using JSON, XML and XSLT;
   * Asynchronous data retrieval using ''XMLHttpRequest''; and
   * JavaScript binding everything together.
@@ Line 169: / Line 169: @@
 ===== Who's Using Ajax? =====
-  * Google is making a large investment in Ajax: [[http://www.orkut.com/|Orkut]], [[http://www.gmail.com/|Gmail]], [[http://www.google.com/calendar|Google Calendar]], [[http://groups-beta.google.com/|Google Groups]], [[http://docs.google.com/|Google Docs]], [[http://www.google.com/webhp?complete=1&hl=en|Google Suggest]] and [[http://maps.google.com/|Google Maps]] are all examples of Ajax applications.
+Short answer ... everyone!
+  * Google made a large investment in Ajax: [[http://www.orkut.com/|Orkut]], [[http://www.gmail.com/|Gmail]], [[http://www.google.com/calendar|Google Calendar]], [[http://groups-beta.google.com/|Google Groups]], [[http://docs.google.com/|Google Docs]], [[http://www.google.com/webhp?complete=1&hl=en|Google Suggest]] and [[http://maps.google.com/|Google Maps]] are all examples of Ajax applications.
   * Many features that make [[http://www.flickr.com/|Flickr]], Amazon's [[http://a9.com/|A9.com]], [[http://del.icio.us|del.icio.us]] and [[http://www.facebook.com/|Facebook]] popular also rely on Ajax.
   * Ajax is an important part of the strategy underlying [[http://get.live.com/|Windows Live]] and [[http://www.yahoo.com/|Yahoo!]]
@@ Line 183: / Line 185: @@
   * Relies on the non-standard ''XMLHttpRequest''((''XMLHttpRequest'', Wikipedia, the free encyclopedia. URL: [[wp>XMLHttpRequest]].)) object introduced by Microsoft as an ActiveX control for Internet Explorer/Windows.
   * Available on most modern browsers, and being standardized by W3C((The ''XMLHttpRequest'' Object, W3C Working Draft, 27 September 2006, URL: http://www.w3.org/TR/XMLHttpRequest/)) but expect some variation between browser implementations
-  * ''XMLHttpRequest'' is an API that can be used by JavaScript, JScript, VBScript and other web browser scripting languages to transfer and manipulate XML data to and from a web server using HTTP, establishing an independent connection channel between a web page's Client-Side and Server-Side.
   * The data returned from ''XMLHttpRequest'' calls will often be provided by back-end databases. Besides XML, ''XMLHttpRequest'' can be used to fetch data in other formats, e.g. JSON or even plain text.
+----
+<note>
+''XMLHttpRequest'' is an API that can be used by JavaScript, JScript, VBScript and other web browser scripting languages to transfer and manipulate XML data to and from a web server using HTTP, establishing an independent connection channel between a web page's Client-Side and Server-Side.
+</note>
@@ Line 192: / Line 197: @@
   * By default ''XMLHttpRequest'' returns XML
-    * This can be manipulated as if it was a DOM object or further transformed with XSLT
+    * This can be manipulated as if it was a DOM object or further transformed with XSLT((You don't see many examples of Web data being manipulated in this way))
   * It can also return a directly parsable text format called JSON((JSON, Wikipedia, Wikipedia, the free encyclopedia. URL: [[wp>JSON]].))
-    * JSON (pronounced like the English given name Jason), which stands for "JavaScript Object Notation", is a lightweight computer data interchange format.
-    * JSON is a subset of the object literal notation of JavaScript but its use does not require JavaScript.
 ----
+<note>JSON (pronounced like the English given name Jason), which stands for "JavaScript Object Notation", is a lightweight computer data interchange format. JSON is a subset of the object literal notation of JavaScript but its use does not require JavaScript.
+</note>
 JSON is based on a subset of the JavaScript Programming Language. The format is specified in [[http://www.faqs.org/rfcs/rfc4627.html|RFC 4627]]. The official MIME Media Type for JSON is ''application/json''.
@@ Line 311: / Line 317: @@
 The first parameter of the call to ''open()'' is the HTTP request method -- ''GET'', ''POST'', ''HEAD'' or any other method you want to use and that is supported by your server. Keep the method capitalized as per the HTTP standard; otherwise some browsers (like Firefox) might not process the request. For more information on the possible HTTP request methods you can check the W3C specs.
-The second parameter is the URL of the page you're requesting. As a security feature, you cannot call pages on 3rd-party domains. Be sure to use the exact domain name on all of your pages or you will get a 'permission denied' error when you call ''open()''. A common pitfall is accessing your site by //domain.tld//, but attempting to call pages with //%%www.domain.tld%%//.
+The second parameter is the URL of the resource you're requesting.
+<note warn>
+You cannot access resources from 3rd-party domains. This is called cross site scripting (XSS) [[wp>Cross-site_scripting]] and is not allowed as a security feature. Be sure to use the exact domain name on all of your pages or you will get a 'permission denied' error when you call ''open()''. A common mistake is accessing your site by //domain.tld//, but attempting to get resources with //%%www.domain.tld%%//.
+</note>
 The third parameter sets whether the request is asynchronous. If ''TRUE'', the execution of the JavaScript function will continue while the response of the server has not yet arrived. This is the A in AJAX.
@@ Line 325: / Line 335: @@
 Otherwise, the server will discard the POSTed data.
 ===== Step 2: Handling the Server Response =====
@@ Line 377: / Line 386: @@
 ===== Step 3: A Complete Example =====
-  * Let's put it all together and do a simple HTTP request ([[http://www.cpjobling.me/eg-259/examples/lecture12/httprequest_test.html|httprequest_test.html]]).
+  * Let's put it all together and do a simple HTTP request ([[http://eng-hope.swan.ac.uk/eg-259/examples/lecture12/httprequest_test.html|httprequest_test.html]]).
-  * Our JavaScript will request an HTML document, [[http://www.cpjobling.me/eg-259/examples/lecture12/test.html|test.html]], which contains the text "I'm a test." and then we'll ''alert()'' the contents of the //test.html// file.
+  * Our JavaScript will request an HTML document, [[http://eng-hope.swan.ac.uk/eg-259/examples/lecture12/test.html|test.html]], which contains the text "I'm a test." and then we'll ''alert()'' the contents of the //test.html// file.
 ----
-<source http://www.cpjobling.me/eg-259/examples/lecture12/httprequest_test.html javascript|httprequest_test.html>
+<source http://eng-hope.swan.ac.uk/eg-259/examples/lecture12/httprequest_test.html javascript|httprequest_test.html>
 In this example:
@@ Line 398: / Line 407: @@
-  * In the previous example, after the response to the HTTP request was received we used the ''responseText'' property of the request object, which contained the contents of the [[http://www.cpjobling.me/eg-259/examples/lecture12/test.html|test.html]] file. Now let's try the ''responseXML'' property.
+  * In the previous example, after the response to the HTTP request was received we used the ''responseText'' property of the request object, which contained the contents of the [[http://eng-hope.swan.ac.uk/eg-259/examples/lecture12/test.html|test.html]] file. Now let's try the ''responseXML'' property.
-  * First off, let's create a valid XML document that we'll request later on. The document ([[http://www.cpjobling.me/eg-259/examples/lecture12/test.xml|test.xml]]) contains the following:
+  * First off, let's create a valid XML document that we'll request later on. The document ([[http://eng-hope.swan.ac.uk/eg-259/examples/lecture12/test.xml|test.xml]]) contains the following:
 <code xml>
     <?xml version="1.0" ?>
@@ Line 430: / Line 439: @@
 ----
-This code takes the ''XMLDocument'' object given by ''responseXML'' and uses DOM methods to access some of the data contained in the XML document. You can see the [[http://www.cpjobling.me/eg-259/examples/lecture12/test.xml|test.xml]] here and the updated test script [[http://www.cpjobling.me/eg-259/examples/lecture12/httprequest_test_xml.html|here]].
+This code takes the ''XMLDocument'' object given by ''responseXML'' and uses DOM methods to access some of the data contained in the XML document. You can see the [[http://eng-hope.swan.ac.uk/eg-259/examples/lecture12/test.xml|test.xml]] here and the updated test script [[http://eng-hope.swan.ac.uk/eg-259/examples/lecture12/httprequest_test_xml.html|here]].
-<source http://www.cpjobling.me/eg-259/examples/lecture12/httprequest_test_xml.html javascript|httprequest_test_xml.html>
+<source http://eng-hope.swan.ac.uk/eg-259/examples/lecture12/httprequest_test_xml.html javascript|httprequest_test_xml.html>
@@ Line 447: / Line 456: @@
     ?>
 </code>
-  * Here is the example: [[http://www.cpjobling.me/eg-259/examples/lecture12/ajax.html|ajax.html]]
+  * Here is the example: [[http://eng-hope.swan.ac.uk/eg-259/examples/lecture12/ajax.html|ajax.html]]
 ----
 Here is the code:
-<source http://www.cpjobling.me/eg-259/examples/lecture12/ajax.html javascript|ajax.html>
+<source http://eng-hope.swan.ac.uk/eg-259/examples/lecture12/ajax.html javascript|ajax.html>
 See the [[http://www.tizag.com/ajaxTutorial/index.php|tutorial]] for a full explanation.
@@ Line 478: / Line 487: @@
   * Some examples: [[http://code.google.com/webtoolkit/|Google Web Toolkit (GWT)]], [[http://dojotoolkit.org/|dojo]], [[http://www.prototypejs.org/|prototype]], [[http://script.aculo.us/|script.aculo.us]], [[http://developer.yahoo.com/yui/|Yahoo! User Interface Library (YUI)]], [[http://jquery.com/|jQuery]].
+===== Ajax in jQuery =====
+  * Here is the example: [[http://eng-hope.swan.ac.uk/eg-259/examples/lecture12/ajax_jq.html|ajax_jq.html]]
+----
+Here is the code:
+<source http://eng-hope.swan.ac.uk/eg-259/examples/lecture12/ajax_jq.html javascript|ajax_jq.html>
 ===== Ajax in jQuery =====
   * From [[http://15daysofjquery.com/quick-and-dirty-ajax/14/|Quick and Dirty Ajax]] from the [[http://15daysofjquery.com/|15 Days of jQuery]] blog by Jack Born.
@@ Line 484: / Line 502: @@
 <html>
 <object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/XdUFjAvOPU0&rel=1&border=0"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/XdUFjAvOPU0&rel=1&border=0" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object></html>
 ===== Web Sockets =====
@@ Line 570: / Line 587: @@
   * Mapping resources to files
-[[eg-259:lecture11|Previous Lecture]] | [[eg-259:home]] | [[eg-259:lecture14|Next Lecture]]
+[[eg-259:ch15|Previous Session]] | [[eg-259:home]] | [[eg-259:lecture14|Next Session]]