Webmonkey » Ajax

Beautify Broken Links With Catch404

Michael Calore — Wed, 21 Jul 2010 22:47:41 +0000

The 404 error is one of the bitter realities of the web.

“The page you’ve requested does not exist.” So cold and unforgiving. Unlike a bad database connection or an unresponsive server, the 404 Page Not Found error has a finality to it — this link is dead and it’s never coming back.

But now we have Catch404 by Addy Osmani, a jQuery plug in that handles broken links with style. Deploy Catch404 on your site, and instead of seeing a page reporting a broken link, the user is presented with an Ajax modal window (also called a hop-up, or a lightbox) informing them the linked page isn’t there. The windows also offers some alternate destinations they might want to check out.

We’ve been trying to make 404s go down a little easier for years now. The custom 404 page is a popular solution. It’s available on just about every web CMS out there. You can do it yourself, too. Browsers are also taking it upon themselves to beautify the broken link with custom pages, offering suggestions or inviting users to search for the page using a built-in search box.

Catch404 takes both of those ideas — the custom alert and the suggestions of what to do next — and places them into the user experience before the link is even loaded. The plugin, which requires the jQuery framework, sends the link off to Yahoo’s YQL engine to check to make sure it’s alive. It only performs this check for external URLs; local URLs don’t require the check. The check is performed behind the scenes, using an Ajax request. If all is good, the user goes about his or her way. If the check results in a 404, the user sees the modal window.

Here’s a demo.

You’ll notice one obvious downside, which is that your users will have to wait an extra half-second or so while the YQL call completes. So why use it?

When a user is browsing your site and clicks on a link you’ve provided, then sees a 404 error, it’s your problem whether you’re responsible or not. Linking to dead pages makes you look like a sloppy curator, and the user will place some, if not all, of the blame for that error on you. Catch404 is more helpful than an impersonal error.

If the speed hit from the cross-site link checking bothers you, consider adding Catch404 only to legacy content — those years-old pages filled with links that may or may not still be alive.

Activating Catch404 is simply a matter of assigning a class to the link, so you can invoke it only where it makes sense.

[via Delicious]

See Also:

Build an Ajax Dropdown Menu

Webmonkey Staff — Tue, 16 Feb 2010 01:45:47 +0000

If you hang out with designers and developers at all, then you’ve probably heard the term “Ajax” by now. It’s the official buzzword of Web 2.0. But it’s also an extremely useful web development technique.

In the course of this tutorial, we’re going to look at what Ajax can do. Then we’ll use a JavaScript class to simplify your first steps toward the ultimate in speedy user interactivity.

First, what is Ajax? It stands for Asynchronous JavaScript And XML. In simple speak, Ajax allows us to use JavaScript to grab an XML file (or any other text) without reloading the whole web page.

Ajax has been used for a lot of things, but it is most impressive when many small updates are needed in a short period. Think streaming stock quotes or draggable maps.

In our example, we’ll use a pair of dropdown menu boxes (SELECT tags in HTML). A selection in the first box affects our list of choices in the second box. It’s not exactly cutting edge (Thau did something similar using JavaScript), but it’s a proof of concept.

Before we get started, here’s the stuff you’ll want in your toolbag:

1. A love of extremely basic HTML.

2. Willingness to consult Thau’s Javascript Tutorial if you get confused.

3. “Http“, a caching XmlHttpRequest wrapper, which you can download to immediately make your life simpler. Plus, if you get into advanced Ajax programming, you may like the caching that is built into this Javascript class.

But that’s the future. Let’s talk about now, alright? Ajax on three. One, two, three… Ajax!

Before we do any JavaScript Ajax voodoo, let’s setup our HTML.

Here we have created an HTML form containing two dropdown menus. The dropdowns use the SELECT tag, which can contain several options.

The first dropdown has four options: Select country, France, Germany, and Spain. Notice the onChange part of this dropdown:

onChange="handleOnChange(this);"

This will become important later.

The second dropdown has only one option: Select head of government.

What we want to accomplish with our Ajax call is to get the three most recent heads of government for each country and load them into the second dropdown whenever the user changes the first dropdown.

