AJAX POST Failing

**bluewalrus** · 09-17-2010, 04:19 PM

I've used the GET xmlhttp request before but can't seem to get the post one to work for me. Can anyone see what I'm doing wrong?

Code:

<html>
<head>
<script type="text/javascript">
function saveTitle()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
  	alert(xmlhttp.responseText);
    }
  }
var title = "title=" + document.getElementById("title").value;
xmlhttp.open("POST","saveTitle.php",true);
xmlhttp.send(title);
}
</script>
</head>
<body>
<input name="title" id="title" onblur="saveTitle()" type="text" /> 
</body>
</html>

saveTitle.php has

PHP Code:


<?php

echo $_POST['title'];

?>

Firebug shows the POST data as title=asdf but the alert coming back from the response so I think I'm calling that wrong, or the value is not being set to title as I think it is...

**jscheuer1** · 09-17-2010, 04:57 PM

That's not how you send POST data. And honestly I don't see why you cannot send this as a GET, it would be simpler. But if you must use POST or want to learn (it can be required if there's tons of data, and perhaps in other situations), this page describes the differences needed fairly well:

http://www.openjs.com/articles/ajax_...using_post.php

As shown there, you need to send() the data (as opposed to null) after setting up the appropriate headers. No query string need be used with the URL, and in fact will be ignored if it is, unless perhaps if the page fetched parses its GET data.

Alternatively, and I would recommend this for its flexibility and completeness, as well as for how it can simplify requests, using the jQuery 1.4.2 built in ajax() function. It can take a little getting used to. Once you familiarize yourself with it it's so simple as all the headers, branching and much of the parsing (in the case of a true xml response) are taken care of. And you get the added benefit of being able to use jQuery to implement/manipulate the response. See:

http://api.jquery.com/jQuery.ajax/

One important thing to bear in mind though is that some servers are not configured to allow AJAX POST requests. Almost all will do GETs.

**bluewalrus** · 09-20-2010, 04:21 PM

The requests may be too long to send as get requests and I don't want people to be able to trigger events on the page via the address bar.

**jscheuer1** · 09-21-2010, 01:08 AM

Right, that's the one reason I mentioned (tons of data), and one of the reasons I alluded to when I said "perhaps other reasons" (in your case - prevent users easy access to the page from the address bar).

Even with POST, a user can gain the same sort of control they can with GET. But, instead of using the address bar, they have to make up a form to do it.

**bluewalrus** · 09-21-2010, 01:21 AM

Yea, I'm going to look into only accepting forms from my domain/ servers IP address later, this is still in development right now so I got some time.

I have this currently but is there a way to make it if not equal to?

Code:

			var regex = new RegExp('^.*?@.*?\..*');
			var email = document.getElementById("auth_email").value;
			if (email.match(regex)) {

The ! operator cant be used in javascript like in can in PHP, or can it?

PHP Code:


            $regex = new RegExp('^.*?@.*?\..*');

            $email = $_POST['email'];

            if (!preg_match($regex, $email)) {

**jscheuer1** · 09-21-2010, 02:32 AM

Sure. But the RegExp() constructor is expensive, cumbersome, and generally only required when the exact value of the regex must be composed from variables.

Expensive because it's a constructor. One should always use a literal if possible:

Code:

var ar = [];

not:

Code:

var ar = new Array();

Code:

var str = '';

not:

Code:

var str = new String();

Cumbersome because a constructor is always typed as an Object, which can get confusing if you later want to find out what you have via the typeof check (string, object, number, function, etc.). And in this case because, like eval(), it takes as its main argument a string. That means for example that, where you have:

Code:

new RegExp('^.*?@.*?\..*');

The highlighted part will be escaped as it is in a string, so becomes a dot, meaning any character, when your intended meaning is a literal dot. I think that in order to get the intended meaning it has to be \\. or even \\\.

Since you know what the regex is ahead of time, you can do:

Code:

var regex = /^.*?@.*?\..*/;

Which is totally unambiguous, and more efficient for the script parser.

In an unrelated matter, when you do:

Code:

if (email.match(regex)) {

If you don't need the matches, this is more efficient:

Code:

if (regex.test(email)) {

With match() it would be null if there's no match, with test(), false. So either way the ! (literally not) operator should work, provided the regex is correct, ex:

Code:

if (!regex.test(email)) {

With test, which returns only true or false, things are clearer.

Whenever I have a problem in a case like this I set the string to be evaluated (email in this case) to something I think I know what the result should be, and use an alert to check:

Code:

			var regex = /^.*?@.*?\..*/;
			var email = 'someone@some.com';
			alert(regex.test(email));

I can keep changing the value of email to test different possibilities. I can also easily change the regex to fine tune it.

**bluewalrus** · 09-27-2010, 04:02 AM

I've returned to this with another question more a general JS question but since I'm using it with this function I thought I'd keep it here. My question is how can I focus on a text field (the email one) if the email address is entered incorrectly. I currently have

Code:

var regex = /^.*?@.*?\..*/;
			var email = document.getElementById("auth_email").value;
			if (!regex.test(email)) {
				return alert("Please enter a valid email address.");
			}

I've tried adding the following to line 4 there but it doesn't seem to work. I think my syntax is off.

Code:

return alert("Please enter a valid email address."), document.getElementById("auth_email").focus;

**jscheuer1** · 09-27-2010, 05:49 AM

Once you return anything, the function is over. Nothing else after that gets processed. It's sort of like break in a loop, only for the entire function.

And here:

Code:

document.getElementById("auth_email").focus;

That doesn't do anything. It's not an error though, just a statement. To execute it you need the () at the end:

Code:

document.getElementById("auth_email").focus();

Having an alert commands focus, so you cannot set focus on anything before it without losing that focus when the alert fires. Your current code doesn't suffer from that, but an attempt at a quick fix might result in such a situation.

The code you show doesn't appear to be a function. It must be a function though, otherwise you would be getting an error on having a return outside a function.

Returning an alert isn't necessary. It will fire anyway. You only need to return to get out of the function and to optionally at the same time pass a value from the function to another function that called it. A function that would end anyway doesn't need a return. I'm guessing you need the return there to prevent further processing. So, taking all of this into account:

Code:

var regex = /^.*?@.*?\..*/;
			var email = document.getElementById("auth_email").value;
			if (!regex.test(email)) {
				alert("Please enter a valid email address.");
				document.getElementById("auth_email").focus();
				return;
			}

Note: Your variables probably could be declared earlier, outside the function. But shouldn't be in the global scope. This speeds processing because each time the function runs, it doesn't have to figure out what's what. This can be tricky though. With an element you cannot declare it as a variable until it has been parsed. There's not enough of the code there in your post to show the specifics of how this could be done in this case.

**bluewalrus** · 09-27-2010, 03:43 PM

Oh, thanks. That explains a bit more, yes this is enclosed in a function just figured I'd post the minimum amount of code though. So the focus looks like it only focus the text feature of the browser but not the view field, if that makes sense. Is there a way to also focus the "view" field?

**jscheuer1** · 09-27-2010, 04:28 PM

I'm not sure what you mean by:

So the focus looks like it only focus the text feature of the browser but not the view field

The focus() method technically only applies to form elements and links and only if their style, type (in the case of a form element) and attributes permit focus. IE and Firefox (perhaps other mozilla) also apply it to window, which should include frames and iframes, which are also windows. However, this is non-standard. All others I'm aware of will ignore attempts to focus on a window, no error, just nothing happens. Also, even in Firefox and IE, focusing on the window doesn't always mean what you might think.