Java Reference
In-Depth Information
This is similar to our earlier example
FormData
interface, but there is just one button that
will make the JSONP request. To process this, we'll create a JavaScript file called scripts.js
that's saved in the same directory as jsonp.htm and contains this code:
scripts.js
(excerpt)
var send = document.getElementById("send");
send.addEventListener("click", update , false);
This gives us a reference to the button and then adds an event listener that will call the
update()
function when the button is clicked. This function, which makes the JSONP
request, needs adding to the bottom of the scripts.js file:
scripts.js
(excerpt)
function update() {
var script = document.createElement("script");
script.src = " http://echo.jsontest.com/name/superman/
?callback=
↵
process";
document.getElementsByTagName("head")[0].appendChild(script);
}
This uses DOM methods to create a new
script
element. We then add the URL from
which we'll be requesting the JSONP. In this example we're using the JSON Test site
again, this time using its
echo
feature that returns a JavaScript object based on the URL
provided. In this case, adding "/name/superman" results in this object being returned:
{
name: superman
}
Notice at the end of the URL specified is the string ?callback=process. This identifies the
name of the callback that we want called when the data is returned. In this case, a function
called
process()
will be invoked, so let's add this function to the bottom of scripts.js:
scripts.js
(excerpt)
