本系列文章主要用于介绍获取网络资源的三种方式：Ajax、Fetch和WebSocket

1. Ajax（Asynchronous Javascript + XML），异步js和xml

注：ajax基本被淘汰，现在基本是fetch或者axios
曾经的页面及其简单。页面类似于公告栏，文字加图片。打开地址拿到资源展示即可。什么？你说你还想要点击交互？刷新页面吧。而作为上古技术的ajax的出现，第一次实现了无需刷新也能重新发送请求获取数据。
提到ajax就一定会涉及到XHR（XMLHttpRequest）。下面时经典的ajax请求写法

const xhr = new XMLHttpRequest()

xhr.onreadystateChange = function() {
    // 状态码4代表响应完成
    if (xhr.readyState === 4) {
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
            // 响应有效
            console.log(xhr.responseText)
        } else {
            alert('fail>>>>')
        }
    }
}

xhr.open('get', 'http://www.baidu.com', '是否异步布尔值')
// open之后，send之前设置请求头
xhr.setRequestHeader('diy', 'd')
// 显式的设置响应的文件类型，避免响应返回的实际数据和MIME属性值的不一致，导致数据获取失败。
xhr.overrideMimeType('text/html')
xhr.send(null)

这里提一下get和post请求。除了有无请求body外，有一个性能方面的区别。发送相同数量的数据，get请求几乎比post请求快两倍，因为post是两请求。

2. XHR是出了名的难用，于是，支持期约（promise）和服务线程（service worker）的fetch应运而生。

fetch作为浏览器内置的API，可以像如下这般直接使用：

  <script>
    fetch('http://localhost:3000/testAPI')
    .then((res) => {
      console.log('fetch获取数据>>>', res)
    })
  </script>
//   或者稍微包装一下，拿到其数据
async function getData() {
    const xx = await fetch('http://localhost:3000/testAPI')
    console.log('xx>>>',xx)
    return xx.json()
}
getData().then((res) => {
    console.log('data???', res)  
})
parser

跨域资源共享

提及资源请求就不得不提一嘴CORS（cross origin resource sharing），跨域资源共享，一种安全机制。请求的页面域名、协议、端口三者中的任意一个同源（请求api地址）不一致，都会触发这玩意以示失败。需要注意的是触发的节点。什么节点触发了这玩意？实际上是在后端反悔了数据，浏览器收到后被浏览器拦截了下来。
这是合理的设计但是，有些应用场景不需要这种机制。后端写的某个接口，就是想要共享给所有人怎么操作？

  • Access-allow-origin-control设置为‘*’即可，又或者设置为可以共享的地址。请求的origin用来标记具体的前端地址。

  • 图片探测。利用img标签不受跨域的限制。缺点在于纯纯的单向，无法接收数据

  • JSONP。利用script标签的不受限制的特性。标准代码如下：

    const handlejsonp = function(response) {
    console.log('response>>>', response)
}
<script src="http://www.xxx.com/json/?callback=handlejsonp"></script>
// express后端的对应接口返回如下：
...
...
res.send('handlejsonp' + '(' + data + ')')
// 用习惯了axios，看到这玩意怪怪的

    script脚本的加载会获得字符串： handlejson(数据)。实质就是传一个函数名给到后段，后段将数据给到该函数塞回给前端，前端会直接执行handlejson函数。此方法只支持get，so。。。。

  • iframe处理。主域相同子域不同

  • proxy代理
    就是devserver中利用类似httpproxy这样的插件，配置服务器地址。等同于所有向当前源发请求的，都会走代理的地址（即后端地址）。
    注意，此方法是开发时链条使用，真正部署的时候得需要后段用nginx做反向代理。

  • nginx反向代理

你们的项目，是怎么部署的？

前后端没有分离的时代，是不存在跨域的问题的,因为前后端代码都是不熟在同一台服务器，甚至前后端代码就在一个工程项目文件中。后来就分离成了web服务器和数据服务器或者还有图片服务器、音视频服务器。