记录学习ajax（day1）

01.AJAX 概念和 axios 使用

什么是 AJAX ?

使用浏览器的 XMLHttpRequest 对象与服务器通信
浏览器网页中，使用 AJAX技术（XHR对象）发起获取省份列表数据的请求，服务器代码响应准备好的省份列表数据给前端，前端拿到数据数组以后，展示到网页

axios常用请求方法和数据提交

  axios({
    url: '目标资源地址',
    method: '请求方法',
    data: {
  	参数名: 值
    }
  }).then(result => {
    // 对服务器返回的数据做后续处理
  })

axios 错误处理

  axios({
    // ...请求选项
  }).then(result => {
    // 处理成功数据
  }).catch(error => {
    // 处理失败错误
  })

箭头函数和function函数区别?
箭头函数常用做回调函数使用, 它无自己的this, 无arguments对象, 不能被new调用

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么

  1. 浏览器查找域名对应的 IP 地址(DNS 查询：浏览器缓存->系统缓存->路由器缓存->ISPDNS 缓存->根域名服务器) 
  2. 浏览器向 Web 服务器发送一个 HTTP 请求（TCP 三次握手） 
  3. （如果服务器设置了重定向）服务器 301 重定向（从 HTTP://example.com 重定向到 HTTP://www.example.com）
  4. 浏览器跟踪重定向地址，请求另一个带 www 的网址 
  5. 服务器处理请求（通过路由读取资源） 
  6. 服务器返回一个 HTTP 响应（报头中把 Content-type 设置为 'text/html'）
  7. 浏览器进 DOM 树构建
  8. 浏览器发送请求获取嵌在 HTML 中的资源（如图片、音频、视频、CSS、JS 等）
  9. 浏览器显示完成页面 
  10. 浏览器发送异步请求

DOM 事件流与事件委托

1 事件流

事件流：⼜称为事件传播，是⻚⾯中接收事件的顺序。DOM2级事件规定的事件流包括了3个阶段：

事件捕获阶段（capture phase）
处于⽬标阶段（target phase）
事件冒泡阶段（bubbling phase）

事件捕获（Event Capturing）

事件开始由较为不具体的节点接收后，然后开始逐级向下传播到最具体的元素上。

事件捕获的最大作用在于：事件在到达预定⽬标之前就可以捕获到它。

当点击按钮后，在事件捕获的过程中，document 对象会首先接收到这个 click 事件，然后再沿着 DOM 树依次向下，直到 <button>。具体顺序如下：

1. document 对象
2. html 元素
3. body 元素
4. button 元素

事件冒泡（Event Bubbling）

事件开始由最具体的元素（⽂档中嵌套层次最深的那个节点）接收到后，开始逐级向上传播到较为不具体的节点。

  <head> 
	<title>Document</title> 
  </head>

  <body> 
	<button>按钮</button> 
  </body> 

</html>

如果点击了上面页面代码中的 <button> 按钮，那么该 click 点击事件会沿着 DOM 树向上逐级传播，在途经的每个节点上都会发生，具体顺序如下：

1. button 元素
2. body 元素
3. html 元素
4. document 对象

2 事件委托

事件委托: 利用了事件冒泡的机制，在较上层位置的元素上添加一个事件监听函数，来管理该元素及其所有子孙元素上的某一类的所有事件。

示例
<ul id="list"> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> </ul>

<script type="text/javascript">
	// ⽗元素 
	var list = document.getElementById('list');

	// 为⽗元素绑定事件，委托管理它的所有⼦元素li的点击事件 
	//适用场景：在绑定大量事件的时候，可以选择事件委托
	//事件委托可以减少事件注册数量，节省内存占⽤!
	//当新增⼦元素时，⽆需再次做事件绑定，因此非常适合动态添加元素   (vue解析模板时, 会对新创建的元素, 额外进行绑定的)
	list.onclick = function (event) {
		var currentTarget = event.target;
		if (currentTarget.tagName.toLowerCase() === 'li') {
			alert(currentTarget.innerText)
		}
	}
</script>