AJAX - Using the POST Method instead of GET

mcrob · #1 (**permalink**) 02-20-07, 09:28 PM

I have became more interested in Ajax and from the use of it, I learned that it can make the process sooo much faster than before in my web applications. I first started using this script to get me started

Code:

var xmlHttp

function showUser(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 } 
var url="selectusers.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("totalusersDIV").innerHTML=xmlHttp.responseText 
 } 
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 //Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

I would like to start using the POST method instead of GET because of the limitations of the query string. It would be much appreciated if someone could suggest on how change the coding so its using the POST method.

Vicious · #2 (**permalink**) 02-21-07, 01:57 AM

change this

Code:

xmlHttp.open("GET",url,true)

into

Code:

xmlHttp.open("POST",url,true)

Add this:

Code:

xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

(add it after xmlHttp.open();

Then you don't send "null", but a urlencoded string like this:

Code:

xmlHttp.send("field1=value1&field2=value2");

That should do the trick.

mcrob · #3 (**permalink**) 02-21-07, 11:38 AM

It doesnt work

Index.php

Code:

<html>
<head>
<script src="selectuser.js"></script>
</head>
<body>

<form> 
Select a User:
<select name="users" onChange="showUser(this.value)">
<option value="Peter">Peter Griffin</option>
<option value="Lois">Lois Griffin</option>
<option value="Glenn">Glenn Quagmire</option>
<option value="Joseph">Joseph Swanson</option>
</select>
</form>

<p>
<div id="txtHint"><b>User info will be listed here.</b></div>
</p>

</body>
</html>

selectuser.js

Code:

var xmlHttp

function showUser(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 } 
var url="getuser.php"

url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("POST",url,true)
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.send("users="+str.users.value)
}

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 //Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

Vicious · #4 (**permalink**) 02-21-07, 11:40 AM

Make sure you send the correct post body in your .send().

I think "str.users.value" is not correct. Try alerting it.

mcrob · #5 (**permalink**) 02-21-07, 12:18 PM

I got it work.....

Code:

var xmlHttp

function showUser(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 } 
var url="grabdata.php"
var params = "users=Lois"

xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("POST",url,true)
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-Length", params.length);

xmlHttp.send(params)
}

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 //Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

I am still concerned. I removed this code from there

Code:

url=url+"&sid="+Math.random()

I was told that with this code it prevents it from being cached. Is this needed since Im using the POST method?

and another thing Im having trouble with is this. You'll notice this..

Code:

var params = "users=Lois"

Yes you are correct. Using this str.users.value is not correct. How can I fix this?

TwoD · #6 (**permalink**) 02-21-07, 01:53 PM

You will need the random number there to ensure the "answer" isn't cached, regardless of method used. It simply fools the browser into thinking that you're requesting a new page by modifying the querystring in the url. Obviously, the server should ignore this number.

"str.users.value" will be treated as a string since it's got quotes.
In this case, str is a string so you'll just use the variable as it is:

Code:

var params = "users="+str;

Btw, forgot to mention that the ampersand should have been a questionmark in the querystring.

mcrob · #7 (**permalink**) 02-21-07, 03:13 PM

Code:

<html>
<head>
<script src="selectuser.js"></script>
</head>
<body>

<form onSubmit="showUsers(this); return false"> 
  <p>Select a User:
    <select name="users">
      <option value="Peter">Peter Griffin</option>
      <option value="Lois">Lois Griffin</option>
      <option value="Glenn">Glenn Quagmire</option>
      <option value="Joseph">Joseph Swanson</option>
    </select>
</p>
  <p>
    <input name="username" type="text" id="username">
  </p>
  <p>
    <input type="submit" id="submit_button" name="Submit" value="Submit">
</p>
</form>

<p>
<div id="txtHint"><b>User info will be listed here.</b></div>
</p>

</body>
</html>

Everything is good but now when I press Submit it keeps showing..
[object HTMLFormElement]

I have encountered this problem before but I do not remember how to fix this issue..

mcrob · #8 (**permalink**) 02-21-07, 03:46 PM

Going with the above post, I checked the javascript console and the reason why its displaying [object HTMLFormElement] is because....

The Element referenced by ID/NAME in the global scope.

How can I fix this?

mcrob · #9 (**permalink**) 02-21-07, 04:06 PM

Never mind I fixed it. This is what i did...

error in this code

Code:

var params = "username="+usernamedata+ "&password="+passworddata

This was the correct code. I had to include the .value

Code:

var params = "username="+usernamedata.value+ "&password="+passworddata.value