Question

我刚开始学习AJAX并且有一个非常新的问题。我正在阅读Packie Publishing，Darie等人的“AJAX＆amp; PHP：构建响应式Web应用程序”一书。

章。 2，第50页显示了使用XMLHttpRequest进行非常简单的异步调用的代码。

代码如下。我的问题是，“+ =”javascript运算符在此代码中的作用是什么，例如：

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

此W3schools页面显示它用于将字符串添加到一起： http://www.w3schools.com/js/js_operators.asp

但是，如果它被加在一起，上面的例子会是什么样子？从newb的角度来看，它并没有多大意义。我不明白这是什么，如果它是连在一起的。

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

因此，我希望有人可以帮助这个新手了解正在发生的事情。

以下是所有代码及其解释，逐字逐句。请参阅代码的最后一部分，以解决有关在字符串上使用“+ =”javascript运算符的问题。：

采取行动的时间 - 使用XMLHttpRequest进行异步调用

1-在基础文件夹中，创建一个名为async的子文件夹。

2-在async文件夹中，创建一个名为async.txt的文件，并将以下文本添加到其中

Hello客户端！

3-在同一文件夹中创建一个名为async.html的文件，并将以下代码添加到其中

<!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-使用以下内容创建名为async.js的文件

 // 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);
      }
    }
  }

Answer 1

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

实际上等于：

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

所以+=意味着：取左边的变量的值，添加（或当你谈论字符串，连接时）右边的值，然后将其加载回变量on左边。

哦，并且停止使用w3chools，它们与W3C无关，它们不是官方的，也是一个糟糕的资源。如果您想要Javascript（或CSS，HTML，DOM等）参考，请尝试MDN。

例如，他们a quite nice table解释了像+=这样的速记赋值运算符可能对你有多大帮助。

Answer 2

它将文本添加到名为myDiv的元素中。就像在<div>和</div>标签之间书写文字一样。

使用+ =因为他想要附加文本而不是替换它。根据您的代码，它会在发生时写出不同的请求状态。

Answer 3

我假设你的javascript代码中的myDiv对象代表你html代码中的<div id="myDivElement" />。

如果<div id="myDivElement">....</div>内有html内容，+=运算符会告诉javascript附加到该内容而不是替换它。

Answer 4

我发现了一篇有趣的文章，有助于解读原帖的问题，刚才在阅读中：

“现代JavaScript：开发和设计。”（c）Larry Ullman。 2012。

“JavaScript定义的第二部分说JavaScript是一种弱类型语言，这意味着变量和数据可以很容易地从一种类型转换为另一种类型。例如，在JavaScript中，您可以创建一个数字，然后将其转换为字符串：

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

“在强类型语言中，创建新变量（例如cost）也需要指明其严格类型。以下是变量声明“和赋值将如何在ActionScript中完成，这是一种非常类似于JavaScript的语言： var cost：int = 2; //成本必须是整数！

此外，在强类型语言中，尝试将数字转换为字符串（如在JavaScript代码中）会产生错误。一些程序员欣赏弱类型语言提供的灵活性;其他程序员认为弱类型允许进行草率编码。公平地说，由于隐式类型转换，可能会发生错误。（JavaScript也称为动态类型，因为转换可以自动发生，如上面的代码所示。）但如果您在编程时意识到类型转换，则可以减轻错误的可能性，并且您可以充分利用语言的灵活性。”

简单的AJAX帮助请求：应用于字符串的“+ =”的重要性

4 个答案: