Sign in to follow this  
Eliia

[web] AJAX 101

Recommended Posts

Eliia    122
Hi all, I've been toying with AJAX and really like it - but I'm having an issue. I want to update the text on a web page - say like 'new message has arrived'. So I query the db and get back the right value, and it works the first time.... but then document.write won't do it again - because the page is static HTML All the examples I've seen are using textareas which are easily updatable... any ideas pls Also, I'm using JS timer code to trigger my AJAX connection every 10 secs to check for new messages - is there a better way to do this, and I just haven't found out yet :) Also, I want to have many values refreshed on the page every 10 secs, I assume I can use the AJAX connection code once and just call it many times in the page? Can someone point me to an example of this pls? thx Rob/Eliia

Share this post


Link to post
Share on other sites
Eliia    122
could someone please post something on DOM - I'm so used to just having a PHP page that can refresh, this is all so new to me :)

It sounds like I can manipulate the page even after it is loaded using AJAX? Is that right? All I've seen is updating values in form fields... I'd like to update text, swap image names and make them show etc

Share this post


Link to post
Share on other sites
Excors    715
Quote:
Original post by Sander
Don't use innerHTML. It's only supported by IE.
That doesn't seem quite right - it works for me in at least IE, Firefox, Opera and Konqueror, and apparently Safari too, so it appears to be as well supported as any feature. It's not a W3C standard but it's being specified as part of HTML5. (But it's not entirely interoperable when you use it in certain unusual ways, and it's particularly confusing if you try to build it up in fragments since the browsers automatically close tags in inconsistent ways, so the DOM methods are probably safer (but harder to use).)

Share this post


Link to post
Share on other sites
Excors    715
I wasn't aware of it before but innerText actually seems to work in Opera and Konqueror too, just not in Firefox. But Firefox has no intention of adding it, and nobody is writing a proper specification for it, presumably since the W3C DOM's textContent performs the same role.

Quote:
Also, I'm using JS timer code to trigger my AJAX connection every 10 secs to check for new messages - is there a better way to do this, and I just haven't found out yet :)
If you don't mind waiting up to ten seconds to see a message, I think that's the best way. If you want much faster responses, Comet seems to be a name for a different technique where a connection is left open and the server can send events whenever it wants - but that seems much more complex, especially on the server side when you want it to be scalable, and is probably best avoided until you have a clear understanding of how everything works. (The seemingly less hacky way is still being developed, and only Opera 9 has partial support for it so far). Unfortunately I have no idea where to find a good introduction to the whole AJAX area - hopefully someone else knows of useful resources [smile]

Share this post


Link to post
Share on other sites
coderx75    435
Quote:
Original post by Eliia
It sounds like I can manipulate the page even after it is loaded using AJAX? Is that right? All I've seen is updating values in form fields... I'd like to update text, swap image names and make them show etc

It sounds like you are just using javascript and not AJAX. AJAX is a mix of DHTML, XML and server-side scripting. You can define an area of the page with a <DIV ID=""> tag, assigning it an ID so you can later set the content through javascript. Using ActiveX, you can connect to the server to retrieve XML data and format it with XSL or you can retrieve straight HTML. The page receives this as an httpRequest object and automatically calls an onLoad function (which you must set) when the request is completed.

Share this post


Link to post
Share on other sites
Kylotan    9999
Quote:
Original post by Eliia
could someone please post something on DOM - I'm so used to just having a PHP page that can refresh, this is all so new to me :)

It sounds like I can manipulate the page even after it is loaded using AJAX? Is that right? All I've seen is updating values in form fields... I'd like to update text, swap image names and make them show etc


The HTML page you send represents a tree of nodes, with each tag corresponding to a node. That way of representing a document as a tree of nodes is called the Document Object Model (DOM), and you can change the nodes within the tree using the DOM functions in javascript. Often this just means looking up a given element, and altering one of its attributes or the text within it.

Share this post


Link to post
Share on other sites
rollo    366
Quote:
Original post by coderx75
It sounds like you are just using javascript and not AJAX. AJAX is a mix of DHTML, XML and server-side scripting. You can define an area of the page with a <DIV ID=""> tag, assigning it an ID so you can later set the content through javascript. Using ActiveX, you can connect to the server to retrieve XML data and format it with XSL or you can retrieve straight HTML. The page receives this as an httpRequest object and automatically calls an onLoad function (which you must set) when the request is completed.


AJAX has nothing to do with XML/XSL really. You usually use XML or JSON to communicate with the server, but its not required. It also only needs ActiveX on IE, but most nice javascript libs will abstract away this difference.

Share this post


Link to post
Share on other sites
coderx75    435
Quote:
Original post by rollo
Quote:
Original post by coderx75
It sounds like you are just using javascript and not AJAX. AJAX is a mix of DHTML, XML and server-side scripting. You can define an area of the page with a <DIV ID=""> tag, assigning it an ID so you can later set the content through javascript. Using ActiveX, you can connect to the server to retrieve XML data and format it with XSL or you can retrieve straight HTML. The page receives this as an httpRequest object and automatically calls an onLoad function (which you must set) when the request is completed.


AJAX has nothing to do with XML/XSL really. You usually use XML or JSON to communicate with the server, but its not required. It also only needs ActiveX on IE, but most nice javascript libs will abstract away this difference.

Nothing to do with XML? Then why is it called AJAX (Asynchronous javascript and XML)?

Share this post


Link to post
Share on other sites
rollo    366
Badly choosen acronym? I guess you do need the "XML" for XHTML markup so you can display the results of your AJAX requests, but I thought it was a bit confusing when you started mentioning XSL. IMHO Thats really not the XML part of it... but I could be wrong.

My skin just crawls when AJAX gets the same status as a programming language on job boards etc, its really nothing complex, just a simple remote call, albeit with a sackload of hype.

Share this post


Link to post
Share on other sites
coderx75    435
You'd be surprised how many prospective developers come to interviews not knowing how AJAX works or even what it is. In my experience, when a company specifically asks about the latest technology in their requirements, they're pretty much saying, "We expect that you care enough about your career to stay up-to-date on the latest technology."

XHTML is XML (HTML strictly in XML format). The purpose of passing back XML is usually to format it using XSL and, being a proponent of XSL (real seperation of business and presentation layers! WOOHOO!), I prefer this method. I understand what you're saying though. Most developers just grab the XHTML content and plop it onto the page, leaving out one of the finer points of AJAX (IMO). Sadly, the XML part of AJAX is slowly becoming forgotten.

EDIT: BTW, I just read my previous post and it sounded all snarky. Sorry about that. [embarrass]

Share this post


Link to post
Share on other sites
rollo    366
mine too ;) I also have an irrational dislike for all things connected to XML :D I'm a Rails guy at work so my AJAX calls either return javascripts that manipulate the DOM, or just return chunks of HTML.

Share this post


Link to post
Share on other sites
Kylotan    9999
Quote:
Original post by coderx75
Most developers just grab the XHTML content and plop it onto the page, leaving out one of the finer points of AJAX (IMO). Sadly, the XML part of AJAX is slowly becoming forgotten.


Perhaps you're missing the point somewhat - most current uses of 'AJAX' simply replace elements on the page, without needing or using any XSL or anything like that, and via javascript routines. Therefore if you return JSON to the client instead of XML, then you cut out the need to perform any of the unnecessary parsing from XML. In those cases, using XML just because the technology buzzword contains an 'X' just makes extra work for yourself. XML gets 'forgotten' because it's not the best tool for the job most people want to do.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this