前端

主要通过 html、css、javascript 来完成用户交互和视觉效果的实现

后端

主要通过各大后台语言 包括但不限于 java、php、aps.net、nodejs 等来实现业务功能以及接口

数据交互


想开发一个网站，我们一般分前端、后端，由于后端一般会提供服务，前端需要与后端进行通讯请求后台服务、接口返回的数据。

数据格式

  • JSON
1
2
3
4
JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 是轻量级的文本数据交换格式
JSON 独立于语言 *
JSON 具有自我描述性，更易理解
  • XML
1
2
XML 指可扩展标记语言
XML 被设计用来传输和存储数据

Ajax

1
2
3
Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据,在不重新加载整个页面的情况下并局部更新网页的技术。

表单提交

Form 表单可以将前端的数据向服务器传递（前后端数据交互）
表单向服务器传输数据的时候，
如果服务器没有响应、服务器错，或者服务器响应慢，我们就会停留一个白屏界面
如果服务区成功响应，网页会被刷新，导致整个页面重绘，造成没有必要性能开销

表单提交只有两种传输方式

  • GET
  • POST

对于用户来讲，这种体验是非常糟糕的
发生了白屏、重绘、回流这种新功能消耗比较的高的操作，所以 XmlHttpRequest 局部刷新这项技术，很快就面世了。

XmlHttpRequest 对象

XmlHttpRequest 对象是浏览器用来请求服务器提供的接口，又由于浏览器有很多厂商，标准不同

  • ActiveXObject 微软在 ie5 第一个提供了异步请求数据的方案，但是后来在 IE7+也同时支持 XmlHttpRequest
  • XmlHttpRequest 其他包括 chrome firfox safari 支持 XmlHttpRequest

xmlHttpRequest 的应用

由于该对象比较基础，不太适合直接在项目当中使用，所以一些社区和框架对其进行了封装
最佳实践：

  • Ajax （jquery 提供了一个叫做 ajax 的方法，是 XmlHttpRequest 的封装和实现）
  • Axios（社区提供了一个叫做 axios 的包，支持 es6 的模块化 export、import，同时支持客户端、nodejs 服务器，请求拦截、响应等功能）
    • 浏览器端，是 XmlHttpRequest 的封装和实现
    • nodejs 服务端，是 http.request 的封装和实现

编码处理

由于系统不同、浏览器内核的差异，前后端进行数据交互时，有些特殊字符经过浏览器解析，最后到服务端结果可能不一致，这个时候我就需要使用编码，统一去规范这些差异问题。

编码：

  • encodeURI
  • encodeURIComponent

解码：

  • decodeURI
  • decodeURIComponent

编码实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
class Ajax {
  constructor(opt = {}) {
    // 定义默认配置
    const DEFAULT_OPTION = {
      // 请求方式
      TYPE: "GET",
      // 同步、异步请求
      SYNC: true,
      //
      OPTIOIN: {}
    };
    this.options = {
      url: opt.url,
      async: opt.async ? opt.async : DEFAULT_OPTION.SYNC,
      opt: Object.assign(DEFAULT_OPTION.OPTIOIN, opt.opt),
      type: opt.type ? opt.type : DEFAULT_OPTION
    };
    if (this.options.url !== undefined) {
      return this.request(this.options);
    }
  }
  /*
  	* url 请求地址
    * type 请求类型
    * params 请求参数
    * async 同步、异步请求
  */
  request({ url, type, params = {}, async = true }) {
    // xhr全面支持promise
    return new Promise((resolve, reject) => {
      // 判断浏览器支持情况创建xhr对象
      const xhr = window.XMLHttpRequest
        ? new XMLHttpRequest()
        : new ActiveXObject("Microsoft.XMLHTTP");
			// 发起请求
      xhr.open(type, url, async);
      xhr.onreadystatechange = function () {
        // if (xhr.readyState !== 4) return reject(`${url} 请求失败！`);
        // state http请求状态 4
        // status 状态码 200
        if (xhr.readyState === 4 && xhr.status === 200) {
          let data;
          // 通过try/catch 解析json字符串
          try {
            data = JSON.parse(xhr.responseText);
          } catch (err) {
            data = xhr.responseText;
          }
          resolve(data);
        }
      };
      // 判断请求状态
      if(type.toUpperCase()==="POST"||type.toUpperCase()==="POST"){
        // post|put请求是通过x-www-form-urlencoded模式向服务器传递数据
        // 所以一定要设置请求头
        xhr.setRequestHeader(
          "Content-type",
          "application/x-www-form-urlencoded"
        );
        xhr.send(params);
      }
      else {
        xhr.send(null);
      }
    });
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
class Axios extends Ajax {
  constructor() {
    super(arguments[0]);
  }
  // serilize 将对象序列化为url字符串
  format(params) {
    let tmp = "";
    for (let key in params) {
      tmp += `${encodeURI(key)}=${encodeURI(params[key])}&`;
    }
    // 截取最后一位字符串有下面几种方式
    // console.log(tmp.substring(0, tmp.length - 1));
    // console.log(tmp.substr(0, tmp.length-1));
    // console.log(tmp.slice(0, tmp.length - 1));
    // console.log(tmp.substring(0, tmp.lastIndexOf("&")));
    return tmp.substring(0, tmp.lastIndexOf("&"));

    // 利用es6的api完成
    // let tmp = "";
    // let entries = Object.entries(params);
    // entries.forEach(param => {
    //   tmp += `${param[0]}=${param[1]}&`;
    // });
    // return tmp.substring(0, tmp.lastIndexOf("&"));
  }
  get(url, opt = {}, type = "GET") {
    if (opt.params) {
      url += url.includes("?")
        ? this.format(opt.params)
        : "?" + this.format(opt.params);
    }
    return this.request({ url, type });
  }
  post(url, opt = {}, type = "POST") {
    if (opt) {
      return this.request({ url, opt, type });
    }
  }
  put(url, opt, type = "PUT") {
    if (opt) {
      return this.request({ url, opt, type });
    }
  }
  delete(url, opt, type = "DELETE") {
    if (opt) {
      return this.request({ url, opt, type });
    }
  }
}