The NewsTickerFeed Class
A news ticker isn't very useful without content to display. The NewsTickerFeed class pulls the required feeds, parses them with XParser, and assembles the HTML for the ticker. The constructor accepts two arguments a reference to its the NewsTicker object this allows access to the NewsTicker properties and methods when needed and the URL of the feed to download function NewsTickerFeed oParent, sUrl this.parent oParent this.url sUrl this.timer null this.container null Compared to the NewsTicker...
Microsoft Fiddler
Since the core of Ajax relies on requests going to servers and responses being received from them , it makes sense that debugging Ajax applications relies heavily on understanding what is being sent to and received from the server. FireBug for Firefox inspects the requests and responses sent through XHR objects, but this is only a very small percentage compared to all of the requests and responses used during a typical user session. And, as discussed in the previous section, many requests may...
Submission Throttling
Predictive Fetch is one pattern for retrieving data from the server the other side of an Ajax solution is the sending of data to the server. Since you want to avoid page refreshes, the question of when to send user data is important. In a traditional web site or web application, each click makes a request back to the server so that the server is always aware of what the client is doing. In the Ajax model, the user interacts with the site or application without additional requests being...
The Yahoo Connection Manager
In late 2005, Yahoo introduced its Yahoo User Interface YUI library to the open source community. Available under a BSD-style license at http developer.yahoo.com yui, the YUI comprises several JavaScript libraries used within the company to aid in the rapid development of web applications such as Yahoo Mail and Yahoo Photos. One of these libraries is the Yahoo Connection Manager. With Ajax making heavy use of XHR, many developers are looking for ways to equalize the differences between browser...
Address Lookup
The Yahoo Maps API supports address lookup, meaning that it can locate a plain-text address on the map. For example, suppose that you wanted to center the map on your favorite zip code just pass the zip code into the drawZoomAndCenter method 12 This code centers the map on Beverly Hills, California, at a zoom level of 12. Address determination can deal with full addresses as well, so it's possible to center on a specific address, such as oMap.drawZoomAndCenter 701 First Avenue, Sunnyvale, CA,...
Map Overlays 1
To add an overlay to a Yahoo map, use the addOverlay method. All available overlays can be added using this method, including markers, customer markers, and polylines. Unlike the Google Maps API, overlays in Yahoo Maps can be created relative to a geographic location YGeoPoint or a point on the map container YCoordPoint . The latter makes it possible place an overlay on the map that remains in the same spot no matter how the map is panned or zoomed. The simplest type of overlay is a marker. A...
The ajaxStart and ajaxStop Methods
Prototype isn't the only library that has global event handlers for Ajax requests jQuery supports similar functionality by using the ajaxStart and ajaxStop methods. The ajaxStart method fires when there are no Ajax requests pending and one is started. Likewise, the ajaxStop method is called when all Ajax requests have completed. Both methods accept a function that should be called when the event occurs. The first step to using these methods is to retrieve a reference to an element. Then, the...
Connection Management
A server implementing HTTP 1.1 allows a maximum of two simultaneous connections to a given client at the same time. Part of the reason for this is to ensure that no one client can overwhelm a server with so many requests that other clients don't get responses. Web browsers following this standard will also only allow two connections to a given domain, which is why pages with lots of external resources JavaScript files, stylesheets, images, etc. take longer to finish loading. If you're going to...
LiveConnect HTTP Streaming
LiveConnect is a little-known and underutilized technology supported by Firefox, Safari, and Opera, allowing Java objects to be used from within JavaScript. To use LiveConnect, the client machine must have a Java Runtime Environment JRE installed, and Java must be enabled in the browser. Most of the objects in the java package and its subpackages are available for use from within JavaScript using LiveConnect, enabling functionality that may not be possible using native JavaScript objects. For a...
Performing the Search
The search should execute when the Go button is clicked. The Click event handler, called btnSearch_Click , resembles that of the AjaxSiteSearch.Search method in the original widget. In fact, a good portion of that code is reused. The main changes result from adapting the code to use ASP.NET controls. The btnSearch_click event handler accepts two arguments. The first, sender, is the object that received the event. The second, e, is the event arguments that describe the event. protected void...
ServerSent DOM Events
The Web Hypertext Application Technology Working Group known as WHATWG is a group of developers, companies, and others, interested in pushing browser development toward a platform more suitable for applications. WHATWG publishes a specification called Web Applications 1.0, which is a working draft as of October 2006. While Web Applications 1.0 introduces some very interesting concepts, one of the most interesting is called server-sent DOM events. Server-sent DOM events allow a server to stream...
Smart Windows
To display information about a location the map, Yahoo Maps uses a smart window. Smart windows are small, white bubbles that point to a specific location with a small triangle and display text or some other HTML code. All smart windows are also created with a close button, a small X in the upper-right corner see Figure 10-9 . Smart windows are opened using the showSmartWindow method of the YMap object. This method accepts two arguments a YGeoPoint to anchor to and the content for the smart...
Session Access
Ajax.NET Professional can also allow access to objects in the session scope. This is accomplished by passing a parameter to the AjaxPro.AjaxMethod attribute specifying the level of access that is needed. The access level is specified by an enumeration called HttpSessionStateRequirement, which has three values Read, Write, and ReadWrite. This type of access is established like this This code specifies that MyMethod should have read access to variables that are in the session scope when called...
XSLT in Other Browsers
Like XML and XPath, the implementation of XSLT transformations in non-IE browsers varies from the IE implementation. These browsers do implement an XSLTProcessor class to perform transformations, but the similarities end there. Like XPath, Safari currently doesn't support XSLT transformations. The first step in performing a transformation is to load the XML and XSL documents into a DOM object var oXmlDom zXmlDom.createDocument var oXslDom zXmlDom.createDocument oXmlDom.async false oXslDom.async...
Monitoring and Managing Requests
One of the limitations of XHR is the lack of a built-in method to monitor and manage multiple requests. The Yahoo Connection Manager has implemented features that allow the monitoring of multiple requests as well as the ability to abort a request that has not yet completed. As mentioned previously, the asyncRequest method returns an object representing the request transaction. This object can be used to determine if the request is still pending by passing it to the isCallInProgress method, like...
Map Overlays
A map overlay is any graphical marker placed onto a map to indicate some geographic location. When using the Google Maps site, areas of interest are often indicated by an icon or some other marker placed directly on the map these are examples of overlays. There are three methods on the GMap2 object relating directly to overlays. The first is addOverlay , which adds the specified overlay object to the map control. To add an overlay stored in a variable called oOverlay, the following code can be...
Parsing Atom
The code for parsing Atom feeds is very similar to the RSS-parsing code. There are just a few key differences to take into account. The first difference is the use of namespaces. According to the Atom specification, all elements in the feed must reside in the http www.w3.org 2 0 05 Atomnamespace. XParser may also come across an Atom feed that uses a previous version, in which case, the aforementioned namespace will not work. You can work around this issue, however, by retrieving the namespace...
Making GET Requests
To create an instance of this class, use the WebRequest constructor var oRequest new Sys.Net.WebRequest more code here The next step is to assign the url property with a URL to send the request to. The URL can be set to a fully qualified URL, an absolute URL, or a relative URL. var oRequest new Sys.Net.WebRequest This code assigns the property a relative URL value of textfile.txt. Before the request is sent, however, the WebRequest object needs some way of dealing with the data it receives from...
XPath in Other Browsers
The XPath implementation in the non-IE browsers follow the DOM standard, which is quite different from the IE implementation. This different implementation allows XPath expressions to be run against HTML and XML documents alike. At the center of this are two primary objects XPathEvaluator and XPathResult. At the time of this writing, Safari does not support XPath however, the latest version of WebKit the engine behind Safari supports XPath to some extent. You can download the latest WebKit...
XParser
News aggregation sites using syndication formats are gaining popularity as the formats become more widely used. Many sites use server-side logic to parse RSS and Atom feeds, displaying them in some sort of user-friendly format. However, it may be necessary to perform the same functions on the clientside using JavaScript. This is where XParser comes in. XParser is a JavaScript library that parses RSS and Atom feeds into JavaScript objects, making the feed's data easy to access in web...