Post method using Ajax question

Discussion in 'JavaScript' started by y2k4ever, Jul 5, 2007.

0
  1. #1
    I am starting to learn AJAX and trying to figure out how to work the POST method using XMLhttpRequest but can't seem to get it work.

    SO here is the javascript that I use

    <html>
<body>

<script type="text/javascript">
function getNewXMLHttpRequest() {
  var obj;
	try {
	  // For Internet Explorer.
	  obj = new ActiveXObject('Microsoft.XMLHTTP');
	}
	catch(e) {
	  try {
		// Gecko-based browsers, Safari, and Opera.
		obj = new XMLHttpRequest();
	  }
	  catch (e) {
		// Browser supports Javascript but not XMLHttpRequest.
		obj = false;
	  }
	}
	return obj;
}
var request = getNewXMLHttpRequest();
var params = "name=foo&email=foo@domain.com";
request.open('POST', 'edit.php', true);
request.send(params);
//Send the proper header information along with the request
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.setRequestHeader("Content-length", params.length);
request.setRequestHeader("Connection", "close");

request.onreadystatechange = function() {//Call a function when the state changes.
	if(request.readyState == 4 && request.status == 200) {
		alert(request.responseText);
	}
}

</script>

</body>
</html>
    Code (markup):
    and this is the edit.php so that i can get the $_POST

    $name = $HTTP_GET_VARS["name"];
$email = $HTTP_GET_VARS["email"];

mysql_query("INSERT INTO test (`name`,`email`) VALUES ('$name','$email')");
    Code (markup):
    For some reasons the parameters are not sending along with the url.
     
    y2k4ever, Jul 5, 2007 IP
  2. ajsa52

    ajsa52 Well-Known Member

    Messages:
    3,426
    Likes Received:
    125
    Best Answers:
    0
    Trophy Points:
    160
    #2
    You're setting params.length AFTER request.send(params); and should be done BEFORE.
    So you need:

    
var params = "name=foo&email=foo@domain.com";
var request = getNewXMLHttpRequest();
request.open('POST', 'edit.php', true);
//Send the proper header information along with the request
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.setRequestHeader("Content-length", params.length);
request.onreadystatechange = function() {//Call a function when the state changes.
	if(request.readyState == 4 && request.status == 200) {
		alert(request.responseText);
	}
}
request.send(params);
    Code (markup):
     
    ajsa52, Jul 6, 2007 IP
  3. y2k4ever

    y2k4ever Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    It didn't seem to work

    So this is the code for now that doesn't work
    
<html>
<body>

<script type="text/javascript">
function getNewXMLHttpRequest() {
  var obj;
    try {
      // For Internet Explorer.
      obj = new ActiveXObject('Microsoft.XMLHTTP');
    }
    catch(e) {
      try {
        // Gecko-based browsers, Safari, and Opera.
        obj = new XMLHttpRequest();
      }
      catch (e) {
        // Browser supports Javascript but not XMLHttpRequest.
        obj = false;
      }
    }
    return obj;
}
var params = "name=foo&email=foo@domain.com";
var request = getNewXMLHttpRequest();
request.open('POST', 'edit.php', true);
//Send the proper header information along with the request
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.setRequestHeader("Content-length", params.length);
request.onreadystatechange = function() {//Call a function when the state changes.
	if(request.readyState == 4 && request.status == 200) {
		alert(request.responseText);
	}
}
request.send(params);


</script>

</body>
</html>
    PHP:
     
    y2k4ever, Jul 6, 2007 IP
  4. MMJ

    MMJ Guest

    Messages:
    460
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Didn't feel like debugging your code so replaced with my code. This should work:

    
<html>
<body>

<script type="text/javascript">
var xmlHttp;
function ajax()
{
	try // Firefox, Opera 8.0+, Safari
	{
		xmlHttp=new XMLHttpRequest();
	}
	catch (e) // Internet Explorer
	{
		try
		{
			xmlHttp=new ActiveXObject("MSXML2.XMLHTTP");
		}
		catch (e)
		{
			try
			{
				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e)
			{
				alert("Your browser does not support AJAX!");
				return false;
			}
		}
	}
}
function ajaxpost()
{
	alert("Testing!");
	var str = "name=foo&email=foo@domain.com";
	ajax();
	xmlHttp.onreadystatechange=function()
	{
		if(xmlHttp.readyState==4)
			alert(xmlHttp.responseText);
	}
	xmlHttp.open("POST","edit.php",true);
	xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
	xmlHttp.send(str);
}


</script>
<input type="button" value="GO" onclick="ajaxpost();" />
</body>
</html>
    HTML:
    Make sure edit.php exists.
     
    MMJ, Jul 7, 2007 IP