Simple AJAX help request: significance of "+=" applied to string

StackOverflow https://stackoverflow.com/questions/21715287

Question

I am just beginning to learn AJAX and have a very newb question. I am reading the book "AJAX & PHP: Building Responsive Web Applications" by Packt Publishing, Darie et al.

Ch. 2, Page 50 shows the code for a very simple asynchronous call with XMLHttpRequest.

The code is below. My question is, what does the "+=" javascript operator do in this code, such as in the example:

myDiv.innerHTML += "Request status: 1 (loading) <br/>

This W3schools page shows that it is used to add strings together: http://www.w3schools.com/js/js_operators.asp

But, what would the above example look like if it were added together? From a newb's perspective, it doesn't really make sense. I don't understand what this would be, if it were concatenated together.

myDiv.innerHTML += "Request status: 1 (loading) <br/>

Hence, I am hoping someone can help this newb understand what is happening.

Here is all the code along with its explanation, verbatim from the book. See the last part of the code to address my question about the usage of the "+=" javascript operator on strings.:

Time for Action—Making Asynchronous Calls with XMLHttpRequest

1- In the foundations folder, create a subfolder named async.

2- In the async folder, create a file called async.txt, and add the following text to it

Hello client!

3- In the same folder create a file called async.html, and add the following code to it

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
  <head>
    <title>AJAX Foundations: Using XMLHttpRequest</title>
    <script type="text/javascript" src="async.js"></script>
  </head>
  <body onload="process()">
    Hello, server!
    <br/>
    <div id="myDivElement" />
  </body>
</html>

4- Create a file called async.js with the following contents

 // holds an instance of XMLHttpRequest
  var xmlHttp = createXmlHttpRequestObject();
// creates an XMLHttpRequest instance
  function createXmlHttpRequestObject()
  {
 // will store the reference to the XMLHttpRequest object
    var xmlHttp;
 // this should work for all browsers except IE6 and older
    try
    {
 // try to create XMLHttpRequest object
      xmlHttp = new XMLHttpRequest();
    }
    catch (e)
    {
 // assume IE6 or older
      var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",
              "MSXML2.XMLHTTP.5.0",
              "MSXML2.XMLHTTP.4.0",
              "MSXML2.XMLHTTP.3.0",
              "MSXML2.XMLHTTP",
              "Microsoft.XMLHTTP");
 // try every prog id until one works
      for (var i = 0; i < XmlHttpVersions.length && !xmlHttp; i++)
      {
        try
        {
 // try to create XMLHttpRequest object
          xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
        }
        catch (e) {
        }
      }
    }
 // return the created object or display an error message
    if (!xmlHttp)
      alert("Error creating the XMLHttpRequest object.");
    else
      return xmlHttp;
  }
 // called to read a file from the server
  function process()
  {
 // only continue if xmlHttp isn't void
    if (xmlHttp)
    {
 // try to connect to the server
      try
      {
 // initiate reading the async.txt file from the server
        xmlHttp.open("GET", "async.txt", true);
        xmlHttp.onreadystatechange = handleRequestStateChange;
        xmlHttp.send(null);
      }
 // display the error in case of failure
      catch (e)
      {
        alert("Can't connect to server:\n" + e.toString());
      }
    }
  }
 // function that handles the HTTP response
  function handleRequestStateChange()
  {
 // obtain a reference to the <div> element on the page
    myDiv = document.getElementById("myDivElement");
 // display the status of the request
    if (xmlHttp.readyState == 1)
    {
      myDiv.innerHTML += "Request status: 1 (loading) <br/>";
    }
    else if (xmlHttp.readyState == 2)
    {
      myDiv.innerHTML += "Request status: 2 (loaded) <br/>";
    }
    else if (xmlHttp.readyState == 3)
    {
      myDiv.innerHTML += "Request status: 3 (interactive) <br/>";
    }
 // when readyState is 4, we also read the server response
    else if (xmlHttp.readyState == 4)
    {
 // continue only if HTTP status is "OK"
      if (xmlHttp.status == 200)
      {
        try
        {
 // read the message from the server
          response = xmlHttp.responseText;
 // display the message
          myDiv.innerHTML += "Request status: 4 (complete). Server said: <br/>";
          myDiv.innerHTML += response;
        }
        catch (e)
        {
 // display error message
          alert("Error reading the response: " + e.toString());
        }
      }
      else
      {
 // display status message
        alert("There was a problem retrieving the data:\n" +
                xmlHttp.statusText);
      }
    }
  }
Was it helpful?

Solution 

myDiv.innerHTML += "Request status: 1 (loading) <br/>";

is actually equal to:

myDiv.innerHTML = myDiv.innerHTML + "Request status: 1 (loading) <br/>";

So += means: take the value of the variable on the left, add (or when you are talking about strings, concatenate) the value on the right to it, and then load it back to the variable on the left.

Oh, and stop using w3chools, they have nothing to do with the W3C, they are nothing official, and a bad resource anyways. If you want Javascript (or CSS, HTML, DOM, etc.) reference, try MDN.

For example, they have a quite nice table on explaining what these shorthand assignment operators like += do, might have helped you a lot.

OTHER TIPS

It is adding the text to the element called myDiv. Is like writing the text between the <div> and </div> tags.

Uses += because he wants to append the text instead of replacing it. Upon your code, it will go writing the different request statuses as they happen.

I'm assuming the myDiv object in your javascript code represents the <div id="myDivElement" /> in your html code.

If there was html content inside of <div id="myDivElement">....</div>, the += operator would tell javascript to append to that content instead of replace it.

I found an interesting passage which helps address the original post's question, just now, in reading:

“Modern JavaScript: Develop and Design.” (c) Larry Ullman. 2012.

“The second part of the JavaScript definition says that JavaScript is a weakly typed language, meaning that variables and data can be easily converted from one type to another. For example, in JavaScript, you can create a number and then convert it to a string:

var cost = 2;
cost += ' dollars'; // cost is now a string: "2 dollars”

“In a strongly typed language, the creation of a new variable, such as cost, would also require indicating its strict type. Here is how the variable declaration “and assignment would be done in ActionScript, a language otherwise very similar to JavaScript: var cost:int = 2; // cost must be an integer!

Moreover, in a strongly typed language, attempts to convert a number to a string (as in the JavaScript code) would generate an error. Some programmers appreciate the flexibility that weakly typed languages offer; other programmers consider weak typing to allow for sloppy coding. To be fair, bugs can occur because of implicit type conversion. (JavaScript is also called dynamically typed, because conversions can happen automatically, as in the above code.) But if you’re aware of type conversions as you program, the potential for bugs will be mitigated and you can take full advantage of the language’s flexibility.”

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top