I have the following code :
<head>
<script>
function startChanging() {
var elems = document.getElementsByTagName("img");
for(var i=0; i < elems.length; i++)
{
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");
}
xmlhttp["elem"] = elems[i];
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
this["elem"].src = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "http://myurl.com/somescript.php", true);
xmlhttp.send();
}
};
</script>
</head>
<body onload="startChanging()">
<img src="https://www.google.com/images/srpr/logo11w.png">
<br/>
<img src="https://www.google.com/images/srpr/logo11w.png">
<br/>
<img src="https://www.google.com/images/srpr/logo11w.png">
</body>
Even though I create a new instance of XMLHttpRequest for each iteration and add the current element to an attribute, when the request returns a response only the last img element is changed.
I am looking for a simple solution to change the src of the img element without iterating through all the elements again when the response comes. I would like a pure Javascript solution (read: no JQuery).
I am certainly doing something wrong here I just don't understand what. Any help would be appreciated.
In your for loop, you are overwriting the xmlhttp variable so when you get into the onreadystatechage function and you check the value of xmlhttp.readyState, it will not be checking the right object.
I'd suggest this fix which changes two things:
It puts each ajax call into it's own IIFE which keeps the xmlhttp variable separate for each ajax call.
It passes elems[i] into the closure so you don't have to do the property saving hack.
Code:
function startChanging() {
var elems = document.getElementsByTagName("img");
for(var i=0; i < elems.length; i++)
{
(function(obj) {
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");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
obj.src = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "http://myurl.com/somescript.php", true);
xmlhttp.send();
})(elems[i]);
}
};
One possible approach:
xmlhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
this.elem.src = this.responseText;
}
}
As you see, I've replaced all the references to xmlhttp within that handler function to this.
The problem is even though you've created a new AJAX-serving object at each step of the loop, each newly-created 'readystatechange' handler function referred to the same object known under xmlhttp variable.
In general, this is quite a common problem when someone works with a variable declared within a loop yet referred by functions created in the same loop. Stumble upon this once or twice, and you'll begin to see the pattern. )
xmlhttp.send();
Put data into the send method:
xmlhttp.send(data);
Source: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
void send();
void send(ArrayBuffer data);
void send(ArrayBufferView data);
void send(Blob data);
void send(Document data);
void send(DOMString? data);
void send(FormData data);
Where data is a JavaScript variable, you can put anything into. If you want multipart message, you'd use var data = new FormData(); and put data into it using data.append('image', file); for file upload via ajax for example.
If no multipart, simply put anything in like:
data = { images: document.getElementsByTagName("img") }
Related
I wonder if there is any simple way to get request processing percent with ajax.(not jQuery)
I tried some way to get this percent on my own.
in my php file I Set response content-length.
and then I use this code for progress percent:
function ajaxPost(url,data,callBack,progress)
{
var postPar = data;
//for(var f in data) postPar += f+'='+data[f]+'&';
var xmlhttp;
if (window.XMLHttpRequest)
xmlhttp = new XMLHttpRequest();
else
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange=function()
{
var percent = 0;
if(xmlhttp.readyState>=3) percent = Math.ceil(xmlhttp.responseText.length*100/xmlhttp.getResponseHeader('Content-length'));
progress(percent);
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
callBack(xmlhttp.responseText);
}
}
xmlhttp.open("POST",url,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(postPar);
}
but there is some problems:
1- I cant use this function for another site except this.(because other sites may not have content-length header)
2- this code is not working with upload requests.
Now I want to know is there any way to improve this or maybe some better way to do ?
thanks in advance...
Trying to load contents from postcode.php file into a #postcodeList div, but it is not working (nothing happens). I checked postcode.php file it echoes al correct information.
var loadicecream = document.getElementById("iceCreams");
loadicecream.addEventListener("click", iceAjax, false);
function iceAjax() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST","ice-cream-list.php",true);
xmlhttp.send();
document.getElementById("ice-cream-list").innerHTML = xmlhttp.responseText;
}
You want the query to execute asynchronously (the third parameter to open function) and then you synchronously try to read the value. This happens before the query has been sent, so it will always be empty.
Either run the load synchronously, or set the xmlhttp.onreadystatechange to point into a function where you handle the loaded state. The best way is to do it asynchronously since you don't want to block the user from using the page while loading data.
Quick example, only handles the success case:
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("postcodeList").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST","postcode.php",true);
xmlhttp.send();
Read up on the documentation for the onreadystatechange, at least you want to handle the case where there is a timeout or some error, otherwise the user won't know something went wrong.
I have a proxy script that outputs json data via php, and I want to be able to manipulate this data using javascript. I have the following code, but it only gets the entire json string outputted by the php script. How do I take the data and be able to access the individual objects with in this json data?
var xmlhttp;
function loadXMLDoc(url, cfunc) {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = cfunc;
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
loadXMLDoc("http://xxxxx.appspot.com/userbase_us.php?callback=userdata", function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var json = xmlhttp.responseText;
alert(json);
}
});
You can use the native JSON.parse method:
var json = JSON.parse(xmlhttp.responseText);
Note that since this is not supported by older browsers, you will most likely want to polyfill it.
Starts with shuffle functions (just shuffles arrays). It works.
Then I define 2 global variables that will determine the random order for images to be displayed on the page.
picOrder will be a simple array from 0 to picCount, with picCount determined by Ajax onload. The picCount is being retrieved, but the the picOrder array is not being set! If I manually run "arrangePics();" in the console it works. It fills the array picOrder and then shuffles it. But it does not work by placing the calls to both functions inside "" or by putting the "doStuff()" function in there.
Array.prototype.shuffle = function() {
var s = [];
while (this.length) s.push(this.splice(Math.random() * this.length, 1)[0]);
while (s.length) this.push(s.pop());
return this;
}
var picOrder = new Array();
var picCount;
function getPicCount() {
// picCount = array(10);
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
picCount = xmlhttp.responseText;
}
}
xmlhttp.open("GET","/example.com/images.php?count=hello",true);
xmlhttp.send();
//picCount.shuffle;
}
function arrangePics() {
for(var i = 0;i<picCount;i++) {
picOrder[i] = i;
}
picOrder.shuffle();
//alert(picOrder);
}
HTML
<body onLoad="getPicCount();arrangePics();">
or
<body onLoad="doStuff();">
You need to arrangePics() after the asynchronous AJAX call has returned, i.e. you can only call it in the if (xmlhttp.readyState==4 && xmlhttp.status==200) {} (callback) block otherwise you cannot be sure that the data has been fully received.
What is currently happening is that JavaScript is calling getPicCount();arrangePics(); - the first method initiates the AJAX call and returns immediately and then the second method will by trying to arrange 0 pics. Executing arrangePics() manually on the console would have introduced enough delay into the system for the AJAX call to complete and the picCount would be set as expected.
So if you change the callback function to:
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
picCount = xmlhttp.responseText;
for(var i = 0;i<picCount;i++) {
picOrder[i] = i;
}
picOrder.shuffle();
}
it should shuffle the pics after the count has been received.
I am pretty new to Javascript and cannot for my life figure out why the following object properties are not transferring.
I am calling the object as follows:
var URL = "TABLE=_Products&COLUMNS=price_Qty,Sale&MATCH=internal_Model&ROWS="+itemnum ;
var ITEM = new get_Database_Info(URL) ;
and the get_Database_Info is:
function get_Database_Info(PARAMS) {
alert(toString(this));
var URL = document.location.protocol+'//'+document.location.host+'/Catalog/Tools/ajax_Database_Request.php' ;
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){alert('Error: Cannot send XML request.');}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200){
alert(toString(this));
var RESPONSE = xmlhttp.responseText ;
RESPONSE = RESPONSE.replace(/^\s+/, '');
var ARR = RESPONSE.split('||') ;
ARR.pop() ;
for(var i=0; i<ARR.length; i++){
var temparr1 = ARR[i].split('=') ;
var NUM = temparr1[0] ;
this[NUM] = new Array() ;
var temparr2 = temparr1[1].split('/|') ;
temparr2.shift() ;
for(var x=0; x<temparr2.length; x++){
var temparr3 = temparr2[x].split('??') ;
this[NUM][temparr3[0]] = temparr3[1] ;
}
}
}
}
xmlhttp.open("POST", URL, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", PARAMS.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(PARAMS);
}
I have verified that all the properties are in 'this' within the scope of get_Database_Info but they are not transferring back to ITEM.
When are you checking the contents of the object? The request is asynchronous, so you have to wait until the callback has processed the response before there are any properties in the object.
If you look for the properties immediately after the object is created, they will never be there. Even if the response is really quick, the first time that the callback can run is when you exit the function where you created the object, so the browser gets the control back.
I would venture to guess that the when the function that is attached to onreadystatechange runs that this is no longer attached to the object that is being created in the constructor but is probably attached to the global object or the xmlhttp object. I would try using the var that=this pattern:
function get_Database_Info(PARAMS) {
alert(toString(this));
var URL = document.location.protocol+'//'+document.location.host+'/Catalog/Tools/ajax_Database_Request.php' ;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
var that=this; // value of that will be stored in the closure
if(!xmlhttp){alert('Error: Cannot send XML request.');}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200){
alert(toString(that));
var RESPONSE = xmlhttp.responseText ;
RESPONSE = RESPONSE.replace(/^\s+/, '');
var ARR = RESPONSE.split('||') ;
ARR.pop();
var arrLength = ARR.length; // always precompute array length
for(var i=0; i<ARR.length; i++){
var temparr1 = ARR[i].split('=') ;
var NUM = temparr1[0] ;
// that is actually equal to the object that I created
// in the constructor.
that[NUM] = new Array() ;
var temparr2 = temparr1[1].split('/|') ;
temparr2.shift() ;
var arrayLength = temparr2.length; // always precompute length
for(var x=0; x<arrayLength; x++){
var temparr3 = temparr2[x].split('??') ;
that[NUM][temparr3[0]] = temparr3[1] ;
}
}
}
}
xmlhttp.open("POST", URL, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", PARAMS.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(PARAMS);
Also, as noted in the comments, when you are iterating over the values in an array for a for loop, you should not use array.length directly, as the length method will be called every time through the loop, adding a great deal of unnecessary work.
Also, as #Guffa notes, the function that adds the values is called asynchronously, so the properties will not exist until the XmlHttpRequest has completed, and that is a very dangerous anti-pattern. I would strongly advise against it. It's better to have your constructor make a synchronous request for the data.