1.XMLHttpRequest
1.1XMLHttpRequest的概念
- XMLHttpRequest是浏览器内置的一个构造函数。所以使用的时候需要 new
- 作用:基于 new 出来的 XMLHttpRequest 实例对象,可以发起 Ajax 的请求
- axios 中的 axios.get()、axios.post()、axios() 方法,都是基于 XMLHttpRequest(简称:XHR) 封装的
1.2XMLHttpRequest的实现步骤
- 创建xhr对象。** let xhr = new XMLHttpRequest();**
- 调用xhr.open()函数。xhr.open(‘请求类型’,‘地址’);
- 调用xhr.send()函数。xhr.send();
- 监听load事件。xhr.addEventListener(‘load’,function(res){console.log(res.response)});
1.3GET请求的参数
- get请求的参数直接写在路径末尾。‘?a=1&b=2&c=3’
1.4POST请求的参数
- 参数是字符串格式
xhr.setRequestHeader(‘content-type’,‘application/x-www-form-urlencoded’);
xhr.send(‘a=1&b=2&c=3’); - 参数是对象格式
xhr.setRequestHeader(‘content-type’,‘application/json’);
xhr.send(`{“a”:1,“b”:2,“c”: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注意事项
- 属性名必须使用双引号包裹
- 字符串类型的值必须使用双引号包裹
- JSON 中不允许使用单引号表示字符串
- JSON 中不能写注释
- JSON 的最外层必须是对象或数组格式
- 不能使用 undefined 或函数作为 JSON 的值
3.jQuery中的ajax
- $.get()请求
$.get(‘地址’,{id:2},function(res){ console.log(res) }); - $.post()请求
$.post(‘地址’,{参数},function(res){ console.log(res) }); - $.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)指的是:单位时间内,频繁触发同一个操作,只执行第一次
- 作用:减少逻辑执行的次数