A Highly Optimized AJAXHTML Databinding SQL Web Client

1
A Highly Optimized AJAX/HTML Databinding SQL Web
Client By Paul Grosch
2
Demo
Why a SQL Web Client?

• I am a web database developer with 7 years of
  data-centric intranet application development
  experience. I have noticed a recurring problem
  with modern day web applications large amounts
  of tabular data leads to poor user experience.
  This includes the display, edit, sort and search
  of large recordsets. The SQL Web Client is a
  practical example of a web application with these
  requirements. In addition
• it has a powerful interface to quickly produce
  large datasets for testing
• it has the potential to be a useful open source
  project
• it is database independent

3
Problem Analysis Conceptual Solution
Common obstacles for thin clients wielding large
datasets
ltscript languagejavascriptgt DataBoundTable.dat
aPageSize200 function Page(command) switch
(command) case 'first' DataBoundTable.firs
tPage() break case
'up' DataBoundTable.previousPage() break c
ase 'down' DataBoundTable.nextPage() break
case 'last' DataBoundTable.lastPage()
break lt/scriptgt
ltscript languagejavascriptgt DataBoundTable.dat
aPageSize200 function Sort() //sort xml
into a string var s XMLDataIsland.transformNode
(XSLSortSchema.XMLDocument) //load string back
into dataisland xmldata.XMLDocument.loadXML(s)
//rebind DataBoundTable.dataSrc"" DataBoundTa
ble.dataSrc"xmldata" lt/scriptgt
ltxml srcGetData.aspx?tabledoctor
idDataIslandgt lt?xml version1.0
encoding"UTF-8" ?gt ltdgt ltr aID bLast
c"First" d"Middle" e"Specialty" f"StartDate"
/gt ltr a1437982 bMaly" c"Kurt" d"J"
e"Anesthesiology" f"10/10/2004 120000" /gt ltr
a1437983 bAbdel-Wahab" c"Hussein" d"M"
e"Cardiology" /gt ltr a"1437984" b"Brunelle"
c"Janet" e"Dermatology" /gt ... ... lt/dgt lt/xmlgt
lttable dataSrcDataIsland dataPageSize200gt lt
trgtlttdgtltinput typetext datafldagtlttdgt
lttdgtltinput typetext datafldbgtlt/tdgt
lttdgtltinput typetext datafldcgtlt/tdgt
lttdgtltinput typetext dataflddgtlt/tdgt
lttdgtltinput typetext datafldegtlt/tdgt
lttdgtltinput typetext datafldfgtlt/tdgt lt/trgt lt/t
ablegt
lt?xml version1.0 encoding"UTF-8" ?gt ltdgt ltr
aID bLast c"First" d"Middle"
e"Specialty" f"StartDate" /gt ltr a1437982
bMaly" c"Kurt" d"J" e"Anesthesiology"
f"10/10/2004 120000" /gt ltr a1437983
bAbdel-Wahab" c"Hussein" d"M" e"Cardiology"
/gt ltr a"1437984" b"Brunelle" c"Janet"
e"Dermatology" /gt ... ... lt/dgt

• Network/server latency
• Minimize data transferred (attribute based
  schema).
• Browser parse/render time separate data/display
  elements
• Use (xml data island, databound html table).
• Browser script parse/execution time
• Dont loop through data in script (DOM methods).
• Browser not interactive during load or long
  running scripts
• Leverage asynchronous behaviors (HTML
  Databinding).
• Paging at the web app or database
• Cache data locally, page resultset (HTML
  Databinding).
• Sorting and searching typically require a server
  request
• Sort and search locally (XSLT transforms).

ltscript languagejavascriptgt function
Save() var nlInserted _xmlDataIsland.documen
tElement.selectNodes("r_at_mf 'i'") lt/script
gt
4
Architectural Overview (HTML Databinding)
Client (Internet Explorer)
Databinding Event Model and DHTML
XML Data Island
Server ASP.NET
XMLHTTPRequest Object and DHTML
5
Demo
Feature List and demo

• Spreadsheet like single table edit access
• SQL Editor
• Sequence generation
• Stateful transaction management
• SQL History
• Paging
• Sort, Resize, Hide
• Large recordset handling

6
Demo
Comparisons Refining the Project Focus
7
Comparision 1 (HTTP Post) Comparison
Client (Browser)
Server ASP.NET
8
Comparison 2 (AJAX Client Cache) Comparison
Client (Internet Explorer)
DHTML Event Model
XHTML DOM Document
Server ASP.NET
XMLHTTPRequest Object and DHTML
9
(No Transcript)
10
(No Transcript)
11
(No Transcript)
12
(No Transcript)
13
(No Transcript)
14
(No Transcript)
15
(No Transcript)
16
XHTML Client (Browser)
DHTML Event Model
writes
Server ASP.NET
XMLHTTPRequest.XMLDocument
events
HTTP Get
XHTML Table
XML
XSLT Transforms
XML Responses
XML Diffgrams
writes
reads
XMLHTTPRequest Object and DHTML
17
(No Transcript)
18
Questions