Web Services + JSON = Dump Your Proxy

http://www.diybl.com/　2008-1-9 　网络　点击: 　[ 评论 ]

Web Services + JSON = Dump Your Proxy

n my post  on "How to build a Maps Mash-up"I mentioned that there are different ways to overcome the browsersecurity restrictions to retrieve data from another domain(cross-domain restriction). The previous sample used the software proxymethod to make the Web service requests and this post talks about a wayto make a request without a proxy. It’s the dynamic script tag method.Today Yahoo! added a new output option for part of their Web services called JSON.This makes it possible to make the JavaScript WS request without usingthe XMLHTTPRequest object. It is a great way to pull data from anotherdomain because you can dump your proxy and all the data will not routethrough your server anymore. I will talk about the pros and cons ofboth these approaches later, but first I want to give an overview ofwhat JSON is, how it works and show some sample code.
What is JSON? On Doug Crockford’s pageit reads like that: "JSON (JavaScript Object Notation) is a lightweightdata-interchange format. It is easy for humans to read and write. It iseasy for machines to parse and generate." And that’s how it look like:
{"ResultSet":{"Result":[{"precision":"city","Latitude":"34.05217","Longitude":"-118.243469","Address":"","City":"LOS ANGELES","State":"CA","Zip":"","Country":"US"}]}}}
The string above is returned by Y! Geocoder for the query “LA”.JSON is a serialized JavaScript object, which JavaScript can turn backinto an object. For Yahoo! WS the structure of the JSON string issimilar to the XML result but the difference between and attribute andelement can’t be made. The following is a comparison of the XML resultfor the same call.
<ResultSet ... >
   <Result precision="city">
   <Latitude>34.05217</Latitude>
   <Longitude>-118.243469</Longitude>
   <Address></Address>
   <City>LOS ANGELES</City>
   <State>CA</State>
   <Zip></Zip>
   <Country>US</Country>
</Result>
  </ResultSet>
One way to get from JSON to a JavaScript object is to call eval(),with the string as argument. The following sample uses the Geocoderresult to display LA’s Latitude and Longitude in an alert box. This isjust static.
eval.html
<HTML>
<BODY>
   <script language"javascript">
      var location = eval({"ResultSet":{"Result":[{"precision":"city","Latitude":"34.05217","Longitude":"-118.243469","Address":"","City":"LOS ANGELES","State":"CA","Zip":"","Country":"US"}]}});
      alert("Lat:" + location.ResultSet.Result[0].Latitude + " Lon: " + location.ResultSet.Result[0].Longitude );
   </script>
</Body>
  </HTML>

This is nice but doesn’t do too much in the real world. The problemwas to get the data from a Web service that is located on anotherdomain imported without using a proxy.
The secret sauceAdding the <Script> tag dynamically in the DOM tree of thebrowser is the answer and the JSON response helps to get the data in aformat that is easy to digest for JavaScript. When a Script tags getsdynamically added to the DOM tree the code (script URL) gets executedon the fly. The trick is that instead pointing to a JavaScript library,we include a Web service request in the tag that returns data in theabove mentioned format. The Yahoo! Web services that offer the JSONoutput option also supports a parameter called ‘callback’ and all itdoes is wrap the return data in a function with the name of thecallback value. http://api.local.yahoo.com/MapsService/V1/geocode?appid=dantheurer&location=la&output=json&callback=getLocationwould result in something like thisgetLocation({"ResultSet":{"Result":[{"precision":"city",….) which triesto call the getLocation function (callback) that needs to beimplemented to deal with the data.
Below is a sample that takes a location as an input parameter, thencalls the Y! Geocoder WS and displays Long / Lat in the page.
geocodeJson.html
<script type="text/javascript" src="jsr_class.js"></script>
  <