DOM tree + ajax

Many new web frameworks rely on the dual.

– JSF
– Rich Faces
– GWT
– JQuery

Advertisements

javascript lookup-hash implemented as object

Javascript syntax is rich and confusing. Better get the underlying idea before you try to memorize the syntax.

There's no builtin construct to get the length of an associative array, since it's an object.

http://nfriedly.com/techblog/2009/06/advanced-javascript-objects-arrays-and-array-like-objects/

Everything in javascript is an object. Everything. Arrays, functions, even numbers! Because of this, you can do some really interesting things, such as modifying the prototypes of Objects, Arrays, etc

Javascript arrays are a type of object used for storing multiple values in a single variable. Each value gets numeric index and may be any data type.

http://docstore.mik.ua/orelly/webprog/jscript/ch08_06.htm OReilly's javascript book:

JavaScript objects are much more like Perl hashes than C++ or Java objects.

http://www.quirksmode.org/js/associative.html

In JavaScript, objects are also associative arrays (or hashes). That is, the property

theStatus.Home

can also be read or written by calling

theStatus['Home']

Thus, you can access each property by entering the name of the property as a string into this array. Such an array associates each key with a value (in this case the key Home is associated with the value normal). In the Perl programming language it is also called a hash.

Unlike **Perl**, which requires you to create such an associative array explicitly, JavaScript automatically creates a associative array for each object.

ajax paradigm is imperfect

based on http://en.wikipedia.org/wiki/Rich_Internet_application

Ajax has recently been used most prominently by Google for projects such as Gmail and Google Maps. However, creating a large application in this framework is very difficult (echoed by the “lunch interviewer” in Google), as many different technologies must interact to make it work, and browser compatibility requires a lot of effort. In order to make the process easier, several open source Ajax Frameworks have been developed, as well as commercial frameworks.

Ajax complicates software testing activities. These complications lengthen the software development process.

ajax self-quiz

Some if not all answers are found in your book.

Q: describe an ajax application proxy. Created in what language? Why needed? Connects which 2 parties that can’t talk directly?

q: describe a simple xmlHttpRequest data flow starting from a onClick, going through an onreadyStateChange special-js function, with some page fragment updated. (more common than hidden frame, but not more complex)
 

%%javascript/ajax iview q

You did this for years but some nitty-gritty iview questions may make u appear /amateur/ (adjective)
 
Many answers are in your book.
 
* how do u access all the

elements in a page@@

* how do u add a

before the 2nd last

@@

* how do u let a user click a button to add a new

in a designated location on the page@@ Use innerHTML

* how do u change the style of an element@@
* why and how do u register multiple functions (event-handlers) for a button’s onClick@@
* how do u unregister an event handler@@
 
 

what ajax brings2the pre-ajax web

slogans:

“background call to server” to retrieve data needed to update a page fragment

pre-ajax: Given a chunk of (xml) data, javascript to use it to modify page fragments
pre-ajax: javascript to access ANY element via the full DOM
pre-ajax: javascript event handlers to send data to server

beneath ajax paradim — onreadystatechange

ajax paradigm can be very confusing. Don’t ask me exactly why. Let’s really master one piece at a time. Let’s try to memorize a component’s relationship with other components. Memorize and try to develop quick reflex that you had with struts, java, unix, perl,
 
#1 reflex:
                    “onreadystatechange callback = javascript function triggered by data from GET/POST”
 
 
You already know that a GET (ignore POST for now) always has a caller function, in our case a js function. Caller function always receives the Gdata (GET-data), dictated by http. Now sit up — Gdata is passed to a “special-js” function. Avoid cliches like “callback”.
 
* special-js uses the data returned by GET
* special-js = a JAVASCRIPT function
* => special-js runs in the browser  
* => special-js usually modifies the DOM content in the browser
* special-js checks if (readyState == 4)
 
special-js function, as a javascript function, is often defined amid the html and has a name. The special-js function name must be set with
       
        XMLHttpRequest  .  onreadystatechange = your_special_javascript_function_name
 

beneath ajax paradim — innerHTML is used in javascript

innerHTML is frequently used. Anything in ajax paradigm can be confusing. Let’s really master one piece at a time. Let’s try to memorize a component’s relationship with other components. Memorize and try to develop quick reflex that you had with struts, java, unix, perl,
 
#1 reflex:
                        “innerHtml is used in javascript only”
 
 
* In javascript you use “innerHtml” to read/edit parts of the Document-Object-Model 
* innerHtml refers to browser content ie page fragments in the browser
* innerHtml has meaning after page loading, not during or before, the browser completes loading a page or a fragment from a ajax call.