ajax基本概念

客户端和浏览器（服务器）

负责存放和对外提供资源的电脑，叫做服务器

负责获取和消费资源的电脑，叫做客户端

url地址：统一资源定位符，通过url地址，才能正确定位到资源的存放位置

        组成部分：①客户端与服务器之间的通信协议   

                          ②存有该资源的服务器名称   

                          ③资源在服务器上具体的存放位置

 基于开发者工具查看通信过程

打开调试面板--netWork---Doc

数据是网页的灵魂

网页中请求数据：

let xhrObj = new XMLHttpRequest()

 资源请求方式：

        get请求：获取，根据URL地址，从服务器获取HTML文件、Css文件、js文件、图片文件、数

据资源等

        post请求：发送，向服务器提交数据。

                例如 : 登录   时向服务器提交的登录信息、注册   时向服务器提交的注册信息        添加

                用户时向服务器提交的用户信息等各种数据提交操作

Ajax

网页通过ajax和服务器进行数据传输

jquery中的ajax

$.get()：发起get请求，将服务器上的资源请求到客户端

$.get(url,[data],[callback])

url: 请求的资源地址，必选

data：请求资源时要携带的参数，可选

callback：请求成功时的回调函数，可选

$.post():发起post请求，向服务器提交数据

$.post(url,[data],[callback])

url: 提交数据的地址，必选

data：要提交的数据，可选

callback：数据提交成功时的回调函数，可选

$.ajax(): 

s.ajax({
        type: ''，       // 请求的方式，例如 GET 或 POST
        url: ' '，         //请求的ORL地址
        data: { }，       // 这次请求要携带的数据
        success: function(res) { }       //请求成功之后的回调函数
})

接口

使用Ajax请求数据时,被请求的URL地址就叫做 数据接口(简称接口) .同时,每个接口必须有请求方式。

接口测试工具

PostMan 、vscode插件 postcode

用测试工具测试post接口的步骤

 接口文档

组成部分：

1. 接口名称: 用来标识各个接口的简单说明，如登录接口,获取图书列表接口等。

2. 接口URL:接口的调用地址。

3. 调用方式: 接口的调用方式，如GET或POST.

4. 参数格式: 接口需要传递的参数，每个参数必须包含参数名称、参数类型、是否必选、参数说明

 这4项内容。

5. 响应格式: 接口的返回值的详细描述, 一般包含数据名称、数据类型、说明3项内容。

6. 返回示例 (可选) :通过对象的形式,例举服务器返回数据的结构。

表单

表单组成部分：

表单标签<form></form>    表单域（文本框、密码框、复选框、文本域、下拉框等）、表单按钮

 属性：

action：提交表单时，向何处发送表单数据，属性值为url地址，这个地址专门负责接收表单提交过来的数据

target：在何处打开url地址，_blank：在新窗口打开地址，默认在原地址打开

method：何种方式将表单数据提交到url地址中 get/post

        get方式通过url地址的形式，把表单数据提交到action URL

enctype：在发送表单之前，如何对数据进行编码。默认编码所有字符

        form-data：在使用包含文件上传控件时必须要加

表单同步提交：

缺点：

①<form>表单同步提交后, 整个页面会发生跳转,跳转到action URL所指向的地址，用户体验很差。

②<form> 表单同步提交后,页面之前的状态和数据会丢失.

解决方案：

表单只负责采集数据，Ajax 负责将数据提交到服务器。

阻止表单默认提交行为：

通过ajax提交表单数据

快速获取表单数据：

serialize() 函数  好处 : 可以一次性获取到表单中的所有的数据。

在使用serialize() 函数快速获取表单数据时，必须为每个表单元素添加name属性
 

XMLHttpRequest

使用xhr发请求

get请求：①创建xhr对象    ②调用xhr.open()函数      ③调用xhr.send()函数   ④监听

xhr.onreadystatechange事件

post请求：①创建xhr对象   ②调用xhr.open()函数     

③设置Content-Type属性(固定写法)   

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

④调用xhr.send()函数，同时指定要发送的数据，查询字符串的形式

⑤监听xhr.onreadystatechange事件

readyState属性：

表示当前Ajax请求所处状态   ===4   表示数据已经彻底完成或失败

查询字符串：

定义:   查询字符串(URL 参数)是指在URL的末尾加上用于向服务器发送信息的字符串(变量) .

格式:   将英文的 ? 放在URL的末尾，然后再加上参数=值，想加上多个参数的话，使用&符号进行

分隔。以这个形式，可以将想要发送给服务器的数据添加到URL中。

url编码和解码：

encoeURI（'拜纳姆'）

decodeURI（'%........'）

数据交换格式：

 XML：

XML和HTML的区别

●HTML被设计用来描述网页上的内容,是网页内容的载体

●XML被设计用来传输和存储数据，是数据的载体

缺点

①XML格式臃肿，和数据无关的代码多，体积大,传输效率低

②在Javascript中解析XML比较麻烦

       

JSON

JSON的本质是字符串

作用：JSON是一种轻量级的文本数据交换格式,在作用上类似于XML,专门用于存储和传输数据

但是JSON比XML更小更快、更易解析。

结构：对象和数组

对象结构：

1. 对象结构在JSON中表示为{ }括起来的内容。