Sounds simple enough, but how are you on recent European presidents and chancellors? One great thing about Ajax is that we can grab content only when we need it. So, we’ll connect ourselves to some sort of feed that will give us the head of government for a particular country when we need it.

For the purpose of this example, our feed will be plain text files stored in the same directory as our web page. So, copy the following lines to their own text files.

France.txt:

Valéry Giscard d'Estaing|François Mitterrand|Jacques Chirac

Germany.txt:

|Helmut Kohl|Gerhard Schröder|Angela Merke

Spain.txt:

|Felipe González Márquez|José María Aznar López|José Luis Rodríguez Zapatero

Notice how the lines contain names separated by vertical lines? Those lines are called “pipes,” and the pipe symbol has its own keystroke on your keyboard. Just hold Shift and look for the backslash (). So, the plan of attack is that whenever Germany is selected (for example), we’ll make an Ajax call to retrieve Germany.txt, get rid of those pipes, and put the names in the second dropdown box.

Now that we’re ready for the Ajax voodoo, let’s get to the nitty gritty on the next page.

Packin’ boxes

If you haven’t downloaded request.js, the Ajax wrapper Javascript class, grab it now and put it in the same directory as the web page with the two dropdowns.

Now, find this line in your document:

And replace it with these lines:

Now that’s a big chunk of code.

This line reads in the Ajax wrapper class that does the heavy lifting:

The handleOnChange function is called whenever the first dropdown is changed. Remember how I said that onChange stuff would be important?

Lastly, the fillPrez function takes the output from the Ajax call and puts the names into the second dropdown.

Let’s look through it a little closer.

This sequence of Javascript looks through the first dropdown, finds which one is selected, and returns the country name into a variable named, appropriately, country:

var idx = dd1.selectedIndex;

var val = dd1[idx].text;

var par = document.forms["frmSelect"];

var parelmts = par.elements;

var prezsel = parelmts["prez"];

var country = val;

Then, if an actual country is selected, an Ajax call is made for the name of the country with .txt at the end. We supply our other function, fillPrez, to be the “callback” function. Whatever comes out of our Ajax call, we want it to go to fillPrez.

if (country != "Select country")

  {

   var directory = ""+document.location;

   directory = directory.substr(0, directory.lastIndexOf('/'));



   Http.get({

		url: "./" +  country + ".txt",

		callback: fillPrez,

		cache: Http.Cache.Get

	}, [prezsel]);

}

We also pass along our second dropdown box, so that fillPrez will know which dropdown to fill.

The first thing that happens in fillPrez is that we make sure that our Ajax call actually found the list of heads of government:

if (xmlreply.status == Http.Status.OK)

If it didn’t, we let the user know there’s an error:

alert("Cannot handle the Ajax call.");

If we’re good to go, then we grab the list of names and split it apart on those pipes:

var prezresponse = xmlreply.responseText;

var prezar = prezresponse.split("|");

We clear out the second dropdown, except for the first option (“Select head of government”):

prezelmt.length = 1;

Then we add each of the names into the dropdown:

prezelmt.length = prezar.length;

    for (o=1; o < prezar.length; o++)

    {

      prezelmt[o].text = prezar[o];

}

You have now successfully created an Ajax call. Your Javascript code made a connection to your server, grabbed a text file, split apart the names in the file, and plopped the resulting data right into your dropdown box.

See it in action and download the code at my website.

There are a number of ways you could expand this code. A few examples:

1. When someone chooses a head of government, you could redirect the user to the politician’s web page.

2. You could show information about the head of government and their time in office. Extra points for using Ajax to grab the selected politician’s bio.

3. You could also give up on the heads of government idea and instead fill the second dropdown with cities, states or provinces. Or maybe you could show fast food chain locations.

You get the idea. There are a plethora of possibilities.

Now, if you aren’t impressed since Thau did this in 1998 and he didn’t need no Ajax, remember this is a proof of concept. Rather than a text file, consider setting up a more dynamic feed using PHP and MySQL.

And if you really want to get more into the back end of providing data to Ajax calls, consider Paul’s article Ajax It’s Good For What Rails You.

