If I understand it, XmlHttpRequest allows manipulating data after the page has loaded. E.g. I can show a button and when the user clicks it a javascript function can use the object to retrieve the MOTD and place it somewhere in the page.

How would I go having it working in different browsers? Does each one have it's own way to create the object and interact with it?

I found that for IE it's
var req = new ActiveXObject("Microsoft.XMLHTTP");

while for FF
var req = new XMLHttpRequest();

(according to this page).

What's for other browsers?

Should be either the same as for FF or not supported at all.

Good.

What's best to check browser type? Client-side with JS or server-side looking at UserAgent (if someone is faking it I wouldn't care)

I use code that looks like this in JS to asynchronously get data from the server with xmlhttprequest:

Wow, thanks
I'll study it when I get home.

Note that some of that code is a little specific for my project. I'm talking about that check that makes sure no other request can be made until data was received from the previous request. In your project you will probably want to change this...

This might help

[edit]and this http://aleembawany.com/weblog/webdev/000051_ajax_instant_tutorial.html

See, now those are good tutorials. They just give you the facts, plain and simple. I really hate it when they pad the tutorial with a bunch useless crap to "ease" the learning process. It just makes it so you have to sift through it all to really get anything done... the whole world should think exactly like I do!>:(

[edit]
Although I must agree with the second tutorial that the first tutorial may not have had the best code examples.

I was in a hurry when I posted that reply, I didn't closely look at the code. Now I do, I'll keep the checking part.

Thanks, but both do not seem to use XML in their example.

I finally found how to get the XML tree

http://www.maxkiesler.com/index.php/weblog/comments/50_ajax_reference_websites_from_around_the_world/ D:

You cannot add a node from one document into another. You need to import it (importNode ?), but of course IE6 doesn't support that.

The whole "AJAX" name is a joke. No one seriously uses XML with it. It's really "AJAJ" or "AJAH". Look for what's known as "JSON". It's basically a way to convert XML like data into a string that represents a JavaScript object.

AJAJ example:

server generates:
{options:[{value:0,text:"zero"},{value:1,text:"one"}]}

client evaluates it:
eval("var response = " + json);
alert(response.options[0].value);

Or alternatively use AJAH and just pass it as HTML, and use foo.innerHTML = HTML;.

Yes, I was going to say the same thing as Matthew, but was too busy watching football. You will rarely want to handle XML in JS as JSON is so much easier and more convenient and has more support. Even if your source data is XML, it is much easier to convert it to JSON on the server and then just use eval() in JS than it is to manipulate XML in JS.

I meant to comment on this:

Don't ever check the browser type to determine functionality. Always check browser features, starting with the standard ones first:

if (foo.addEventListner) {
  // W3C Model
}
else if (foo.attachEvent) {
  // IE Model
}

The only times you want to check the user agent string with JS is if a certain browser has a glitch that you need to work around. For example, I check for the literal string "Safari" on the dynamic combobox widget because Safari does not support CSS system colors, so I have to provide default colors.

That is the only future compatible method. If I were to check for features, I might get the detection wrong if another browser matches it or Safari changes functionality. (Obviously if they ever fix this problem, then I would need to add a version check as well.)

Ok, I found how to manipulate the <select> childs:

Roughly

         opt = document.createElement("option");
         sel.options.add(opt);
         opt.innerHTML = "Prova";
         opt.value = 1;

I thought I'd go the easy way:

• generate the js script server-side

• load it with the nice object

• eval() the code

Of course that doesn't work
I guess it's because the XmlHttpRequest object won't load non-xml data.

So? JSON requires more than five minutes to get it to work, but I still don't get how will I retrieve the js source code (either from a file or from a server-side script)

Of course it does. The server serves plain text. This text can be interpreted on client side as you wish, either as XML or JSON or anything else. On the server you just create a string containing JSON code, write it to the response object and that's it. I only know ASP, but I suppose it's similar in othe server side scripting languages. You just do something like

dim json as string
json = "{options:[{value:0,text:"zero"},{value:1,text:"one"}]}"
Response.Write(json)

and on the client in JS you do something like

var json = req.responseText;
eval("var response = " + json);

Ok, call me dumb.

I replaced the text in the file and IE started to say "Permission denied" on xmlobj.open()

I thought it was due because the file didn't contain valid xml code, but now I have closed and reopened IE completely and it works perfectly

Well, for now I'll just directly generate the js script, avoiding that JSON stuff (I'm a bit in a hurry for this project). I'll keep an eye on it tough

