It's also referred to as Dynamic Script Loading,
because it simply involves adding a <script> tag dyamically to the page. The jsonp() function
was obtained here, and has been modified from the
original version. The example HTML/Javascript code below will still work if copied and run from a different domain.
Working Example
The HTML/Javascript
<html><head></head><body><inputtype="button"value="Do AJAX"onclick="ajax_request()"><br><formname="form1"><tableclass="formtable"><tr><td>First</td><td><inputtype="text"name="first"></td></tr><tr><td>Last</td><td><inputtype="text"name="last"></td></tr><tr><td>Address</td><td><inputtype="text"name="address"></td></tr></table></form><scriptlanguage="javascript">
/**Cross domain <script> include (functions like an AJAX request for JSON
* data)
*/
function ajax_request() {
var submitTo = 'ajax_request.php';
jsonp("http://simpletutorials.com/tutorials/javascript/cross_domain_ajax/get_info.php",
"ajax_response");
}
/**Response (Called when data has been retrieved)
*
* @param object data Javascript (JSON) data object received
* through <script> request
*/
function ajax_response(data) {
for(var key in data) {
document.form1[key].value = data[key];
}
}
function jsonp(url, callback)
{
if (url.indexOf("?") > -1) {
url += "&jsonp=";
}
else {
url += "?jsonp=";
}
url += callback + "&";
url += new Date().getTime().toString(); // prevent caching
var script = document.createElement("script");
script.setAttribute("src",url);
script.setAttribute("type","text/javascript");
document.getElementsByTagName('head')[0].appendChild(script);
}
</script></body></html>
