I'm trying to create an AJAX call with the post method, and can't get it to work right. The script hangs at the processing stage (readyState does not go on to 4).
I'd appreciate it if someone could enlighten me on the issue here. I've looked at a couple of tutorials, and it seems that my code -should- work.
function newRequestPost(url, post, threadid, cfunc) {
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
var params = "post="+post+"&threadid="+threadid;
xmlhttp.onreadystatechange = cfunc;
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(params);
}
function openModalPreview(threadid) {
var post = document.getElementById("post_txt").value;
newRequestPost("url", post, threadid, function() {
if(xmlhttp.readyState == 1) {
document.getElementById("that_which_lies_in_the_modal").innerHTML = "Loading...";
}
if(xmlhttp.readyState == 2) {
document.getElementById("that_which_lies_in_the_modal").innerHTML = "Received";
}
if(xmlhttp.readyState == 3) {
document.getElementById("that_which_lies_in_the_modal").innerHTML = "Processing...";
}
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("that_which_lies_in_the_modal").innerHTML = xmlhttp.responseText;
}
});
}
Related
hi when im trying to use xhttp.send(); it keeps returning
net::ERR_EMPTY_RESPONSE
my code is like this. when the user tries to presses too fast it kicks him off of the page. is there a way to stop this?
document.domain = "bitcoinrpg.com";
function UsernameTaken(name) {
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if (name == "") {
document.getElementById("UsernameTaken").innerHTML = "";
return;
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("UsernameTaken").innerHTML = this.responseText;
}
};
xhttp.open("GET", "CheckUsername.php?q=" + name, true);
xhttp.send();
}
function BattlePlayers() {
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("BattleTable").innerHTML = this.responseText;
}
};
xhttp.open("POST", "GetPlayers.php?", true);
xhttp.send();
PlayerInfo();
}
function PlayerInfo() {
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("CharacterBar").innerHTML = this.responseText;
}
};
xhttp.open("POST", "PlayerInfo.php?", true);
xhttp.send();
}
function FightPlayer(enemyName) {
var elements = document.getElementsByClassName("BattleButton");
for (var i = 0; i < elements.length; i++) {
elements[i].setAttribute("disabled", "disabled");
}
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("battlestatus").innerHTML = this.responseText;
BattlePlayers();
}
};
xhttp.open("GET", "FightPlayer.php?enemyname=" + enemyName, true);
xhttp.send();
}
function InventoryShow() {
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("InventoryTable").innerHTML = this.responseText;
}
};
xhttp.open("POST", "PlayerInventory.php?", true);
xhttp.send();
}
I've tried messing about with just about every php.ini setting ive tried renaming each xhttp variable for each function every time it just returns the same. you can see what im meaning here
For anyone experiencing the same thing and you are with GoDaddy for your hosting. you need to switch its a problem on there end and switching fixed it for me.
How do I retrieve returndata variable outside fn() function?
function fn() {
var xmlhttp = new XMLHttpRequest();
var vars = "request=something";
xmlhttp.open("POST", "script.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var returndata = xmlhttp.responseText;
}
}
xmlhttp.send(vars);
}
You need to define global variable before function and then store the result into this variable. The way you do it now, is definition of local variable.
var returndata;
function fn() {
var xmlhttp = new XMLHttpRequest();
var vars = "request=something";
xmlhttp.open("POST", "script.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
returndata = xmlhttp.responseText;
}
}
xmlhttp.send(vars);
}
AJAX requests are asynchronous. You cannot have the pizza before it is baked. In real life you call the pizza company. They bake it and you wait. AJAX is the same. So setting the returndata won't do it all by itself.
function fn() {
var xmlhttp = new XMLHttpRequest();
var vars = "request=something";
xmlhttp.open("POST", "script.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var returndata = xmlhttp.responseText;
}
}
xmlhttp.send(vars);
}
The readystate function isn't there for nothing. It waits until the request has been processed. From there on you can go on. Every function/script that is depended on the returned data should be called upon from that function.
Still you can do this:
var returndata; //this will now be a global variable.
function fn() {
var xmlhttp = new XMLHttpRequest();
var vars = "request=something";
xmlhttp.open("POST", "script.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var returndata = xmlhttp.responseText;
doSomeThing(); //fire depended value.
}
}
xmlhttp.send(vars);
}
function doSomething()
{
if(returndata)
{
//do Something
}
else
{
alert("Data isn't loaded yet");
}
}
I want to get data in json format.
I have typed this code but it doesn't return anything.
where is the problem in my code?!!
<script language="JavaScript">
var xmlhttp = new XMLHttpRequest();
var url = "http://codeforces.com/api/contest.list?gym=true";
xmlhttp.onreadystatechange = myfunction;
xmlhttp.open("GET", url, true);
xmlhttp.send(null);
function myfunction() {
if (XMLHttp.readyState == 0) {
window.alert("Uninitialized");
}
if (XMLHttp.readyState == 1) {
window.alert("loading");
}
if (XMLHttp.readyState == 2) {
window.alert("loaded");
}
if (XMLHttp.readyState == 3) {
window.alert("waiting");
}
if (XMLHttp.readyState == 4) {
window.alert("completed");
var y = JSON.parse(xmlhttp.responseText);
document.getElementById("id01").innerHTML =y[1].id;
}
}
</script>
in the html code, i have a div with id = "id01"
remember that javascript is case sensitive.
edit it to:
var xmlhttp = new XMLHttpRequest();
var url = "http://codeforces.com/api/contest.list?gym=true";
xmlhttp.onreadystatechange = myfunction;
xmlhttp.open("GET", url, true);
xmlhttp.send(null);
function myfunction() {
if (xmlhttp.readyState == 0) {
window.alert("Uninitialized");
}
if (xmlhttp.readyState == 1) {
window.alert("loading");
}
if (xmlhttp.readyState == 2) {
window.alert("loaded");
}
if (xmlhttp.readyState == 3) {
window.alert("waiting");
}
if (xmlhttp.readyState == 4) {
window.alert("completed");
var y = JSON.parse(xmlhttp.responseText);
document.getElementById("id01").innerHTML =y[1].id;
}
}
try this:
xmlhttp.onload = function() {
if (xmlhttp.status >= 200 && xmlhttp.status < 400) {
// Success!
var data = JSON.parse(xmlhttp.responseText);
} else {
// We reached our target server, but it returned an error
}
};
disclaimer: i took this code from http://youmightnotneedjquery.com/#json
Just use fetch. It is the modern XMLHttpRequest.
const url = "http://codeforces.com/api/contest.list?gym=true";
fetch(url)
.then(
response => response.json() // .text(), etc.
// same as function(response) {return response.json();}
).then(
jsonString => {
const json = JSON.parse(jsonString);
document.getElementById("id01").innerHTML = json[1].id;
}
);
More Info:
Mozilla Documentation
Can I Use (75% Aug 2017)
Matt Walsh Tutorial
Here is my code:
var xmlhttp;
function HttpObject(str)
{
//alert("iam in process request");
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
alert ("xmlhttp");
}
else if(window.ActiveXObject)
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
alert ("ms.xmlhttp");
}
else
{
XmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
alert ("rdystate: " + xmlhttp.readyState);
alert ("status: " + xmlhttp.status);
alert ("Text: " + xmlhttp.statusText);
xmlhttp.onreadystatechange = processRequest();
xmlhttp.open("POST",'/CountryTest.do',true);
xmlhttp.send(null);
}
function processRequest()
{
if (xmlhttp.readyState === 0) {
alert("u r in 0 :: The request is not initialized ");
}
var target = document.getElementById("curlist");
var res = xmlhttp.responseText;
alert(res);
if (xmlhttp.readyState === 4 && xmlhttp.status === 200)
{
alert("in readystate");
}
else
{
alert("error in readystate");
}
}
It always displaying status 0
curlist is id of my country state prog
can any one say me where is problem?
/CountryTest.do is the url pattern of the servlet.
xmlhttp.onreadystatechange = processRequest();
You just called processRequest immediately, and assigned its return value to onreadystatechange.
You want to assign the function itself, without calling it.
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState=='4')
{
alert(xmlhttp.responseText);
}
}
I am using ajax - which works fine - to pass on the value. But when I add the HTTP code, there is no action. Using simple HTTP to show different div values based on http.readystatus. Is this the right format? If not, what is?
if (colorToCheck == gup("Player1")) {
document.getElementById('win').innerHTML = player1 + " wins";
redScore += 1;
//Browser Support Code
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp.readyState == 3 && xmlhttp.status == 200) {
document.getElementById("save").innerHTML = "saving";
} else if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//ajax call
var dataString = 'winner=' + player1 + '&player1=' + player1 + '&player2=' + player2 + '&matchNum=' + matchNum;
$.ajax({
type: "POST",
url: "red.php",
data:dataString,
cache: false,
success: function(response) {
$('.result13').html(response);
}
});
}
}
Any help would be highly appreciated! Thanks in advance.
The structure of a Vanilla JS AJAX call is:
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","path/to/file.php"); // or "POST" if needed
xmlhttp.onreadystatechange = function() {
if( this.readyState == 3) document.getElementById('save').innerHTML = "saving";
if( this.readyState == 4) {
if( this.status != 200) alert("ERROR: Server returned "+this.status+" "+this.statusText);
else {
// do something
alert(this.responseText);
}
}
};
xmlhttp.send(data); // data is whatever POST data you want. Leave out if using GET.