Did you love this article? Did you hate it? Think you can do better? Send us your Feedback. Feedback submitted here will be considered for publication on Webmonkey or Wired News, so if you don’t want us to print your comments, please say so in your email.

Building With Ajax and Rails

Webmonkey Staff — Tue, 16 Feb 2010 01:45:47 +0000

So, since the last time you brushed your teeth, Ruby on Rails has only grown in popularity. The list of web applications using the exciting new web framework has grown to such an enormous size, it has exceeded the 50K per page limit of the wiki used to host it. Lesser languages like Java and PHP are copying the stylish efficiency of Rails with their own frameworks like Trails, Trax and Cake.

In the tutorial Ruby on Rails for Beginners, we went over the very basic basics of Ruby and Rails:what it is, why it’s so mindblowingly cool, which celebrities are using it, and so forth. As soon as the article went live, letters flooded in, offering me book contracts, movie deals and exotic snacks — I haven’t gotten so much attention since my Ajax for Beginners article. In fact, this poll from the redoubtable Lifehacker.com says that Ruby on Rails and Ajax are among the two most popular things in the world, and plainly it pays to follow the trends, so what if we combined the two of them? No, that would be excessive. You don’t want to read about that. You do? Hmmmm, OK, I suppose we can take a quick look.

You Got Ajax In My Rails
Adding Prototype.js
Form Of:A Form!
Moving Onward

You Got Ajax In My Rails

Let me just refresh my memory a little. Ajax (it seems like everyone’s calling it that now rather than my spiffy coinage, “XHR”) is the handy JavaScript technique that allows the browser to communicate with the server without reloading the current page, to do things like validate or save form input, refresh images and heaven knows what else.

In the Ajax for Beginners article, we created those client-side dynamic functions by typing in a bunch of code by hand, but that goes against the make-it-quick-and-easy methodology of Rails. Instead, there are some pleasurably easy, automated ways to incorporate Ajax into a Rails-driven site. Rails ships with the Prototype JavaScript library, which provides a nice high-level toolkit for working with Ajax functions, and with Script.aculo.us, which builds additional bells and whistles onto Prototype. These two can be downloaded separately and used in non-Rails projects as well.

Adding Prototype.js

Let’s revisit the example site from the Ruby on Rails for Beginners article. Maybe you’ve still got a copy of it lying around on your web server, or maybe you’d like to create it again from scratch. I’ll wait here.

You’ll notice that the public/javascripts directory contains a file called “prototype.js” — that’s our friend Prototype! There isn’t much documentation for it, but if you read JavaScript fluently you can look at the file and see the basic methods it defines. In order to use the methods, first and foremost we need to activate them. That can be done one Ruby block at a time or for a whole page; let’s choose the latter. In the rHTML file that contains the page layout, namely app/views/layouts/bookmarks.rhtml, insert the line

<%= javascript_include_tag :defaults %>

right before the closing /head¢ tag.

Then we can get right down to creating our Ajax snazz. In our last session, we looked at HTTP links that used the Ruby function link_to(). Remember that? They looked like this (an example from app/views/bookmarks/list.rhtml):

 <%= link_to 'Destroy', {:action => 'destroy', :id => bookmark}, :confirm => "Are you sure?" %>

Well, link_to() has a buddy called link_to_remote(). It works in a similar fashion, except it takes an additional parameter, besides the name of the link and the action or URL it points to:a DOM element ID. The Ajax action will place any content it retrieves from the server into that element. So, if we wanted to rewrite our function above, so we could delete a bookmark from our list without reloading the whole page, we’d say:

<%= link_to_remote 'Destroy', {:action => 'ajaxdestroy', :id => list, :update => 'bookmarks'}, :confirm => "Are you sure?" %>

Notice the :update parameter – that’s the one that’s new. Now, when we click the Destroy link, it calls the ajaxdestroy action to delete the bookmark in question from the database, but instead of a page reload in the browser, the server will do the work behind the scenes and just return a new bookmark listing, which will be placed in the list DOM object. That DOM object corresponds to the list of bookmarks on the page. Now, that xhrdestroy action doesn’t exist yet. We have to create it, in app/controllers/bookmarks_controller.rb:


 def ajaxdestroy



  Bookmark.find(@params[:id]).destroy



  render :partial => "bookmarks"



 end

