网络请求之 AJAX 和 fetch

发表于 分类于 ，

ajax

XMLHttpRequest 对象

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest
用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest
对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

1
2
3
4
5
6
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

Get 请求

简单的请求

1
2
xmlhttp.open("GET", "demo_get.asp", true);
xmlhttp.send();

GET 方法发送信息, 携带信息

1
2
xmlhttp.open("GET", "demo_get2.asp?fname=Bill&lname=Gates", true);
xmlhttp.send();

POST 请求

1
2
3
4
xmlhttp.open("POST", "ajax_test.asp", true);
// 向请求添加 HTTP 头。header: 规定头的名称  value: 规定头的值
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为
true。

fetch

https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

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
29
30
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>W3Cschool</title>
  </head>
  <body>
    <p>点击按钮执行 <em>displayDate()</em>函数.</p>
    <button id="myBtn">点这里</button>
    <script>
      const ddd = document.getElementById("myBtn");
      console.log(ddd);
      ddd.onclick = function () {
        displayDate();
      };

      function displayDate() {
        fetch("https://osp.newchinalife.com/ydbq/cust/update/check")
          .then(function (response) {
            return response.json();
          })
          .then(function (myJson) {
            console.log(myJson);
            document.getElementById("demo").innerHTML = JSON.stringify(myJson);
          });
      }
    </script>
    <p id="demo"></p>
  </body>
</html>

记录

ajax 请求，避免缓存解决方法

解决缓存最直接的方法就是给请求的 URL
后面加上一个随机参数（***.action?random=Math.random()或者直接加一个时间参数。

如果是使用 jquery 则可以设置 cache:false;

参考

JavaScript Fetch 简单使用指南 - Mr.
Ma’s Blog