[Discuss] Developers use of AJAX Technology

[Marco van Herwaarden]

Please use this thread to discuss the use of AJAX technology and how we can make optimal use of it in integration with vBulletin.

Interesting links to use as resource on this topic are:
- [Tutorial] Developers Introduction To AJAX Technology (https://vborg.vbsupport.ru/showthread.php?t=81626)by Zero Tolerance

For those who want some "sneak previews", the following vB3.0.7 hacks using AJAX have been released:
- AJAX Fast Open/Close Threads (vB 3.5 Replication) (https://vborg.vbsupport.ru/showthread.php?t=81658&highlight=AJAX%3A) by Zero Tolerance
- AJAX: check if username exists on registration in realtime (https://vborg.vbsupport.ru/showthread.php?t=81531&highlight=AJAX%3A) by MrNase
- AJAX: check for banned email on registration and changing mail (https://vborg.vbsupport.ru/showthread.php?t=81631&highlight=AJAX%3A) by MrNase


Interesting links on the web about coding AJAX in General:

Interesting links on the web about AJAX in General:

[Corriewf]

What is the deal with all of these ajax hacks? Is this software integrated into one of the vb versions or can all use this?

[Marco van Herwaarden]

AJAX is not some finished software, it is the combined use of some techniques. It combines the use of JavaSciript with XML and Asynchronous communicition with the server.

[Corriewf]

So when I see AJAX hack(s) its referring to a format of coding vs and addon to software? What is the required version of vbulletin to utilize it?

[Marco van Herwaarden]

There is no requirement of the vB version. It is the capability of your browser that could be limiting it. All major browser support it, but you must have javascript turned on.

AJAX is nothing more then a technique that make some things possible that are very difficult without AJAX. It is up to the coders if and how they will use it.

[Corriewf]

From the end user perspective (me :) ) what is the benefit of using this vs using templates and php code ect ?

[Zero Tolerance]

The benefit from AJAX technology is it allows functions to be "real-time", this is its prime feature, the ability to send and recieve data to a server without any reloading of the page or iframes. Which is one thing internet applications lacked, and where desktop applications had the upper hand.

But now with ajax technology, you can develop applications where sections if not the whole thing doesn't require any reloading at all, think of it as a stream video link instead of having to download it all before viewing it, you'd prefer to view the stream instead of waiting for the download.

- Zero Tolerance

[Corriewf]

Yeah that does sound very nice. Wonder why the hacks coming out utilizing this code are task which are rarely used, instead of repetitive tasks.

What would be GREAT is a hack that would update the current post on the main index page without having to refresh to see new posts.

[Marco van Herwaarden]

Yeah that does sound very nice. Wonder why the hacks coming out utilizing this code are task which are rarely used, instead of repetitive tasks.

What would be GREAT is a hack that would update the current post on the main index page without having to refresh to see new posts.Although that would technically be possible, it would probably kill your server.

Even with AJAX, that data must still be requested, retrieved from the MySQL database, passed back to the client, and then all controls would need to be updated.

[Corriewf]

Yeah but if you could set the refresh rate to accommodate the server load it would be perfect.

[Zero Tolerance]

I guess a 1 minute time out for the data reload wouldn't be too harsh, aslong as the page requested minimal queries, like the session, other requirements and then the data itself.

Depends really how active your site is, a site with 100+ users on most of the time would really need to put the time out higher, say 3/4 minutes, but the content would still remain intact.

But things like getting last x posts would only take 1 query, you could even use the XML output as a feed for your main site :)

- Zero Tolerance

[Guy G]

Great tutorial... For anyone that has no idea on what it is and such just check your Gmail account... Gmail is based on AJAX.

[Corriewf]

I guess a 1 minute time out for the data reload wouldn't be too harsh, aslong as the page requested minimal queries, like the session, other requirements and then the data itself.

Depends really how active your site is, a site with 100+ users on most of the time would really need to put the time out higher, say 3/4 minutes, but the content would still remain intact.

But things like getting last x posts would only take 1 query, you could even use the XML output as a feed for your main site :)

- Zero Tolerance


ZT your the king of refreshing hacks...... I know you could do this.

Have it in the admin control panel where the admin could have it refresh everything and then at what rate (time) OR could just have it refresh certain aspects at inputted rate.

You know how much this would save bandwidth and site speed wise? Members wouldnt have to refresh ( which would be calling everything) just to get up to date info on just post or ect.

Yeah, im likeing this AJAX now.

[untold4you]

Check this one out, http://blog.joshuaeichorn.com/archives/2005/04/19/ajax-hello-world-with-jpspan/

JPSpan provides a lot more functionality then SAJAX, the biggest difference you notice on the javascript side of thing is that you have mapped objects, on the php side the biggest difference is that you have a server page and a client page.

And another nice tutorial: http://www.webpasties.com/xmlHttpRequest/

Found out what the readyState codes are:

readyState Status Codes:
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete

[DaveAK]

This may seem like an obvious question, but I'm trying to clear this up in my mind.

Scenario : Client A sends data to server. Server applies rules checking to data. Client B requests the data from Client A from the server.

OK, so if I get this right Client B "polls" the server for new data, which is similar to refreshing, but the big difference is that only the data is refreshed, not the whole page. Client side scripting takes care of rendering the page with the new data.

So if I'm right, you have to set your script up with a timer that checks the server for new data on a regular basis, i.e. it's not "event" based with the server triggering a client side function.

Did I get this right or have I just talked in circles? :)

So you have to set your timers to a realistic "refresh rate" depending on the size of data/server load these AJAX requests trigger. How is the best way to determine this refresh rate?

[DaveAK]

Anybody? :)

[mrpaint]

function doTheTask() {
do_box = new vB_AJAX_Handler(true)
do_box.onreadystatechange(do_box_Done)
do_box.send('url','&var1=1&var2=2')

do_button = new vB_AJAX_Handler(true)
do_button.onreadystatechange(do_button_Done)
do_button.send('url')
}
function do_box_Done() {
if (do_box.handler.readyState == 4 && do_box.handler.status == 200) {
....
}
}
function do_button_Done() {
if (do_button.handler.readyState == 4 && do_button.handler.status == 200) {
....
}
}

I added this script but I have got this error message:
Error: do_box is not defined
Line: if (do_box.handler.readyState == 4 && do_box.handler.status == 200) {
And this one
Error: do_button is not defined
Line: if (do_button.handler.readyState == 4 && do_button.handler.status == 200) {

Anybody help me?

[Wild-Wing]

its just now i understand part of it thanks to Zero Tolerance's tutorial

[mokujin]

Does anyone can make some very simple demo script? I think that's better for beginners :)
Thank you so much

[Marco van Herwaarden]

There are plenty of examples around in both the Articles section and in existing modifications.