AJAX: Dawn of a new developer – Good introductory article on JavaWorld.com

Dave Johnson presents an excellently written introduction to Ajax over at JavaWorld.com. Besides calling Ajax the “crown jewel in the current Web evolution that has been dubbed Web 2.0” (a position we would not necessarily disagree with…), Johnson presents a good case (especially directed towards Java developers) for the use of Ajax. He also gets into some good patterns to use and development tips. All in all, an excellent Ajax article, especially if you’re a Java developer.

Summary
The recently coined term AJAX (Asynchronous JavaScript with XML) has given new life to Web development and spurred the advance of Web 2.0. This article looks at the current state of AJAX and how it is changing the Web developer’s job description. In particular, Dave Johnson identifies some of the more important AJAX technologies and tools and how these are introducing new usability and development issues for Web developers.

Read the entire article: AJAX: Dawn of a new developer

7 Responses to AJAX: Dawn of a new developer – Good introductory article on JavaWorld.com
  1. Anton
    April 10, 2006 | 10:53 am

    I want mp3 player. What will advise?

  2. ingig
    October 25, 2005 | 1:14 pm

    I think that I found a soloution for this, it need a “litle” extra javascript in the complete() function

    function complete() {
    var txt = ajax.response;
    var scr = ”;

    //find all script tags in the response
    var re = new RegExp(“<script[\\s\\S]*?</script([\\s\\S]*?)>”);
    var replaceEx = new RegExp(‘<script.*>’);
    var srcEx = new RegExp(‘src=”(.*)”‘);

    var isTrue = true;

    while (isTrue) {
    var arr = re.exec(txt);

    if (typeof(arr) != ‘undefined’ && arr != null) {
    for (var i = 0;i<arr.length;i ) {
    if (typeof(arr[i]) != ‘undefined’ && arr[i] != ”) {
    if (arr[i].indexOf(“src=”) != -1) {
    var script2 = document.createElement(“script”);
    script2.setAttribute(‘type’, ‘text/javascript’);
    var srcPath = srcEx.exec(txt);
    script2.setAttribute(‘src’, srcPath[1]);
    document.getElementById(‘head’).appendChild(script2);
    } else {
    scr = arr[i].replace(replaceEx, ”).replace(‘</script’ ‘>’, ”).replace(‘<!–‘, ”).replace(‘//–>’, ”) ‘\n\n’;
    }
    }
    }

    if (arr.length < 2) {
    isTrue = false;
    } else {
    txt = txt.replace(re, ”);
    }
    } else {
    isTrue = false;
    }
    }
    var script = document.createElement(“script”);
    script.setAttribute(‘type’, ‘text/javascript’);
    script.innerHTML = scr;

    //the head id is the <head> element
    document.getElementById(‘head’).appendChild(script);

    document.getElementById(‘mydiv’).innerHTML = ajax.response;
    }

    The strange thing is when you have a javascript in an external page it doesn’t seem to work, but css works just fine. It’s like the browsers(firefox and IE) don’t render the javascript but render the css.

    Ofcourse the code needs to be cleaned up and tested more but does what I was thinking.

    Do you have any other ideas?

  3. ingig
    October 25, 2005 | 8:06 am

    The code doesn’t depend on onload in this instance. Here is an example. I use Sack(http://twilightuniverse.com/projects/sack/) as my ajax component

    <!– test.htm starts //–>
    <script type=”text/javascript” src=”sack.js”></script>
    <a href=”javascript:getPage();”>Get page</a>
    <div id=”mydiv”></div>
    <script>
    var ajax = new sack();
    ajax.requestFile = ‘test2.htm’;
    ajax.onCompletion = complete;
    ajax.method = ‘GET’;
    function getPage() {
    ajax.runAJAX();
    }
    function complete() {
    document.getElementById(‘mydiv’).innerHTML = ajax.response;
    }
    </script>
    <!– test.htm ends //–>

    <!– test2.htm starts //–>
    <div id=”div1″>Hello world [<a href=”javascript:showNr2();”>Show nr. 2</a>]</div>
    <div id=”div2″ style=”display:none;”>Hello World Nr. 2
    <script type=”text/javascript”>
    function showNr2() {
    document.getElementById(‘div2’).style.display = ”;
    }

    </script>
    <!– test2.htm ends //–>

    When I click “Get page”, it loads the page into mydiv. But when I click “Show nr. 2” Firefox throws javascript error, “showNr2 is not defined”.

    If I go to test2.htm, the javascript works as it should.

  4. Gabriel
    October 24, 2005 | 8:53 pm

    ingig,

    From my experience, it depends. :)

    Sometimes, the javascript you want to execute relies on a body.onload action getting called, which might not be happening in your code.

    Can you supply an example of the code you’re hoping to get to work?

    Then we can take a look at it and let you know what we think.

  5. ingig
    October 24, 2005 | 8:41 pm

    That’s great to hear, look forward to it. I would like to throw a question at you guys if you don’t mind.

    I’m requesting a page with Ajax, it’s a html page that contains javascript( tag(s)) inside. I can’t have the javascript outside the page(long story)

    I retrieve the page with ajax and insert it into a div with innerHTML. When I load the page, the html looks good but none of the javascript works.

    Any idea why that is?

  6. Gabriel
    October 21, 2005 | 9:56 am

    Funny you should ask… :) We’re in the middle right now of preparing to launch our own AjaxBlog.com forums dedicated to discussing Ajax. So, stay tuned, we’ll announce on the homepage once we’re ready to go.

  7. ingig
    October 21, 2005 | 9:15 am

    This is question is not related to this article, but I was wondering if you guys knew af any specific ajax forums out there?