Ajax

华良华影
190 阅读13分钟

一、服务器

服务器的本质是一台电脑

 

作用：

存储一个网站的文件（HTML、CSS、JS、图片、音乐...）

提供网站的文件给用户

 

如何获得服务器

购买

租赁

 

资源：

服务器上的网页（HTML文件）、图片、音乐、视频、字体文件、CSS文件、JS文件、等等称之为资源，所以资源代指服务器上存储的内容

 

网页中的数据，也是服务器对外提供的一种资源

 

1.1客户端

指Web浏览器

 

作用：将互联网世界中的Web资源加载、并呈现到浏览器窗口中供用户使用

 

常见客户端浏览器：

image.png

 

1.2 URL地址（同一资源定位符）

表示服务器上每一个资源的确切位置

服务器上的每个资源，都对应着独一无二的URL地址

 

数据是服务器上的资源

对数据的操作（增删改查），也对应着不同的URL地址

 

1.3客户端与服务器通信的过程

分为请求-响应两个步骤，

请求：客户端通过网络去找服务器要资源的过程

响应：服务器把资源通过网络发送给客户端的过程

  image.png

 

1.4 Ajax

是浏览器中的技术，用来实现客户端网页请求服务器的数据

  image.png

二、请求方式

 

客户端浏览器在请求服务器上的数据时，根据操作性质（增删改查）的不同，可以分为5种常见操作

  image.png

 

三、 Ajax基础用法

3.1  axios

专注于数据请求的库

中文官网地址：https//www.axios-http.cn/

英文官网地址：https//www.npmjs.con/package/axi…

 

语法：

Axios（{配置对象}）.then（请求成功以后的回调函数）

image.png

 

3.2 基于axios发起get请求

image.png

 

Get请求订单查询参数

如果想指定查询的条件，可以通过params选项来指定查询的参数

image.png

image.png

 

3.3基于axios发起post请求

使用axios发起post请求时，只需要将method属性的值设置为‘post’，URL地址改为‘/api/addbool’（具体请求方式和地址参考接口文档，以文档为准）

image.png

 

3.4  get和post方式在发送请求时的差异

1.对于请求行：get有参数需要在url中拼接参数，post不需要

2.对于请求头：get不用设置请求头，post方式要根据传递的参数格式的不同设置不同的请求头

3.对于请求体：get没有体，post方式的参数需要在请求体中传递，注意要配置正确的请求头的设置

 

四、接口

使用Ajax请求数据时，被请求的URL地址，就叫数据接口（接口或API接口）

每个接口必须有对应的请求方式

 

4.1接口文档

接口的使用说明书，是调用接口的依据

 

格式：

image.png

 

五、network工具

开发者工具中的网络面板

可以抓取到所有的网络请求，包括ajax请求

可以使用该工具查看当前ajax请求的详细信息

 

5.1 network面板介绍

image.png

 

5.2 network面板设常用置

1.隐藏时间轴

image.png

2.禁用浏览器缓存

image.png

3. 模拟网络

No throttling不限速

Fast 3G 快速3G

Slow 3G 慢速3G

image.png

 

4.显示请求方式

image.png

 

5.3 查看请求状态

image.png

200表示成功

pending表示等待（可能网络不好或者断网）

4xx和5xx都表示不同程度的错误

Failed表示失败

 

5.4查看请求方式和完整地址

image.png

 

5.5查看传输到服务器的数据

image.png

5.6查看服务器响应结果

image.png

 

六  form表单

主要负责数据采集功能

组成三部分：表单标签、表单域、表单按钮

 

6.1表单标签

HTML的

就是表单标签，是一个容器，用来将网页上指定的区域划定为表单区域

 

6.2表单域

提供采集用户信息的渠道

 

注：每个表单域必须包含name属性，否则用户填写的信息无法被采集

 

6.3表单按钮

当表单数据填写完毕后，用户点击表单按钮，会触发表单的提交操作，从而把采集到的数据提交给服务器

 

注：

1. type= ‘ submit ’表示提交按钮

2. tpye属性的默认值就是submit，因此type= ‘ submit ’可以省略不写

 

6.3 标签的属性一览表

最重要的3个属性action、method、enctype

image.png enctype属性只能搭配post提交方式使用，如果是get提交，则enctype没有意义

 

以get方式提交表单数据

在标签上，通过action属性指定提交的URL地址，通过method属性指定提交的方式为get

image.png

 

注：由于method属性的默认值是get，因为method = ‘ get ’可以省略

 

以post方式提交表单数据

在标签上，通过action属性指定提交的URL地址，通过method属性指定提交的方式为post，并通过enctype属性指定数据的编码方式为application/x-www-form-urlencoded

image.png

 

注：由于enctype的默认值是application/x-www-form-urlencoded，因此enctype可以省略

 

表单提交的问题：

表单既负责采集数据，又负责把数据提交到服务器，表单的默认提交行为会导致页面的跳转

解决方案：

表单只负责采集数据

Ajax负责将采集的数据提交到服务器

 