The first line does the deleting:it looks at the @params array sent by the browser, which contains the ID of the bookmark to be deleted; finds the corresponding row in the database; and destroys it. Simple enough, I hope. The second line returns the response, using the very handy render() method. This method can be used to create and send a “partial,” or chunk of a web page, which it does here:the rendered list of bookmarks is returned and displayed without a full reload. It’d be wise to include fallback options for browsers that don’t support Ajax, but I leave that to you, my intelligent reader.

Form Of:A Form!

In our Ajax for Beginners lesson, we wrote a PHP/JavaScript function that would automatically grade essays and return the numeric grade in an alert window. To do the same with Rails, we’d use a method called form_remote_tag(), which submits a form to a server-side handler via XMLHTTPRequest. This is an Ajax version of the more familiar form_tag().


 <%= form_remote_tag(:url => {:action => 'grade'}, :update



 => result) %>



        Enter your essay here:



        <%= text_area_tag "essay" %>



        <%= submit_tag "What's my grade?" %>



        Result:



        <%= text_field_tag "result" %>



      <%= end_form_tag %>

The user types their little essay into the text area created by text_area_tag. The form content is submitted to the controller action “grade,” which we will define in a minute. That action grades the essay and sends a numeric grade back to the form, which displays it in the “result” text field — all without reloading the page. (I know, it’s less and less thrilling every time I say that. Still a little cool though, right?) The grading action, which lives in the app/controllers directory, looks like this. Feel free to substitute your own more-rigorous, essay-grading algorithm:




 def grade



  puts params[:essay].strip.squeeze.split(/s/).size



 end

OK, that “grading” function really just does a word count, using Ruby’s redoubtable string methods. I’ve used it to grade my students’ papers though and it seems to work just fine.

puts is the Ruby equivalent of echo or print. Ruby, unlike some languages you may know, doesn’t need values to be explicitly returned from its methods. Instead, the final output of the method is automatically returned to the method’s caller. params is the array containing the entire submitted form, params[:essay] is the essay, strip removes leading and trailing white space, squeeze removes multiple repeating characters so double spaces aren’t counted twice, split breaks the string at every remaining space into an array, and size returns the number of elements in that array, i.e. the word count.

Moving Onward

Those two methods give you plenty to work with, Ajax-on-Rails-wise (“Rajax”? Would that catch on, you think?) There are a dozen or so more, though, documented here. observe_field and observe_form create event handlers that make Ajax calls when a field changes. Very handy for autocompletion. draggable_element makes a DOM object draggable. It can then be dropped on an element specified with drop_receiving_element. For flashier stuff, you can check out some of the demos at script.aculo.us.

Now that it’s so easy to create snazzy Ajaxy database-driven websites, the next step is for some of you to go out there and actually make good ones. I look forward to clicking your buttons and dragging your elements!

Get Local Search Results From Yahoo

Webmonkey Staff — Tue, 16 Feb 2010 01:45:47 +0000

Online maps are a popular way to spice up a site. To get the most use out of them, you need data to plot: addresses from a database, location clicks from the user or at least coordinates for the map’s center. With any map, you have to start somewhere.

If you’re low on data, you can fill in the map with local listings, such as those you’d find in the Yellow Pages. You can show coffee shops or pizza joints right along your other data, or even on its own.

In this tutorial I’ll show how to use Yahoo Local to search for nearby businesses and landmarks, then plot those locations on a Yahoo Map using the Ajax API.

What You Need
Start With a Basic Map
1. Add Your App ID
Find Nearby Burritos
1. Performing the Search
2. Placing the Markers
Accept User Input
1. Calling Out The Callbacks
Where to go From Here

What You Need

Knowledge of JavaScript, CSS and HTML
A Yahoo account and Yahoo Application ID. Yahoo will ask for some information from you, but the good news is you get an ID right away.
A little familiarity with Yahoo Maps

