POSTing With AJAX

[daredevil14]

hello everyone... i am trying to POST data with ajax, it is not working, since i can't/don't know how to pass the variables values with the javascript code... take a look at this, i am GETting them below, and it is working well :

<script type="text/javascript">
<!--
function getxmlobject()
{
var xmlHttp;
try 
  {
  xmlHttp = new XmlHttpRequest();
  }
catch (e)
  {
  try 
    {
    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}

function process()
{
var xmlHttp = getxmlobject();
var fname = document.getElementById("f").value;
var lname = document.getElementById("l").value;
var url = "ins_body.php";
url = url + "?f=" + fname + "&l=" + lname;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
document.getElementById("ok").innerHTML = "Done";
}

//-->
</script>

<form>
First Name : <input type="text" id="f" /><br />
Last Name : <input type="text" id="l" /><p></p>
<input type="button" id="b" onclick="process()" value="Insert"/>
<p id="ok"></p>
</form>

and of course, ins_body.php is a normal php page that GET the variables and inserts them to the db...

<?php

$conn = mysql_connect("localhost","root","");
mysql_select_db("ajax",$conn);

$fname = $_GET["f"];
$lname = $_GET["l"];

$sql = mysql_query("insert into user (fname,lname) values ('$fname','$lname')");

?>

anyway, i don't want to GET the variables, i wanna POST them ( since a long text area value can't be done by GET, and since i prefer to POST values... ) so any idea ? what if i REQUEST data ? does it work ? here's what it is below :

function process()
{
var xmlHttp = getxmlobject();
var fname = document.getElementById("f").value;
var lname = document.getElementById("l").value;
var url = "ins_body.php";
xmlHttp.open("POST",url,true);
xmlHttp.send(null);
document.getElementById("ok").innerHTML = "Done";
}

the problem is that i can't pass the fname & lname variables to the POST engine... so ?

[cahva]

With post you ofcourse have to send the form. Forms contents are send with this:
xmlHttp.send(null);

Replace null with the variables you want. For example:

qs = 'f='+escape(fname)+'&l='+escape(lname); 
xmlHttp.send(qs);

BUT theres more sophisticated solution. Theres many great javascript librarys to do ajax and a lot more. Check out prototype, jquery, YUI or xajax(php ajax library).

[daredevil14]

ok look at this code :

<script type="text/javascript">
<!--

function getourobj()
{
var xmlobj;
try
  {
  xmlobj = new XmlHttpRequest();
  }
catch (e)
  {
  try 
     {
     xmlobj = new ActiveXObject("Msxml2.XMLHTTP");
     }
   catch (e)
     {
     xmlobj = new ActiveXObject("Microsoft.XMLHTTP");
     }
   }
return xmlobj;
}

function process()
{
var xmlobj = getourobj();
fname = document.getElementById("fname").value;
lname = document.getElementById("lname").value;
url = "ins.php";
xmlobj.open("POST",url,true);
xmlobj.send(fname,lname)
}

//-->
</script>

Let's suppose that there are 2 <textarea> with 2 ids ( fname & lname ) and onclick of the forum, trigger process() function

And let's suppose that ins.php is a normal php page that connects to the db server, and it POSTs the 2 sent variables ( which were sent by POST ), and simply inserts them

so it is not working, i guess i am having error with the following :
xmlobj.send(fname,lname);
and of course by sending them with POST is not working... so ?

[cahva]

Ehm.. You didnt do it as I told you.

function process()
{
	var xmlobj = getourobj();
	fname = document.getElementById("fname").value;
	lname = document.getElementById("lname").value;
	url = "ins.php";
	qs = 'fname='+escape(fname)+'&lname='+escape(lname); 
	xmlobj.open("POST",url,true);
	xmlobj.send(qs);
}

[daredevil14]

ok i did what you said, still not working, still inserting empty fields, as if the variables aren't POSTed to the php page... so ?

[daredevil14]

ok i got it; i should have specified the Request Header which is :

application/x-www-form-urlencoded

thanks anyway