关于jquery：Vanilla Javascript版的AJAX


Vanilla Javascript version of AJAX

本问题已经有最佳答案，请猛点这里访问。

当我想要使用的全部是AJAX时，如何删除下载完整的jquery库的需要。 是否有一个较小的文件专注于AJAX或是否有这个代码的Vanilla Javascript版本？

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){

            $.ajax({
                type: 'POST',
                url: 'cookies.php',
                success: function(data) {
                    alert(data);
                }
            });
   });
});
相关讨论

您可以尝试使用XMLHttpRequest，如下所示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<body>

The XMLHttpRequest Object

<button type="button" onclick="loadDoc()">Request data</button>

<p id="demo">
</p>


function loadDoc() {

   var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("demo").innerHTML = this.responseText;
       }
     };

   xhttp.open("POST","cookies.php", true);
   xhttp.send();
}


</body>
</html>

演示：https：//www.w3schools.com/js/tryit.asp？filename = tryjs_ajax_first

参考：https：//www.w3schools.com/js/js_ajax_http_send.asp

您可以使用fetch功能。

以下是链接中的示例：

1
2
3
4
5
6
7
fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });
相关讨论

例如，您可以使用构建获取模块

1
2
3
4
fetch('http://yourapi.com/data')
  .then(response => {
    console.log(response)
  });
相关讨论