So How Do You Code an AJAX Web Page? 231
PetManimal writes "Computerworld has a long excerpt from a book by Edmond Woychowsky about how to code Web pages in AJAX. It gives a good explanation of how the technology works, and also has some visuals and code snippets that you can play with. From the article: 'Beyond the XMLHTTP Request object, which has been around for several years as a solution looking for a problem, there is nothing weird needed. Basically, it is how the individual pieces are put together. When they're put together in one way, it is nothing more than a pile of parts; however, when put together in another way, the monster essentially rises from its slab.'"
finishing the thought... (Score:5, Funny)
But more importantly, one needs to remember that the internet is not a big truck, that you can dump information on. It's a series of tubes.
Re:finishing the thought... (Score:3, Interesting)
You got it all wrong about the tubes [userfriendly.org], my friend.
So How Do You Code an AJAX Web Page? (Score:5, Informative)
2. Download and install the ATLAS framework
3. Wrap your webpage in an update panel
4. Add a script manager
5. Lather, rinse, and repeat
Seriously...one drag-and-drop and you'll never see another page refresh.
Re:So How Do You Code an AJAX Web Page? (Score:3, Funny)
Re:So How Do You Code an AJAX Web Page? (Score:4, Funny)
shitty
Re:So How Do You Code an AJAX Web Page? (Score:3, Informative)
And in the interest of full-disclosure, I recently started working for Microsoft on Visual Studio features directly related to AJAX and ATLAS. So now this post is just ordinary spam instead of a sneaky shill.
Re:So How Do You Code an AJAX Web Page? (Score:5, Informative)
However, for the web impaired here is a direct link [microsoft.com] for the web developer version only (which you can get to by clicking the big download picture on the right hand side of each product specific page and then clicking "Download" in step 2).
And as long as I am providing overly simple instructions to trolls, I guess I'll point out that ATLAS does not come installed with Visual Studio. You have to download it from atlas.asp.net [asp.net] (hint: there is a big download icon at the top of the screen).
And if you would like a demo of how easy it is to create ajax applications with atlas, there is current a video [microsoft.com] on the front page of someone creating a database backed todo-list application in 18 minutes (the express version of Visual Studio comes with a lightweight database and web server for development. I think you can probably repeat this demo with the free tools).
Re:So How Do You Code an AJAX Web Page? (Score:3, Funny)
I have everyone convinced I'm a leet AJAX programmer after I dragged in a single UpdatePanel on my company's internal web app.
You're going to ruin it for everyone. Keep quiet!
Re:So How Do You Code an AJAX Web Page? (Score:2)
7. Spend hours trying to figure out why any custom script files you want to include in your head element once you try to do something non-trivial mysteriously aren't working.
Re:So How Do You Code an AJAX Web Page? (Score:3, Informative)
Nice troll, though.
Re:So How Do You Code an AJAX Web Page? (Score:4, Informative)
Visual Studio actually has a pretty solid source code editor, with good syntax highlighting, and its code completion for css properties and html attributes is very good. (And its ability to offer effortless code completion for asp tags, AND user-defined controls is extremely helpful.) Not to mention its real-time "error" checking (improper tag nesting, mismatched tags, etc). It prevents and catches a lot of potential errors as you make them.
I do agree that doing a lot of work in the gui-designer results in bloated pages that need a ton of work to slim down and make crossplatform friendly. But nobody is forcing you to do that, and really if you know what you are doing you almost never use the visual designer mode. I only use it to drag user-controls onto the page; because in gui-mode it handles the boilerplate to register the tagprefix, etc. I also occasionally use it to create event handlers, because double clicking say a linkbutton in design view will write the boilerplate for the function signature, as well as handle the event wiring.
Like any tool, Visual Studio can be used effectively or ineffectively. When compared to most other "light tools" I find Visual Studio to be more productive -- sure I can build pages even in notepad but I make fewer typos when using the source code editor in Visual studio.
(There are other good editors too, don't get me wrong. I'm just saying that visual studio belongs among them.)
Re:So How Do You Code an AJAX Web Page? (Score:4, Interesting)
Re:So How Do You Code an AJAX Web Page? (Score:2)
The parent to my post said "REal men still code in a simple code tool. Fakers and wannabees use Visual studio."
I was specifically comparing VS to -other- light tools that would fall under the "simple code tool" that the GP is apparently so fond of.
I agree, VS is not a light tool itself.
Re:So How Do You Code an AJAX Web Page? (Score:4, Funny)
Man, I hate it when I make potential errors. How does VS deal with virtual errors?
-matthew
Re:So How Do You Code an AJAX Web Page? (Score:2)
Potential errors = errors that could/would have happened but didn't.
I'm not sure what your "virtual errors" would be.
VS eliminates a lot of potential errors... for example: I often forget whether the spelling of the css 'built in color' is "grey" or "gray"; Iirc firefox accepts both, while IE only understands gray. My natural inclination is to spell 'grey', but the standard specifies 'gray'. VS code completion helps prevent me
Re:So How Do You Code an AJAX Web Page? (Score:2, Insightful)
Re:So How Do You Code an AJAX Web Page? (Score:2)
Re:So How Do You Code an AJAX Web Page? (Score:2)
Re:So How Do You Code an AJAX Web Page? (Score:2)
Re:So How Do You Code an AJAX Web Page? (Score:2)
Oh yeah, and my slashdot ID is lower than yours. I was doing slashd
Re:So How Do You Code an AJAX Web Page? (Score:2)
Visual Studio is a better debugger than Venkman. Start debugging, attach to IE, script type, and start stepping through. Sure you can use the MS Script debugger as well, but there's other good things about Visual Studio for .js editing.
Notepad variants are good for simple projects, but nothing beats coding in the same UI as your debugger. Especially if you're doing AJAX with a C++ back-end and use Visual Studio for that anyway.
Re:So How Do You Code an AJAX Web Page? (Score:2)
Printer Friendly (Score:5, Informative)
Re:Printer Friendly (Score:2)
I'd post my 20-line AJAX function... (Score:2)
Re:I'd post my 20-line AJAX function... (Score:3, Funny)
But don't take it personally.
Re:I'd post my 20-line AJAX function... (Score:2)
HTTP, time to update? (Score:2, Interesting)
Re:HTTP, time to update? (Score:3, Interesting)
Re:HTTP, time to update? (Score:2, Informative)
Re:HTTP, time to update? (Score:3, Insightful)
Re:HTTP, time to update? (Score:3, Insightful)
Re:HTTP, time to update? (Score:4, Informative)
There are some ugly hacks to allow the server to "push" to the client (embedded flash objects, never-closed-connections, etc.)--mostly encapsulated by the moniker COMET [ajaxian.com] (get it? Ajax... Comet...)
But if you get to pick your app server, there are some ready-made solutions. The problem with traditional web servers is their IO method. It's not their fault that the HTTP spec is out-of-date, but there are already new developments on the horizon that get around the current limitations. Take a look at GlassFish [java.net], Sun's new open-source enterprise application server, and pay particular attention to NIO [sun.com] socket writes. The performance benefits of NIO over straight IO are astonishing [java.net], with the side-benefit that it supports server-push out-of-the-box.
Re:HTTP, time to update? (Score:5, Insightful)
I personally prefer web development because of the forced finite life of each state. That sort of back and forth makes data validation, cross-process security, and other things that many web developers ignore very easy to implement. You just have to quit thinking continuously (rimshot please!) and start thinking discretely.
Cross-platform to limited users? (Score:2)
What is the easiest way to deploy a socket app cross-platform to a Limited User who cannot run untrusted executables? Do you really want your banking software to go back to client software that runs only under Microsoft® brand Windows® brand operating systems?
Re:HTTP, time to update? (Score:3, Interesting)
However, they appear be building something at Ajaxlets.com [ajaxlets.com] that is supposedly a clean, open source solution to this, by packetizing the data in javascript script urls. Apparently their release is a few days off.
Re:HTTP, time to update? (Score:2)
Not true - there's a trick to get around iframe cross-domain security. You can still see the URIs of the frame. This means that the domain you are attempting to access can supply a special page that calls XMLHttpRequest on your behalf and streams the data to you by updating the fragment identifier.
It's an awful hack, but it's been wrapped up in an XMLHttpRequest emul [dojotoolkit.org]
Re:HTTP, time to update? (Score:3, Insightful)
I am not certain that it is time to update the HTTP spec so much as to come up with an
accompanying spec for connection based browser communication before microsoft does.
Something similar to xmlHTTPrequest, but something that can maintain a symmetrical
connection that HTTP is not designed for.
I dunno, maybe something vaguely like this: (and i stress vaguely)
<script type="text/javascript">
Java 1.5 or Java 1.1? (Score:2)
Because not enough people have Java 1.5 or newer installed. Remember that IE doesn't come with anything later than MSJVM 1.1.x, and not everybody 1. has permission to install software, 2. is willing to learn to install software, 3. is willing to install a binary from someone they never heard of ("Sun? Who's that? Some Japanese company? Is this spyware?"), 4. is running on a platform to which Java 1.5 has been ported, and 5. has a fast enough connection to download Java 1.5
Both Repetitive and Redundant (Score:5, Funny)
Woychowsky repeats himself a lot. What's more, he says the same things over and over. In other words, he'll say something, and then re-phrase it with almost exactly the same words.
As I've mentioned, he seems to keep repeating himself
Re:Both Repetitive and Redundant (Score:4, Insightful)
This is worse than half the stuff in my freshman comp class at community college. You don't even have to be a writer to improve this, just cut out half the words. Someone ought to introduce him to the technique of reading his writing out loud.
Take this gem of a paragraph:
Not only does every sentence sound horrible on its own, but the whole paragraph communicates nothing at all. Well I guess it claims that there are three ways to do AJAX, but that's a pretty useless little factoid if you're not going to say what they are.
I can't decide whether I'm embarassed for him or inspired to write a book of my own.
Re:Both Repetitive and Redundant (Score:2)
Darkside (Score:2)
Notable quote "Ajax has introduced a huge attack surface"
Start by not putting a tag in your title :) tag (Score:5, Funny)
Haha, i mean, start ptocessing XML like this with Java and we will have a lot of browsers falling on their asses with exceptions
OK I am cruel!
Saving AJAX (Score:5, Insightful)
Comment removed (Score:4, Insightful)
Re:Saving AJAX (Score:3, Informative)
Re: (Score:2)
Re:Saving AJAX (Score:2)
http://prototype.conio.net/ [conio.net]
Re:Saving AJAX (Score:2, Informative)
Very simple when using prototype javascript library.
function submitForm(form) {
new Ajax.Request("comment.php", {
parameters : Form.serialize(form),
onSuccess : updateComment
});
}
Re:Saving AJAX (Score:2)
Re:Saving AJAX (Score:2)
If you're not opposed to using a framework, use Ajax.Updater [aculo.us] from script.aculo.us
Re:Saving AJAX (Score:2)
"My main problem with AJAX: submitting a form without reloading the page! Any easy way to do that?"
Process form. Send the following header back to the browser:
Re:Saving AJAX (Score:5, Funny)
Re:Saving AJAX (Score:2)
Set up variables as parameters in the URL that hold the state (for bookmarking). If you can control your form values, throw in some hidden fields that hold the info on page load. If the values are empty, the ajax request uses the default, otherwise is preloads your values.
Re:Saving AJAX (Score:3, Insightful)
Re:Saving AJAX (Score:2)
Re:Saving AJAX (Score:2)
Huh (Score:5, Insightful)
Print version here. [computerworld.com]
Zero credibility points for trying to put markup in the <title> element and hiding the printable version behind a javascript:void(0) link.
If you want the technical stuff, skip about a third of the way down. The first third of the article just repeatedly tells you that Ajax is when the page doesn't "blink".
The code he supplies is crap. For instance:
Things wrong with even this tiny snippet of code:
Skimming the rest of the article, I see the following mistakes:
If this is a representative sample of the book it is excerpted from, steer well clear of it. The whole approach is poor.
The best way of producing compatible, accessible Ajax applications is to start with the bare HTML and make that work. Only then do you add the JavaScript, and you do it by enhancing the page, not replacing it. For instance, don't use <button onclick="...">, use a normal <input type="submit"> and hook into the form's submit event. That way:
Re:Huh (Score:2)
<button type="submit" onclick="doAjaxStuff(); return false;">submit my input</button>
works perfectly and is far superior to the lousy <input type="submit" value="submit my input"
Re:Huh (Score:2)
Sorry, I wasn't very clear there. My problem isn't simply with <button> (although <input type="submit"> is better supported by browsers, which is critical, and it submits the wrong data in Internet Explorer as you point out), but rather that practically everybody who uses it uses it instead of the mandatory action attribute on the <form> element - in essence, throwing away the HTML functionality and replacing it with less compatible JavaScript. I've simply never seen anybody use <but
Not the best approach (Score:2)
The best way of producing compatible, accessible Ajax applications is to start with the bare HTML and make that work. Only then do you add the JavaScript, and you do it by enhancing the page, not replacing it. For instance, don't use <button onclick="...">, use a normal <input type="submit"> and hook into the form's submit event
Without knowing really your level of experience in designing dynamic AJAX-driven sites, I can say at least this coment in particular is complete bunk. For one, hooking
Re:Not the best approach (Score:2)
Which browsers would these be? I find that the submit event can be reliably cancelled if you take into account a) DOM-capable browsers, b) Internet Explorer, and c) other old-fashioned browsers. There's three different ways of cancelling an event, are you sure you aren't forgetting on
Re:Time to put up or shut up (Score:3, Informative)
Off the top of my head: Google Suggest [google.com]. The same page offers enhanced Ajax functionality and still works in Lynx, without any need for two pages or radically different layouts.
The ways you make Ajax work in a backwards-compatible manner are the same techniques decent JavaScript developers have been using for years. Unfortunately, not a lot of people are aware of JavaScript best practices and the field is
There are much better intros to Ajax (Score:5, Informative)
The article is very verbose. It has some value, I suppose - it helped me to decide I didn't want to buy the book. There are more concise introductions to Ajax here [www.xul.fr] and here [mozilla.org]
There is also an interesting library of Javascript/ECMAscript functions to perform common Ajax chores here [sourceforge.net]
Re:There are much better intros to Ajax (Score:3, Informative)
Java and Ajax (Score:2)
Re:Java and Ajax (Score:2)
Use Echo2 (Score:5, Informative)
2. Write AJAX applications like you would a Swing app, never touching HTML or Javascript.
3. Go outside and play.
'nuff said.
Re:Use Echo2 (Score:2)
Re:Use Echo2 (Score:3, Interesting)
1) the Eclipse plugin is shareware. Since the project I am doing is small, no extra expenses were allowed, so I did everything manually.
2) the widgets are minimal, to say the least. The core library contains very few widgets (button, label, text field, text area, table, grid, row, column, splitpane, windowpane). You have to downlo
Well written (Score:2)
Solution looking for a problem? (Score:3, Insightful)
I think it was far more a case of it taking a while for someone to make a compelling enough application using it for it to get public acceptance and attention from mainstream developers. And probably a bit of reluctance to go down that path until a large enough percentage of users had a browser that supported it to make it make economic sense to invest in the use of such techniques on a large scale.
Nobody calls XmlHttpRequest() directly anymore (Score:5, Insightful)
The other nice thing you can do with Prototype is to avoid XML parsing altogether by saying "ok, here's the URL I want you to call; it's going to return pre-rendered HTML, and when it does, I want you to stick it in this DIV over here; don't bother me about it" and you can do things like automatically update portions of your page without reloading. You can even have an automatically recurring update, which is very cool for things like tickers, clocks, etc. We used it in our AJAX webmail/calendar system and it really worked well.
Re:Nobody calls XmlHttpRequest() directly anymore (Score:4, Informative)
What does that do that this doesn't (other than use a pretty wrapped package)? This is the general form I use for my AJAX requests. If needed, I add some checking to cancel previous requests to the same method or queue successive calls so that the race for responses doesn't screw me up. It seems to work in all browsers I test for (IE6, FF 1.5+, Opera 9+, Safari 2+...and yes, I force my users to use modern browsers).
if (window.XMLHttpRequest) {
var oHttpRequest= new XMLHttpRequest();
}
else if (window.ActiveXObject) {
var oHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
function ajaxCall (page,params,responseHolder) {
oHttpRequest.onreadystatechange=function()
if(oHttpRequest.readyState==4) {
document.getElementById(responseHolder).innerHTML = oHttpRequest.responseText;
}
}
oHttpRequest.open("POST",page,true);
oHttpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
oHttpRequest.send(params);
}
Re:Nobody calls XmlHttpRequest() directly anymore (Score:3, Insightful)
Well, for one thing, where you wrote 16 lines of code, doing the same thing in Prototype would have taken 1 line of code. Isn't that the point of wrapper libraries? To make repetitive, commonly used tasks like this one more convenient? (Not to mention, the 1-line Prototype call would also work in IE5 and FF1.0)
Re:Nobody calls XmlHttpRequest() directly anymore (Score:2)
Absolutely. I just consider myself still in the learning phase of the AJAX part of my web apps (good with PHP, good with XHTML/CSS, not so great with advanced Javascript), so I like to do some of the common repetitive things so I'm not doing a typical plug and chug job at coding without understanding well what's going on underneath. It's mostly just for my own benefit - I see too many jump into
Re:Nobody calls XmlHttpRequest() directly anymore (Score:2)
Re:Nobody calls XmlHttpRequest() directly anymore (Score:2)
Works with XHTML.
Re:Nobody calls XmlHttpRequest() directly anymore (Score:2)
Re:Nobody calls XmlHttpRequest() directly anymore (Score:3, Insightful)
Re:Nobody calls XmlHttpRequest() directly anymore (Score:4, Informative)
The FormFaces [formfaces.com] OSS product is an entire XForms implementation done in JavaScript, running in the browser. You write your page in HTML with XForms markup, and FormFaces does the "HiJax" thing of re-writing it for you. You never need to use XmlHttpRequest, and you can interact with regular servers, RESTful services, etc., all via XML.
Another product that does this, in a slightly different way, is AjaxForms. I just found out about it, but it looks pretty good. AjaxForms uses some server-side components to do the translation from strict XHTML+XForms markup into Ajax (HTML4+JavaScript), but they claim it can work in PHP and Tomcat servers. Again, FOSS, and available at http://ajaxforms.sourceforge.net/ [sourceforge.net]
I recently implemented dynamic forms for weblogs and wikis, and did it using Chiba [sourceforge.net], another FOSS product, that like AjaxForms does its conversion on the server, using Tomcat as a container.
Another important option is the work that the Mozilla Foundation and IBM are doing to make a native implementation of XForms as an XPI for Firefox and Mozilla. See http://www.mozilla.org/projects/xforms/ [mozilla.org] -- they're now in version 0.6, with 1.0 targeting full XForms 1.0 compliance. Like all other Mozilla extensions, it's a 1-click install, and I think it's about 200KB, so it's not very big, and I hope it gets added to the default build after it reaches 1.0. (It's presently built with the nightlies.)
There are a number of other implementations, including browser plugins (FormsPlayer [formsplayer.com] for IE), native implementations for embedded devices such as cellphones and kiosks (PicoForms [picoforms.com], SolidForms [sourceforge.net], and entire server-side systems using XForms, such as Orbeon Ops [orbeon.com], so I see an increasingly bright future for using XForms to build dynamic HTML interfaces on top of XML web services and deploy them across a range of devices.
AJAX and Search Engines (Score:2, Insightful)
Not Magic (Score:3, Informative)
Useful bits I've found getting into ajax stuff:
Dojo Toolkit [dojotoolkit.org], a nifty framework for doing all sorts of good stuff. Of particular note to me was dojo.io.* with its dojo.io.bind() function, which provides a simple, cross-platform compatible way to do an xmlhttprequest, with callback functions for completion and errors, an easy way to post variables, specify a method and caching, etc.
openrico [openrico.org]. This provides all sorts of fun stuff. The smart stuff starts with declaring $ as a function, which after you get used to it provides a very convenient cross-platform way to access DOM nodes (ie, $('mydiv') or $(divvar)), and has all sorts of canned widgets for effects, like accordian widgets, move&resize, etc... although I've found practical application usually requires a bit more additional work, but their functions help get started.
Cred went to zero in the summary (Score:3, Interesting)
Speaking of AJAX... (Score:5, Interesting)
Re:Speaking of AJAX... (Score:5, Informative)
Re:Speaking of AJAX... (Score:2)
Ajax + Risk = Grand Strategy (Score:4, Interesting)
It is by far the most advanced Ajax based implementation of a board game to have ever been written!
I used Direct Web Remoting (DWR) and the Dojo Toolkit. My javascript talks to my server side java beans directly. It's really the easiest web programming model I have ever seen. I hurts to go back to doing ASPX and PHP pages after this.
Check it out here:
http://denizengames.com/grandstrategy/ [denizengames.com]
next.... (Score:3, Insightful)
No thanks, next book please.
Re:Don't overdo the XHR (Score:2)
They're working on it.
I'm participating in an AJAX adaptation of /.'s comment page. It has some functionality for controlling exactly which comments are visible and not. Seeing as I browse at a pretty low level already (not -1, but close), these features have been uninspring for me. But the ability to click on a collapsed comment and get it to come up, or to collapse an entire tree that's spiralled out of control without having to refresh the entire page is *gold*.
P.S.: Does anyone know of a way to
Re:Don't overdo the XHR (Score:2)
If you're talking about the University of Michigan's work, firstly, I'm not sure Slashdot are actually going to use anything like that, I think it's just research. But as well as that, I've been a web developer since the late 90s, and in all that time I don't think I've ever seen anything presented to an end user that is half as buggy and non-functional as that new comment system. It's horrendous.
Re:Well, first things first... (Score:2)
Re:Well, first things first... (Score:2, Funny)
$ vi <enter>
Re:Well, first things first... (Score:2)
Re:Well, first things first... (Score:4, Funny)
Re:Well, first things first... (Score:2)
bash: syntax error near unexpected token `newline'
Re:Well, first things first... (Score:2)
Oh yeah? (Score:5, Funny)
Really? Then why doesn't it say "+5 Funny" on my shirt?
Re:Iframes (Score:2)