www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 24

Thread: What is AJAX... the big picture

  1. #1
    Join Date
    Jun 2004
    Location
    Tampa, Florida
    Posts
    77

    What is AJAX... the big picture

    Probably the wrong place to post this, and if so I apologize. I'm just trying to get a handle on what AJAX is, what it could do for me, and based on my current skills the bast way to learn about it. On that last point, I've maintained some huge and yet very primitive websites. But it started way back at a time when scripting was a nightmare. I think i got in right around the time Netscape 4 and IE 4 were the predominate browsers, and each version was taking their DOMs in significantly different directions. Building a library was almost futile, because each new browser version would break your interface to the DOM. For example, below was a test example I wrote for a long gone employer to demonstrate how a human-machine interface (HMI) for an electric substation could be done using a browser rather than a custom graphics application.

    http://elfintechnologies.com/html_hmi/hmi_tst1.htm

    Unfortunately if you look at this in anything but IE, it won't do anything anymore. In fact I'm shocked it still works in IE! Now this was just a demo to prove that screen control and display features could be altered without re-loading entire pages. But it still had no server side feeds. The data changing you see is just random number generators. Had my employer had any interest, my only prospect for server side communication would have been to write a JAVA applet, using something called a shared byte array object to exchange data with a server. Then, since Java can interact with javascript variables, I'd be able to complete the connection. The whole thing seemed like a daunting task.

    So lately, as I've joined the ranks of the unemployed again, I'm trying to sharpen my skills, and I've seen AJAX come up again and again in employer requirements. And looking further, it SEEMS (big word) that AJAX might be a solution to such server to browser interaction, with methods I would NOT have to write or invent from scratch. Further, I get the impression that AJAX is both a javascript based methodology, and that in modern browsers, the DOMs have at least become sufficiently unified so that compatibility is much less a problem than it once was.

    But maybe I have a totally wrong idea what AJAX is about, and maybe its completely the wrong tool for writing such HMIs? I am been more of an electronics and embedded systems engineer for the past decade, and I've obviously completely lost touch with web technology. So all pointers and advise is much appreciated.

  2. #2
    Join Date
    Oct 2013
    Posts
    17
    I'll give my take on AJAX. I have developed numerous PC apps that interface with databases and create numerous reports. One problem is they only run on the PC not Macs, tables or other devices and they have to be installed and updated. I was looking to see if I could duplicate the app behavior using HTML5, CSS3, Javascript, jQuery, AJAX and PHP. I did not want numerous HTML pages. I wanted one HTML page and all the data to be update using AJAX. I was able to achieve almost identical behavior to the PC app. jQuery has made AJAX simple to do. AJAX is asynchronous. You need to figure out how to handle this. For example, I had numerous form items I needed to initialize from the database so I issued numerous AJAX requests. The order the data returned is not predictable. What I ended up doing is to write a recursive AJAX function so the requests happen sequentially. I even use AJAX to create the Word and PDF reports. I send an AJAX request to the server. The server creates the report and the AJAX request returns links to the reports. So in my experience AJAX helps you duplicate the typical desktop app experience.

  3. #3
    Join Date
    Jun 2004
    Location
    Tampa, Florida
    Posts
    77

    Ajax is Asynchronus

    Quote Originally Posted by mogulman View Post
    I'll give my take on AJAX. I have developed numerous PC apps that interface with databases and create numerous reports. One problem is they only run on the PC not Macs, tables or other devices and they have to be installed and updated. I was looking to see if I could duplicate the app behavior using HTML5, CSS3, Javascript, jQuery, AJAX and PHP. I did not want numerous HTML pages. I wanted one HTML page and all the data to be update using AJAX. I was able to achieve almost identical behavior to the PC app. jQuery has made AJAX simple to do. AJAX is asynchronous. You need to figure out how to handle this. For example, I had numerous form items I needed to initialize from the database so I issued numerous AJAX requests. The order the data returned is not predictable. What I ended up doing is to write a recursive AJAX function so the requests happen sequentially. I even use AJAX to create the Word and PDF reports. I send an AJAX request to the server. The server creates the report and the AJAX request returns links to the reports. So in my experience AJAX helps you duplicate the typical desktop app experience.
    OK, that's good information! So it sounds almost like Ajax can be compared to UDP datagrams as opposed to TCP, in the sense that there is no automated ordering of packets (though hopefully there is at least guaranteed delivery and retry mechanisms). So if synchronization is an issue, it sounds like you have to have hidden fields in the database where timestamps or event record numbers are kept. Literally like building your own protocol! Hmmm... something to chew on!

    So once you migrated this application from the PC to a web based app, did you have to switch to a more universal database like maybe PostGress? I'm a bit behind here too! last time I had to work with PC based databases on the programming level, it was an Access database, using a somewhat painful interface microsoft called "Jet" (Though it certainly a bit slow to have such a boastful name). I suppose you were using SQL?

  4. #4
    Join Date
    Mar 2011
    Posts
    1,160
    At its root, AJAX is a mechanism that allows JavaScript applications to interact with the web. You can use it to allow your scripts/pages to communicate with external data sources via HTTP requests in order to create interactive, dynamic web pages. And JavaScript is as adept as any programming language in its ability to parse the data it receives, so you're not necessarily limited to accessing resources that were specially designed to be used this way. Beyond that, it's up to you as to what you can do with it.

  5. #5
    Join Date
    Oct 2013
    Posts
    17
    There is no need to use timestamps. When AJAX returns the first result I process it and then call the same AJAX routine again using the next item I need. It is really simple. This is an intranet app for a small company. I do use SQL. Since the desktop app uses Access I still use the same Access db. I use PHP and connect using ODBC. So far it works reliably and fast. I may switch to SQL Server if I have problems. The hardest part of this was figuring out how to write Javascript in an object oriented way. I am new to Javascript. I basically created a 'class' to navigate each table. Lookup a book called Object-Oriented Javascript. Very helpful.

  6. #6
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,519
    Quote Originally Posted by mogulman View Post
    There is no need to use timestamps. When AJAX returns the first result I process it and then call the same AJAX routine again using the next item I need. It is really simple. This is an intranet app for a small company. I do use SQL. Since the desktop app uses Access I still use the same Access db. I use PHP and connect using ODBC. So far it works reliably and fast. I may switch to SQL Server if I have problems. The hardest part of this was figuring out how to write Javascript in an object oriented way. I am new to Javascript. I basically created a 'class' to navigate each table. Lookup a book called Object-Oriented Javascript. Very helpful.
    'scuuuuuze me ?
    "I process it and then call the same AJAX routine again using the next item I need." -- Impossible, You have to make a NEW ajax object for each interaction with the webserver
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  7. #7
    Join Date
    Oct 2013
    Posts
    17
    Maybe I am not explaining it correctly. I recursively call the function that performs the AJAX request. Here is a simplified version of the code.

    Code:
    NavDb.prototype.getSelData = function () {
        var cs, fmField, value, sql, cnt, csv,
        $this = this;
    
        cs = this.curSelector;
        cnt = this.selectors.length;
        if (cs >= cnt) {   // check if done
            $("#status").html("Initialization complete");
            $("body").css("cursor", "default")
            return;
        }
        $.ajax({
            url: 'php/select.php',
            type: 'POST',
            context: this,    // Only needed 'this' not this.parentNode.
            dataType: 'json',
            data: {
                'sql': sql
            }
        }).done(function (data) {
            if (data.success) {
                if (data.v.length > 0) {
                    //process data
                }
                this.curSelector++;
                this.getSelData();  // recursive call
            }).fail(function (XHR, textStatus, errorThrown) {
                $("#status").html(getErrorText(XHR.responseText));
                $("body").css("cursor", "default")
    
            })
        }
    };

  8. #8
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,519
    1. thats not JavaScript
    2. thats not AJAX
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  9. #9
    Join Date
    Oct 2013
    Posts
    17
    What do you mean it's not Javascript or AJAX? I used jQuery's AJAX functions. It's running in Chrome/Firefox/IE and it works.

  10. #10
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,519
    JQuery is written in JavaScript and you may run query after query but it aint JavaScript (in its pure form) nor is it AJAX (in its pure form) which is why you are able to do what you said.

    JQuery is not the best thing to use in script development, it is often the cause of many problems like I am experiencing with my Google Chrome browser, everything was working fine up in til 6 weeks ago and I get JQuery errors galore. Only one problem, I don't use JQuery so I end up having to test my scripts in Opera / FireFox and MSIE because Chrome is having issues with JQuery which I understand is something that runs in the browser.

    A simple example of eggs in one basket, takes one minor **** up and whatever you wrote using JQ, comes tumbling down and you have to wait until google pull their digits out and fix the problem, the other side of the cake is using pure JavaScript, any code problems you debug, it gets fixed and away you go without having to wait for someone to fix the problem and get your development back up and running as expected.

    JQuery == Bad

    JavaScript == Good

    As the saying goes, why reinvent the wheel? Sure you can get plenty of boiler plate that has already been developed but it too has its problems and other frameworks like prototype and moo tools, etc, all have problems from time to time.

    I trust you now understand my comment earlier.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  11. #11
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,519
    Quote Originally Posted by mogulman View Post
    Maybe I am not explaining it correctly. I recursively call the function that performs the AJAX request. Here is a simplified version of the code.

    Code:
    NavDb.prototype.getSelData = function () {
        var cs, fmField, value, sql, cnt, csv,
        $this = this;
    
        cs = this.curSelector;
        cnt = this.selectors.length;
        if (cs >= cnt) {   // check if done
            $("#status").html("Initialization complete");
            $("body").css("cursor", "default")
            return;
        }
        $.ajax({
            url: 'php/select.php',
            type: 'POST',
            context: this,    // Only needed 'this' not this.parentNode.
            dataType: 'json',
            data: {
                'sql': sql
            }
        }).done(function (data) {
            if (data.success) {
                if (data.v.length > 0) {
                    //process data
                }
                this.curSelector++;
                this.getSelData();  // recursive call
            }).fail(function (XHR, textStatus, errorThrown) {
                $("#status").html(getErrorText(XHR.responseText));
                $("body").css("cursor", "default")
    
            })
        }
    };
    Ok... very rough example of an ajax routine to work around browsers without XMLHttpRequest() as a built in function, the create a request module and the return being something that needs to be run as it may be a script, maybe... Total of 12 lines of code Vs JQuery with something like 30 lines of code.

    Code:
    if(typeof XMLHttpRequest!='function'){
        XMLHttpRequest = function(){
            try{ return new ActiveXObject("Microsoft.XMLHTTP");}catch(e){}
            try{ return window.createRequest();}catch(e){}
            return false;
        }
    }
    
    xmlHttp = new XMLHttpRequest();
    xmlHttp.open("GET","script.php",true);
    xmlHttp.onreadystatechange = function(){ if(xmlHttp.status==200 && xmlHttp.readystate==4) eval(xmlHttp.responseText);}
    xmlHttp.send(null);
    If you put the request block in to a function, you can do requests all day.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  12. #12
    Quote Originally Posted by mogulman View Post
    I'll give my take on AJAX. I have developed numerous PC apps that interface with databases and create numerous reports. One problem is they only run on the PC not Macs, tables or other devices and they have to be installed and updated. I was looking to see if I could duplicate the app behavior using HTML5, CSS3, Javascript, jQuery, AJAX and PHP. I did not want numerous HTML pages. I wanted one HTML page and all the data to be update using AJAX. I was able to achieve almost identical behavior to the PC app. jQuery has made AJAX simple to do. AJAX is asynchronous. You need to figure out how to handle this. For example, I had numerous form items I needed to initialize from the database so I issued numerous AJAX requests. The order the data returned is not predictable. What I ended up doing is to write a recursive AJAX function so the requests happen sequentially. I even use AJAX to create the Word and PDF reports. I send an AJAX request to the server. The server creates the report and the AJAX request returns links to the reports. So in my experience AJAX helps you duplicate the typical desktop app experience.
    that's good information! So it sounds almost like Ajax can be compared to UDP datagrams as opposed to TCP, in the sense that there is no automated ordering of packets (though hopefully there is at least guaranteed delivery and retry mechanisms). So if synchronization is an issue, it sounds like you have to have hidden fields in the database where timestamps or event record numbers are kept. Literally like building your own protocol! Hmmm... something to chew on!

    So once you migrated this application from the PC to a web based app, did you have to switch to a more universal database like maybe PostGress? I'm a bit behind here too! last time I had to work with PC based databases on the programming level, it was an Access database, using a somewhat painful interface microsoft called "Jet" (Though it certainly a bit slow to have such a boastful name). I suppose you were using SQL?

  13. #13
    Quote Originally Posted by \\.\ View Post
    Ok... very rough example of an ajax routine to work around browsers without XMLHttpRequest() as a built in function, the create a request module and the return being something that needs to be run as it may be a script, maybe... Total of 12 lines of code Vs JQuery with something like 30 lines of code.

    Code:
    if(typeof XMLHttpRequest!='function'){
        XMLHttpRequest = function(){
            try{ return new ActiveXObject("Microsoft.XMLHTTP");}catch(e){}
            try{ return window.createRequest();}catch(e){}
            return false;
        }
    }
    
    xmlHttp = new XMLHttpRequest();
    xmlHttp.open("GET","script.php",true);
    xmlHttp.onreadystatechange = function(){ if(xmlHttp.status==200 && xmlHttp.readystate==4) eval(xmlHttp.responseText);}
    xmlHttp.send(null);
    
    شركة تنظيف منازل بالرياض
    
    شركة نظافة بالرياض
    تسليك مجارى
    تنظيف شقق بالرياض
    تنظيف موكيت بالرياض
    تنظيف مجالس بالرياض
    شركة تنظيف بالرياض
    
    
    شركة تسليك المجارى بالرياض
    شركة نقل اثاث بالرياض
    شركة مكافحة حشرات بالرياض
    تنظيف بيوت بالرياض
    تنظيف خزانات بالرياض
    شركة عزل اسطح بالرياض
    شركة نقل اثاث بالرياض
    تنظيف بيوت بالرياض
    شركة تنظيف واجهات حجرية بالرياض
    شركة كشف تسربات المياه بالرياض
    شركة تخزين اثاث بالرياض
    نقل اثاث
    شركة تنظيف فلل بالرياض
    شركة تخزين عفش بالرياض
    شركة نقل عفش بالرياض
    شركة تنظيف موكيت بالرياض
    شركة تنظيف مجالس بالرياض
    شركة تنظيف شقق بالرياض
    شركة تنظيف بيوت بالرياض
    شركة تنظيف بيارات بالرياض
    شركة رش مبيدات بالرياض
    شركة مكافحة حشرات بالرياض
    شركة عزل خزانات بالرياض
    شركة عزل اسطح بالرياض
    شركة تنظيف خزانات بالرياض
    شركة تنظيف واجهات زجاج بالرياض
    شركة نقل اثاث بالرياض
    شركة ترميمات عامة بالرياض
    
    شركة تنظيف واجهات حجرية بالرياض
    شركة كشف تسربات المياه بالرياض
    شركة تخزين عفش بالرياض
    شركة نقل اثاث بالرياض
    شركة تنظيف فلل بالرياض
    شركة تخزين عفش بالرياض
    شركة نقل عفش بالرياض
    شركة تنظيف موكيت بالرياض
    شركة تنظيف مجالس بالرياض
    شركة تنظيف شقق بالرياض
    شركة تنظيف بيوت بالرياض
    شركة تنظيف واجهات حجرية بالرياض
    شركة كشف تسربات المياه بالرياض
    شركة تخزين اثاث بالرياض
    شركة نقل اثاث بالرياض
    شركة تنظيف فلل بالرياض
    شركة تخزين عفش بالرياض
    شركة نقل عفش بالرياض
    شركة تنظيف موكيت بالرياض
    شركة تنظيف مجالس بالرياض
    شركة تنظيف شقق بالرياض
    شركة تنظيف بيوت بالرياض
    شركة تنظيف بيارات بالرياض
    شركة رش مبيدات بالرياض
    شركة مكافحة حشرات بالرياض
    شركة عزل خزانات بالرياض
    شركة عزل اسطح بالرياض
    شركة تنظيف خزانات بالرياض
    شركة تنظيف واجهات زجاج بالرياض
    If you put the request block in to a function, you can do requests all day.
    very cool sir

  14. #14
    Join Date
    Dec 2013
    Posts
    21
    PeterPan, you asked for the "big picture" of AJAX.

    Simply put, AJAX is a way to update certain information on a page without needing to reload EVERYTHING on the page.

    Let's say you have two pictures to load and a simple form. The form contains a text field with the current outside temperature displayed. If you want to update the temperature field to see the latest value, you would refresh the browser and reload the entire page. That is one way to do it. But suppose that instead of downloading the entire page again, you just get the temperature value? After all, the pictures are static and not changing. AJAX technology does precisely that...it retrieves the latest temperature value from the server and updates only the temperature field. The picture information is not reload thus saving bandwidth and resulting in faster updates.

    Pretty simple concept, eh? That's the "big picture".

  15. #15
    Join Date
    Jun 2004
    Location
    Tampa, Florida
    Posts
    77
    Well thanks! This answer is back on the track of my original question! Several messages back I showed this link of a demo page I did, probably 15 years back. At the time it worked on Netscape 4 and IE 4, and now it still works, but only on IE (firefox doesn't like it).

    http://elfintechnologies.com/html_hmi/hmi_tst1.htm

    So this demonstrated a control panel, where content could change without re-loading the page. At least form data could be changed, and also GIF images could be swapped. But that was all done with javascript, just using random data and mouse clicks to change images, and obviously the changing DOMs foiled its ability to work on ANY version of ANY browser.. So you're saying that if I wanted to make those displays actually reflect real time data, I could use AJAX to pull values from a database, is that correct? Now if that's true, could the data in that database also be updated by some other web based AJAX application pushing data into database? Also, would AJAX help me make a similar display that was more likely to work on ANY browser?

    I guess what I'm getting at as a final goal is this. Lets say i wanted web based remote control over devices at another location, devices that both produced data and responded to controls. That is actually my field of work. But in the past dedicated graphic libraries were used to create PC based applications similar to that control panel display, and it would be served by another set of dedicated applications at other locations, which interacted with these devices. And what I am hoping for is a technology to allow me to use browser based control panels to do the same kind of thing, so that any machine with any browser could instantly become the control panel. It seems that maybe AJAX could go a long way to accomplishing this. But maybe I'm getting my hopes to high?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles