- •preface
- •acknowledgments
- •about this book
- •Who should read this book?
- •Roadmap
- •Code conventions
- •Code downloads
- •Author Online
- •About the title
- •About the cover illustration
- •Rethinking the web application
- •A new design for the Web
- •1.1 Why Ajax rich clients?
- •1.1.1 Comparing the user experiences
- •1.1.2 Network latency
- •1.1.3 Asynchronous interactions
- •1.1.4 Sovereign and transient usage patterns
- •1.1.5 Unlearning the Web
- •1.2 The four defining principles of Ajax
- •1.2.1 The browser hosts an application, not content
- •1.2.2 The server delivers data, not content
- •1.2.3 User interaction with the application can be fluid and continuous
- •1.2.4 This is real coding and requires discipline
- •1.3 Ajax rich clients in the real world
- •1.3.1 Surveying the field
- •1.3.2 Google Maps
- •1.4 Alternatives to Ajax
- •1.4.2 Java Web Start and related technologies
- •1.5 Summary
- •1.6 Resources
- •First steps with Ajax
- •2.1 The key elements of Ajax
- •2.2 Orchestrating the user experience with JavaScript
- •2.3 Defining look and feel using CSS
- •2.3.1 CSS selectors
- •2.3.2 CSS style properties
- •2.3.3 A simple CSS example
- •2.4 Organizing the view using the DOM
- •2.4.1 Working with the DOM using JavaScript
- •2.4.2 Finding a DOM node
- •2.4.3 Creating a DOM node
- •2.4.4 Adding styles to your document
- •2.4.5 A shortcut: Using the innerHTML property
- •2.5 Loading data asynchronously using XML technologies
- •2.5.1 IFrames
- •2.5.2 XmlDocument and XMLHttpRequest objects
- •2.5.3 Sending a request to the server
- •2.5.4 Using callback functions to monitor the request
- •2.5.5 The full lifecycle
- •2.6 What sets Ajax apart
- •2.7 Summary
- •2.8 Resources
- •Introducing order to Ajax
- •3.1 Order out of chaos
- •3.1.1 Patterns: creating a common vocabulary
- •3.1.2 Refactoring and Ajax
- •3.1.3 Keeping a sense of proportion
- •3.1.4 Refactoring in action
- •3.2 Some small refactoring case studies
- •3.2.2 Managing event handlers: Observer pattern
- •3.2.3 Reusing user action handlers: Command pattern
- •3.2.4 Keeping only one reference to a resource: Singleton pattern
- •3.3 Model-View-Controller
- •3.4 Web server MVC
- •3.4.1 The Ajax web server tier without patterns
- •3.4.2 Refactoring the domain model
- •3.4.3 Separating content from presentation
- •3.5 Third-party libraries and frameworks
- •3.5.2 Widgets and widget suites
- •3.5.3 Application frameworks
- •3.6 Summary
- •3.7 Resources
- •Core techniques
- •The page as an application
- •4.1 A different kind of MVC
- •4.1.1 Repeating the pattern at different scales
- •4.1.2 Applying MVC in the browser
- •4.2 The View in an Ajax application
- •4.2.1 Keeping the logic out of the View
- •4.2.2 Keeping the View out of the logic
- •4.3 The Controller in an Ajax application
- •4.3.1 Classic JavaScript event handlers
- •4.3.2 The W3C event model
- •4.3.3 Implementing a flexible event model in JavaScript
- •4.4 Models in an Ajax application
- •4.4.1 Using JavaScript to model the business domain
- •4.4.2 Interacting with the server
- •4.5 Generating the View from the Model
- •4.5.1 Reflecting on a JavaScript object
- •4.5.2 Dealing with arrays and objects
- •4.5.3 Adding a Controller
- •4.6 Summary
- •4.7 Resources
- •The role of the server
- •5.1 Working with the server side
- •5.2 Coding the server side
- •5.2.1 Popular implementation languages
- •5.3 The big picture: common server-side designs
- •5.3.1 Naive web server coding without a framework
- •5.3.2 Working with Model2 workflow frameworks
- •5.4 The details: exchanging data
- •5.4.2 Introducing the planet browser example
- •5.5 Writing to the server
- •5.5.1 Using HTML forms
- •5.5.2 Using the XMLHttpRequest object
- •5.5.3 Managing user updates effectively
- •5.6 Summary
- •5.7 Resources
- •Professional Ajax
- •The user experience
- •6.1 Getting it right: building a quality application
- •6.1.1 Responsiveness
- •6.1.2 Robustness
- •6.1.3 Consistency
- •6.1.4 Simplicity
- •6.1.5 Making it work
- •6.2 Keeping the user informed
- •6.2.1 Handling responses to our own requests
- •6.2.2 Handling updates from other users
- •6.3 Designing a notification system for Ajax
- •6.3.1 Modeling notifications
- •6.3.2 Defining user interface requirements
- •6.4 Implementing a notification framework
- •6.4.1 Rendering status bar icons
- •6.4.2 Rendering detailed notifications
- •6.4.3 Putting the pieces together
- •6.5 Using the framework with network requests
- •6.6 Indicating freshness of data
- •6.6.1 Defining a simple highlighting style
- •6.6.2 Highlighting with the Scriptaculous Effects library
- •6.7 Summary
- •6.8 Resources
- •Security and Ajax
- •7.1 JavaScript and browser security
- •7.1.1 Introducing the “server of origin” policy
- •7.1.2 Considerations for Ajax
- •7.1.3 Problems with subdomains
- •7.2 Communicating with remote services
- •7.2.1 Proxying remote services
- •7.2.2 Working with web services
- •7.3 Protecting confidential data
- •7.3.1 The man in the middle
- •7.3.2 Using secure HTTP
- •7.3.3 Encrypting data over plain HTTP using JavaScript
- •7.4 Policing access to Ajax data streams
- •7.4.1 Designing a secure web tier
- •7.4.2 Restricting access to web data
- •7.5 Summary
- •7.6 Resources
- •Performance
- •8.1 What is performance?
- •8.2 JavaScript execution speed
- •8.2.1 Timing your application the hard way
- •8.2.2 Using the Venkman profiler
- •8.2.3 Optimizing execution speed for Ajax
- •8.3 JavaScript memory footprint
- •8.3.1 Avoiding memory leaks
- •8.3.2 Special considerations for Ajax
- •8.4 Designing for performance
- •8.4.1 Measuring memory footprint
- •8.4.2 A simple example
- •8.5 Summary
- •8.6 Resources
- •Ajax by example
- •Dynamic double combo
- •9.1 A double-combo script
- •9.2 The client-side architecture
- •9.2.1 Designing the form
- •9.2.2 Designing the client/server interactions
- •9.3 Implementing the server: VB .NET
- •9.3.1 Defining the XML response format
- •9.4 Presenting the results
- •9.4.1 Navigating the XML document
- •9.4.2 Applying Cascading Style Sheets
- •9.5 Advanced issues
- •9.5.2 Moving from a double combo to a triple combo
- •9.6 Refactoring
- •9.6.1 New and improved net.ContentLoader
- •9.7 Summary
- •Type-ahead suggest
- •10.1 Examining type-ahead applications
- •10.1.2 Google Suggest
- •10.2.1 The server and the database
- •10.3 The client-side framework
- •10.3.1 The HTML
- •10.3.2 The JavaScript
- •10.3.3 Accessing the server
- •10.5 Refactoring
- •10.5.1 Day 1: developing the TextSuggest component game plan
- •10.5.3 Day 3: Ajax enabled
- •10.5.4 Day 4: handling events
- •10.5.6 Refactor debriefing
- •10.6 Summary
- •11.1 The evolving portal
- •11.1.1 The classic portal
- •11.1.2 The rich user interface portal
- •11.2 The Ajax portal architecture using Java
- •11.3 The Ajax login
- •11.3.1 The user table
- •11.4 Implementing DHTML windows
- •11.4.1 The portal windows database
- •11.4.3 Adding the JS external library
- •11.5 Adding Ajax autosave functionality
- •11.5.1 Adapting the library
- •11.5.2 Autosaving the information to the database
- •11.6 Refactoring
- •11.6.1 Defining the constructor
- •11.6.2 Adapting the AjaxWindows.js library
- •11.6.3 Specifying the portal commands
- •11.6.4 Performing the Ajax processing
- •11.6.5 Refactoring debrief
- •11.7 Summary
- •Live search using XSLT
- •12.1 Understanding the search techniques
- •12.1.1 Looking at the classic search
- •12.1.3 Examining a live search with Ajax and XSLT
- •12.1.4 Sending the results back to the client
- •12.2 The client-side code
- •12.2.1 Setting up the client
- •12.2.2 Initiating the process
- •12.3 The server-side code: PHP
- •12.3.1 Building the XML document
- •12.3.2 Building the XSLT document
- •12.4 Combining the XSLT and XML documents
- •12.4.1 Working with Microsoft Internet Explorer
- •12.4.2 Working with Mozilla
- •12.5 Completing the search
- •12.5.1 Applying a Cascading Style Sheet
- •12.5.2 Improving the search
- •12.5.3 Deciding to use XSLT
- •12.5.4 Overcoming the Ajax bookmark pitfall
- •12.6 Refactoring
- •12.6.1 An XSLTHelper
- •12.6.2 A live search component
- •12.6.3 Refactoring debriefing
- •12.7 Summary
- •Building stand-alone applications with Ajax
- •13.1 Reading information from the outside world
- •13.1.1 Discovering XML feeds
- •13.1.2 Examining the RSS structure
- •13.2 Creating the rich user interface
- •13.2.1 The process
- •13.2.3 Compliant CSS formatting
- •13.3 Loading the RSS feeds
- •13.3.1 Global scope
- •13.3.2 Ajax preloading functionality
- •13.4 Adding a rich transition effect
- •13.4.2 Implementing the fading transition
- •13.4.3 Integrating JavaScript timers
- •13.5 Additional functionality
- •13.5.1 Inserting additional feeds
- •13.5.2 Integrating the skipping and pausing functionality
- •13.6 Avoiding the project’s restrictions
- •13.6.1 Overcoming Mozilla’s security restriction
- •13.6.2 Changing the application scope
- •13.7 Refactoring
- •13.7.1 RSS reader Model
- •13.7.2 RSS reader view
- •13.7.3 RSS reader Controller
- •13.7.4 Refactoring debrief
- •13.8 Summary
- •The Ajax craftsperson’s toolkit
- •A.1 Working smarter with the right toolset
- •A.1.1 Acquiring tools that fit
- •A.1.2 Building your own tools
- •A.1.3 Maintaining your toolkit
- •A.2 Editors and IDEs
- •A.2.1 What to look for in a code editor
- •A.2.2 Current offerings
- •A.3 Debuggers
- •A.3.1 Why we use a debugger
- •A.3.2 JavaScript debuggers
- •A.3.3 HTTP debuggers
- •A.3.4 Building your own cross-browser output console
- •A.4 DOM inspectors
- •A.4.1 Using the Mozilla DOM Inspector
- •A.4.2 DOM inspectors for Internet Explorer
- •A.4.3 The Safari DOM Inspector for Mac OS X
- •A.5 Installing Firefox extensions
- •A.6 Resources
- •JavaScript for object-oriented programmers
- •B.1 JavaScript is not Java
- •B.2 Objects in JavaScript
- •B.2.1 Building ad hoc objects
- •B.2.2 Constructor functions, classes, and prototypes
- •B.2.3 Extending built-in classes
- •B.2.4 Inheritance of prototypes
- •B.2.5 Reflecting on JavaScript objects
- •B.2.6 Interfaces and duck typing
- •B.3 Methods and functions
- •B.3.1 Functions as first-class citizens
- •B.3.2 Attaching functions to objects
- •B.3.3 Borrowing functions from other objects
- •B.3.4 Ajax event handling and function contexts
- •B.3.5 Closures in JavaScript
- •B.4 Conclusions
- •B.5 Resources
- •Ajax frameworks and libraries
- •Accesskey Underlining Library
- •ActiveWidgets
- •Ajax JavaServer Faces Framework
- •Ajax JSP Tag Library
- •Ajax.NET
- •AjaxAC
- •AjaxAspects
- •AjaxCaller
- •AjaxFaces
- •BackBase
- •Behaviour
- •Bindows
- •BlueShoes
- •CakePHP
- •CL-Ajax
- •ComfortASP.NET
- •Coolest DHTML Calendar
- •Dojo
- •DWR (Direct Web Remoting)
- •Echo 2
- •FCKEditor
- •Flash JavaScript Integration Kit
- •Google AjaxSLT
- •Guise
- •HTMLHttpRequest
- •Interactive Website Framework
- •Jackbe
- •JPSpan
- •jsolait
- •JSON
- •JSRS (JavaScript Remote Scripting)
- •LibXMLHttpRequest
- •Mochikit
- •netWindows
- •Oddpost
- •OpenRico
- •Pragmatic Objects
- •Prototype
- •Qooxdoo
- •RSLite
- •Ruby on Rails
- •Sack
- •SAJAX
- •Sarissa
- •Scriptaculous
- •SWATO…
- •Tibet
- •TinyMCE
- •TrimPath Templates
- •Walter Zorn’s DHTML Libraries
- •WebORB for .NET
- •WebORB for Java
- •XAJAX
- •x-Desktop
- •XHConn
- •index
- •Symbols
- •Numerics
334 |
CHAPTER 9 |
|
|
|
|
Dynamic double combo |
|
|
|
|
var loader1 = new |
|
e Initiate the |
|
|
|
|||
|
|
|
||
|
net.ContentLoader(url,FillDropDown,null, |
|
content |
|
|
"POST",strParams); |
|
loader |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The FillTerritory() function accepts two parameters, passed in this case from |
|||
|
the onchange event handler on the first selection list. These are references to the |
|||
|
first and second select elements. bWe access the value that the user selected in |
|||
|
the first list. c We set the URL of our target server-side script. dWe then build |
|||
|
the parameters to be sent to the server by creating a string that has the same type |
|||
|
of syntax as a querystring, using an ampersand to separate each name-value pair. |
|||
|
For this example we are sending the value representing the selected region as q, |
|||
|
the name of the form as f, and the name of the second select as e. The server- |
|||
|
side code will use the selected region value to query the database, and it will send |
|||
|
the names of the form and the select element back to the client in its XML |
|||
|
response document. The client will use that information to determine which form |
|||
|
and control to update. Once the parameter string is built, the only thing left is to |
|||
|
initiate the Ajax process. |
|
|
|
|
e To start the process, we call the ContentLoader() constructor, and pass in |
|||
|
the target URL, the function to be called when the server’s response is received, |
|||
|
the error-handler function, the HTTP method to use, and the parameters to be |
|||
|
sent. In this case, the FillDropDown() function will be called when the data is |
|||
|
returned from the server, we will rely on ContentLoader’s default error-handler |
|||
|
function, and we are using a POST request. |
|
|
|
|
At this point, the ContentLoader will wait for the server to return an XML doc- |
|||
|
ument. The client-side code continues in section 9.4, but first, the server has |
|||
|
some work to do. |
|
|
|
9.3 |
Implementing the server: VB .NET |
|
|
|
|
|
|
||
|
The server-side code needs to retrieve the territories belonging to the user’s |
selected region from the database, and return them to the client in an XML document. The result set from the SQL query is used to create an XML document that is returned to the client side. Figure 9.6 shows the flow of the serverside process.
The server-side code is invoked by the request sent from the client-side ContentLoader object. The server-side code first retrieves the value of the request parameter q, representing the selected region. The value of q is used to create a
Implementing the server: VB .NET |
335 |
|
|
Database |
Posted |
|
Dynamic |
Build XML |
|
Return |
Figure 9.6 |
form |
|
SQL |
document |
|
document |
Server-side process flow diagram |
dynamic SQL query statement, which is run against the database to find the text/ value pairs for the second drop-down list. The data that is returned by the database query is then formatted as XML and returned to the client. Before we write the code to do this, we need to define the basic XML document structure.
9.3.1Defining the XML response format
We need to create a simple XML document to return the results of our database query to the client. It will contain the options to populate the second selection list. A pair of elements is needed to represent each option, one to contain the option text, and one to contain the option value.
The XML document in our example has a root element named selectChoice, containing a single element named selectElement, followed by one or more entry elements. selectElement contains the names of the HTML form and selection list that the results will populate on the client. Each entry element has two child elements, optionText and optionValue, which hold values representing each territory’s description and ID. Listing 9.3 shows this structure.
Listing 9.3 Example of the XML response format
<?xml version="1.0" ?> <selectChoice>
<selectElement>
<formName>Form1</formName>
<formElem>ddlTerritory</formElem>
</selectElement>
<entry>
<optionText>Select A Territory</optionText> <optionValue>-1</optionValue>
</entry>
<entry>
<optionText>TerritoryDescription</optionText>
<optionValue>TerritoryID</optionValue>
</entry>
</selectChoice>
336CHAPTER 9
Dynamic double combo
Notice in the example XML document in listing 9.3 that there is an entry containing the option text “Select A Territory”. This is the first option shown in the selection list, prompting the user to choose a value. The server-side code includes this value at the start of every response document, before the dynamic options are obtained from the database.
Now that we have our response document defined, we can develop the code that dynamically creates the XML and returns it to the client.
9.3.2Writing the server-side code
The VB .NET server-side code is straightforward. We perform a query on a database, which returns a record set. We then loop through the record set to create our XML document and send the XML back to the client. If we do not find any records, then we do not create any entry elements, also omitting the static “Select A Territory” option. As you can see in listing 9.4, the server-side code is not very complicated. It simply contains statements to retrieve the form values posted to the server, set the content type, perform a search, and output the XML document.
This example uses the Northwind sample database from Microsoft’s SQL Server.
Listing 9.4 DoubleComboXML.aspx.vb: Server-side creation of the XML response
Private Sub Page_Load( _
ByVal sender As System.Object, _
ByVal e As System.EventArgs) _
Handles MyBase.Load
Implement Page_Load method
Response.ContentType = "text/xml" b Set the content type
Dim strQuery As String strQuery = Request.Form("q") Dim strForm As String strForm = Request.Form("f") Dim strElem As String strElem = Request.Form("e")
c Retrieve the
posted data
Dim strSql As String = "SELECT " & _ "TerritoryDescription, " & _ "TerritoryID" & _
"FROM Territories" & _
"WHERE regionid = " & _ strQuery & " ORDER BY " & _ "TerritoryDescription"
d Create the SQL
statement
Dim dtOptions As DataTable |
|
Implementing the server: VB .NET |
337 |
||||||
|
e Execute the SQL statement |
|
|||||||
|
|
||||||||
dtOptions = FillDataTable(strSql) |
|
|
|||||||
Dim strXML As StringBuilder |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
strXML = New StringBuilder("<?xml " & _ |
|
|
|
|
|
|
|
||
"version=""1.0"" ?>") |
|
|
|
|
|
||||
strXML.Append("<selectChoice>") |
|
|
|
|
|
|
|
|
|
strXML.Append("<selectElement>") |
|
|
|
|
f |
Begin XML |
|
||
|
|
|
|
|
|
||||
strXML.Append("<formName>" & _ |
|
|
|
|
|
|
document |
|
|
strForm & _ |
|
|
|
|
|
|
|
|
|
"</formName>") |
|
|
|
|
|
|
|
|
|
strXML.Append("<formElem>" & _ |
|
|
|
|
|
|
|
|
|
strElem & _ |
|
|
|
|
|
|
|
|
|
"</formElem>") |
|
|
|
|
|
|
|
|
|
strXML.Append("</selectElement>") |
|
|
|
|
|
|
|
|
|
If dtOptions.Rows.Count > 0 Then |
g Verify there are results |
|
|||||||
strXML.Append("<entry>") |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
strXML.Append("<optionText>" & _ |
|
|
|
h |
Add first |
|
|||
"Select A Territory" & _ |
|
|
|||||||
"</optionText>") |
|
|
|
|
|
selection |
|
||
|
|
|
|
|
element |
|
|||
strXML.Append("<optionValue>-1" & _ |
|
|
|
|
|||||
|
|
|
|
|
|
|
|||
"</optionValue>") |
|
|
|
|
|
|
|
|
|
strXML.Append("</entry>") |
|
|
|
|
|
|
|
|
|
Dim row As DataRow |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
For Each row In dtOptions.Rows |
|
|
|
|
|
|
|
|
|
strXML.Append("<entry>") |
|
|
|
|
|
|
|
|
|
strXML.Append("<optionText>" & _ |
|
|
|
|
i |
Loop through |
|
||
row("TerritoryDescription") & _ |
|
|
|||||||
"</optionText>") |
|
|
|
|
|
|
|
result set and |
|
|
|
|
|
|
|
|
add XML |
|
|
strXML.Append("<optionValue>" & _ |
|
|
|
|
|
|
|||
|
|
|
|
|
elements |
|
|||
row("TerritoryID") & _ |
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|||
"</optionValue>") |
|
|
|
|
|
|
|
|
|
strXML.Append("</entry>") |
|
|
|
|
|
|
|
|
|
Next |
|
|
|
|
|
|
|
|
|
End If |
|
|
|
|
|
|
|
|
|
strXML.Append("</selectChoice>") |
|
j |
Return the |
|
|
|
|
||
|
|
|
|
|
|||||
Response.Write(strXML.ToString) |
|
|
XML document |
|
|
||||
|
|
|
|
|
|
|
|
|
|
End Sub |
|
|
|
|
|
|
|
|
|
Public Function FillDataTable( _ |
|
|
|
|
|
|
|
|
|
ByVal sqlQuery As String) _ |
|
|
|
|
|||||
As DataTable |
|
|
|
|
|
|
|
|
|
338CHAPTER 9
Dynamic double combo
Dim strConn As String = _
"Initial Catalog = Northwind; " & _ "Data Source=127.0.0.1; " & _ "Integrated Security=true;"
Dim cmd1 As _
New SqlClient.SqlDataAdapter(sqlQuery, _ strConn)
Dim dataSet1 As New DataSet cmd1.Fill(dataSet1) cmd1.Dispose()
Return dataSet1.Tables(0) End Function
Setting the page’s content type bto text/xml ensures that the XMLHttpRequest will parse the server response correctly on the client.
We obtain the value of the selected region, the HTML form name, and the element name from the request parameters c received from the client. For added safety, we could add a check here to make sure that these values are not null. If the check does not find a value for each, the script could return an error response. We should also add checks for SQL injection before the application enters a production environment. This would ensure that the database is protected from malicious requests sent by attackers.
Having obtained the selected region’s value, the next step is to generate a SQL string so we can retrieve the corresponding territories from the database d. The two columns we are interested in are TerritoryDescription and TerritoryID, from the database table Territories. We insert the region value into the SQL statement’s WHERE clause. To ensure that the results appear in alphabetical order in our selection list, we also set the SQL ORDER BY clause to TerritoryDescription. Next, we must execute the SQL statement e. In this case, we call the function FillDataTable() to create a connection to the database server, perform the query, and return the results in a data table.
Now that we have obtained the result of the SQL query, we need to create the first part of the XML document f, which was discussed in listing 9.2. We begin the document and add the selectElement, containing the values of formName and formElem obtained from the request parameters.
A check is needed to verify if any results were returned by the SQL query g. If there are results, we add the preliminary “Select A Territory” option h to the XML.