转：Virtual Earth and AJAX--Part Two

接着上次的，Part Two:

引用地址：http://virtualearth.spaces.live.com/blog/cns!2BBC66E99FDCDB98!531.entry

Tutorial Part 2 - AJAX and Virtual Earth

In part 1 of this mini-tutorial on AJAX we set up a barebones mapping UI by adding the Virtual Earth Map Control to a web page. With just a few lines of javascript the MapControl gives us very versatile display and navigation tools. Here in part 2, we get to the heart of what this tutorial is about – making an asynchronous call from the client up to a server component, waiting politely for a response, then acting on that reponse by updating a message to the user. The message in this case is just an echo of the inputs passed to the server. In part three we’ll expand the server component to do something truly useful, by making a query to the Mappoint Web Service to reverse Geocode the passed coordinate.

 

Lets begin part two by trying the application out. Pan and zoom around the map by double clicking, dragging, using the cursor arrows on your keyboard or dragging a zoom box with the middle mouse button. Click the link below the map to initiate an asynch call to the server component. In a moment the area below the map should fill with the response from the server.

 

View the source of the web page to see the client code. Lets look at some key areas. Notice when the link is clicked, a javascript function is called – doAjaxQuery(). Read through the code from this point on. There are lots of comments. The basic flow is:

1. Build a URL that points to our server component, passing any needed parameters
2. Instantiate an appropriate xmlhttp object for the browser
3. attach the callback function that will be called when the server call is complete
4. Use xmlhttp to fire off the request and wait asynchronously for the response.
5. Do something useful in the callback function upon return

Once you understand this basic pattern, adapting it to your own applications becomes quite trivial. One of the many AJAX toolkits I mentioned in part 1 simplifies even further, especially if you are building complex apps and relying heavily on AJAX-like functionality.

 

As for the server component, it can be created with any server language you are comfortable with. I used ASP.NET and C# as it is what I know best (download the source here) but you can use Visual Basic, Perl, Java… Even if you don’t use C#, download the source and give it a read to follow along. It is easy to follow and adapt to your environment. Again, understanding the basic pattern is what’s important here, then you can easily rebuild it in your tool of choice. It goes something like this:

 

1. Grab the passed in URL parameters. In our case, the X and Y coordinates representing the map center
2. Build a response string. Normally a web page responds with a stream of HTML markup. In this case, I am responding with Javascript that will be executed in the browser. You can respond with whatever makes sense for your application – Perhaps an XML doc that’ll be parsed and used by the client. My response is DisplayQueryResults('Message Here’); Our Callback function takes this string and executes it on the client with Javascripts EVAL statement.
3. Our Server component finishes by writing the string we built as the output stream sent back to the browser.

That’s it! You have a very simplified web application that makes an AJAX style call to the server. The app itself isn’t terribly useful at this stage, but you can clearly see the AJAX pattern at work. Tomorrow in Part three we’ll update the server component to use the passed in geographic coordinate to do some fun stuff.