将jQuery代码转换为本机Javascript

Question

如果我将我的jQuery代码转换成Javascript版本。我有两个页面: page.html和side.html，page.html从side.html文档中获取div id和内容。它工作得很好，但我不喜欢在我的项目中使用jQuery。如何将代码修改为原生Javascript？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
 <head>
  <title>Useless</title>
  <script type='text/javascript' src='jquery-3.1.1.min.js'></script>
 </head>
 <body>
   Hello
   <script type="text/javascript">
      jQuery.ajax({
              url: "side.html",
              success: function(result) {
                var html = jQuery('<div>').html(result);
                  alert(html.find("div#a").attr("id"));
                  alert(html.find("div#a").html());
                  alert(html.find("div#b").attr("id"));
                  alert(html.find("div#b").html());
             },
         }); 
  </script>
 </body>
</html>

我写了这段代码，但它不工作:(

var html = new XMLHttpRequest();
 html.open("POST","side.html", true);
 success: function(result) {
 var html = ('<div>').html(result);
  alert(html.find("div#a").attr("id"));
  alert(html.find("div#a").html());
  alert(html.find("div#b").attr("id"));
  alert(html.find("div#b").html());
}

Answer 1

从您的尝试来看，您可能认为jQuery和原生API几乎相同。他们不是，所以需要更多的改变。

注意下面代码中的注释。还要注意，我删除了alert调用，而使用了console.log，因此一定要打开开发人员控制台。

// Create and open the XHR object
var xhr = new XMLHttpRequest();
xhr.open("POST","side.html", true);

// Attach an event handler that fires when the requested content has loaded
xhr.addEventListener("load", function(result) {
  var d = document.createElement('div'); // Create a new element
  d.innerHTML = xhr.responseText;        // Add the response text

  var a = d.querySelector("#a"); // Fetch the `a` element
  var b = d.querySelector("#b"); // Fetch the `b` element

  console.log(a.id, a.innerHTML); // Display the id and content of each
  console.log(b.id, b.innerHTML);
});

xhr.send();

有一个小的实用程序集合来减少冗余代码是很常见的。这里不需要太多东西，但一般来说，使用一些函数来缩短DOM选择和创建方法并不是一个坏主意。