- XML Reference Guide
- Overview
- What Is XML?
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Table of Contents
- The Document Object Model
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- DOM and Java
- Informit Articles and Sample Chapters
- Books and e-Books
- Implementations
- DOM and JavaScript
- Using a Repeater
- Repeaters and XML
- Repeater Resources
- DOM and .NET
- Informit Articles and Sample Chapters
- Books and e-Books
- Documentation and Downloads
- DOM and C++
- DOM and C++ Resources
- DOM and Perl
- DOM and Perl Resources
- DOM and PHP
- DOM and PHP Resources
- DOM Level 3
- DOM Level 3 Core
- DOM Level 3 Load and Save
- DOM Level 3 XPath
- DOM Level 3 Validation
- Informit Articles and Sample Chapters
- Books and e-Books
- Documentation and Implementations
- The Simple API for XML (SAX)
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- SAX and Java
- Informit Articles and Sample Chapters
- Books and e-Books
- SAX and .NET
- Informit Articles and Sample Chapters
- SAX and Perl
- SAX and Perl Resources
- SAX and PHP
- SAX and PHP Resources
- Validation
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Document Type Definitions (DTDs)
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- XML Schemas
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- RELAX NG
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Schematron
- Official Documentation and Implementations
- Validation in Applications
- Informit Articles and Sample Chapters
- Books and e-Books
- XSL Transformations (XSLT)
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- XSLT in Java
- Java in XSLT Resources
- XSLT and RSS in .NET
- XSLT and RSS in .NET Resources
- XSL-FO
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- XPath
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- XML Base
- Informit Articles and Sample Chapters
- Official Documentation
- XHTML
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- XHTML 2.0
- Documentation
- Cascading Style Sheets
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- XUL
- XUL References
- XML Events
- XML Events Resources
- XML Data Binding
- Informit Articles and Sample Chapters
- Books and e-Books
- Specifications
- Implementations
- XML and Databases
- Informit Articles and Sample Chapters
- Books and e-Books
- Online Resources
- Official Documentation
- SQL Server and FOR XML
- Informit Articles and Sample Chapters
- Books and e-Books
- Documentation and Implementations
- Service Oriented Architecture
- Web Services
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Creating a Perl Web Service Client
- SOAP::Lite
- Amazon Web Services
- Creating the Movable Type Plug-in
- Perl, Amazon, and Movable Type Resources
- Apache Axis2
- REST
- REST Resources
- SOAP
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- SOAP and Java
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- WSDL
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- UDDI
- UDDI Resources
- XML-RPC
- XML-RPC in PHP
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Ajax
- Asynchronous Javascript
- Client-side XSLT
- SAJAX and PHP
- Ajax Resources
- JSON
- Ruby on Rails
- Creating Objects
- Ruby Basics: Arrays and Other Sundry Bits
- Ruby Basics: Iterators and Persistence
- Starting on the Rails
- Rails and Databases
- Rails: Ajax and Partials
- Rails Resources
- Web Services Security
- Web Services Security Resources
- SAML
- Informit Articles and Sample Chapters
- Books and e-Books
- Specification and Implementation
- XML Digital Signatures
- XML Digital Signatures Resources
- XML Key Management Services
- Resources for XML Key Management Services
- Internationalization
- Resources
- Grid Computing
- Grid Resources
- Web Services Resource Framework
- Web Services Resource Framework Resources
- WS-Addressing
- WS-Addressing Resources
- WS-Notifications
- New Languages: XML in Use
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Google Web Toolkit
- GWT Basic Interactivity
- Google Sitemaps
- Google Sitemaps Resources
- Accessibility
- Web Accessibility
- XML Accessibility
- Accessibility Resources
- The Semantic Web
- Defining a New Ontology
- OWL: Web Ontology Language
- Semantic Web Resources
- Google Base
- Microformats
- StructuredBlogging
- Live Clipboard
- WML
- XHTML-MP
- WML Resources
- Google Web Services
- Google Web Services API
- Google Web Services Resources
- The Yahoo! Web Services Interface
- Yahoo! Web Services and PHP
- Yahoo! Web Services Resources
- eBay REST API
- WordML
- WordML Part 2: Lists
- WordML Part 3: Tables
- WordML Resources
- DocBook
- Articles
- Books and e-Books
- Official Documentation and Implementations
- XML Query
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- XForms
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Resource Description Framework (RDF)
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Topic Maps
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation, Implementations, and Other Resources
- Rich Site Summary (RSS)
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- Simple Sharing Extensions (SSE)
- Atom
- Podcasting
- Podcasting Resources
- Scalable Vector Graphics (SVG)
- Informit Articles and Sample Chapters
- Books and e-Books
- Official Documentation
- OPML
- OPML Resources
- Summary
- Projects
- JavaScript TimeTracker: JSON and PHP
- The Javascript Timetracker
- Refactoring to Javascript Objects
- Creating the Yahoo! Widget
- Web Mashup
- Google Maps
- Indeed Mashup
- Mashup Part 3: Putting It All Together
- Additional Resources
- Frequently Asked Questions About XML
- What's XML, and why should I use it?
- What's a well-formed document?
- What's the difference between XML and HTML?
- What's the difference between HTML and XHTML?
- Can I use XML in a browser?
- Should I use elements or attributes for my document?
- What's a namespace?
- Where can I get an XML parser?
- What's the difference between a well-formed document and a valid document?
- What's a validating parser?
- Should I use DOM or SAX for my application?
- How can I stop a SAX parser before it has parsed the entire document?
- 2005 Predictions
- 2006 Predictions
- Nick's Book Picks
Normally, when we think of Web services, we think about XML going back and forth. That's only natural, given the preponderance of SOAP and REST of applications, but it isn't actually the only way to do things. Today we're going to talk about JavaScript Object Notation (JSON). JSON is a way to represent the data and methods of an object in a text string, which enables you to reconstitute it as an object on demand.
There are several advantages to using JSON over XML. For one thing, it's much less verbose, which is good if you are passing large amounts of data. For another thing, your logic and structure or already in place when he received the object. You don't need to re-create them. Also, as we'll see in this section, there are certain advantages in terms of Web applications and the avoidance of cross domain restrictions.
On the other hand, JSON can be very difficult to read if you're a human instead of a computer. For example, consider this representation of time data for a project:
{"project": {"ProjectName":"InformIT Column", "TotalTime":"3289", "LastWorkedOn": { "Day":24, "Month":1, "Year":2006 }, "TimeThisWeek":"135", "TimeToday":"20", "CurrentProject":"JSON Guide Entry"}}
Now, I'm sure that there are people who have no trouble separating the labels
(such as ProjectName
) from the data (such as InformIT Column
), but I'm not one of them.
But let's look at the structure so we can see how this works.
We start with the fact that the entire object is placed within curly braces ({}
).
Then we have the actual object name, project
, followed by the contents of the object, also in braces.
Each member is signified by a label, the colon, and its value. In some cases, we have a complex object. For example,
LastWorkedOn
is actually an object itself, as you can tell because its value is enclosed in curly braces.
That object has three members, Day
, Month
, and Year
. And
Let's see how this would actually work in JavaScript. Start by creating a basic page with a script:
<html> <head> <title>JSON testing</title> <script type="text/javascript"> function showObject(){ var str = '{"project": {'+ '"ProjectName":"InformIT Column",'+ '"TotalTime":"3289",'+ '"LastWorkedOn": {'+ ' "Day":24,'+ ' "Month":1,'+ ' "Year":2006 },'+ '"TimeThisWeek":"135",'+ '"TimeToday":"20",'+ '"CurrentProject":"JSON Guide Entry"}}'; var projectObj = eval("("+str+")"); document.write("Project is: "+projectObj.project.ProjectName); document.write("<br />"); document.write("Last worked on: "+ projectObj.project.LastWorkedOn.Month + "/" + projectObj.project.LastWorkedOn.Day + "/" + projectObj.project.LastWorkedOn.Year); } </script> </head> <body> <h1>JavaScript Object Notation</h1> <script type="text/javascript"> showObject(); </script> </body> </html>
Year we've created a simple script that includes the text that represents the object. We then use the
eval ()
function to convert the text (enclosed in parentheses) back into an object. (If you're
concerned about the security implications of using the eval()
function, fear not. We'll get to that shortly.)
Once we have the object, we can access its data just as we would access the data of any other JavaScript object.
Here you see the project name, and the contents of the LastWorkedOn
object. Finally,
we call the script from within the body of the page. The results look like this:
We can also use JSON to specify arrays. For example, we might have a projects
object with more than one project:
... function showArrayOfObjects(){ var str = '{"project": [{'+ '"ProjectName":"InformIT Column",'+ '"TotalTime":"3289",'+ '"LastWorkedOn": {'+ ' "Day":24,'+ ' "Month":1,'+ ' "Year":2006 },'+ '"TimeThisWeek":"135",'+ '"TimeToday":"20",'+ '"CurrentProject":"JSON Guide Entry"},'+ '{'+ '"ProjectName":"Vitamin Store Site",'+ '"TotalTime":"42",'+ '"LastWorkedOn": {'+ ' "Day":20,'+ ' "Month":1,'+ ' "Year":2006 },'+ '"TimeThisWeek":"2",'+ '"TimeToday":"0",'+ '"CurrentProject":"Client Review"}]}'; var projectObj = eval("("+str+")"); document.write("First project is: "+projectObj.project[0].ProjectName); document.write("<br />"); document.write("Last worked on: "+ projectObj.project[0].LastWorkedOn.Month + "/" + projectObj.project[0].LastWorkedOn.Day + "/" + projectObj.project[0].LastWorkedOn.Year); document.write("<br /><br />"); document.write("Second project is: "+projectObj.project[1].ProjectName); document.write("<br />"); document.write("Last worked on: "+ projectObj.project[1].LastWorkedOn.Month + "/" + projectObj.project[1].LastWorkedOn.Day + "/" + projectObj.project[1].LastWorkedOn.Year); } </script> </head> <body> <h1>JavaScript Object Notation</h1> <script type="text/javascript"> showArrayOfObjects(); </script> </body> </html>
Notice first of all that I have enclosed the individual elements of the array in brackets ([]
).
In this case, we're dealing with an array of objects, but it could just as easily have been an array of strings or
numbers, as long as everything is enclosed in brackets and separated by commas.
Once we have the object, again we work with it like any other object; we are specifying a specific element of the array, which gives us the object in that position, which we treat like any other object. The results look like this:
That's the basic idea, but now we need to do with this eval()
thing. You see, this function
will execute any code you give it, even if it comes in as a string. This is terrific for executing dynamically
generated code, but terrifying if you are getting the text from an outside source. So in general,
it's not a good idea to create your objects with a raw call to the eval()
function. Instead,
you'll want to use a JSON parser. You can download one from here. In fact,
you can download JSON parsers for virtually any language from JSON.org.
Once you have the parser, you can use it to create your objects:
<html> <head> <title>JSON testing</title> <script type="text/javascript" src="./json.js" ></script> <script type="text/javascript"> function showArrayOfObjectsWithParser(){ var str = '{"project": [{'+ ... '"CurrentProject":"Client Review"}]}'; var projectObj = JSON.parse(str); document.write("First project is: "+projectObj.project[0].ProjectName); document.write("<br />"); ... } </script> </head> <body> <h1>JavaScript Object Notation</h1> <script type="text/javascript"> showArrayOfObjectsWithParser(); </script> </body> </html>
Once we include the parser with its own script
tag, the only change is the way in which we create the object.
Notice that we are no longer enclosing a string in parentheses. Other than that, everything is exactly the same.
Okay, now that we know how to use these objects, let's put them to work in a more practical situation.
Yahoo Web Services now gives you the option to output JSON text rather than XML. For example, the query:
http://api.search.yahoo.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&query=Madonna&results=2&output=json
(scroll to the right to see the new parameter)
will return the string:
{"ResultSet":{ "totalResultsAvailable":"305090", "totalResultsReturned":2, "firstResultPosition":1, "Result":[{ "Title":"madonna 118", "Summary":"Picture 118 of 184", "Url":"http:\/\/www.celebritypicturesarchive.com\/pictures\/m\/madonna\/madonna-118.jpg", "ClickUrl":"http:\/\/www.celebritypicturesarchive.com\/pictures\/m\/madonna\/madonna-118.jpg", "RefererUrl":"http:\/\/www.celebritypicturesarchive.com\/pgs\/m\/Madonna\/Madonna%20picture_118.htm", "FileSize":"40209", "FileFormat":"jpeg", "Height":"700", "Width":"473", "Thumbnail":{ "Url":"http:\/\/re2.mm-b1.yimg.com\/image\/500892420", "Height":"130", "Width":"87"}}, {...}]}}
instead of the XML:
<?xml version="1.0" encoding="UTF-8"?> <ResultSet xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="urn:yahoo:srchmi" xsi:schemaLocation="urn:yahoo:srchmi http://api.search.yahoo.com/ImageSearchService/V1/ImageSearchResponse.xsd" totalResultsAvailable="305090" totalResultsReturned="2" firstResultPosition="1"> <Result> <Title>madonna 118</Title> <Summary>Picture 118 of 184</Summary> <Url>http://www.celebritypicturesarchive.com/pictures/m/madonna/madonna-118.jpg</Url> <ClickUrl>http://www.celebritypicturesarchive.com/pictures/m/madonna/madonna-118.jpg</ClickUrl> <RefererUrl>http://www.celebritypicturesarchive.com/pgs/m/Madonna/Madonna%20picture_118.htm</RefererUrl> <FileSize>40209</FileSize> <FileFormat>jpeg</FileFormat> <Height>700</Height> <Width>473</Width> <Thumbnail> <Url>http://re2.mm-b1.yimg.com/image/500892420</Url> <Height>130</Height> <Width>87</Width> </Thumbnail> </Result> <Result>...</Result> </ResultSet>
The data is the same, but it's returned in JSON format.
Okay, so how do we use it? Well, we use it by feeding it to a script, just as we would use any other data.
For example, we can create a script that extract the number of results and adds it to an empty
div
:
<html> <head> <title>JSON testing</title> <script type="text/javascript" src="./json.js" ></script> <script type="text/javascript"> function getNumberOfResults(){ var yahooStr = '{"ResultSet":{"totalResultsAvailable":"305090","totalResultsReturned":2,"firstResultPosition":1,"Result":[{"Title":"madonna 118","Summary":"Picture 118 of 184","Url":"http:\/\/www.celebritypicturesarchive.com\/pictures\/m\/madonna\/madonna-118.jpg","ClickUrl":"http:\/\/www.celebritypicturesarchive.com\/pictures\/m\/madonna\/madonna-118.jpg","RefererUrl":"http:\/\/www.celebritypicturesarchive.com\/pgs\/m\/Madonna\/Madonna%20picture_118.htm","FileSize":"40209","FileFormat":"jpeg","Height":"700","Width":"473","Thumbnail":{"Url":"http:\/\/re2.mm-b1.yimg.com\/image\/500892420","Height":"130","Width":"87"}},{"Title":"madonna britney spe 111697a","Summary":"Britney og Madonna kom sv\u00e6rt n\u00e6r hverandre under MTVutdelingen","Url":"http:\/\/pub.tv2.no\/multimedia\/TV2\/archive\/00111\/madonna_britney_spe_111697a.jpg","ClickUrl":"http:\/\/pub.tv2.no\/multimedia\/TV2\/archive\/00111\/madonna_britney_spe_111697a.jpg","RefererUrl":"http:\/\/pub.tv2.no\/TV2\/underholdning\/article140732.ece","FileSize":"21801","FileFormat":"jpeg","Height":"200","Width":"250","Thumbnail":{"Url":"http:\/\/re2.mm-c1.yimg.com\/image\/979408253","Height":"88","Width":"110"}}]}}'; var yahooObj = JSON.parse(yahooStr); document.getElementById("resultDiv").innerHTML = "<b>Results: </b>"+yahooObj.ResultSet.totalResultsAvailable; } </script> </head> <body> <h1>JavaScript Object Notation</h1> <div id="resultDiv"></div> <a href="javascript:getNumberOfResults()">Get Results</a> </body> </html>
Starting at the bottom, we created the div
, and a link to the getNumberOfResults()
function. That function has the hardcoded string that represents the object (we'll change that in a minute),
parses it, and adds the results to the div
. When you first load the page, all you will see is the link.
Once you click the link, you'll see the results:
That's all well and good, but how do we get the information loaded with the page? Well, consider this page:
<html> <head> <title>JSON testing</title> <script type="text/javascript" src="./json.js" ></script> <script type="text/javascript"> function showNumberOfResults(yahooStr){ var yahooObj = JSON.parse(yahooStr); document.getElementById("resultDiv").innerHTML = "<b>Results: </b>"+yahooObj.ResultSet.totalResultsAvailable; } </script> </head> <body> <h1>JavaScript Object Notation</h1> <div id="resultDiv"></div> <script type="text/javascript"> var yahooStr = '{"ResultSet":{"totalResultsAvailable":"305090","totalResultsReturned":2,"firstResultPosition":1,"Result":[{"Title":"madonna 118","Summary":"Picture 118 of 184","Url":"http:\/\/www.celebritypicturesarchive.com\/pictures\/m\/madonna\/madonna-118.jpg","ClickUrl":"http:\/\/www.celebritypicturesarchive.com\/pictures\/m\/madonna\/madonna-118.jpg","RefererUrl":"http:\/\/www.celebritypicturesarchive.com\/pgs\/m\/Madonna\/Madonna%20picture_118.htm","FileSize":"40209","FileFormat":"jpeg","Height":"700","Width":"473","Thumbnail":{"Url":"http:\/\/re2.mm-b1.yimg.com\/image\/500892420","Height":"130","Width":"87"}},{"Title":"madonna britney spe 111697a","Summary":"Britney og Madonna kom sv\u00e6rt n\u00e6r hverandre under MTVutdelingen","Url":"http:\/\/pub.tv2.no\/multimedia\/TV2\/archive\/00111\/madonna_britney_spe_111697a.jpg","ClickUrl":"http:\/\/pub.tv2.no\/multimedia\/TV2\/archive\/00111\/madonna_britney_spe_111697a.jpg","RefererUrl":"http:\/\/pub.tv2.no\/TV2\/underholdning\/article140732.ece","FileSize":"21801","FileFormat":"jpeg","Height":"200","Width":"250","Thumbnail":{"Url":"http:\/\/re2.mm-c1.yimg.com\/image\/979408253","Height":"88","Width":"110"}}]}}'; </script> <a href="javascript:showNumberOfResults(yahooStr)">Get Results</a> </body> </html>
Because of the number of nested quotation marks, I've created a variable and called it from the function,
but you can see that all we're doing here is passing the JSON object to a function. Now, what if we could
have the request for data call the function itself? It turns out that if we add a callback
parameter
to the request, we can actually have a call a function. For example:
<html> <head> <title>JSON testing</title> <script type="text/javascript" src="./json.js" ></script> <script type="text/javascript"> function showNumberOfResults(yahooObj){ document.getElementById("resultDiv").innerHTML = "<b>Results: </b>"+yahooObj.ResultSet.totalResultsAvailable; } </script> </head> <body> <h1>JavaScript Object Notation</h1> <div id="resultDiv"></div> <script type="text/javascript" src="https://api.search.yahoo.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&query=Madonna&results=2&output=json&callback=showNumberOfResults" ></script> </body> </html>
Again starting at the bottom, we are creating a script tag that has as its source the actual YWS request. If you scroll all the way to the right, you'll see that we've added a new parameter:
&callback=showNumberOfResults
What this does is tell Yahoo! To return a call to the showNumberOfResults
script, passing the object as a parameter. If you then look at the top of the page, we slightly altered that function to take the object
rather than the string. When the page loads, the browser comes to this tag, loads the source, and calls the function.
If you load this page, you will see the number of results after a slight delay:
This still leaves us with one problem: how do we create a page that takes data from the user -- such as the
keyword they want to search on -- and returns the results to the browser? The answer lies in the
script
tag. In this case, we hardcoded it onto the page. But what if we created it dynamically, in response to
a user action? Try this:
<html> <head> <title>JSON testing</title> <script type="text/javascript" src="./json.js" ></script> <script type="text/javascript"> function showLiveResults(yahooObj){ document.getElementById("resultDiv").innerHTML = "<b>Results: </b>"+yahooObj.ResultSet.totalResultsAvailable; } function makeResultScript(){ var form = document.getElementById("keywordForm"); var keyword = form.elements["keyword"].value; var url = "http://api.search.yahoo.com/ImageSearchService/V1/imageSearch?appid=YahooDemo"+ "&query="+keyword+ "&results=2&output=json&callback=showLiveResults"; headElement = document.getElementsByTagName("head").item(0); var scriptTag = document.createElement("script"); scriptTag.setAttribute("type", "text/javascript"); scriptTag.setAttribute("src", url); headElement.appendChild(scriptTag); } </script> </head> <body> <h1>JavaScript Object Notation</h1> <div id="resultDiv"></div> <form id="keywordForm"> Keyword: <input type="text" name="keyword" /> <input type="button" onclick="makeResultScript()" value="Get Number Of Results" /> </form> </body> </html>
Starting once again at the bottom, we've created a form. That form takes a keyword, and when you click the
button, it calls the makeResultScript()
function. That function gets a reference to the form, from which
it extracts the keyword the user has chosen. It then uses that keyword to create the appropriate URL for the request.
(Notice that we've changed the name of the function to showLiveResults
.) It then gets a reference to the
head
element, and then creates a new script
element with the appropriate
type
and src
element.
The moment it adds that element to the head
element, the call goes out to the Web service,
and when it comes back, the object is fed to the showLiveResults
function. That function simply
extracts the data and adds it to the page, just as we've been doing all along. The result is a page in which you can
at a keyword and get the number of results almost instantly:
There's just one more thing left to do: remove the clutter. We've now added a new tag to the DOM, so let's go about removing it in case we want to make another request:
<html> <head> <title>JSON testing</title> <script type="text/javascript" src="./json.js" ></script> <script type="text/javascript"> var scriptCounter = 1; function showLiveResults(yahooObj){ document.getElementById("resultDiv").innerHTML = "<b>Results: </b>"+yahooObj.ResultSet.totalResultsAvailable; var scriptTag = document.getElementById(scriptCounter); headElement = document.getElementsByTagName("head").item(0); headElement.removeChild(scriptTag); scriptCounter++; } function makeResultScript(){ var form = document.getElementById("keywordForm"); var keyword = form.elements["keyword"].value; var url = "http://api.search.yahoo.com/ImageSearchService/V1/imageSearch?appid=YahooDemo"+ "&query="+keyword+ "&results=2&output=json&callback=showLiveResults"; headElement = document.getElementsByTagName("head").item(0); var scriptTag = document.createElement("script"); scriptTag.setAttribute("id", scriptCounter); scriptTag.setAttribute("type", "text/javascript"); scriptTag.setAttribute("src", url); headElement.appendChild(scriptTag); } </script> ...
When we create the script
tag, we give it a unique id
attribute,
based on the scriptCounter
variable. When the script has been executed, we then
use standard DOM techniques to remove it from the document, incrementing the counter as we go.
You shouldn't see any change in the document, but you should be able to make multiple requests
without reloading the page.
And there you have it. Accessing a Web service from the browser without reloading and without having to use a proxy to avoid cross domain problems. And it's fast, too. Yahoo! Is not the only web service that provides JSON data, either. You can also use this technique with del.icio.us, and I wouldn't be surprised if other services jumped on the bandwagon in the near future.