Ajax笔记03 XMLHttpRequest

1.XMLHttpRequest

1.1XMLHttpRequest的概念

• XMLHttpRequest是浏览器内置的一个构造函数。所以使用的时候需要 new
• 作用：基于 new 出来的 XMLHttpRequest 实例对象，可以发起 Ajax 的请求
• axios 中的 axios.get()、axios.post()、axios() 方法，都是基于 XMLHttpRequest（简称：XHR） 封装的

1.2XMLHttpRequest的实现步骤

1. 创建xhr对象。** let xhr = new XMLHttpRequest();**
2. 调用xhr.open()函数。xhr.open(‘请求类型’，‘地址’);
3. 调用xhr.send()函数。xhr.send();
4. 监听load事件。xhr.addEventListener(‘load’,function(res){console.log(res.response)});

1.3GET请求的参数

• get请求的参数直接写在路径末尾。‘?a=1&b=2&c=3’

1.4POST请求的参数

1. 参数是字符串格式
   xhr.setRequestHeader(‘content-type’,‘application/x-www-form-urlencoded’);
   xhr.send(‘a=1&b=2&c=3’);
2. 参数是对象格式
   xhr.setRequestHeader(‘content-type’,‘application/json’);
   xhr.send(`{“a”:1,“b”:2,“c”:3});
3. 输出
   xhr.onload = function () {console.log(JSON.parse(xhr.response)); }

2.数据交换格式

• 数据交换格式，就是服务器端与客户端之间数据传输的格式。两种数据交换格式：XML和JSON。XML出现的比较早，现在大家常用JSON。
• JSON（全称：JavaScript Object Notation）是一种数据交换格式，它本质上是用字符串的方式来表示对象或数组类型的数据。

2.1 对象格式的JSON数据

2.2数组格式的JSON数据

2.3注意事项

1. 属性名必须使用双引号包裹
2. 字符串类型的值必须使用双引号包裹
3. JSON 中不允许使用单引号表示字符串
4. JSON 中不能写注释
5. JSON 的最外层必须是对象或数组格式
6. 不能使用 undefined 或函数作为 JSON 的值

3.jQuery中的ajax

1. $.get()请求
   $.get(‘地址’,{id:2},function(res){ console.log(res) });
2. $.post()请求
   $.post(‘地址’,{参数},function(res){ console.log(res) });
3. $.ajax()请求
   $.ajax({method:‘请求方式’，url:‘地址’，data:{参数}，
   success:function(res){ console.log(res) };})

4.同源与跨域

• 同源指的是两个 URL 地址具有相同的协议、主机名、端口号
• 跨域指的是两个 URL 地址的协议、主机名、端口号三者中有一个或多个不同
• 同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能。浏览器的同源策略规定：不允许非同源的 URL 之间进行资源的交互

4.1跨域配置解决方案

• 突破浏览器跨域限制有两种方案：JSONP 和 CORS
  

4.2CORS（服务端技术，暂时不研究）

• CORS 是解决跨域数据请求的终极解决方案，全称是 Cross-origin resource sharing。该技术需要浏览器和服务器同时支持，二者缺一不可
• 浏览器要支持 CORS 功能（主流的浏览器全部支持，IE 不能低于 IE10）
• 服务器要开启 CORS 功能（需要后端开发者为接口开启 CORS 功能）
• CORS 的两个主要优势：支持 GET、POST、DELETE、PUT、PATCH 等这些常见的 Ajax 请求方式和只需要后端开启 CORS 功能即可，前端的代码无须做任何改动
• CORS 方案用到了XMLHttpRequest对象，发起的是纯正的 Ajax 请求

4.3JSONP（需要服务端配合）

• JSONP 是实现跨域数据请求的一种技术解决方案。它只支持 GET 请求，不支持 POST、DELETE 等其它请求。在实际开发中很少被使用，在面试中可能会问到 JSONP 的原理
• JSONP 方案没有用到 XMLHttpRequest 对象，因此，JSONP 不是真正的 Ajax 技术

5.防抖与节流

5.1防抖

• 防抖（debounce）指的是：频繁触发某个操作时，只执行最后一次
• 作用：减少逻辑执行的次数

5.2节流

• 节流（throttle）指的是：单位时间内，频繁触发同一个操作，只执行第一次
• 作用：减少逻辑执行的次数