学习笔记整理

2019-07-09

存放零碎知识点，方便查阅

JSON

允许类型：number, string, boolean, null, object, Array

JSON.stringyfy(obj, [key1, key2, …] | function pretreatment, Serialized format)

JSON.parse(obj, function transform)

操作DOM

查找DOM

  1. document.getElementById(‘id’)
    document.getElementsByClassName(‘className’)
    document.getElementByTagName(‘div’)

  2. document.querySelector(‘#id’)
    document.querySelectorAll(‘div.high > p’)

插入DOM

  1. parentNode.appendChild(childNode)
  2. parentNode.insertBefore(childNode, refNode)
  3. parentNode.innerHTML = childNode
    ⚠️此方法有副作用
    若要添加文本可以使用innerText或textContent(后者返回包括hide的文本)

创建DOM

document.createElement(‘div’)

删除DOM

parentNode.removeChild(childNode)
⚠️删除后，childNode还存在内存中，可以再次被添加到某处

AJAX

兼容浏览器的原生AJAX实现

var request = null;
if(window.XMLHttpRequest) {
  request = new XMLHttpRequest();
} else {
  request = new ActiveXObject('Microsoft.XMLHTTP');
}

if(request != null) {
  request.onreadystatechange = function () {
    if(request.readyState === 4) {
      if(request.status === 200) {
        // success
      } else {
        // fail
      }
    }
  };

  // GET
  request.open('GET', url, true);
  request.send(null);

  // POST
  var data = {key:val};
  request.open('POST', url, true);
  request.send(data);

} else {
  alert('您的浏览器不支持AjAX');
}

浏览器安全限制：协议、域名、端口完全相同才能发送AJAX请求，否则即为跨域。
解决方案:

  1. JSONP(JSON with Padding) ⚠️此实现方法现已废弃
    缺点：只能GET请求。
    实现方式：通过请求script资源实现跨域，<img src />同理。
    请求script资源返回responseFunction({data})，data即为所需的数据。
    responseFunction在当前项目中实现，类似回调函数。

  2. 服务端转发。
    服务端发送请求不存在跨域问题，若要使用跨域数据，可以通过服务端转发。

  3. CORS(cross-origin Resourse Sharing) ⚠️H5以上支持
    在CORS通信过程中，都是由浏览器自动完成。实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
    跨域资源共享 CORS 详解