网络请求AJAX

1. AJAX 介绍

​ Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3] 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

2. AJAX 的实现方式介绍网络

目前前端进行网络请求有两种方式，XHR和fatch。

对XHR进行封装的组件有很多，常见的有axios，jquery。

备注：XHR（XMLHttpRequest）

（建议使用axios。）

2.1. 优缺点

XHR

缺点：

  1. API用法繁琐。
  2. 没有关注分离的设计思想。

fetch

优点：

  1. 关注分离的设计思想。
  2. API相对于XHR更简单。
  3. fetch是浏览器原生支持的，使用fetch可以不用引用http的类库即可实现。

缺点：

  1. 老版浏览器兼容问题。（IE系列是完全不支持的，主流浏览器的早起版本也不支持，所以如果在项目中使用需要做兼容方案处理。）

3. 原生JS 实现 AJAX

直接使用XHR(XMLHttpRequest)。

1
2
3
4
5
6
var xhr = new XMLHttpRequest();xhr.open("get",url, true);xhr.send(null);xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status == 200){
            alert(xhr.responseText);        }
    }
}

4. axios 实现 AJAX

前往 github （详情请查看axios Github 项目README.md 文件。）

4.1. 安装

Using npm:

1
$ npm install axios

Using bower:

1
$ bower install axios

Using yarn:

1
$ yarn add axios

Using jsDelivr CDN:

1
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Using unpkg CDN:

1
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

4.2. API demo

1
2
3
4
// Send a POST requestaxios({
  method: 'post',  url: '/user/12345',  data: {
    firstName: 'Fred',    lastName: 'Flintstone'  }
});
1
2
3
4
5
// GET request for remote image in node.jsaxios({
  method: 'get',  url: 'http://bit.ly/2mTM3nY',  responseType: 'stream'})
  .then(function (response) {
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
  });

5. JQuery 实现 AJAX

1
2
3
4
$.ajax({
  url: 'url',  type: 'get',  success: function(){
  }
})

6. Fetch 实现 AJAX

1
2
3
4
5
try {
  const response= await fetch(url)
  const data = await response.json()
} catch (error) {
  console.log('请求出错',error);}

Fetch 更多参数:

1
2
3
fetch(url, {
  body: JSON.stringify(data), // must match 'Content-Type' header  cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached  credentials: 'same-origin', // include, same-origin, *omit  headers: {
    'user-agent': 'Mozilla/4.0 MDN Example',    'content-type': 'application/json'  },  method: 'POST', // *GET, POST, PUT, DELETE, etc.  mode: 'cors', // no-cors, cors, *same-origin  redirect: 'follow', // manual, *follow, error  referrer: 'no-referrer', // *client, no-referrer})

参考文档