6.4 jQuery的serialize（）函数

能够一次性获取到表单中采集到的数据

语法：

$( ‘ 表单元素的选择器’ ).serialize（）；

image.png

 

注：在使用serialize（）函数快速获取表单数据时，必须为每个表单域添加name属性

 

该方法是jQuery封装的，使用时必须引入jQuery

使用serialize（），各表单域必须有name属性

使用该方法得到的结果是一个查询字符串结构：name=value&age=value

该方法能够获取隐藏域的值，不能得到禁用状态的值，

不能得到文件域中的文件信息，不能完成文件上传

 

七、axios请求方法的别名

常用的请求方式：get、post、put、patch、delete

 

简化别名：

axios.get（url [ , config ]）

axios.delete（url [ , config ]）

axios.post（url [ , data [ , config ] ]）

axios.put（url [ , data [ , config ] ]）

axios.putch（url , [ , data [ , config ] ]）

image.png

 

axios.get（）

image.png

 

axios.post（）

image.png

 

八、axios全局配置&拦截器

8.1去哪聚配置请求根路径

在url地址中，协议：//域名：端口对应的部分叫做“请求根路径”

 

好处：提供项目的可维护性，全局配置根路径后，后续的所有请求都可以使用全局配置的根路径

 

语法：

axios.defaults.baseURL =  ‘ 请求根路径 ‘

image.png

 

8.2拦截器

用来全局拦截axios的每一次请求与响应

可以把每个请求中，某些重复性的业务代码封装到拦截器中，提高代码的复用性

image.png

 

image.png  

image.png  

九、FormData

是浏览器的对象，用于管理表单数据

作用和jQuery中的serialize（）作用一样，用于快速收集表单数据

收集指定表单中拥有name属性的表单元素的value值，生成二进制流数据，这种格式的数据可以直接作为axios请求时的参数

并且可以将创建的FormData对象直接提交给接口

image.png

 

9.1 FormData的API方法

在提交数据前，可以使用下列API方法对数据进行查看和修改

image.png

 

9.2  FromData和serialize的区别

共同点：

1. 都需要设置表单各项的name属性

2. 都能快速收集表单数据

3. 都能够获取到隐藏域（ <input type = ‘ hidden  /’> ）的值

4. 都不能获取禁用状态（disable）的值

 

不同点：

1. FormData属于原生的代码：serialize是jQuery封装的方法

2. FormData可以收集文件域（ <input type = ‘ file ’> ）的值，而serialize不能，如果有文件上传，必须要使用FormData

3. 得到的结果的数据类型不一样

 

十、文件域

10.1文件对象

取得文件对象

image.png

 

10.2本地预览

image.png

 

10.3追加到FormData，实现文件上传

image.png

 

十一、请求报文和响应报文

客户端与服务器通信的过程是基于请求与响应的

请求报文规定了客户端以什么格式把数据发送给服务器

响应报文规定了服务器以什么格式把数据响应给客户端

 

11.1请求报文

格式：

由请求行、请求头部、空行和请求体4个部分组成

image.png

image.png

 

注：

在浏览器中，get请求比较特殊，只有请求头，没有请求体

在浏览器中，post、put、patch、delete请求既有请求头，也有请求体

 

11.2响应报文

格式：

由状态行、响应头部、空行和响应体4个部分组成

image.png  

image.png

 

11.3 URL参数

常用的5种请求方式，都可以在URL后面携带请求参数

由于URL的长度有限制，所以请求参数一般都比较小，比如不能做文件上传

常用的请求参数：

/api/xxx？参数=值&参数=值   （这种格式的字符串叫查询字符串，所以这种参数叫查询参数）

image.png

 

/api/xxx值/值    （Restful风格的接口用这种参数）

image.png

 

11.4请求体

除get请求外，其他4种常用请求方式，都可以设置请求体

请求体的大小没有限制，所以可以提交大量的数据

常用的请求体格式：

参数=值&参数=值  （查询字符串格式）

image.png  

请求头：Content-Type：application/x-ww-form-urlenoded

 

‘ { “ id “ : 1 , “ name “ : “ gundam “ } ’  （JSON格式）

image.png

请求头：Content-Type：application/JSON

 

New Form（）  （FormData对象格式）

image.png

请求头：Content-Type：mutipart/form-data：xxsd随机字符

 

11.5 http响应状态码

由三位数字组成，用来标识响应成功与否的状态

作用：客户端浏览器根据响应状态码，即可判断出这次http请求是否成功还是失败

image.png

 

响应状态码和业务状态码

1. 所处位置不同：

在响应头的状态行中所包含的状态码，或者请求列表中的Status，叫做响应状态码

image.png

 

在响应体的数据中所包含的状态码，叫做业务状态码

image.png

 

2. 表示的结果不同

响应状态码只能表示这次请求的成功与否

业务状态码用来表示这次业务处理的成功与否

 

3. 通用性不同：

响应状态码是由http协议规定的，具有通用性，每个不同的状态码都有其标准的含义，不能乱用

image.png

 

