Check it out, part one of a series of JavaScript articles on developing web applications with Ajax. What do you think?
Update: a working example was not provided in the article, but if you like you can see it in action right now.
Developing Webapps with Ajax
Newsvine |
Del.icio.us |
Digg
In Web, JavaScript on August 2nd, 2005 |
No Remarks
Just wondering why your site loads about three times for me so I have to click 3 times to get back where I was…any idea?
August 3rd, 2005 at 3:47 pm
I don’t know. I’ll have to check that out. It only happens on the homepage.
August 3rd, 2005 at 6:34 pm
Thats a good article, Jona. I can see some other uses for a script such as that too. Namely to replace JS arrays for the benefit of accessibility. Good stuff.
August 4th, 2005 at 9:54 am
Your style of writing is very good. You strike a balance between “not being too simple” and “not being too complicated”. Good job !
August 4th, 2005 at 3:47 pm
You could use a conditional operator and cut that code down, eg.,
var loader = (window.ActiveXObject) ? new ActiveXObject(”Microsoft.XMLHTTP”) : new XMLHttpRequest();
other than than nice intro to ajax
August 4th, 2005 at 8:04 pm
Thanks, Mike, Lonnie, and Eddie.
Eddie, that code does not take into account the possibility that neither ActiveX nor the XMLHttpRequest object are available, and since the existence of neither is guaranteed, your code would have to be expanded to return null in the event that window.XMLHttpRequest was not found. This would make the line more complex, and for beginners (and the target audience), it’s not very feasible. If you’re going to try to cram as much code as possible on one line, though, that’s definitely the right direction to take! ;)
August 4th, 2005 at 10:09 pm
It is remarkable, that your example works with Firefox but not with IE 6. I get an error at the updateObj statement (object required). Any ideas?
August 5th, 2005 at 2:02 am
Thomas, I tested the example in Firefox, IE6, and Opera 8. It functioned as expected in all browsers, with no errors. Perhaps you changed something in the code? What is the line that gave you the error?
August 5th, 2005 at 11:07 am
I got the same error that Thomas did. It worked in Firefox for me as well. I didn’t change anything, I copy/pasted everything as you typed it.
Great article, I’m really facinated with new way of doing stuff.
August 5th, 2005 at 12:56 pm
That’s interesting. I don’t understand what the problem is, but I just checked again, and it works. Check out the working example and tell me if it works in IE.
August 5th, 2005 at 1:37 pm
Works in Firefox - i get the same? error in IE6 [line 19 (cr) character 12 (cr) object required]
- the only difference i see in the code listed at www.webreference.com
programming/javascript/jf/column12/index.html
is that your original line #19 states:
updateObj(’xmlObj’, ……
whereas the example you provide above references
updateObj(’xmlData’, …..?
is ” xmlObj ” reserved?
August 6th, 2005 at 12:06 am
that article is one of the better articles i’ve read on the subject.
btw, fabulous job on the GB cms. :)
August 6th, 2005 at 11:07 am
That’s interesting. Thanks for pointing that out, poco bob. I’ll try to get the article updated to use xmlData instead of xmlObj — maybe it’s just that IE’s loose JavaScript thinks an element on a page with an ID is a variable (e.g., you could probably reference xmlData.innerHTML without using document.getElementById(’xmlData’).innerHTML). This is an IE problem because IE’s JavaScript sucks.
Thanks, bodyvisual - both Mike and I put a good deal of work into it, he more than I.
August 6th, 2005 at 5:52 pm
Hey BV. Hi there.
Jona, your example page worked for me with Firefox 1.0 and MSIE 6.2… No JavaScript errors.
August 8th, 2005 at 1:29 am
Jona, thats not correct. Using a conditional operator, is much more effiecient than use if else, becuase it reduces code and therefore makes pages load quicker.
The condition itself checks for activeX and XMLHttpRequest just like in an if else statement, only with much less code. If neither of these exist, then the rest of the script doesnt get triggered.
August 8th, 2005 at 9:08 pm
I’ve tested the speed results against an if/else and a conditional operator, and they are extremely close — the difference is insignificant. What I was saying, however, wasn’t regarding which method is more efficient (as you are correct in that area). The condition checks for activeX and XMLHttpRequest only, but the variable will be undefined if neither is found. Since it is possible for neither to exist, it is possible for the variable to be undefined. In order for the script to fail safe, you’d have to include another if statement following the conditional statement to make sure that the variable was not undefined. In addition, conditional operators may not be the best direction to take users who are new to the concept of programming with Ajax — advanced users, such as yourself, may not benefit much, if any, from this article. I hope to go into more advanced techniques as the series proceeds. Thank you for your criticism, however. It’s always nice to know that there is someone out there checking me, to make sure I don’t slip up, say something wrong, or encourage inefficient (or just plain wrong) code. :)
August 8th, 2005 at 11:58 pm
I have a problem developing with Ajax. The session ID is not sent in the request!
I was thinking that a ‘how to handle cookies’ section would be a good addition to your otherwise great article.
August 9th, 2005 at 5:41 am
Nah nevermind, I stupidly forgot to start the damn session in the PHP file which handled the requests.
Still, the tutorial should mention that cookies are sent with every request automatically.
August 10th, 2005 at 5:15 am
It is an excellent example that provide a step by step explanation on how it works. Which I found useful.
I am getting error on the following line:
updateObj(’xmlData’, xmlObj.responseXML.getElementsByTagName(’data’)[0].firstChild.data);
I am using FireFox 1.0.6
I copied the code from working example.
The error message “object required”.
Mulugeta
August 24th, 2005 at 9:03 pm
Try changing that line to this:
updateObj('xmlObj', xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data);
August 25th, 2005 at 5:38 pm
Using IE 6.0
I, like Mulugeta above, copied your source from your working example and I got the same error. I changed the line as you suggest on 08/25/05 @5:38 but the error remains.
August 27th, 2005 at 2:09 pm
The working example at slightlyremarkable.com/code/developing-web-applications-with-ajax/ajax.html ?
August 27th, 2005 at 10:17 pm
The code doesn’t work locally if your previewing in Homesite in IE, but works fine once on the server.
Works locally and on server for Firefox.
August 28th, 2005 at 9:51 am
Yes, I see the same curious behavior. This example runs masterfully on your website. Running the same file locally on IE produces the error. Why? is the question I am now trying to answer. BTW, greetings and salutes from an old fogey in for a nice instructional piece.
August 28th, 2005 at 6:32 pm
I think that when put on a localhost, the way the file system differs from that of a web server’s may confuse the script somehow. My recommendation is to install the Apache web server on your local hard disk and do your development through that. You get the additional benefit of “server-side” processing on your local computer, including database access.
August 28th, 2005 at 9:14 pm
Your insight is correct. This is from a response I got on this question from another website…
“The ajax function makes a request to web server to fetch information which
it then writes into the current document. This means you require an
internet connection. Without looking at the code, it may also just use the
URI for the data, not the complete URL, so relying on the BASE. In a web
environment, BASE will point at the server the page was loaded from, when
loaded from disk using file-association, it will point into nothing (or
possibly localhost).”
August 30th, 2005 at 10:35 am
Nice demo. But can u give more examples for AJAX similar to the script used in google, gmail etc. it will clear the concept more clear.
Thanks
Ajay
September 21st, 2005 at 4:43 am
Very confusing
September 27th, 2005 at 6:39 am
The article was very insightful and really has helped me better understand AJAX… however I notice that if I should go back to the XML file and edit the text, refresh the webpage and click the link again, the same information (from the original example) appears. I’m not sure if this is a bug but how would you get the example to show the new info within the XML file?
September 28th, 2005 at 12:08 pm
Winston, your problem may be due to caching. Try holding the shift key and clicking the refresh or reload button on your browser, and then try again.
September 28th, 2005 at 2:20 pm
Hi Jona
I’m trying to store the session state in the address bar to allow bookmarking. What can be changed in the URL that won’t trigger a page reload? The hash portion. So what I need to do is add my AJAX application’s parameters after a #.
Can you help me?
September 30th, 2005 at 5:00 am
Ken, you might try making that link something along the lines of href=”#some_var=abc&other=def” This way JavaScript can parse the characters following the hash to get variable values and so forth without reloading the page. You do not need a corresponding <a name=”some_var=abc&other=def”> tag, by the way.
September 30th, 2005 at 11:13 am
You have nice demo please give more lessons on AJax
June 20th, 2006 at 8:43 am