Start With a Basic Map

As a starting place for getting Yahoo Local data into your map, we’ll use a basic map from Webmonkey’s introduction to Yahoo Maps. Add this code to a new HTML file:





	

		My Yahoo Map



		

		

		



	

	

		My Yahoo Map

Add Your App ID

Before you continue to the next section, you need to add your Yahoo Application ID. Find this call to api.maps.yahoo.com and replace appidhere with your own Application ID:

Once you make the change, save the file. Load it in your browser and you should see a map of San Francisco, like this:

Find Nearby Burritos

Now that your map is loading, it’s time to fill it with local goodness. Do you know something else filled with goodness? Burritos. Because I believe in beating bad analogies to death, in this section I’ll show how you can take your blank map tortilla, add some data cheese, then finish off with rice and beans in the form of markers on the map.

Okay, in plain English: I’ll be showing you how to search Yahoo Local, in this case for “burritos,” and plotting the results on our Yahoo Map. Here’s the finished product I’ll show you how to create:

We’ll start with the blank map of San Francisco from the previous section. The first thing we need to do is add a button, which will be used to activate the local search. Place this HTML below the “ymap” div:

Notice that we have a form with a single submit button. When the button is clicked, it calls a JavaScript function doLocalSearch and passes the string ‘burritos’ to it. We’ll need to make that function next.

First a note about the return false line that comes at the end of the bit of JavaScript inside the submit button. That tells the browser not to actually submit the form to the server. JavaScript works in the browser without submitting a form.

Performing the Search

Now that we can call the search with the form button, we need to write the code for the search. Add this function just above the tag near the top of your document:

		function doLocalSearch(keyword)

		{

			map.searchLocal(map.getCenterLatLon(), keyword, 1, 5);

			YEvent.Capture(map, EventsList.onEndLocalSearch, addMarkers);

		}

There are two parts to this new function. The first passes four things off to Yahoo’s searchLocal function:

The center of our map (a YGeoPoint object)
The keyword we’re searching for, burritos
The radius of search results, in miles
The number of search results, 1-20.

Since the search uses Ajax, the results are asynchronous. Unlike many functions that return results immediately, there is a delay for local search. It’s sort of like placing an order at a restaurant. Say you want a burrito, so you let the cashier know. Unless you’re at the airport, you don’t get your burrito right away. Instead, you have to wait for your order to come up. Sometimes you’re even given a number, so you’ll know immediately that your food is ready.

The second line of our new function is where we tell the browser that we care about doing something with the results as soon as they come back. This is often referred to as a callback function. In Yahoo Maps, we enlist the callback function by “capturing” an event with the YEvent.Capture function. In this case, we told the browser to send the results of the search to the addMarkers function.

Placing the Markers

