Ajax学习笔记

一、服务器与客户端

1）网页中如何请求数据

如果需要在网页中请求服务器上的数据资源，则需要用到XMLHttpRequest对象

XMLHttpRequest(简称xhr)是浏览器提供的js成员，通过它，可以请求服务器上的数据资源

最简单的用啊：

var xhrObj = new XMLHttpRequest();

2)资源的请求方式

请求方式有许多种，最常见的是get和post请求

• get请求通常用于获取服务端资源（向服务器要资源） 例如：根据URL地址，从服务器获取HTML文件、CSS文件、JS文件、图片文件、数据资源等
• post请求通常用于向服务器提交数据（往服务器发送资源）例如：登录时向服务器提交的登录信息、注册时向服务器提交的注册信息等

3)Ajax

Ajax的全称是Asynchronous Javascript And XML(异步JavaScript和XML)

通俗理解：利用XMLHttpRequest进行交互

4）JQuery中的Ajax

$.get(url,[data],callback)
$.post(url,[data],callback)
$.ajax({
    type:'',//请求方式,get或post
    url:'',
    data:{},
    success:function(res){ }//回到函数
})

5)接口

使用Ajax请求数据时，被请求的URL地址，就叫做数据接口（简称接口），同时，每个接口必须有请求方式

例如

http://www.liulongbin.top:3006/api/getbooks 获取图书列表的接口（GET请求）

http://www.liulongbin.top:3006/api/addbooks 添加图书列表的接口（POST请求）

二、form表单的基本使用

1）标签的属性

• action属性用来规定当前提交表单时，向何处发送表单数据

• target属性用来规定在何处打开action URL

值	描述
_blank	在新窗口中打开
_self	默认。在相同框架中打开
_parent	在父框架集中打开（很少用）
_top	在整个窗口中打开（很少用）
framename	在指定框架中打开（很少用）

• method属性用来规定以何种方式把表单数据提交到html(get、post，默认get)

• enctype 属性用来规定发送编码

涉及到文件上传操作时，必须将enctype设置为multipart/form-data

默认值为application/x-www-form-urlencoded ，不涉及文件上传不需要改

2)表单的同步提交

通过点击submit按钮，触发表单提交的操作，从而使页面跳转到action URL的行为，叫做表单的同步提交

表单的同步提交的缺点

1. 页面会发生跳转
2. 页面之前的状态和数据会丢失

解决方案：表单只负责采集数据，Ajax负责将数据提交到服务器

三、Ajax加强

1）XMLHttpRequest的基本使用

1.使用xhr发起get请求

​ ①创建xhr对象

​ ②调用xhr.open()函数

​ ③调用xhr.send()函数

​ ④监听xhr.onreadystatechange事件

//1.创建xhr对象
var xhr = new XMLHttpRequst()
//2.调用open函数，指定请求方式与URL地址
xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks')
//3.调用send函数，发起Ajax请求
xhr.send()
//4.监听onreadystatechange事件
xhr.onreadystatechange = function(){
    //4.1监听xhr对象的请求状态(readyState)与服务器响应的状态(status)
    if(xhr.readyState == 4 && xhr.status == 200){
        //数据获取成功
        //4.2打印服务器响应回来的数据
        console.log(xhr.reponseText)
    }
}

2.了解xhr对象的readyState属性

值	状态	描述
0	UNSENT	XMLHttpRequest对象已被创建，但尚未调用open()方法
1	OPENED	open()方法已经被调用
2	HEADERS_RECEIVED	send()方法已经被调用，响应头也已经被接收
3	LOADING	数据接收中，此时response属性中已经包含部分数据
4	DONE	Ajax请求完成，这意味着数据传输已经彻底完成或失败

3.使用xhr发起带参数的GET请求

xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks?id=1') //在后面加问号'?'和参数

这种在URL地址后面拼接的参数，叫做查询字符串

4.查询字符串

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

格式：将英文的?放在URL的末尾，然后再加上参数=值，想加上多个参数的话，使用&符号进行分隔。以这个形式，可以将想要发送给服务器的数据添加到URL中

5.URL编码

URL编码：使用英文字符去表示非英文字符

xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记')
//经过URL编码后
xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=%E%A%5%BF%E6%B8%D8%E8%AE%B0')

浏览器提供了URL编码与解码的API，分别是：

