mseerob Posted February 21, 2007 Share Posted February 21, 2007 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 More sharing options...
Andrew K. Posted February 21, 2007 Share Posted February 21, 2007 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 More sharing options...
jesh Posted February 21, 2007 Share Posted February 21, 2007 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 More sharing options...
mseerob Posted February 21, 2007 Author Share Posted February 21, 2007 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 More sharing options...
george Posted February 21, 2007 Share Posted February 21, 2007 xmlHttp.send("q=" + str) How does one send more than one variable? One xmlHttpsend for each parameter? Ora comma seperated list, as with the get.like send("q="+Qstr",a="+Astr",e="Etc etc..") ? Link to comment Share on other sites More sharing options...
mseerob Posted February 21, 2007 Author Share Posted February 21, 2007 <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 More sharing options...
jesh Posted February 21, 2007 Share Posted February 21, 2007 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now