XML JSON AJAX Fetch Axios的详解

本文内容

1. JSON是什么
2. XML是什么
3. XML 与 JSON的优缺点
4. AJAX是什么以及操作
5. Fetch是什么以及操作
6. Axios是什么以及操作
7. AJAX vs Fetch vs Axios

在介绍JSON和XML之前，先举出简单列子，可以让大家先明白二者的区别和用法。

JSON

var country =
        {
            name: "中国",
            provinces: [
            { name: "黑龙江", citys: { city: ["哈尔滨", "大庆"]} },
            { name: "广东", citys: { city: ["广州", "深圳", "珠海"]} },
            { name: "台湾", citys: { city: ["台北", "高雄"]} },
            { name: "新疆", citys: { city: ["乌鲁木齐"]} }
            ]
        }

XML

<?xml version="1.0" encoding="utf-8" ?>
<country>
  <name>中国</name>
  <province>
    <name>黑龙江</name>
    <citys>
      <city>哈尔滨</city>
      <city>大庆</city>
    </citys>  　　
  </province>
  <province>
    <name>广东</name>
    <citys>
      <city>广州</city>
      <city>深圳</city>
      <city>珠海</city>
    </citys> 　　
  </province>
  <province>
    <name>台湾</name>
    <citys>
      　<city>台北</city>
      　<city>高雄</city>
    </citys>　
  </province>
  <province>
    <name>新疆</name>
    <citys>
      <city>乌鲁木齐</city>
    </citys>
  </province>
</country>

1. JSON是什么

JSON(JavaScript Object Notation)一种轻量级的数据交换格式，具有良好的可读和便于快速编写的特性。可在不同平台之间进行数据交换。JSON采用兼容性很高的、完全独立于语言文本格式，同时也具备类似于C语言的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)体系的行为。这些特性使JSON成为理想的数据交换语

2. XML是什么

扩展标记语言 (Extensible Markup Language, XML) ，用于标记电子文件使其具有结构性的标记语言，可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。 XML使用DTD(document type definition)文档类型定义来组织数据;格式统一，跨平台和语言，早已成为业界公认的标准。XML是标准通用标记语言 (SGML) 的子集，非常适合 Web 传输。XML 提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。

3. XML 与 JSON的优缺点

3.1 XML的优缺点

XML的优点

• 格式统一，符合标准；
• 容易与其他系统进行远程交互，数据共享比较方便。

XML的缺点

• XML文件庞大，文件格式复杂，传输占带宽；
• .服务器端和客户端都需要花费大量代码来解析XML，导致服务器端和客户端代码变得异常复杂且不易维护；
• 客户端不同浏览器之间解析XML的方式不一致，需要重复编写很多代码；
• 服务器端和客户端解析XML花费较多的资源和时间。

3.2 JSON的优缺点

JSON的优点：

• 数据格式比较简单，易于读写，格式都是压缩的，占用带宽小；
• 易于解析，客户端JavaScript可以简单的通过eval()进行JSON数据的读取；
• 支持多种语言，包括ActionScript, C, C#, ColdFusion, Java, JavaScript, Perl,PHP, Python, Ruby等服务器端语言，便于服务器端的解析；
• 在PHP世界，已经有PHP-JSON和JSON-PHP出现了，偏于PHP序列化后的程序直接调用，PHP服务器端的对象、数组等能直接生成JSON格式，便于客户端的访问提取；
• 因为JSON格式能直接为服务器端代码使用，大大简化了服务器端和客户端的代码开发量，且完成任务不变，并且易于维护。

JSON的缺点

• 没有XML格式这么推广的深入人心和喜用广泛，没有XML那么通用性；
• JSON格式目前在Web Service中推广还属于初级阶段。

3.3 XML和JSON的优缺点对比

(1).可读性方面。
JSON和XML的数据可读性基本相同，JSON和XML的可读性可谓不相上下，一边是建议的语法，一边是规范的标签形式，XML可读性较好些。
(2).可扩展性方面。
XML天生有很好的扩展性，JSON当然也有，没有什么是XML能扩展，JSON不能的。
(3).编码难度方面。
XML有丰富的编码工具，比如Dom4j、JDom等，JSON也有json.org提供的工具，但是JSON的编码明显比XML容易许多，即使不借助工具也能写出JSON的代码，可是要写好XML就不太容易了。
(4).解码难度方面。
XML的解析得考虑子节点父节点，让人头昏眼花，而JSON的解析难度几乎为0。这一点XML输的真是没话说。
(5).流行度方面。
XML已经被业界广泛的使用，而JSON才刚刚开始，但是在Ajax这个特定的领域，未来的发展一定是XML让位于JSON。到时Ajax应该变成Ajaj(Asynchronous Javascript and JSON)了。
(6).解析手段方面。
JSON和XML同样拥有丰富的解析手段。
(7).数据体积方面。
JSON相对于XML来讲，数据的体积小，传递的速度更快些。
(8).数据交互方面。
JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。
(9).数据描述方面。
JSON对数据的描述性比XML较差。
(10).传输速度方面。
JSON的速度要远远快于XML。

4. AJAX是什么以及操作

