Working Architecture of AJAX

Document Object Model (DOM)
The document object model is a convention for representing and interacting with HTML, XHTML and XML elements.  The current DOM level in the specification is DOM level 3 and all major browsers support this DOM level.  Web Browsers do not have to use DOM in order to render an HTML document but JavaScript requires DOM in order to inspect or modify a web page dynamically. 

To understand the importance of DOM, once a web browser renders an HTML document the browser window no longer sees the individual HTML objects on the page, instead seeing the page as a whole and therefore the page would be considered static.  However a JavaScript enabled browser uses the DOM after the page has been rendered and can therefore interact with the individual objects, thus making the page dynamic.

It is important to note that the browser does not create the DOM or have any concept of it.  It is the purpose of the browsers rendering engine to parse the HTML elements into a DOM.  This is why some websites only work with specific browsers, because the JavaScript was written to work specifically for that browsers rendering engine.  Examples of common rendering engines are Trident/MSHTML which works exclusively with Internet Explorer, and Webkit and Gecko which work with Safari, Chrome and Firefox.

DOM Hierarchy
The HTML objects which belong to the DOM have a descending relationship with each other starting with the Navigator (browser), then the Window (content) and then the document (the page itself and all of its content).
 Navigator
 Window
 Document
• Anchor
• Link
• Form
• Text Box
• Radio Button
• Check Box
• Button

DOM is the means by which JavaScript can call an object by its name and access it accordingly.  Without JavaScript a task like sorting a table by a column heading would have required a round trip to the server to pull back the data in that order.  Instead JavaScript accesses the table data and simply reorders it on the fly and updates that particular view with the new reordered data. 

DOM in relation to Browser Driven Load Testing
BDLT works directly against the DOM recognizing and calling specific objects by their appropriate name.  The reason SilkPerformer uses the Browser Application is that it needs a way to hook into, see and interact with the DOM objects and this would not be possible using Internet Explorer by itself.  So the Browser Application is merely a stripped down version of Internet Explorer which allows the recorder access to the DOM. 

XPATHXML Path Language is a query language used for selecting nodes from an XML document.  XPath is based on a logical inverted tree representation of the XML document and provides the ability to navigate around the tree using appropriate locator strings. 

XPath and Browser Driven Load Testing

SilkPerformer uses a subset of the XPath query language to identify DOM elements.  All API calls that interact with DOM elements take XPath query strings as input parameters. The XPath query strings are referred to as locators. For example, the API call BrowserLinkSelect(“//a[@href=’www.companyxyz.com’]”) uses the locator//a[@href=’www.companyxyz.com’] which identifies the first link that has www.companyxyz.com as the value of its href attribute.

The following table lists all XPath constructs that are supported by SilkPerformer

Supported XPath Construct	Sample	Description
Attribute	a[@href='myLink']	Identifies all DOM Links with the given href attribute that are children of the current context. All DOM attributes are supported.
Index	a[1]	Identifies the first DOM link that is a child of the current context. Indices are 1-based in XPath.
Logical Operators: and, or, =	a[(@href='microfocus' or @caption != 'b') and @id='p']
.	.//div[@id='menuItem']/.	The" ." refers to the current context (similar to the well known notation in file systems. The example is equivalent to //div[@id='menuItem']/
..	//input[@type='button']/../div	Refers to the parent of an object. For example, the sample identifies all divs that contain a button as a direct child.
/	/form	Finds all forms that are direct children of the current object. ./form is equivalent to / form and form.
/	/form/input	Identifies all input elements that are a child of a form element.
//	//input[type='checkbox']	Identifies all check boxes in a hierarchy relative to the current object.
//	//div[id='someDiv'//input[type='button']	Identifies all buttons that are a direct or indirect child of a div that is a direct or indirect child of the context.
/	//div	Identifies all divisions that are direct or indirect children of the current context.

The following table lists the XPath constructs that SilkPerformer does not support:

Unsupported XPath Construct	Example
Comparing two attributes to one another	a[@caption = @href]
Attribute names on the right side are not supported. Attribute names must be on the left side.	a['abc' = @caption]
Combining multiple XPath expressions with and or or.	a [@caption = 'abc'] or .//input
More than one set of attribute brackets	div[@class = 'abc'] [@id = '123'] (use div[@caption = 'abc' and @id = '123'] instead)
More than one set of index brackets	a[1][2]
Wildcards in tag names or attribute names	*/@c?ption='abc'
Logical operators: not, !=	a[@href!='someValue'], not[@href='someValue']
Any construct that does not explicitly specify a class or the class wildcard. For example, including a wildcard as part of a class name.	//[@caption = 'abc']

AJAX
Asynchronous JavaScript and XML is a group of interrelated web development methods used on the client side to create asynchronous web applications.  With Ajax, web applications can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behavior of the existing page.

HTML and CSS can be used in combination to mark up and style information. The DOM is accessed with JavaScript to dynamically display, and to allow the user to interact with the information presented. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads.

Prior to AJAX most websites were based on complete HTML pages and each user action required that the page be re-loaded from the server.  This process is inefficient as all page content disappears and must be reloaded.  Each time a page is reloaded due to a partial change the whole page must be resent instead of only the changed data, placing additional load on the server.