• encodeURI()编码的函数
• decodeURI()解码的函数

6.使用xhr发起POST请求

步骤：

​ ①创建xhr对象

​ ②调用xhr.open()函数

​ ③设置Content-Type属性（固定写法）

​ ④调用xhr.send()函数，同时指定要发送的数据

​ ⑤监听xhr.onreadystatechange事件

//1.创建xhr对象
var xhr = new XMLHttpRequst()
//2.调用open函数，指定请求方式与URL地址
xhr.open('POST','http://www.liulongbin.top:3006/api/addbooks')
//3.设置Content-Type属性（固定写法）
xhr.setRequestHead('Content-Type','application/x-www-form-urlencod')
//4.调用send函数，同时将数据以查询字符串的形式，提交给服务器
xhr.send('bookname=水浒传&author=施耐庵&publisher=天津图书出版社')
//5.监听onreadystatechange事件
xhr.onreadystatechange = function(){
    //4.1监听xhr对象的请求状态(readyState)与服务器响应的状态(status)
    if(xhr.readyState == 4 && xhr.status == 200){
        //数据获取成功
        //4.2打印服务器响应回来的数据
        console.log(xhr.reponseText)
    }
}

2)数据交换格式

数据交换格式，就是服务器端与客户端之间进行数据传输与交换的格式

前端领域，经常提及的两种交换格式分别是XML和JSON，其中JSON用的最多

1.XML

XML全称是Extensible Markup Language，即可扩展标记语言

XML和HTML虽然都是标记语言，但是它们之间没有任何关系

• HTML被设计用来描述网页上的内容，是网页内容的载体
• XML被设计用来传输和存储数据，是数据的载体

XML的缺点

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

②在JS中解析XML比较麻烦

2.JSON

JSON全称是JavaScript Object Notation，即“JavaScript对象表示法”，JSON就是JS中对象和数组的字符串表示法，他使用文本表示一个和JS对象或数组的信息，因此，JSON的本质就是字符串

作用：轻量级的文本数据交换格式，更小、更快、更易解析

3.JSON的两种结构

对象结构：对象结构在JSON中表示为用{}括起来的内容，数据结构为{key:value,key:value,…}的键值对形式，key必须是英文的双引号包裹的字符串，value可以是数字、字符串（也要双引号包裹）、布尔值、null、数组、对象6种属性（不能是undefine、function）

{
    "name":"zs",
    "age":20,
   	"gender":"男"
}

数组结构：数组结构在JSON种表示为[]括起来的内容。数据结构为[“java”,“javascript”,30,true…]。数组种数据的类型可以是数字、字符串（也要双引号包裹）、布尔值、null、数组、对象6种属性（不能是undefine、function）

["java","python","c"]

4.JSON和JS对象的互转

JSON -> obj: JSON.parse() 称作JSON反序列化

var obj = JSON.parse('{"a":"Hello","b":"World"}')
//结果是{a:'Hello',b:'World'}

obj -> JSON: JSON.stringify() 称作JSON序列化

var json = JSON.stringify({a:'Hello',b:'World'})
//结果是'{"a":"Hello","b":"World"}'

3）XMLHttpRequest Level2的新特性

1.旧版XHR的缺点

①只支持文本数据的传输，无法用来读取和上传文件

②传送和接收数据时，没有进度信息，只能提升有没有完成

2.XMLHttpRequest Level2的新功能

①可以设置HTTP请求的时限

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

③可以上传文件

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

3.设置HTTP请求时限

xhr的timeout属性可以设置时限

xhr.timeout = 3000 //3000毫秒

与之配套的还有一个timeout事件，用来指定回调函数

xhr.ontimeout = finction(event){
    alert('请求超时！')
}

4.FormData对象管理表单数据

FormData模拟表单提交

//1.新建FormData对象
var fd = new FormData()
//2.为FormData添加表单项
fd.append('uname','zs')
fd.append('upwd','123456')
//3.创建XHR对象
var xhr = new XMLHttpRequest()
//4.指定请求类型与URL地址
xhr.open('POST','URL')
//5.直接提交FormData对象，与提交网页表单的效果完全一样
xhr.send(fd)

FormData也可以用来获取网页表单的值

