Ajax and POST

[kjelle392]

Hello all.

I try to learn some Ajax, but find it some difficult. The task I'm trying to do, is to use Ajax to register a new user for my application.

The problem is that the request don't seem to pass the POST-variables to the php-script on the server side, and I can't just see what's wrong!

Please take look at the code below:

function createXMLHttpRequest() {
 var request = false;
 /* Does this browser support the XMLHttpRequest object? */
 if (window.XMLHttpRequest) {
 if (typeof XMLHttpRequest != 'undefined') {
 /* Try to create a new XMLHttpRequest object */
 try {
 request = new XMLHttpRequest();
 } catch (e) {
 alert('Could not create XMLHttpRequest');
 request = false;
 }
 /* Does this browser support ActiveX objects? */
 } else if (window.ActiveXObject) {
 /* Try to create a new ActiveX XMLHTTP object */
 try {
 request = new ActiveXObject('Msxml2.XMLHTTP');
 } catch (e) {
 alert('Could not create XMLHttpRequest');
 return false;
 }
 }
 }
 return request;
}
 function checkRegistering() {
 var request = createXMLHttpRequest();
 var name = $F('name');
 var email = $F('email');
 var username = $F('username');
 var password = $F('password');
 var params = 'name=' + name + '&email=' + email + '&username=' + username + '&password=' + password;
 
 if(request) {
 url = 'checkregister.php?' + params;
 request.onreadystatechange = parseResponse(request);
 request.open('POST', url, true);
 request.send(null);
 }
 }
 
 function parseResponse(request) {
 alert('onreadystatechange');
 alert('request.responseText=' + request.responseText);
 if(request.readyState == 4) {
 if(request.status == 200) {
 var response = request.responseText;
 } else {
 alert('There was a problem retrieving the data: \n' + request.statusText);
 }
 request = null;
 }
}

The serverside-script is just:

<?php
require_once 'db.php';
$xml = <<< PROLOG
<?xml version="1.0" encoding="iso-8859-1"?>
PROLOG;
$db = new db;
$userdata = array("name" => $_POST['name'],
   "email" => $_POST['email'],
"username" => $_POST['username'],
"password" => $_POST['password']);
print_r($userdata);
?>

Very simple (should be).

The problem is that the posted variables don't arrive to the script - and therefor no usable return either.

Whats wrong?

[Fotiman]

Your example is appending the parameters to the query string... which is how you would send a GET request. To send a POST, you need to:
1. Don't append the params to the URL:

url = 'checkregister.php?' + params; 

becomes:

url = 'checkregister.php';

2. Set some request header information:

request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.setRequestHeader("Content-length", params.length);
request.setRequestHeader("Connection", "close");

3. Include the params in the call to send:

request.send(params);

4. Don't forget to encode the parameters:

var params = 'name=' + encodeURIComponent(name) +
  '&email=' + encodeURIComponent(email) +
  '&username=' + encodeURIComponent(username) +
  '&password=' + encodeURIComponent(password); 

[astupidname]

Also, what you are doing here:

request.onreadystatechange = parseResponse(request);

is incorrect, as you are invoking the parseResponse function upon assignment there, and since parseResponse does not return a function as value, the onreadystatechange function is of type 'undefined' value. What you want there instead is:

request.onreadystatechange = function () { parseResponse(request); };

[kjelle392]

Oh that was quite easy!
Thank you very much - Now I'm getting somewhere :)

[Fotiman]

Nice catch astupidname. I missed that one. :)