I just Trying to make an asynchronous project with XMLHttpRequest. it works well on other browsers but not working on Opera Mini Mobile Browser. now tell me how can I fix this.
Code:
function runxml(){
var xmlhttpr;
var setup = document.getElementById("setup");
if(window.XMLHttpRequest) {
xmlhttpr = new XMLHttpRequest();
} else {
// for IE8 and Earlier
xmlhttpr = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttpr.onreadystatechange = function(){
if(this.readyState == 4 || this.status == 200) {
setup.innerHTML = this.responseText;
}
}
xmlhttpr.open("GET", "file.txt", true);
xmlhttpr.send();
}
Related
I have my AJAX split in two parts. The "AJHAX" function which has two values, the url of the file to load and then the function where I can specify where I want it to end up ("cFuntion" uses the function "loadToContent"):
First part:
function AJHAX(url, cFunction) {
var xhttp;
// compatible with IE7+, Firefox, Chrome, Opera, Safari
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
Second part:
function loadToContent(xhttp) {
document.getElementById('content').innerHTML =
xhttp.responseText;
}
So from the first part, I can call the functionality in my menu by adding the following to a link / an element:
onclick="AJHAX('page.php', loadToContent)"
However, with this I can only specify which page to load, not which element I want it loaded to. I tried to add it as a criteria for the second part of my code, like this. But to no avail:
function loadToContent(xhttp, targetElement) {
document.getElementById(targetElement).innerHTML =
xhttp.responseText;
}
Onclick:
onclick="AJHAX('menu.php', loadToContent(sidebar))"
Any suggestions?
Solution has been found (thanks to #schogges, please upvote!). Complete working example:
JS:
function AJHAX(url, targetElement, cFunction) {
var xhttp;
// compatible with IE7+, Firefox, Chrome, Opera, Safari
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this, targetElement);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function loadToContent(xhttp, targetElement) {
document.getElementById(targetElement).innerHTML =
xhttp.responseText;
}
HTML:
<div onclick="AJHAX('home.php', 'content', loadToContent);closeSidebar()">
Home</div>
So in the HTML, you just specify the page to load, the ID of the element to load the page into and then the "loadToContent" function that actually loads it into to element. As you can see, also have ";closeSidebar()" in there, and even if it does nothing for this example, I'll just leave it here to show anyone new that you can do it this way to add more than one function to an onclick-event. Mine simply just edits some CSS to hide the sidebar.
What about using a third parameter at AJHAX()?
Try this:
function AJHAX(url, target, cFunction) {
var xhttp;
// compatible with IE7+, Firefox, Chrome, Opera, Safari
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this, target);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function loadToContent(xhttp, targetElement) {
document.getElementById(targetElement).innerHTML =
xhttp.responseText;
}
and Onclick:
onclick="AJHAX('menu.php', 'sidebar', loadToContent)"
The line onclick="AJHAX('menu.php', loadToContent(sidebar))" doesn't work because it references an inert string.
Instead what you need to do is to reference a function, so it actually carries out the intended task: onclick = function () { AJHAX('https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js', loadToContent);};
Here is a snippet showcasing my answer:
//First part:
function AJHAX(url, cFunction) {
var xhttp;
// compatible with IE7+, Firefox, Chrome, Opera, Safari
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
//Second part:
function loadToContent(xhttp) {
console.log(xhttp.responseText);
alert(xhttp.responseText);
}
//TEST
var button = document.body.appendChild(document.createElement("h1"));
button.textContent = "Click me!";
button.onclick = function () {
AJHAX('https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js', loadToContent);
};
I have a short snippet of Javascript which I want to poll a server every couple of seconds and update the DOM.
function updateCard() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
card = JSON.parse(this.responseText);
document.getElementById("season").innerHTML = card.season;
}
};
xhttp.open("GET", "/curr_card/", true);
xhttp.send();
}
window.onload = updateCard;
window.setInterval(updateCard,2000);
On most browsers that's what happens. There are a few one-off calls to updateCard, but on the whole the server shows ~1/2 connection per second per client.
However, when I access the page in Firefox on Android (49.0) the browser starts continuously polling /curr_card/, tens of times a second.
I've seen people suggest replacing the setInterval line with window.setInterval(function() {updateCard();},2000);, this doesn't help.
I'm pretty new to Javascript and AJAX, so have no idea why this is happening. Is it a bug in FF? I can post more code if requested.
Thanks in advance.
After testing and discussing in OP's comments, we concluded this must be an issue specific to Firefox on the OP's HTC M7, as it could not be reproduced on the same version Firefox on a Galaxy S7.
That may happen not only with Firefox on some device.
It may happen when response has not finished because of servers late answer but it sends another request and so on...
What if to do like this:
function updateCard(before, after) {
if(before) {
before();
}
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
card = JSON.parse(this.responseText);
document.getElementById("season").innerHTML = card.season;
}
if(after) {
after();
}
};
xhttp.open("GET", "/curr_card/", true);
xhttp.send();
}
window.onload = updateCard;
var updateCardRunning = false;
setInterval(function() {
if(updateCardRunning === true) {
console.log('postponing to next schedule');
return;
}
updateCard(
function() {updateCardRunning = true;},
function() {updateCardRunning = false;}
);
}, 2000);
or:
function updateCard() {
var xhttp = new XMLHttpRequest();
window.xhttp = xhttp;
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
card = JSON.parse(this.responseText);
document.getElementById("season").innerHTML = card.season;
}
};
xhttp.open("GET", "/curr_card/", true);
xhttp.send();
}
window.onload = updateCard;
setInterval(function() {
if(window.xhttp) {
window.xhttp.abort();
}
updateCard();
}, 2000);
I have this small script that sends single value to php file, its working in Firefox but not on Chrome and IE
jQuery
var i=1;
$.post("../asset/view/check.php",{i:i},function(data){
alert('hi');
});
Javascript
var i=1;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
alert('hi');
}
};
xhttp.open("GET", "../asset/view/check.php?i="+i+"", false);
xhttp.send();
Can you see why this is not working?
Here's the code I use to ajax more reviews:
function showMoreReviews(str) {
var counter = Number($('#counter').val());
var xmlhttp;
if (str == "") {
document.getElementById("reviews").innerHTML = "";
return;
}
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
counter = counter + 10;
$('#counter').attr({ value: counter });
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//document.getElementById("reviews").innerHTML = xmlhttp.responseText;
$("#reviews").append("<div id='rnum" + counter + "'>" + xmlhttp.responseText + "</div>");
$("#rnum" + counter).hide().fadeIn(800);
}
}
console.log(str);
console.log(counter);
xmlhttp.open("GET", "/MoreReviewsAjax.asp?ml=" + str + "&c=" + counter, true);
xmlhttp.send();
}
It works fine in all browsers except in IE8.. Now here is the weird thing - the code will work if in IE8 I go to dev tools and start debugging for scripts. Otherwise it doesn't work.
PS I am using virtual PC and Windows XP w/ IE8 for IE8 tests.
Your console.log() calls are the problem.
You can add a cheap "polyfill" to your system:
if (!('console' in window)) {
window.console = {
log: function() {},
dir: function() {},
// whatever other console functions you use
};
}
Those dummy functions won't do anything, but they'll keep IE from losing it's mind.
Here is my js and problem:
function refreshDiagValues()
{
var xmlhttp = null;
var recv;
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");
}
}
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
recv=xmlhttp.responseText;
document.getElementById("text7").innerHTML = recv;
}
};
xmlhttp.open("GET","ajax_DGS0101", false);
xmlhttp.send();
}
I could get this work in IE and chrome, but fails in safari.
I tested it by changing document.getElementById("text7").innerHTML = 5 and it shows the correct number on all browsers.
It feels like responseText does not contain any value for safari, but contains results for chrome and IE.
Could anyone help me?