//获取表单元素
var form = document.querySelector('#form1')
//监听表单的submit事件
form.addEventListener('submit',cuntion(e)){
    e.preventDefault() //阻止默认提交
    //根据form表单创建FormData对象，会自动将表单数据填充到FormData对象中
    var fd = new DormData(form)
    var xhr = new XMLHttpRequest()
    xhr.open('POST','URL')
    xhr.send(fd)
    xhr.onreadystatechange = function(){
        
    }
}

5.上传文件

①定义UI结构

②验证是否选择了文件

③向FormData中追加文件

④使用xhr发起上传文件的请求

⑤监听onreadystatechange事件

1.定义UI结构

<!-- 1.文件选择框 -->
<input type="file" id="file1" />
<!-- 2.上传按钮 -->
<button id="btnUpload">上传文件</button>
<br />
<!-- 3.显示上传到服务器上的图片 -->
<img src="" alt="" id="img" width="800" />

2.验证是否选择了文件

//1.获取上传文件按钮
var btnUpload = document.querySelector('#btnUpload')
//2.为按钮添加click事件监听
btnUpload.addEventListener('click',function(){
	//3.获取到选择的文件列表
    var files = document.querySelector('#file1').files
    if(files.length <= 0){ //判断是否有文件
        return alert('请选择要上传的文件！')
    }
})

3.向FormData中追加文件

//1.创建FormData对象
var fd = new FormData()
//2.向FormData中追加文件
fd.append('avartor',files[0])

6.显示文件上传进度

可以通过监听xhr.upload.onprogress事件来获取文件的上传进度

var xhr = new XMLHttpRequest()
//监听xhr.upload的onprogress事件
xhr.upload.onprogress = function(e){
    //e.lengthComputable是一个布尔值，表示当前上传的资源是否具有可计算的长度
    if(e.lengthComputable){
		//e.loaded已传输的字节
      	//e,total需传输的字节
        var percentComplete = Math.ceil((e.loaded / e.total) * 100)
    }
}

4)axios

Axios是专注于网络数据请求的库

相比于原生的XMLHttpRequest对象，axios更简单易用

相比于jQuery，axios更加轻量化，只专注于网络数据请求

axios发起get请求的语法

axios.get('url',{params:{/*参数*/}}).then(callback)

axios发起post请求的语法

axios.post('url',{/*参数*/}).then(callback)

直接使用axios发起请求

axios也提供了类似于jQuery中$.ajax()的函数

axios({
    method:'请求类型',
    url:'请求的URL地址',
    data:{/*post数据*/},
    params:{/*GET参数*/}
}).then(callback)

四、跨域和JSONP

1）同源策略和跨域

如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源

同源策略

全称(Same origin policy)是浏览器提供的一个安全功能

MDN官方给定的概念：同源策略限制了从同一个源加载的文档或脚本如何于来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

通俗的理解：浏览器规定，A网站的JavaScript，不允许和非同源的网站C之间，进行资源的交互，例如：

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

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

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

跨域

只要不同源就是跨域

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

如何实现跨域数据请求

主要两种解决方案：JSONP和CORS

JSONP：出现的早，兼容性好，临时解决方案，只支持GET请求

CORS：出现的较晚，是W3C标准，属于跨域Ajax请求的根本解决方案，支持GET和POST请求，缺点是不兼容低版本浏览器

2）JSONP

JSONP（JSON with Padding)是JSON的一种”使用模式“，可用于解决主流浏览器的跨域数据访问的问题

原理：

因此，JSONP的实现原理，就是通过

3）防抖

防抖策略（debounce）是当事件触发后，延迟n秒后再执行回调，如果在这n秒内又被触发，则重新计时

能够保证事件被反复触发的时候回调只触发一次

实现输入框防抖

var timer = null //1.防抖的timer

functiopn debounceSearch(keywords){ //2.定义防抖的函数
    timer = setTimeout(funciton(){
                      //发起JSONP请求
                       getSuggestList(keywords)
                       },500)
}
$('#ipt').on('keyup',function(){
    clearTimeout(timer)
    debounceSearch(keywords)
})

4)节流

节流策略（throttle)，可以减少一段时间内事件的触发频率

节流的应用场景

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

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

五、HTTP协议

1.HTTP协议简介

通信协议（Communication protocol)是指通信的双方完成通信所必须遵守的规则和约定。

通俗的理解：通信双方采用约定好的格式来发送和接收消息，这种事先约定好的通信格式，就叫通信协议