2. 数据结构为{ key: value, key. value, .. }的键值对结构。

3. key 必须是使用英文的双引号包裹的字符串。

4. value 的数据类型可以是数字、字符串（双引号包裹）、布尔值、null、 数组、对象6种类型。

数组结构：

1. 数组结构在JSON中表示为[ ]括起来的内容。

2. 数据结构为[ "java", "javascript", 30, true ..[ ],{ }]
3. 数组中数据的类型可以是数字、字符串、布尔值、null、 数组、对象6种类型。

JSON和JS对象互转：

要实现从JSON字符串转换为JS对象，使用JSON.parse()方法  ------反序列化

要实现从JS对象转换为JSON字符串，使用JSON.stringify()方法    -------序列化

XMLHttpRequest Level2

新功能：

①可以设置HTTP请求的时限

②可以使用FormData对象管理表单数据

③可以上传文件

④可以获得数据传输的进度信息 

axios

发起GET请求

发起POST请求

使用axios直接发起GET请求

使用axios直接发起POST请求

同源和跨域

同源：

两个页面的协议、域名 、端口号都相同，则两个页面具有相同的源

同源策略：浏览器的安全功能，不允许a网站的javascript和不同源的c网站之间的资源交互

①无法读取非同源网页的Cookie. LocalStorage 和IndexedDB

②无法接触非同源网页的DOM

③无法向非同源地址发送Ajax请求。

跨域：

两个页面的协议、域名 、端口号只要有一个不相同，就是跨域

出现跨域的根本原因: 浏览器的同源策略不允许非同源的URL之间进行资源的交互。

浏览器对跨域请求进行拦截：

 实现跨数据请求：JSONP 和 CORS

JSONP：

只支持GET请求

JSONP 的实现原理：就是通过<script> 标签的src属性,请求跨域的数据接口,并通过函数调用的形

式，接收跨域接口响应回来的数据。

jquery发起ISONP请求： 指定  dataType：‘jsonp’

        自定义JSONP的参数和回调函数名称：

//  发送到服务端的参数名称，默认值为callback
jsonp: 'callback' ,
//  自定义的回调函数名称，默认值为jQueryxxx 格式
jsonpCallback: ' abe',

防抖和节流

防抖策略(debounce)：

当事件被触发后，延迟n秒后再执行回调,如果在这n秒内事件又被触发,则重新计时。（每次开始都是重新开始，总要执行一段 固定的频率）

防抖应用场景：

用户在输入框中连续输入一串字符时，可以通过防抖策略,只在输入完后,才执行查询的请求,这样可以有效减少请求次数，节约请求资源;

实现输入框防抖：

定义防抖函数，在触发事件时立即清除函数

缓存：

如果用户已经发送过相同的数据请求，就直接将缓存中的数据取出，不用再次请求

节流策略(throttle)

可以减少一段时间内事件的触发频率。（从开始到结束中间的这一段时间触发无效）

节流的应用场景：

①鼠标连续不断地触发某事件(如点击)，只在单位时间内只触发一次;

②懒加载时要监听计算滚动条的位置，但不必每次滑动都触发,可以降低计算的频率,而不必去浪费CPU资源;

节流阀：

节流阀为空,表示可以执行下次操作;不为空，表示不能执行下次操作。

当前操作执行完，必须将节流阀重置为空,表示可以执行下次操作了。

每次执行操作前，必须先判断节流阀是否为空。

防抖和节流的区别

●防抖:如果事件被频繁触发,防抖能保证只有最后一次触发生效! 前面N多次的触发都会被忽略!
●节流:如果事件被频繁触发,节流能够减少事件触发的频率，因此,节流是有选择性地执行部分事件!
 

http协议

通信：信息的传递和交换

通信三要素：通信主体、内容、方式

通信协议：通信双方采用事先约定好的格式来发送和接收消息。

HTTP协议：超文本传输协议--网页内容的传输协议。它规定了客户端与服务器之间进行网页内容

传输时,所必须遵守的传输格式。

HTTP交互模型：请求/响应

HTTP请求（消息）：客户端发送到服务器的请求（的消息），叫做HTTP请求（消息）

        组成部分：请求行、请求头部、空行、请求体

                请求行：请求方式、url 、HTTP协议版本

                请求头部：由多行键/值对组成，键和值之间用英文冒号分隔

                 空行：在最后一个请求头后面，用来分隔请求头和请求体

                请求体：存放的是通过post方式提交到服务器的数据，只有POST请求才有请求体，GET没有。

HTTP请求方法：用来表明要对服务器上的资源执行的操作。GET/POST/增删改查

 

HTTP响应消息：

        组成部分：状态行、响应头部、空行、响应体

                状态行：HTTP协议版本、状态码、状态码的描述文本

HTTP响应状态码：

用来标识响应的状态。响应状态码会随着响应消息一起被发送至客户端浏览器,

浏览器根据服务器返回的响应状态码,就能知道这次HTTP请求的结果是成功还是失败了。

        组成及分类：由三位数组成，第一个数字定义了状态码的类型，后两个对状态码进行细分

                响应头部：用来描述服务器的基本信息。响应头部由多行键/值对组成，每行的键和值之

间用英文的冒号分隔。

                空格：分隔响应头部和响应体

                响应体：存放的是服务器响应给客户端的资源内容。