Jump to content

AJAX - Using POST instead of GET

mseerob

By mseerob
in JavaScript

 Share

Recommended Posts

mseerob Newbie

mseerob

Posted
Posted

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

var xmlHttpfunction showUser(str){ xmlHttp=GetXmlHttpObject()if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return } var url="selectusers.php"url=url+"?q="+strurl=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.

Link to comment
Share on other sites
Andrew K. Newbie

Andrew K.

Posted
Posted

Try this:

var xmlHttpfunction showUser(str){xmlHttp=GetXmlHttpObject()if (xmlHttp==null){alert ("Browser does not support HTTP Request")return}var url="selectusers.php"xmlHttp.onreadystatechange=stateChangedxmlHttp.open("POST",url,true)xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");xmlHttp.send("q=" + str)}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+, SafarixmlHttp=new XMLHttpRequest();}catch (e){//Internet Explorertry  {  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");  }catch (e)  {  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");  }}return xmlHttp;}

I believe it should work.

Link to comment
Share on other sites
jesh Devoted Member

jesh

Posted
Posted

Andrew K has it right. I typically also set the Content-Length header as well:

var data = "key1=value1&key2=value2&key3=value3";var url="selectusers.php"xmlHttp.onreadystatechange=stateChangedxmlHttp.open("POST",url,true)xmlHttp.setRequestHeader("Content-Type", "application/x-www-urlencoded");xmlHttp.setRequestHeader("Content-Length", data.length);xmlHttp.send(data);

Link to comment
Share on other sites
mseerob Newbie

mseerob

Posted
  • Author
Posted

I got it work.....

var xmlHttpfunction 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

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..

var params = "users=Lois"

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

Link to comment
Share on other sites
mseerob Newbie

mseerob

Posted
  • Author
Posted 
<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]In the javascript console it says: Element referenced by ID/NAME in the global scope.I have encountered this problem before but I do not remember how to fix this issue..

Link to comment
Share on other sites
jesh Devoted Member

jesh

Posted
Posted
How does one send more than one variable? like send("q="+Qstr",a="+Astr",e="Etc etc..") ?
Close. It really just looks like the query string (without the ?). It'd be more like: 
send("q=" + Qstr + "&a=" + Astr + "&e=" + Etc);

@mseerob: Rather than calling your function in the form like this:

<form onSubmit="showUsers(this); return false">

Since your function is expecting a string, you might try passing it like this:

<form onSubmit="showUsers(this.users.value); return false">

Then, in your showUsers function, set up the request like this:

var params = "users=" + str

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...