The results of our local search are being sent to the addMarkers function, so we need to create that function. Add this just above the tag near the top of your document (just below the closing curly brace from the previous function):

		function addMarkers(result)

		{

			if (result.Data)

			{

				var places = result.Data.ITEMS;

				for (i=0; i < places.length; i++)

				{

					var thisplace = places[i];

					var marker = new YMarker(new YGeoPoint(thisplace.LATITUDE, thisplace.LONGITUDE));

					marker.addAutoExpand(thisplace.TITLE + '
' + thisplace.ADDRESS);

					map.addOverlay(marker);

				}

			}

		}

There are just a few lines in here that do the actual work of adding the marker to the page. The rest ensures that there was data that returned from the search, and iterates through those results.

The places variable is one I created to take the array of results objects from the search. Each object contains the data about the results, such as latitude, longitude, place name (title), and address.

Now that we have received results from a search we hard-coded, let’s look at how we can accept input and let users search our map.

Accept User Input

With the map we created in the previous section, we can search for burritos in San Francisco. What if someone wanted to search for something else somewhere else? Let’s add some ways to accept user input and use it in a local search.

Here’s the example we’ll be working towards:

We can start with the version in the previous section, the static search for burritos. Instead of the single button to start the search, we need a couple input boxes and a new button. In fact, you can scrap the form in the previous section and replace it with this new one:

	

		Search for: 

		in

Instead of calling the doLocalSearch function directly, our new button calls searchLocation, a new function we’ll need to create. It passes the two values inside the input boxes to the function, so our new function needs to accept the name of a place and the keyword we’re searching.

Add the searchLocation function to the file, just above the line:

		function searchLocation(placename, keyword)

		{

			map.drawZoomAndCenter(placename, 6);

			YEvent.Capture(map, EventsList.onEndGeoCode, function()

			{

				doLocalSearch(keyword);

			});

		}

Much of the code in this function will look similar to what we wrote in previous sections. We’ve used the drawZoomAndCenter call since the first empty map. Before, we set the map on San Francisco. Now we’re zooming and centering into whatever place the user types in.

YEvent.Capture may also look familiar, from our doLocalSearch function. There we were capturing the onEndLocalSearch event. Here, we need to capture onEndGeoCode event. Why? Because whenever we look up a city (such as with drawZoomAndCenter), Yahoo needs to make an Ajax call to its geocoder. Since the result isn’t available immediately, we need to “place an order” so that something can happen as soon the geocoding is done.

When the geocoding is done, we want to perform the local search. In order to get the keyword passed correctly, we need to wrap the call in an anonymous function. It’s a little confusing if you haven’t seen it before, but that’s a common programming pattern with JavaScript callbacks.

Calling Out The Callbacks

Speaking of callbacks, there are two that go on every time the user searches the map in this example.

Callback one: After calling drawZoomAndCenter, which needs to geocode the location. When this is complete, the first callback initiates the search function.

Callback two: After calling searchLocal, which needs to perform the local search. When this is complete, the second callback plots the markers on the page.

Where to go From Here

You now have the basics down for plotting local data on a Yahoo Map. There are more directions to go than there are results for sushi in San Francisco.

Mashup Direction

What data do you have about your city? In addition to city locations, Yahoo Maps can look up specific addresses and landmarks. Armed with just park names, for example, you could show pet stores near parks.

To see this in action, just return to the search example in the previous section and search for “pet stores” and use “Buena Vista Park San Francisco, CA” as the location.

Academic Direction

Though I was mainly showing you how to use Yahoo Maps local search, you also received an introduction into more advanced JavaScript with callbacks. Now is the time to keep moving forward with your education by testing yourself. Can you edit the static search example to load automatically, eliminating the need for the search button?

Hint: you’ll need to capture an event inside the initialize_maps function.

Location Direction

Use some JavaScript to grab the user’s location as a starting point. Luckily, we have a JavaScript geolocation tutorial. Go for it!

Same as it Ever Was: The History of HTML is a Conversation, Not a Spec

Scott Gilbertson — Tue, 03 Nov 2009 14:10:53 +0000

Developer Mark Pilgrim has posted a fascinating look at how the HTML img tag came into existence. The history Pilgrim digs up — mailing list conversations between the creators of the first web browsers like Marc Andreessen and the webs early pioneers like Tim Berners-Lee — show that far from being a carefully planned specification, the lingua franca of the web evolved a bit like the early universe — out of a murky chaos.

That from the chaos we got a workable — some would argue good — solution for creating the web is proof on some level that conversations and not abstracts, proposals and design by committee are the key to HTML’s success.

As Pilgrim writes:

HTML has always been a conversation between browser makers, authors, standards wonks, and other people who just showed up and liked to talk about angle brackets. Most of the successful versions of HTML have been “retro-specs,” catching up to the world while simultaneously trying to nudge it in the right direction.

You might be wondering, why did img succeed where other proposals, like an include or an icon tag failed? The answer is simple, because Marc Andreessen shipped code — Netscape Navigator — while those backing the other proposals, for most part, did not.

Of course that doesn’t mean that just shipping code is always good plan. Shipping code before a standard doesn’t necessarily produce the best solutions, as Pilgrim says. Or, put another way by a commentator on Pilgrim’s post, “shipping doesn’t mean you win, but not shipping means you lose.”

From those who shipped without the official blessing of a standard, we’ve come to have an img tag, the basis for AJAX, all of the HTML5 tools available in browsers today and much more.

Critics of HTML’s disorganized evolution will be quick to note that we’ve also come to have the blink tag, cross-browser rendering issues and other pains of web development.

Indeed we’re not suggesting that shipping features without at least engaging in the conversation is a good idea, but, when it comes to the future of HTML, if browser makers don’t ship HTML5 features before the standard is official we’ll be waiting until 2022 to use the new tools.

But while the future of HTML5 might be moving at a rather slow and convoluted pace. Pilgrim’s post is reminder that HTML has always progressed that way.

Perhaps the truly remarkable part is that, for all its flaws and convoluted evolution the core tech behind the web remains essentially the same now as it was then. “HTML is an unbroken line… a twisted, knotted, snarled line, to be sure… but still… Here we are, in 2009, and web pages from 1990 still render in modern browsers.”

See Also:

Google Looks Me-Too As Suggest Launches

Adam Duvander — Tue, 02 Sep 2008 21:27:24 +0000

Did you hear about the news from Google? Okay, so the Chrome browser is big news, but there’s something else we wanted to bring to your attention: Last week Google Suggest graduated to the front page of Google.com.

The feature finds possible matches to search terms as the user types. While it may seem old now, it was a Google innovation. Suggest was first created in 2004 and made developers clamor to figure out how it was done. This was before the term “Ajax” was coined and well before it was overused.

Google does not make a homepage change lightly. For this reason, many assumed Suggest would never be made the default experience of most users who go directly to Google.com to search.

The feature was incorporated into many other tools over the years, including the Firefox search bar. Yahoo added a similar feature to its homepage over a year ago.

See also:

Microsoft Steers Developers to Ajax Roadmap

Adam Duvander — Thu, 03 Jul 2008 21:26:45 +0000

In an effort to improve its Ajax features in ASP.NET, Microsoft announced its Ajax roadmap. The document lays out new features, many of which are available in third party JavaScript frameworks.

Among the most exciting proposed features slated for the next version are DOM manipulation APIs, which make it easy to access any elements in a web page. The company also plans to translate some server-side controls to be accessible via client-side calls. For example, a templating control could retrieve data from the server and place it into a page based on a local template without refreshing.

On the list of nice-to-haves, Microsoft includes animation and drag & drop. These popular features are a major part of effects libraries such as Scriptaculous, Moo and JQuery.

Developers attempting to use non-Microsoft tools have long had difficulty fitting in with the ASP.NET framework. For example, ASP.NET changes the ID of any server-manipulated page element. The DOM features alone in the proposed update to Microsoft’s Ajax tools will simplify client-side access.

Some web purists may criticize Microsoft for not working to support third-party JavaScript frameworks. The company has long forged their own path with ASP.NET and to their credit each version is better than the previous.

If you want a peak at what the code will look like in the future version of ASP.NET Ajax, download the roadmap.

See also:

Run Ajax Apps on Bare S3

Paul Adams — Mon, 19 May 2008 19:21:34 +0000

Amazon’s Simple Storage Service is designed to host data, not entire applications. It’s made to just serve as the backend to an app server — typically in Amazon’s cloud.

Tom Evslin has worked out a way to host dynamic Ajax applications directly in the storage, with no intermediate server. Very cool.

See Also:

Webmonkey » Ajax

Beautify Broken Links With Catch404

Build an Ajax Dropdown Menu

Packin’ boxes

Building With Ajax and Rails

Contents

You Got Ajax In My Rails

Adding Prototype.js

Form Of:A Form!

Moving Onward

Get Local Search Results From Yahoo

Contents

What You Need

Start With a Basic Map

My Yahoo Map

Add Your App ID

Find Nearby Burritos

Performing the Search

Placing the Markers

Accept User Input

Calling Out The Callbacks

Where to go From Here

Mashup Direction

Academic Direction

Location Direction

Same as it Ever Was: The History of HTML is a Conversation, Not a Spec

Google Looks Me-Too As Suggest Launches

Microsoft Steers Developers to Ajax Roadmap

Run Ajax Apps on Bare S3