Too bad I was so optimistic to think that browser capabilities were the only trouble.

Consider a whole box of cookies for you all ^_^

There are also many JSON classes available for scripting languages. The one I use for PHP works like:

$response = array(
  'foo' => 'bar'
);

$json = new JSON;
echo $json->encode($response);

It may seem like overkill at first, but it becomes quite nice when you have a very dynamic response to build. Plus, it automatically handles converting UTF-8 encoded strings to proper JS escapes (eg, "\u00A9").

Mmh... looks like the request ends before the whole code is retrieved, if the latter is too long.

Any way to wait for it? I'm thinking at onreadystate, but a busy-wait on it won't work without some sort of sleep()

You're doing something wrong, then. The examples above will not do that.

Perhaps include some code?

Marcello

As long as you are waiting for readyState == 4, everything will be there.

Here's it (I still didn't converted it to JSON)

Client-side, when the selected item of a <select> changes, this deletes all the current <option>s in it and loads a js from listacomuni.php

Server-side, generates js that will add the new <option>s to the <select>

While the code isn't 100% fixed (I still have issues alternatively in IE and FF ), when the query returns few rows it generates the whole script, but if the rows are many the script gets broken (I saw this by replacing eval() with alert() in the client-side script

An example is attached (couldn't resist to try the new upload thing )

while(req.readystate != 4);
just like that?

No, the function will be called multiple times:

function onLoad()
{
  if (req.readystate != 4) return;
}

I would do this:

req.open("GET", url, true /* not false */);
req.onreadystatechange = function() {
  if (req.readystate != 4) return;
  // process
};

And use a callback function. It's the only good way to do it. (See Miran's example.)

All your open()'s have stray php. Is that intended?

Yes; due to the fact that the xml~ stuff needs an absolute path, that php code ensures everything works if I move the whole directory

Great... it doesn't work. I mean, I think I did everything you suggested

client-side code

server-side code

But it keeps failing (output is truncated) if the query returns too many rows. I have no idea about what to do, I can't understand why readyState becomes 4 before the script ends its output.

I also tried to put every js piece in a variable and echo that only at the end: same result.

I don't think it's a timeout issue, because it all ends in 1-2 seconds. I don't even understand why there are those boxes in the generated javascript (long.png in my post above), alert() doesn't have troubles with accented letters.

[edit]

I changed
eval(req.responseTEXT);
to
eval(req.responseText);

and now it works in FF (it does wait for the whole data, while IE still doesn't ). But I have another issue to add
select.remove(i);
is not working

Are you sure it's truncated, or is the alert box just not displaying it all?

No, but the encoding might get lost. How is it encoded on the server? UTF-8? If so, you'll need to convert them to JS's "\u1234" format. As a quick hack, you could use PHP's utf8_decode() function, but that will only help for chars < 256.

I guess so, because if I use eval() IE pops up an error saying 'Unterminated string...'.
Err... wait, that's what it kept saying on my home computer, here in university there seems to be another error: it says that 'select' is undefined, but only if I run the javascript more than once.

To sum it up I have two drop-down menus. The content of the latter depends on the selected item of the former.

When an element is selected, I delete all the content of the former <select> with

 select = document.getElementById('comune');
 
 for(i = 0; i < select.options.length; i++)
   select.remove(i);

This works when it contains only one element, but fails if its content has been filled through the javascript server-generated. I'm investigating it, any idea?

Resolved , I just made the php script output the charset along with the content type in the HTTP Response header
header("Content-type: text/javascript; charset=iso-8859-1");

[edit]

Wohoo

this is the way to remove all the <option>s

 while(select.options.length)
   select.remove(0);

not this

 for(i = 0; i < select.options.length; i++)
   select.remove(i);