网络内容的传输协议又叫做超文本传输协议（HyperText Transfer Protocol）简称HTTP协议

2.HTTP请求消息的组成部分

HTTP请求消息由请求行(request line)、请求头部(header)、空行和请求体4个部分组成。

请求行的组成

请求头部

请求头部用来描述客户端的基本信息，从而把客户端相关的信息告知服务器

• User-Agent说明当前是什么浏览器
• Content-Type用来描述发送到服务器的数据格式
• Accept用来描述客户端能够接收什么类型的返回内容；
• Accept-Languege用来描述客户端期望接收哪种人类语言的文本内容

请求头由多行键值对组成，每行的键和值之间用英文的冒号分割

空行

最后一个请求头字段的后面是一个空行，通知服务器请求头部至此结束，用来分割请求头和请求体

请求体

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

3.HTTP响应消息

HTTP响应消息由状态行、响应头部、空行和响应体四个部分组成

状态行

状态行由HTTP协议版本、状态码和状态码的描述文本3个部分组成，他们之间用空格隔开

响应头部

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

空行

分割响应头部和响应体

4.HTTP请求方法

HTTP请求方法用来表明要对服务器上的资源执行的操作，最常见的是GET和POST

序号	方法	描述
1	GET	查询
2	POST	新增
3	PUT	修改
4	DELETE	删除
5	HEAD	与GET类似，没有响应体
6	OPTIONS	获取http服务器支持的http请求方法，允许客户端查看服务器的性能，比如ajax跨域时的预检等
7	CONNECT	建立一个到由目标资源标识的服务器的隧道
8	TRACE	沿着目标资源的路径执行一个消息环回测试，主要用于测试或诊断
9	PATCH	是对PUT方法的补充，用来对已知资源进行局部更新

5.HTTP响应状态码

分类	分类描述
1**	信息，服务器收到请求，需要请求者继续执行操作（实际开发中很少遇到）
2**	成功
3**	重定向，需要进一步操作以完成请求
4**	客户端错误，请求包含语法错误或无法完成请求
5**	服务器错误，服务器在处理请求的过程中发生了错误

常见的2**成功相关响应状态码

状态码	状态码英文名称	中文描述
200	OK	请求成功，一般用于GET与POST请求
201	Created	已创建，成功请求并创建了新的资源，通常用于POST或PUT请求

常见的3**成功相关响应状态码

状态码	状态码英文名称	中文描述
301	Moved Permanently	永久移动，请求的资源已经被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新的URI，今后任何新的请求都应使用新的URI代替
302	Found	临时移动，与301类似，但资源只是临时被移动，客户端应继续使用原有的URI
304	Not Modified	未修改，所请求的资源未修改，服务器返回次状态码时，不会返回任何资源（响应消息中不包含响应体），客户端通常会缓存访问过的资源

常见的4**成功相关响应状态码

状态码	状态码英文名称	中文描述
400	Bad Request	1、语法有误 2、请求参数有误
401	Unauthorized	当前请求需要用户验证
403	Forbidden	服务器已经理解请求，但是拒绝执行它
404	Not Found	服务器无法根据客户端的请求找到资源（网页）
408	Request Timeout	请求超时，服务器等待客户端发送的请求时间过长，超时

常见的5**成功相关响应状态码

状态码	状态码英文名称	中文描述
500	Internal Sever Error	服务器内部错误
501	Not Implemented	服务器不支持改请求方法，只有GET和HEAD请求是要求每个服务器必须支持的
503	Service Unavailable	由于超载或系统维护，服务器暂时无法处理客户端请求

五、GIT

1.Git中的三个区域

工作区：处理工作的区域

暂存区：已完成的工作的临时存放区域，等待被提交

Git仓库：最终存放区域

2.Git中的三种状态

已修改(modified)：修改了文件，但还没将修改的结果放到暂存区

已暂存(staged)：表示对已修改文件的当前版本做了标记，使之包含在下次提交的列表种

已提交(committed)：表示文件已经安全地保存在本地的Git仓库中

3.工作区中文件的4种状态

4.跳过使用暂存区域

5.移除文件

6. .gitignore

7.查看提交历史

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3wZzwDDI-1647748587216)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220318212639718.png)]

8.回退到指定版本

9.上传GitHub

10.分支的作用