DiggThis

DOM, Ajax and Conventional JavaScript methods

JavaScript Coding Subsets Explained

JavaScript is a scripting language used to enable programmatic access to objects within other applications.  As opposed to a procedural language, JavaScript is distinguishably an interpretive language, able to jump from process to process in an agile fashion.

There are three coding subsets that broadly define the levels at which programmers operate in.

  1. Conventional JavaScript requires at least one declared and initialized variable to operate and produce output.  The only exceptions to this rule are the document.write and windows.alert() methods, which have special permissions to write text and not use variables.  Additionally, the document.write method could in theory write a whole HTML page by using enclosed tags.
    Conventional JavaScript provides a dynamic interface for the user, dealing with scenarios like form validation, interacts with user events and returns values in response to user inputs.  It has user dependencies.
  2. DOM is an object-orientated extension of JavaScript.  Its power lies in its ability to traverse all the nodes of a DOM tree and manipulate the values of object properties.  DOM has object dependencies.  It communicates through other objects.  You could literally build DOM mechanisms to run in the absence of variables.
  3. Ajax is the service of data and values from a server-side repository to a static HTML page.  It serves as an intermediary between client-side and server-side data streams and ultimately as the delivery vehicle that embeds data in a web page. Ajax has database-dependencies.  An Ajax application for example can begin from any user-defined position rather than the startup screen.  Facebook is a case in point where database dependencies render a web page stateless (and in essence three dimensional) when used in conjunction with Ajax.  This ability to create a parallel state by merging an original and a restored state together is a powerful dynamic.

Comparing Conventional, DHTML and AjaXml

The difference between DHTML and Ajax is where the mechanism for the behavior comes from.  In the case of DHTML, dynamic behavior originates from client-side technology (ie: JavaScript and DOM).  In the case of Ajax, the interface for dynamic behavior resides on the client-side while the values reside server-side (ie: PHP or MySQL database).  In DHTML the inability to save variables to a database means the application will always begin from its inherited state on load.  DHTML always initiates from a predefined source.  Ajax on the other hand allows a user to begin with a unique web experience because the dynamic state resides on a server.

 

DOM, Ajax and Conventional JavaScript Dependencies
  Talk Manipulate Receive Send
Conventional Resident Page Limited User Via Form
DOM / DHTML Resident Page Full Ajax No
Ajax + XML

JavaScript
Database

No Yes Yes

 

Conventional, DHTML and AjaXml Dependencies

Each layer of JavaScript can overlap and intermingle with the others.  Each layer also builds on the dimension of the other.  So how do they talk? The above table illustrates the relations, dependencies and limitations of each method. Below is a more detailed explanation.

The four relational dimensions associated with JavaScript comprise of the resident HTML page, JavaScript itself, the user and an external database .  This creates enormous scope. 

Conventional JavaScript is limited to the HTML page it resides on.  Conventional methods are limited to send via a form submission but not receive, unless user prompts are considered.  DOM talks to its resident page with the ability to fully manipulate its properties.  DOM is limited to receive Ajax calls which stores data additional to the resident properties.  DOM cannot send data anywhere other than its resident.  Ajax on the other hand has full capability to send data to and receive data from external destination directories anywhere permitted. Ajax cannot talk to the resident page unless DOM is involved. 

And so we come to the end of our tutorial. I hope you enjoyed the read. Please feel free to use the star-rating system to leave your mark.

 

blog comments powered by Disqus