Ryan Shang

生死看淡，不服就干

0%

发表于 分类于

说到跨域就不得不提一个东西——同源策略。

什么是同源策略？
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指”协议+域名+端口”三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略限制以下几种行为：

  1. Cookie、LocalStorage 和 IndexDB 无法读取
  2. DOM 和 Js对象无法获得
  3. AJAX 请求不能发送

虽然同源策略提高了安全性，但是业务和开发中总会遇到需要跨域的场景，今天大概记录下常见的跨域方式的原里，具体实现待以后有机会补充。

阅读全文 »

发表于 分类于

这几天看到一个面试题：

已知高度，完成一个三栏布局，左侧200px，右侧200px，中间自适应。

题目看起来不难，第一时间能想起来三种方案：Float、Absolute和Flex，后来发现还有两种：Table和Grid，所以来记录下。

首先写下公共的CSS样式：

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
html * {
  margin: 0;
  padding: 0;
}
.left {
  background: red;
  width: 200px;
}
.center {
  background: yellow;
}
.right {
  background: blue;
  width: 200px;
}
.container {
  min-height: 100px;
  margin: 20px;
  width: 100%;
}
.left-center-right {
  min-height: 100px;
}
.left-center-right>div {
  min-height: 100px;
}
阅读全文 »

发表于 分类于

记录下自己封装的Ajax。

Ajax四步骤：

  1. 创建一个XHR对象
  2. 打开一个链接地址
  3. 监听请求状态
  4. 发送数据
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
let ajax = (options) => {
  // 将传入的参数和默认值合并
  let extend = (_old, _new) => {
    let obj = {};
    for (let key in _old) {
      if (!_old.hasOwnProperty(key)) continue;
      if (!/^(cache|async)$/.test(key)) {
        obj[key] = _new[key] || _old[key];
      } else {
        obj[key] = key in _new ? _new[key] : _old[key];
      }
    }
    return obj;
  };

  // 判断请求的url里是否有?，若有说明已有传输的数据，再添加时以&隔开，若没有?则添加?
  let hasSearch = (url) => url = url.indexOf('?') > -1 ? '&' : '?';

  // 把对象{name:'Ryan',age:20}转个成一个uri格式字符串'name="Ryan"&age=20
  let encodeObjURI = (data) => {
    let str = '';
    for (let key in data) {
      str += `${key}=${encodeURIComponent(data[key])}&`;
    }
    str = str.slice(0, str.length - 1);
    return str;
  };
  let _default = {
    type: 'get',
    url: null,
    async: true,
    cache: true,
    data: null,
    dataType: 'text',
    success: null,
    error: null
  };

  _default = extend(_default, options);
  let { type, url, async, cache, data, dataType, success, error } = _default;

  // 1.创建ajax对象
  let xhr = new XMLHttpRequest();
  // 对get系列方式判断 get|delete|head
  let regGet = /^(get|delete|head)$/i;
  // 对post系列方式进行判断
  let regPost = /^(post|put)$/i;

  if (!regGet.test(type) && !regPost.test(type)) return;
  // 数据存在，则把数据放在url后
  if (data) {
    if (Object.prototype.toString.call(data) === '[object Object]') {
      data = encodeObjURI((data)); // 对象转换成uri格式字符串
    }
    if (regGet.test(type)) {
      url += `${hasSearch(url)}${data}`;
      data = null;
    }
  }
  // 处理缓存，若是get方式并且不需要缓存 cache = false
  if (regGet.test(type) && cache === false) {
    url += `${hasSearch(url)}_=${Math.random()}`;
  }
  // 2.打开一个链接地址
  xhr.open(type, url, async);

  // 3.监听请求
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {
      let result = xhr.responseText;
      switch (dataType) {
        case 'json':
          result = 'JSON' in window ? JSON.parse(result) : eval('(' + result + ')');
          break;
        case 'xml':
          result = xhr.responseXML;
          break;
      }
      success && success(result);
    }
    if (xhr.readyState === 4 && /^(4|5)\d{2}$/.test(xhr.status)) {
      error && error(xhr);
    }
  };

  // 4.发送数据
  xhr.send(data); // 只能是字符串，get方式为null，post方式才把数据放在请求体里
};