业务状态码是后端程序员自定义的，不具有通用性

image.png

 

十二、XMLHttpRequest（XHR）

是浏览器内置的一个构造函数

作用：基于new处理的XMLHttpRequest实例对象，可以发起ajax请求

axios中的axios.get（）、axios.post（）、axios（）方法，都是基于XMLHttpRequest（XHR）封装出来的

 

12.1使用XMLHTTPRequest发起get请求

步骤：

1. 创建xhr对象

2. 调用xhr.open（）函数

3. 调用xhr.send（）函数

4. 监听load事件

 

 

12.1.1请求时携带URL参数或提交请求体

URL参数，只能拼接在URL地址后面

请求体，放到send（）里面

image.png

 

12.1.2提交请求体数据，需指定Content-Type头

 

 

十三、数据交换格式

服务器端与客户端之间数据传输的格式

1. XML（很少用）

2. JSON（主流）

 

13.1  JSON

是一种数据交换格式，本质上是用字符串的方式来表示对象或数组类型的数据

image.png

 

JSON数据的格式：

1. 对象格式

2. 数组格式

语法要求：

1. 属性名必须使用双引号包裹

2. 字符串类型的值必须使用双引号包裹

3. JSON中不允许使用单引号表示字符串

4. JSON中不能写注释

5. JSON的最外层必须是对象或者数组格式

6. 不能使用undefined或函数作为JSON的值

 

13.1.1对象格式的JSON数据

最外层使用 { }进行包裹，内部的数据为 ” key ” : “ value ” 的键值对结构

Key必须使用英文的双引号进行包裹

Value的值只能是字符串、数字、布尔值、ull、数组、对象类型

 

13.1.2数组格式的JSON数据

最外层使用 [ ] 进行包裹，内部的每一项数据之间使用英文的，分隔

每一项的值类型只能是字符串、数字、布尔值、null、数组、对象

 

13.2序列化和反序列化

序列化：把真实数据转为字符串的过程

反序列化：把字符串转为真实数据的过程

 

十四、同源策略和跨域

 

14.1同源

指2个URL地址有相同的协议，主机名，端口号

image.png

 

14.2同源策略

是浏览器提供的一个安全功能

浏览器的同源策略规定：不允许非同源URL之间进行资源交互

image.png

 

14.3跨域

两个URL的协议、主机名、端口号没有完全一致，就是跨域

image.png

 

浏览器允许发起跨域请求，但跨域请求回来的数据，会被浏览器拦截，无法被页面获取到

image.png

 

14.4突破浏览器跨域限制的方案

JSONP和CORS是实现跨域数据请求的两种技术方案

image.png  

注：JSONP在实际开发中很少会用到，CORS是跨域的主流技术解决方案

 

CORS用到了XMLHttpRequest对象，发起的是纯正Ajax请求

JSONP方案没有用到XMLHttpRequest对象，JSONP不是真正的AJax技术

只要用到了XMLHttpRequest对象，发起的就是Ajax请求

 

14.4.1  CORS

是解决跨域数据请求的终极解决方案

 

CORS技术需要浏览器和服务器同时支持

1. 浏览器要支持CORS功能

2. 服务器要开启CORS功能

 

原理：

服务器端通过Access-Control-Allow-Origin 响应头，来告诉浏览器当前的API接口是否允许跨域请求

image.png

 

优势：

1. CORS是真正的Ajax请求，支持get、post、delete、put、patch等常见Ajax请求

2. 只需要后端开启CORS功能即可，前端代码无需做任何改动

 

14.4.2  JSONP

JSONP是实现跨域数据请求的一种技术解决方案，只支持get请求，不支持post、delete等其他请求

 

在实际开发中很少被使用

 

1.jsonp的原理本质上利用了Script标签的src属性的天然跨域特性

2.它在向后台接口发起请求的时候，传递一个客户端存在的函数名称，服务器响应该函数的调用形式，并且拼接相应的数据

3.客户端接收服务器的响应数据之后，以js语法进行解析，从而获取后台的数据

4.可以看到，jsonp跨域和异步对象没有任何的关系，并且只能发起get请求

5.它严重的依赖服务器的配合

 

十五、防抖和节流

15.1防抖

频繁触发某个操作时，只执行最后一次

  image.png

 

本质是利用了延时器

 

let input = document.querySelector('input')

let tid = null

input.addEventListener('input',function(){

clearTimeout(tid)

     tid = setTimeout(function(){

          axios ({

            method:'get',

            url:'www.itcbc.com:3006/api/getbook…'

          }).then(res => {

            console.log(res);

          })

     },1000)

  })

 

15.2节流

单位时间内，频繁触发同一个操作，只会触发1次

image.png

 

设置一个变量，触发事件时，先做判断，如果是true才继续，是false就不执行

 

let button = document.querySelector('button')

let falg = true

button.addEventListener('click', function() {

   if(!falg){

      return

   }

   falg = false

   setTimeout(function(){

   console.log(123)

   falg =true

   },2000)

})

avatar
文章
阅读
粉丝