JS基础 - 9｜AJAX、Fetch、JSON程序离不开请求，对于浏览器早期支持AJAX，后面新增了fetch。 AJ

请求数据必不可少，AJAX、Fetch技术层出不穷，那么你知道他们有什么区别吗？

程序离不开请求，对于浏览器早期支持AJAX，后面新增了fetch。

AJAX

AJAX的全称 Asynchronous JavaScript And XML

Asynchronous: 异步

JavaScript：JS语言

XML：可扩展标记语言（EXtensible Markup Language）

在AJAX出现之前，页面都是由后端处理好了，然后在浏览器进行渲染，每次都需要重新渲染。

AJAX出现以后，实现了异步加载，这样就可以实现页面加载完在请求数据，不用每次重新渲染了。

AJAX 并非编程语言。它组合了：

浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）
JavaScript 和 HTML DOM（显示或使用数据）

简单的AJAX封装

function AJAX(param) {
  // 参数处理
  var option = {
    type: 'POST',
    url: '',
    async: true,
    data: null,
    timeout: 10000
  };
  for (var i in param) {
    option[i] = param[i];
  }
  option.type = option.type.toUpperCase();
  var xhr = new XMLHttpRequest();
  // 区分请求方式
  if (option.type === 'POST') {
    xhr.open(option.type, option.url, option.async);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.setRequestHeader('Qsc-Token', params.token);
    xhr.setRequestHeader('Platform', 'qsc_h5/1.2.3');
  } else if (option.type === 'GET') {
    var data = [];
    if (option.data) {
      for (var j in option.data) {
        data.push(j + '=' + option.data[j]);
      }
    }
    xhr.open(option.type, option.url + '?' + data.join('&'), option.async);
  }
  // 请求完成
  xhr.onload = function () {
    if (xhr.readyState === 4) {
      if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
        option.success(JSON.parse(xhr.responseText));
      } else {
        option.error(JSON.parse(xhr.responseText));
      }
    }
  };
  // 超时处理
  xhr.timeout = option.timeout;
  xhr.ontimeout = function (err) {
    option.error(JSON.parse(xhr.responseText));
  };
  // 错误处理
  xhr.onerror = function (err) {
    option.error(JSON.parse(xhr.responseText));
  };
  // 发送数据
  xhr.send(option.type === 'get' ? null : JSON.stringify(option.data));
}

Fetch

fetch用于向 Web 服务器发出 HTTP 请求，是不是和AJAX很像，它们的作用都是向服务器请求资源，但fetch不在需要XMLHttpRequest。

fetch('/url', { method: 'get', headers: {} }).then(function(res) { 
  console.log(res)
}).catch(function(err) {
  console.log(err)
});

对比上面的AJAX封装，fetch显然很简单，同时原生支持promise

虽然很精简，但是fetch也有部分缺点，比如不支持超时设置，不支持取消请求等。

但是可以采用迂回的策略，使用其他的方法实现，这里不具体说明了。

JSON

请求离不开数据传输，JSON更是前后端数据传输中最常见一种数据格式。

JSON 是 JavaScript 对象标记法（JavaScript Object Notation），是一种轻量级的数据交换格式

// JSON
{ "name":"Bill Gates" }

// JS
{ name:"Bill Gates" }

JSON支持两个方法用于数据转换

JSON.parse() 将JSON字符串转换为JSON对象
JSON.stringfy() 将JSON对象转换为JSON字符串

JSON只支持String, Number, Object(JSON对象), Array, Boolean, Null。

所以原生JS的function、undefined、Date都是不支持的。

JS基础 - 9｜AJAX、Fetch、JSON

AJAX

Fetch

JSON

相关文档

相关试题