More AJAX POST over GET

July 8, 2006 / Filed under: JavaScript, Web Development

Yesterday I mentioned how it seems that AJAX "POST" requests are handled better, meaning invalid characters don’t have to be "checked for," and replaced as necessary.

Well, it turns out I was wrong.

This is becoming more convoluted than I originally thought, so to make things more clear, I’ll provide some better examples.

I’m also "learning as I go," so forgive the "incompleteness" of this all - when I learn something, I post it. Turns out, with AJAX, I’m learning something new every day, and often times it goes against what I previously said. I apologize for that - it’s all just trial-and-error for me.

A "GET" request in AJAX submits the variables (parameters) via a URL string, much like this:

mypage.php?var1=tree&var2=house&var3=sky

A "POST" request in AJAX submits the variables (parameters) via a similar string, but not appended to a specific page. The variables (parameters) just float on their own:

var1=tree&var2=house&var3=sky

Notice how mypage.php? is not in the list of parameters above, for a "POST" request. Rather, in an AJAX "POST" request, the actual page (mypage.php) is still specified - but a little further down in the code - in the actual send() method of the xmlHttpRequest object.

So, to make a long story short (and hopefully understandable), we’re still going to the same page (mypage.php), and we’re still sending the same parameters.

So what is the problem?

The problem is the variable values sent across (via the xmlHttpRequest object).

With "GET," you have to watch out for invalid URL characters, such as the pound sign (#), the ampersand (&), and a few others. You have to find and replace those invalid characters, so your parameters can be sent successfully.

With "POST," I’m just beginning to notice (despite my thoughts yesterday), that weird things are happening, as well.

For example, with "POST," all spaces are removed from any string of text. So, if a user submits the following text into a form field:

I like trees next to houses

... the "submitted value" will come across like this:

Iliketreesnexttohouses

Ew. How can one possibly work with that?

Also, I’ve noticed with "POST" requests that commas are rejected, too.

Commas!? Why are commas rejected? Nothing should be rejected - we are submitting via "POST!"

You can see my aggravation.

I’m having to find/replace certain characters on the JavaScript side, before I submit the xmlHttpRequest.

This is not how I want to spend a Saturday morning. I should be done with this by now.

Comments/Mentions

# Octra Bond at 7/11/2006 7:45 pm cst

You’d add this line before sending POST data.
xmlhttp.setRequestHeader(’Content-Type’, ’application/x-www-form-urlencoded;’);

# Mark at 11/26/2006 8:04 pm cst

I'm having the same aggrivating issue with the POST request. The most annoying part is that i cannot possibly pass what i am doing through an ajax GET method query string either considering they cap off at 100 characters, my users most of the time will not send more than 100 characters through (it's a chatroom) but there's the posibility for it, and i'm not even positive that it wouldn't remove the spaces as well...

Seriously though, what freaking good is AJAX if you can't pass spaces through a POST request. I'll re-iterate your previous statement... IT'S a freaking POST for crying out loud... If ajax is supposed to emulate the post and get methods, it's done a rediculous job of it. What good is a string of text if it can only be one word in length?

Btw, to the above poster.. that won't work either. Tried it... setting a content type of text/xml also doesn't work, that's even worse... for my script it sent a null value.

Anyway, all i can say is i hope you're not using ajax to send this form data, this whole thing will be rather difficult to read... lmao.

If you figure it out buddy, you mind emailing me? I'd appreciate it sincerely :)

# Mark at 11/26/2006 8:06 pm cst

Nm, thank you i just read your next post there boss... thanks, you don't know how much of a life saver that is... i totally forgot about encodeURI() :)

You rock man, serious. :)

# Matthom at 11/27/2006 5:46 am cst

Mark, make sure to read Jennifer's feedback regarding this. She clarified that it should be encodeURIComponent() instead of encodeURI().

Hope that helps.

# Jim at 5/2/2007 11:37 am cst

encodeURIComponent() Helped me alot thanks!! it replaces naughty &?# and stuff for %[number] things.

# Ergün KOÇAK at 2/7/2008 12:12 am cst

encodeURIComponent solved my problem with & + and % signs. i am new here and tnx very much :)

# Sean at 7/25/2008 7:55 am cst

Heh, looks like I'm on the same AJAX path as you exactly 2 years later... thanks for the blog entry!

# glynn at 7/26/2010 5:18 pm cst

If I was in your neck of the woods I would kiss you ! or buy you a pint ... or both ... praise encodeURI !! and you

# Gordon at 7/26/2010 10:01 pm cst

I suspect spaces are not supported in URLs or HTTP headers, hence old URLs had %20 instead of a space. Modern browsers and servers now do this behind the scenes.

I found replacing spaces with %20 (formValues = formValues.replace(/ /gi,"%20"); prior to sending solved the problem.