[web] AJAX 101

document.getElementById('some_element_id').innerHTML = the_HTML_to_replace_the_element_contents_with;

Moved to Web Development for better responses.

Don't use innerHTML. It's only supported by IE. You should use the DOM to create elements in the tree.

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

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).)

Apologies, I got confused. It's innerText that's IE only.

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]

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 &#106avascript and not AJAX. AJAX is a mix of DHTML, XML and server-side scripting. You can define an area of the page with a

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 &#106avascript. Often this just means looking up a given element, and altering one of its attributes or the text within it.<br/><br/>

Quote:

Original post by coderx75 It sounds like you are just using &#106avascript and not AJAX. AJAX is a mix of DHTML, XML and server-side scripting. You can define an area of the page with a tag, assigning it an ID so you can later set the content through &#106avascript. 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 &#111;nLoad function (which you must set) when the request is completed.<!--QUOTE--></td></tr></table></BLOCKQUOTE><!--/QUOTE--><!--ENDQUOTE--><br><br>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 &#111;nly needs ActiveX &#111;n IE, but most nice &#106avascript libs will abstract away this difference.</td></tr></table></blockquote>

Quote:

Original post by rollo Quote: Original post by coderx75 It sounds like you are just using &#106avascript and not AJAX. AJAX is a mix of DHTML, XML and server-side scripting. You can define an area of the page with a tag, assigning it an ID so you can later set the content through &#106avascript. 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 &#111;nLoad function (which you must set) when the request is completed.<!--QUOTE--></td></tr></table></BLOCKQUOTE><!--/QUOTE--><!--ENDQUOTE--><br><br>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 &#111;nly needs ActiveX &#111;n IE, but most nice &#106avascript libs will abstract away this difference.<!--QUOTE--></td></tr></table></BLOCKQUOTE><!--/QUOTE--><!--ENDQUOTE--><br>Nothing to do with XML? Then why is it called AJAX (Asynchronous &#106avascript and XML)?</td></tr></table></blockquote></td></tr></table></blockquote>

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.

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]

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 &#106avascripts that manipulate the DOM, or just return chunks of HTML.

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 &#106avascript 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.<br><br>