http相关面试题

1.封装ajax步骤

1.创建xhr对象
2.初始化一个异步请求
3.监听onreadystatechange事件，等到xhr的readyState等于4的时候，并且xhr.status等于200，就是ajax请求返回的结果
这里有两种方式封装返回值，一个是用回调函数，另外一个是用promise
function ajax(url，cb) {
  return new Promise((resolve, reject) => {
    // 创建一个XHR对象
    const xhr = new XMLHttpRequest()
    // 初始化一个异步请求(还没发请求)
    xhr.open('GET', url, true)
    // 绑定状态改变的监听
    xhr.onreadystatechange = function () { 
        /*
        ajax引擎得到响应数据后
        	将xhr的readyState属性指定为4
        	将响应数据保存在response / responseText属性上
        	调用此回调函数
        */
        
      // 如果状态值不为4, 直接结束(请求还没有结束)
      if (xhr.readyState !== 4) {
        return
      }
      // 如果响应码在200~~299之间, 说明请求都是成功的
      if (xhr.status>=200 && xhr.status<=299) {
        // 指定promise成功及结果值
        // 此处也可以用回调函数 
        // cb(JSON.parse(xhr.responseText))
        resolve(JSON.parse(xhr.responseText)) // 属性值哪来的?
      } else { // 请求失败了
        // 指定promise失败及结果值
        reject(new Error('request error staus '+ request.status))
      }
    }
    xhr.send()
  })
}

2.dom事件

// 事件传播流程
1.捕获阶段（由外到内） 2.目标事件发生阶段 3.冒泡事件（由内到外，冒泡到顶级元素）
// 基于事件冒泡所以有了事件委托，将事件绑定到父元素上

3.跨域是浏览器限制

// 跨域到底是什么：浏览器要求网页和server必须同源，
比如，浏览器地址：
目标地址： <http://www.haha.com:8081/xxx>
目标请求地址：<http://www.haha.com:8080/yyy>
加载image/link/script不受同源策略限制

// JSONP原理
用js新建一个script标签，然后绑定上src属性带上请求参数
const script = document.createElement('script');  
// 设置script元素的src属性，其中包含了要调用的函数名和数据URL  
script.src = 'http://localhost:3000/data?callback=handleResponse';  
// 将script元素添加到DOM中，这会触发请求  
document.body.appendChild(script);  
// 只能用get请求
// 服务端cors原理
// 开发阶段node的代理服务器
// 上线的话nginx反向代理

从输入url到渲染出页面的过程

// dns解析
// tcp链接
// 发请求，接受服务器的响应
// 解析数据，显示页面
// 断开链接

理解重排和重绘

// 更新dom活style会导致页面发生回流（重绘）
// resize事件，修改元素，修改style,字体大小

//修改颜色，背景色，visiblity,重绘

页面刷新与缓存， 常规刷新不影响，强制刷新=》不适用缓存

区别cookie与session

• cookie保存在浏览器端(前台可以操作)
• session保存在服务器端(前台不能操作)
• session依赖于cookie(session的id以cookie的形式保存在浏览器端)
• 如何实现关闭浏览再打开访问, 还是同一个会话(能得到前面的session对象)?
• 后台将保存session id的cookie指定为持久化cookie setMaxAge(1000* 60*60) 服务器端指定