Ajax

© RAGINIJAIN CC SA 4.0
Ragini Jain
MSc CA 1st
Year (2015 - 2017)
Ajax
real-life app do's n dont's

Ajax basics
● At the core
– JavaScript engine
– XmlHttpRequest object
– Asynchronous callback design pattern
● 'X' in ajax can be
– XML
– JSON
– HTML
– plain text
Single threaded event loop
Prototype based inheritance
Functional programming language
enum XMLHttpRequestResponseType {
"",
"arraybuffer",
"blob",
"document",
"json",
"text"
};

XMLHttpRequest IXMLHttpRequest
nsIXMLHttpRequest
XMLHttpRequest, Level 1
XMLHttpRequest, Level 2
XMLHttpRequest
Microsoft IE 5.0 (1999)
Mozilla Gecko/1.0 (2002)
W3C (April 2006)
W3C (Feb 2008)
W3C, WHATWG (2014)
https://xhr.spec.whatwg.org/

XMLHttpRequest (XHR)
XHR is an Application level API in JavaScript provided
by the browser
Browser takes care of “low-level”
● Protocol negotiation
● Connection establishment
● Pooling and Termination
● Determines the best HTTP(s) transport (HTTP/1.0, 1.1, 2)
● Handles HTTP caching, redirects and content-type negotiation
● Enforces Security, Authentication and Privacy constraints
●

● Support for
– Request timeouts
– Binary and text based data transfers
– Application override of media type and encoding of responses
– Monitoring progress events of each request
– Efficient file uploads
– Safe cross-origin requests
XMLHttpRequest level 2 (XHR)
http://caniuse.com/xhr2

XMLHttpRequest classes
XMLHttpRequest XMLHttpRequestUpload

XHR event handler

XMLHttpRequest attribute n methods
Request
● Method
– open( )
– setRequestHeader( )
– send( )
– abort( )
● Attribute
● timeout
● withCredentials
● upload
Response
● Method
– overrideMimeType( )
– getResponseHeader( )
– getAllResponseHeaders( )
● Attribute
– response
– responseURL
– responseType
– responseText
– responseXML
– status
– statusText

XMLHttpRequest (XHR) benefits
● As a browser-level api handles all the low-level details such as
caching, handling redirects, content negotiation, authentication etc
● Makes application APIs much easier to work with, allowing us to
focus on business logic
● Allows the browser to sandbox
● Allows the browser to enforce a set of security and policy
constraints on the application code
● XHR interface enforces strict HTTP semantics on each request
● XHR API allows the application to add custom HTTP headers

Asynchronous in Ajax
open(method, url [, async = true [, username = null [, password = null]]])
var request = new XMLHttpRequest();
var method = "GET";
var url = "http://github.com/mexem";
var isAsync = true;
request.open(method, url, isAsync);
if (200 == request.status) {
console.log(request.responseText);
}

The changing face of web applications
● SEO (Search Engine Optimization) is critical for ensuring Page
rank
● A page must have a usable / indexable URL
● Application design should not leak through analysis of client side
structure of code
● SSL for transport level security is de-jure

Ajax DO's
● Use Ajax to save client side content
– Entire form processing can be done using ajax
– When the user hits the save button, ajax can take over
– SEO friendly, since search engine will never click/push a button
on a form and is unaware of the ajax usage

Ajax DO's
● Use Ajax for user-specific actions
– Set cookies
– Track sessions
– Log actions as long as the content isn't dependent on it

Ajax DO's
● Use Ajax to do form field validation
– Each form field can be validated using range or regular
expressions or business rules coded in javascript
–

Ajax DO's
● Use Ajax to display status message
– User interaction should be captured using Ajax and a response
in the form of status message should be shown
– This increases the interactivity of the web application while
maintaining SEO characteristics

Ajax DO's
● Use Ajax for logical parts of a page but not the whole page
– Real-time updates and interactions cause parts of the page to
update.
– The forward and back buttons of the browser are still working
– The url is a real url which can be bookmarked and shared
–

Ajax DO's
● External data sources are used to aggregate content for a page.
This leads to slower loading of page
● Use Ajax to load information from external source after loading
the page.

Ajax DONT's
● Donot use Ajax to display static text content
– Search engines process main page content to calculate page
rank

Ajax DONT's
● Donot use Ajax for paging a table or list
– Dynamically generated data inside a table or list should be
indexed properly
–

Ajax DONT's
● Donot use Ajax for navigational purpose
– <A>nchor links should be in HTML and not in Javascript
– Search engines donot follow Javascript links
– Search engines will get stuck on the top link and will exit the
page without indexing it completely
–

Ajax DONT's
● Donot leak the structure of the database in the key-value pair
updates
● One click is cool, but all the data sent in the Ajax call is a security
nightmare
– Every profile update
– Every key-value pair sent with info about the record which will
be updated
– Multiple key-value pairs sent show a pattern which mirrors the
structure in the database

Ajax DONT's
● Donot use .innerHTML to adjust the HTML generated response
from the server
● Instead do the adjusting of DOM in JavaScript
● Use JSON to convert server-side variables to JavaScript variables
● This keeps the 'presentation' and 'computation' separate from
each other
● Use arrays of information instead of HTML
●

Ajax Security : Cross-site scripting (XSS)
http://ruslanbes.com/devblog/2014/10/12/jquery-cross-site-scripting-tutorial-and-de
Same-Origin policy

References
https://youtu.be/_fUGWFGUrUw
High Performance JavaScript
https://youtu.be/v2ifWcnQs6M
JavaScript, a very successful
Functional programming
language
Nicholas Zakas

Ajax

More Related Content

What's hot

Similar to Ajax

Recently uploaded

Ajax