[ Day 21 ] - 认识 JS 原生写法处理 AJAX

JS 原生写法处理 AJAX

XMLHttpRequest

透过建立一个XMLHttpRequest物件，开启一个 URL 并发送请求，此为较为传统的方式
范例如下

// 建立一个 XMLHttpRequest 物件
let xhr = new XMLHttpRequest();

// 使用 open() 发送请求，并且需要带入三个参数
// 参数分别是 HTTP方法、处理请求的网址、取得资料的方式（同步/非同步）
xhr.open('GET','URL',true);

// 送出请求，小括号内可带入其他参数进行传送
xhr.send();

// 从服务器取得资料後的处理
xmr.onload = function() {
  // 处理回传资料的程序码
  console.log('成功');
};
xhr.onerror = function (err) {
  console.log('错误', err)
};

Fetch

直接进入范例！

使用 Fetch 发送请求范例如下

fetch('发送请求的URL')
  .then(function(response) {
    // 成功结果的处理
  }).catch(function(err) {
    // 错误结果的处理
  })

使用 Fetch 发出请求，会回传一个包含 response 物件的 promise

以下范例使用 https://randomuser.me/api/

fetch('https://randomuser.me/api/')
  .then(function(response) {
    console.log(response);
  }).catch(function(err) {
    console.log('错误', err);
  })

执行结果

如何从 response 取得需要的资料

回传的 response 可以透过以下几种方式取得资料

arrayBuffer()：将资料转成二进制的资料
blob()：将资料转成 blob 物件
formData()：将资料转成 formData 物件
json()：将资料解析为 JSON
text()：将资料转成 text 格式

将 response 转成 JSON 格式

fetch('https://randomuser.me/api/')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
  console.log(myJson);
  })
  .catch(function(err) {
    console.log('错误', err);
  })

执行结果