AJAX & Advanced JavaScript
What is JavaScript?
JavaScript is a client-side technology that we use to enhance the user's experience in browser based applications. It can be used to manipulate individual parts of a webpage on the fly, detect a user's interaction with that webpage very closely and even submit server-side requests without refreshing the page (via AJAX).
The Document Object Model & JavaScript
HTML is a document formatting language used to control the layout of content in Web pages. Specific HTML rules, called "tags," are mapped in a tree like structure in what is known as the "document object model," or DOM. Once a Web page is loaded in a browser, we can manipulate specific DOM nodes using JavaScript. For example, we can show, hide, animate, alter opacity or change color to any element that exists in a page's DOM structure.
What is AJAX?
AJAX, or Asynchronous JavaScript and XML, is the practice of using JavaScript to submit server-side calls "behind the scenes" or without subjecting a user to a page refresh. Using this approach, we can submit a request for a list of data from the database server and selectively update a specific part of the screen with the result. The alternative would involve a page refresh where the entire page would be served, transmitted and redrawn.
- Problems with web-applications and what we are doing about it
- Web applications are often characterized as slow and cumbersome because of the constant page-refreshing that occurs as users interact with the interface. Think about it, each time the user requests or inputs information, the page flashes as their request is interpreted by a web-server and a response is delivered back to their browser. We believe that this model is flawed.
- "Click and Wait"
- "Click and wait" has long been a sad but accurate descriptor of a typical Web experience. Web apps are slated as slow and cumbersome, again, sad but true. Users witness their interface constantly wiped on and off their screen as requests get passed to and from the server. Not only is this slow, but it makes for a very jolty and interrupted experience. We use AJAX to eliminate the "click and wait" problem. The result: quick, uninterrupted interfaces that look and feel like desktop applications.
- Stateless Environment
- Inherent to the client-server model is the challenge of maintaining state between client and server. The problem is that the server is merely responding to the current request without regard to past or previous requests. In so doing, it resets the user's interface each time a page is loaded. For example, if a user enters information into a form and then mistakenly hits the refresh button, all of their work will be lost. "State-less-ness" has historically been a good enough reason to discount the Web as an acceptable medium for networked business applications. JavaScript and AJAX changes everything.
- Poor Usability
- The built in user-interface (UI) components that are currently supported by the W3C are extremely limiting. Web developers are limited to text fields, checkboxes, radio buttons drop down and multi-select lists. This severely limits the usability of Web apps. Data input involves more clicks and entries than users feel like enduring. Using DHTML (Javscript and HTML), however, we construct UI components that reduce the headache of interacting with Web applications. The date picker UI component is a great example of how DHTML can be used to improve interfaces.
- Here are some of the things we are doing in our work with JavaScript and AJAX:
- User-Friendly Interface Design
- We use JavaScript to enhance the default set of UI components that ship with browsers. In so doing, we create more natural and productive Web apps that are engaging, not frustrating. For example, the ability to click and drag has long been absent from many Web applications. Using JavaScript, we can handle and detect drag and drop events, identify the objects at play and intelligently create Web requests that call methods on the server. Drag and drop could significantly improve the way users manage e-mail in their webMail systems, transfer funds when banking online or add items to their cart while shopping online.
- Real-Time Experiences
- As data is updated on the backend (database, SOAP, XML or other data source), the interface updates on the fly to display the current data. No page refresh is necessary. Imagine a real-time pricing model dynamically updating data displayed on the screen. We achieve this by repeatedly submitting web-requests in the background that detect changes on the server-side. If a change is detected, the appropriate part of the screen is updated without upsetting the rest of the interface. This method is called polling.
- Client-Side Event Listeners
- We can detect specific user behavior like keystrokes or mouse movements and generate server-side requests accordingly. Using client-side event listeners, HTML objects displayed in the browser can actually become intelligent, not just for show. In fact, interaction can be added to every single page object, with good reason of course. The key, however, is to use AJAX so that the user can interact with objects without losing state due to a page-refresh. Take a look at this example of AJAX being used to compute shipping prices as soon as the user enters a 5 character zip code. Click here.
Take a look at our Web design portfolio to see how our approach has aided in the success of our clients. If you are interested in talking to us about your Web-project, please feel free to contact us today.
back to top
