random thoughts, formed in the twisted mind of a coder... RSS 2.0
# Sunday, 17 August 2008

AJAX is a great way to improve the usability of your site. With it you're able to retrieve new data from the server without having to reload the whole page over and over again. Most people even say that it lowers the bandwidth to your server, because you're only downloading the data the client needs instead of the whole page.

Well, is this true? As in most implementations of AJAX that I've seen, a full featured framework is used to make it all work. Such a framework is usually not small in size. 50kb is not out of the ordinary. So, before you are using less bandwidth, you have to overcome the overhead of the framework.

In most cases the framework (and even AJAX as we know it) is not necessary at all. If all you want to do is get some new data from the server, or to let the server refresh a query, or other simple tasks like that... you can simply use plain DHTML.

To access the server from the client (optionally with some parameters), you can simply create a new script element and add it to the HTML structure. As it's added, it's re-evaluated and processed. So, if you have set the src property pointing to a script (or a dynamic page) on the server, the client starts a new HTML session to load the script. After the script has been downloaded, the source code is evaluated and execution starts immediately.

The scripts below show a simple version which uses static scripts.

index.html

<HTML>
  <HEAD>
    <TITLE>Simple AJAX</TITLE>
  </HEAD>
  <BODY>
    <DIV>
      <INPUT type="button" value="press me..." onclick="loadNewScript('script1.js');" />
      <INPUT type="button" value="...or me" onclick="loadNewScript('script2.js');" />
      <BR />
      <DIV id="result">view results here...</DIV>
    </DIV>
    <SCRIPT>
    <!--
      function loadNewScript(_source)
      {
        //get the old script element
        var script = document.getElementById("reloadScript");
        
        //remove it from the html structure
        document.body.removeChild(script);

        //create a new script element with the new source
        script = document.createElement("SCRIPT");
        script.id   = "reloadScript";
        script.src  = _source;
        
        //add it to the html structure and the script is loaded and runs
        document.body.appendChild(script);
      }
    -->
    </SCRIPT>
    <SCRIPT id="reloadScript"></SCRIPT>
  </BODY>
</HTML>

script1.js

var text = document.createTextNode("Script 1 was loaded...");
var div = document.createElement("DIV");
div.appendChild(text);
document.getElementById("result").appendChild(div);

script2.js

var text = document.createTextNode("Script 2 is ready!");
var div = document.createElement("DIV");
div.appendChild(text);
document.getElementById("result").appendChild(div);

 

As you can see, the script to load a new script only consists of 4 lines of code. And if you want to pass parameters to the server or simply want a dynamic script on the server, then use PHP, ASP or ASPX or any dynamic page which returns javascript.

loadNewScript('dynascript.aspx?param1=valA&param2=valB');

This technique is also extremely fit for JSON. JSON is a data structure formed of javascript code. It's very usable with little overhead. You can find more about JSON here: http://json.org/

 

EDIT: Thanks go out to Almer for pointing out some errors in my examples which made them unsuitable for Firefox etc... The bugs are fixed now. The examples are now fit for any DHTML supporting browser.

 

Get your example files here:

index.htm (.99 KB)

script1.js (.18 KB)

script2.js (.17 KB)

Sunday, 17 August 2008 13:43:01 (W. Europe Daylight Time, UTC+02:00)  #    Comments [0]
Script and HTML
All comments require the approval of the site owner before being displayed.
Name
E-mail
Home page

Comment (HTML not allowed)  

Enter the code shown (prevents robots):

Live Comment Preview
About the author/Disclaimer

Disclaimer
The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.

© Copyright 2017
Martijn Thie
Sign In
Statistics
Total Posts: 18
This Year: 0
This Month: 0
This Week: 0
Comments: 186
All Content © 2017, Martijn Thie
DasBlog theme adapted from 'Business' (originally by delarou)