L8: Dynamic Web Pages: Effective Use of AJAX Flashcards
What is AJAX?
Asynchronous JavaScript & XML.
Remote scripting. An approach for making server requests without reloading the whole page.
What does AJAX rely on?
- Server request browser function (XMLHttpRequest) –> Request to the server for more data.
- Uses document object model (DOM) scripting to make changes to the current page.
AJAX =
DHTML + XMLHTTPrequest
DHTML is a tecnique using:
- XHTML
- CSS
- JavaScript
- DOM
Ajax relies on DHTML and what other web technology?
XMLHttpRequest
without implementing AJAX:
- Request is for a url
* Anything that is returned must be a complete page with appropriate headers.
with the implementation of AJAX:
- Client-side scripts use XMLHttpRequest to make a request for data.
- The data does not have to be XML
- Request can complete at anytime but user is not left waiting for a new page updates achieved through the DOM.
The main advantages of Ajax:
- It’s faster to load a certain section of a webpage than returning a whole page.
- Data-oriented requests mean greater code reuse - especially on the server side.
- Overall approach can be more like a desktop application.
The disadvantages of Ajax:
- The asynchronous data requests rely on technology that can vary from browser to browser.
- Different code needed on different browsers
- Requests may not complete in a timely fashion (or not at all)
- Pages laden with code take longer to load
- Network overheads may make short transfers slow in proportion
AJAX: Installation
Plug-in or installation required
AJAX: Speedy Start
How quickly users can start to interact
AJAX: Granularity
The smallest unit of data updates
AJAX: Portability
Portability across platforms
AJAX: Maintenance
Difficulty of making and distributing changes
AJAX: Sophistication
Richness of the user experience
UML
(Unified Modeling Language) is a standard language for specifying, visualizing, constructing, and documenting the artifacts of software systems.
Gran·u·lar·i·ty
the scale or level of detail present in a set of data or other phenomenon.
AJAX can prevent ____________________.
unnecessary page reloads.
How does Ajax reduce the effects of change blindness?
Eliminates page reloads and reduces load times.
Ajax can prevent unnecessary page reloads but error messages and other feedback still need to be obvious. What are some ways to achieve that?
- Use color and animation appropriately
* Consider the position of feedback
Updating pages without reloading is only effective if…
- users are looking in the right place or
* the change attracts attention by being large, colorful or animated.
Inattention blindness- even large changes may not be seen if..
- The task is demanding
* Users are stressed or fatigued
Change blindness- changes will not be noticed, especially if…
- a page reload is involved
* Users are distracted
Attentional gambling - users will not attend to content or navigation if..
- If it isn’t where they expected it to be
* If they are distracted
What are some perceptual issues in web design?
- Inattention Blindness
- Change Blindness
- Attentional (Gambling) Blindness
What is change blindness?
We cannot see the differences between two images when they are separated by a blank field.
Reloading the whole page runs the risk of…
change blindness
Every page element is represented in the…
Document Object Model
How does scripted enhancements work in practice?
- Every page element is represented in the DOM
- Each can have a unique ID and a class name (provided through tags)
- Scripts can access elements by ID, class or by “walking the model”.
What is the focus in Graceful Degradation?
Failing Safe aka Fault Tolerance
How do you preserve expected navigation behavior?
- Ensure that browser back and forward buttons still do what users expect
- Do not navigate back and forward buttons to a separate section of the page. Go back in the user’s journey history.
What assistive technology do disabled users rely on to use the web?
- Screen readers
- Magnifiers
- Braille output devices
- Alternative pointing devices
- Speech recognition
Web solutions must work in harmony with _____ ______.
Assistive technology
WAI
Web Application Interface
The only technology that is guaranteed to work with search engines is ______.
HTML
To work with search engines, start with a working HTML page and use ______ ______ to add interactivity.
progressive enhancement.
Google now claims to index dynamic pages(but results vary).
ARIA
Accessible Rich Internet Applications
T or F: Most accessibility aides do understand JS, but dynamic updates still rely on upcoming technology(ARIA).
True
What does ARIA provide?
Identification of page elements (with roles and landmarks) and a mechanism for notifying browsers of dynamic updates (live regions).
How does Ajax reduce the effects of change blindness?
Eliminates page reloads
What is ARIA in web technology?
An accessibility standard
