Javascript updates content asynchronously

Question

I wonder how it is possible that using javascript, images can be loaded asynchronously by changing the src of the img element after the page has been loaded. I thought that AJAX is for things like that(getting data from server without refreshing the page). Please clarify why it is working that way. The images are on server side, so I thought that i should refresh the page before the result will be visible.

Here is a sample code:

<!DOCTYPE html>
<html lang="en">
<head>
<script>
var photos = ["baloon", "game", "cliff"];
function changePhoto() {
    var input=document.getElementById("ph1");
    var iValue=input.value.trim();
    for(var tmp in photos) {
        if(photos[tmp] === iValue){
            var img=document.getElementById("photo");
            img.setAttribute("src", "img/"+iValue+".jpg");
        }
    }
}
</script>
</head>
<body>
  <input class="form-control" id="ph1" type="text" onkeyup="">
  <p>Photo: <span id="txtHint" onclick="changePhoto()"></span></p>
  </div>
  <div class="container" id="photocontainer">
    <img id="photo">
  </div>
</body>
</html>

The dom fires a change event, your browser picks it up and loads the image from the new source... — Icepickle, Oct 15 '15 at 19:46
I would look here: http://stackoverflow.com/a/12714338/1196076 — Rick Burns, Oct 15 '15 at 19:54
Possible duplicate of [Asychronously load images with jQuery](http://stackoverflow.com/questions/4285042/asychronously-load-images-with-jquery) — Rick Burns, Oct 15 '15 at 19:54

Drew Gaynor · Answer 1 · 2015-10-15T19:59:38.060

1

The user agent simply sends a GET request in response to the changing of the src attribute, the same that is done when a page loads initially.

AJAX is a technology that allows for asynchronous requests in JavaScript on the client. Browsers can make any requests they want at any time, as in this case, but without AJAX that couldn't be done in client-side code loaded by a website.

For example, I just changed the src property of an element in a page through Chrome Developer Tools and watched the GET request execute.

edited Oct 15 '15 at 19:59

answered Oct 15 '15 at 19:49

Drew Gaynor

8,292
5
40
53

But its going asynchronously, the page isn't reloading, so what is the purpose of ajax then?. – ContentPenalty Oct 15 '15 at 19:56
@user1816806 That sounds like a good topic for a [new question](http://stackoverflow.com/questions/ask) :) But basically, AJAX is a technology to allow you to make asynchronous requests in _JavaScript_ on the client. Browsers can make any requests they want at any time, but without AJAX that couldn't be done in client-side code loaded by a website. – Drew Gaynor Oct 15 '15 at 19:58
@user1816806 I've also updated my answer with a little more explanation. – Drew Gaynor Oct 15 '15 at 19:59
@ user1816806 Ajax is used for async communication between client and server. You can send some stringified objects etc or another data using it. But there is no need to send images through ajax. – Yuriy Yakym Oct 15 '15 at 20:06
What is confusing me is: "_AJAX (Asynchronous Javascript XML) is a method to dynamically update parts of the UI **without having to reload the page**_". But here the page wasn't reloaded also and there is no ajax. – ContentPenalty Oct 15 '15 at 21:20
@user1816806 Sure, AJAX is **one** method that dynamically updates parts of the UI. It is not the only way that resources can be retrieved without reloading the page. – Drew Gaynor Oct 16 '15 at 02:28

score 0 · Answer 2 · answered Oct 15 '15 at 19:55

What you're doing in your code is not Ajax. Is simple javascript.

To make this work with Ajax you need a server side aplication that actually renders the image or get the contents from an existing file, and after that you show your loaded file on the browser.

Look for a jQuery ajax calls. On the return of the call you can put your code. Like this:

$.ajax({
    url: "SomeUrl/SomeMethod/"
})
.done(function (response) {
    //Do stuff here with the response to show the image
});

Yuriy Yakym · Answer 3 · 2015-10-15T20:10:50.687

When you change src atrribute of an img element browser automatically starts downloading this image asynchronously.

Your code is almost ok. You iterate through array incorrectly. You can try doing it this way instead:

var photos = ["baloon", "game", "cliff"];
function changePhoto() {
    var input=document.getElementById("ph1");
    var iValue=input.value.trim();

    if(photos.indexOf(iValue) > -1) {
        var img=document.getElementById("photo");
        img.setAttribute("src", "img/"+iValue+".jpg");
    }
}

Iterating through array

You can iterate through array for example like this:

for(var i=0; i<photos.length; i++) {
    var photo = photos[i];
    //...
}

or like this:

for(var k in Object.keys(photos)) {
    var photo = photos[k];
    //...
}

Javascript updates content asynchronously

3 Answers3

Iterating through array