浏览器与服务器之间，采用 HTTP 协议通信。用户在浏览器地址栏键入一个网址，或者通过网页表单向服务器提交内容，这时浏览器就会向服务器发出 HTTP 请求。但如果只想要更新网页对应部分，不重新加载整个页面的话，可以使用AJAX技术。

AJAX 全名 async javascript and XML(异步JavaScript和XML)。通过 JavaScript 的异步通信，向服务器发起HTTP请求，从服务器获取 XML 文档/JSON格式的数据（现在大多都是JSON格式的数据了）从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。用于前后端交互，通过AJAX可以从客户端向服务端发送消息，也可以接受从服务端返回响应信息。需要注意的是，AJAX 不是新的编程语言，而是一种使用现有标准的新方法。默认异步执⾏机制的功能,可以通过设置async来改变同步或者异步。

AJAX可以保证浏览器向服务端发送请求，只要在页面中触发了JS支持的各种事件，请求都可以发送。在浏览器的底层开辟了一条线程，浏览器可以通过这条线程完成与服务端的交互。

同步（async = false）

同步请求是指当前发出请求后，浏览器什么都不能做，必须得等到请求完成返回数据之后，才会执行后续的代码，也就是说，当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面处于一个假死状态，当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态。

异步（async = true）

默认情况下的AJAX为异步。异步请求就当发出请求的同时，浏览器可以继续做任何事，Ajax发送请求并不会影响页面的加载与用户的操作。

AJAX步骤：

1. 创建 XMLHttpRequest 实例
2. 发出 HTTP 请求
3. 接收服务器传回的数据
4. 更新网页数据

AJAX 通过原生的XMLHttpRequest对象发出 HTTP 请求，得到服务器返回的数据后，再进行处理。

XMLHttpRequest对象是 AJAX 的主要接口，用于浏览器与服务器之间的通信。尽管名字里面有XML和Http，它实际上可以使用多种协议（比如file或ftp），发送任何格式的数据（包括字符串和二进制）。

具体步骤

XMLHttpRequest本身是一个构造函数，可以使用new命令生成实例。它没有任何参数。

var xhr = new XMLHttpRequest();

一旦新建实例，就可以使用open()方法指定建立 HTTP 连接的一些细节。

xhr.open('GET', 'http://www.example.com/page.php', true);

上面代码指定使用 GET 方法，跟指定的服务器网址建立连接。第三个参数true，表示请求是异步的。
然后，指定回调函数，监听通信状态（readyState属性）的变化。

xhr.onreadystatechange = handleStateChange;

function handleStateChange() {
  // ...
}

上面代码中，一旦XMLHttpRequest实例的状态发生变化，就会调用监听函数handleStateChange

最后使用send()方法，实际发出请求。

xhr.send(null);

上面代码中，send()的参数为null，表示发送请求的时候，不带有数据体。如果发送的是 POST 请求，这里就需要指定数据体。

一旦拿到服务器返回的数据，AJAX 不会刷新整个网页，而是只更新网页里面的相关部分，从而不打断用户正在做的事情。

注意，AJAX 只能向同源网址（协议、域名、端口都相同）发出 HTTP 请求，如果发出跨域请求，就会报错。

更多XMLHttpRequest对象的实例属性和实例方法参考这里

5. Fetch是什么以及操作

fetch和ajax的功能一样，但是更加简便。fetch并不是对ajax的进一步封装，而是原生的js。

fetch与ajax的不同

• 当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject， 即使响应的 HTTP状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。
• fetch() 可以接受跨域cookies；你也可以使用 fetch() 建立起跨域会话。
• fetch不会发送 cookies。除非你使用了credentials 的初始化选项。

简单的用法是只提供一个参数用来指明想 fetch() 到的资源路径，然后返回一个包含响应结果的promise。

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

更多有关fetch的操作可以参考这里

6. Axios是什么以及操作

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

更多有关axios操作可以参考这里

7. AJAX vs Fetch vs Axios

AJAX优点

• 不需要插件的支持，原生js 就可以使用
• 用户体验好（不需要刷新页面就可以更新数据）
• 减轻服务端和带宽的负担

AJAX缺点：

• 搜索引擎的⽀持度不够，因为数据都不在页面上，搜索引擎搜索不到
• 基于原生XHR开发，XHR本身的架构不清晰
• 不符合关注分离的原则
• 配置和调用方式比较混论，而且基于事件的异步模型不友好

fetch优点：

• 语法简单，更加语义化
• 基于标准Promise实现，支持async/await
• 更加底层，提供的API丰富（request response）
• 脱离了XHR

fetch缺点：

• fetch只对网络请求报错，对400 500都当作成功的请求，服务器返回400 500错误代码的时候并不会reject。
• fetch默认不带cookie需要添加配置
• 不支持abort，不支持超时控制
• 无法办法原生监测请求的进度，而XHR可以。

axios：

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

参考文章：
看这一篇就够了！-Ajax详解
https://www.cnblogs.com/SanMaoSpace/p/3139186.html
https://blog.csdn.net/qq_24099547/article/details/91899248?utm_medium=distribute.pc_relevant.none-task-blog-2_defaultbaidujs_utm_term~default-0.no_search_link&spm=1001.2101.3001.4242.0
https://wangdoc.com/javascript/bom/xmlhttprequest.html#%E7%AE%80%E4%BB%8B