Ajax学习笔记

---

服务器基本概念与初始Ajax

1. 客户端与服务器

01-上网的目的

上网的本质：通过互联网形式来获取和消费资源

02-服务器

服务器：上网过程中，负责存放和对外提供资源的电脑

03-客户端

客户端：上网过程中，负责获取和消费资源的电脑

个人电脑中通过安装浏览器的形式，访问服务器对外提供的各种资源

2. URL地址

01-概述

统一资源定位系统URL是因特网的万维网服务程序上用于指定信息位置的表示方法。用于表示互联网中每个资源的唯一位置

02-组成部分

三部分组成：

1. 客户端与服务器的通信协议
2. 该资源的服务器名称
3. 资源在服务器上具体的存放位置

https://baike.baidu.com/item/%E7%BB%9F%E4%B8%80%E8%B5%84%E6%BA%90%E5%AE%9A%E4%BD%8D%E7%B3%BB%E7%BB%9F/5937042?fromtitle=URL&fromid=110640&fr=aladdin

https://：协议

baike.baidu.com：服务器名称

/item/%E7%BB%9F%E4%B8%80%E8%B5%84%E6%BA%90%E5%AE%9A%E4%BD%8D%E7%B3%BB%E7%BB%9F/5937042?fromtitle=URL&fromid=110640&fr=aladdin：资源在服务器上的具体存放位置

3. 分析网页打开过程

01-客户端与服务器通信过程

用户电脑

1. 打开浏览器
2. 输入要访问的网络地址
3. 回车，向服务器发送资源请求

web服务器

1. 服务器收到客户端发来的资源请求
2. 服务器在内部处理这次请求，找到相关资源
3. 服务器吧找到的资源，响应发送给服务器

注意

1. 服务器与客户端通信过程分为 请求-处理-响应 三步骤
2. 网页每个资源都是通过 请求-处理-响应 的方式从服务器获取回来的

客户端发送请求，服务器处理这次请求，服务器响应客户端

02-基于浏览器开发者工具分析通信过程

1. 打开Chrome浏览器
2. F12打开开发者工具
3. 切换到Network面板
4. 选中Doc页签
5. 刷新页面，分析客户端和服务器的通信过程

4. 服务器对外提供了那些资源

01-网页中常见的资源

1. 文字内容
2. image图片
3. Audio音频
4. Video视频

02-数据也是资源

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

03-数据是网页的灵魂

1. HTML是网页的骨架
2. CSS是网页的颜值
3. JS是网页的行为
4. 数据则是网页的灵魂

骨架、颜值、行为皆为数据服务，数据在网页中无处不在

04-网页中如何请求数据

用户电脑(请求数据资源)

服务器(服务器处理这次数据请求，把数据响应给客户端)

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

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

简单用法

var xhrObj = new XMLHttpRequest();

05-资源的请求方式

请求方式很多种，常见两种：get和post请求

1. get请求常用语获取服务器资源(向服务器要资源)
2. post请求通常用语向服务器提交数据(往服务器发送资源)

5. 了解Ajax

01-什么是Ajax

通俗理解：在网页中使用XMLHttpRequest对象和服务器进行数据交互方式

02-为什么学Ajax

能让我们轻松网页与服务器之间的数据交互

03-Ajax应用场景

1. 用户名检测：注册用户时，通过ajax形式，动态检测用户名是否被占用
2. 搜索提示：输入关键字，动态加载搜索提示列表
3. 数据分页显示：根据页面值动态刷新表格的数据
4. 数据的增删改查：通过ajax来实现数据交互

6. jQuery中的Ajax

01-了解jQuery中的Ajax

XMLHttpRequest用法比较复杂，jQuery对XMLHttpRequest进行分装，提供了一系列Ajax相关函数

jQuery中发起Ajax请求三个方法

1. $.get()
2. $.post()
3. $.ajax()

02-$.get()函数语法

$.get()函数功能单一，专门用来发起get请求，从而将服务器上资源请求到客户端来使用

语法

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

参数	描述
url	必需。规定将请求发送的哪个 URL。
data	可选，obj对象。规定连同请求发送到服务器的数据。
callback	可选，function。请求成功的回调函数。

//不带参数
$.get('http://www.liulongbin.top:3006/api/getbooks',function (res) {
    console.log(res);
    console.log(res.status);
})

//带参数
$.get('http://www.liulongbin.top:3006/api/getbooks',{id: 1},function (res) {
	console.log(res);
})

03-$.post()函数语法

$.post()函数功能单一，专门用来发起post请求，从而向服务器提交数据

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

参数名	参数类型	是否必选	说明
url	string	是	提交数据地址
data	object	否	要提交的数据
callback	function	否	数据提交成功时的回调函数

$.post()向服务器提交数据

$.get('http://www.liulongbin.top:3006/api/addbook',{
  //要传递的数据对象
}，function (res) {
    //回调函数
})

$.post('http://www.liulongbin.top:3006/api/addbook', {
            bookname: '水浒传',author: '施耐庵',publisher: '天津图书出版社'
        }, function (res) {
            console.log(res)
 		})
})

04-$.ajax()函数语法

相比于get和post函数，jQuery提供ajax()函数，是一个功能比较综合的函数，它允许我们对Ajax请求进行更详细的配置，基本语法如下：

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

    }
})

使用$.ajax()发起GET请求

$("#btnGET").on('click',function () {
        $.ajax({
            type: 'GET',
            url: 'http://www.liulongbin.top:3006/api/getbooks',
            data: {
                id: 1
            },
            success: function (res) {
                console.log(res)
            }
        })
})

使用$.ajax()发起POST请求

$("#btnPOST").on('click', function () {
        $.ajax({
            type: 'POST',
            url: 'http://www.liulongbin.top:3006/api/addbook',
            data: {
                bookname: '水浒传',
                author: '施耐庵',
                publisher: '天津图书出版社'
            },
            success: function (res) {
                console.log(res)
            }
        })
})

7. 接口

接口根目录

http://www.liulongbin.top:3006

01-接口的概念

使用Ajax请求数据时，被请求的URL地址就是数据的接口(简称接口)，每个接口必须有请求方式

02-分析接口的请求过程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nUAFwpVh-1647262666775)(D:\A_study\Ajax\study_image\1.接口请求过程.jpg)]

03-接口测试工具

什么是接口测试工具

为了验证接口能否正常访问

好处：接口测试工具能让我们再不写代码情况下，对接口进行调用和测试

下载并安装PostMan

官方下载：https://www.postman.com/downloads/

使用教程

将url复制到输入框中,选好格式,然后点击send,就可以调用了。Body是返回的参数，可以判断是否调用成功.
注：如果是https的的请求,可以在设置setting里面去掉ssl验证,或者现在谷歌浏览器先刷一遍,点击继续前往便可以调用了。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-te0XvEOi-1647262666776)(D:\A_study\Ajax\study_image\POST请求步骤.png)]

04-接口文档

什么是接口文档

接口文档：接口的说明文档，它是我们调用接口的依据

接口文档的组成部分

一个合格的接口文档包含6项内容

1. 接口名称：用来表示各个接口简单说明，eg：登录接口等
2. 接口URL：接口的调用地址
3. 接口方式：接口调用方式
4. 参数格式：接口需要传递的参数
5. 响应格式：接口的返回值的详细说明
6. 返回实例：通过对象的形式，列举服务器返回的数据结构e

form表单与模板引擎

1. form表单的基本使用

01-什么是表单

表单在网页中主要负责数据采集功能，html中的form标签，用于采集用户输入的信息，通过form标签的提交操作把采集的信息提交到服务器端进行处理

02-表单的组成部分

表单有三个基本部分组成

• 表单标签
• 表单域
• 表单按钮

表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等

03-form标签属性

属性时用来规定如何把采集到数据发送到服务器

属性	值	描述
action	URL	规定当提交表单时向何处发送表单数据。
method	get/post	规定用于发送 form-data 的 HTTP 方法。
enctype	见说明	规定在发送表单数据之前如何对其进行编码。
target	_ blank| _ self|_ parent| _top framename	规定在何处打开 action URL。

mehtod注意

1. get适合用来提交少量、简单的数据
2. post适合提交大量、复杂或包含文件上传的数据，更安全
3. 实际开发中，post用的多，get少，例如登录、注册、添加数据等表单操作，都需要post来提交

target注意

• 设计文件上传的操作时，必须将enctype的值设置为multipart/form-data
• 如果不上传文件，就用默认的值application/x-www-form-urlencoded

04-表单的同步提交及缺点

同步提交

通过点击submit按钮，触发标点提交操作，从而是页面跳转到action URL的行为

同步提交缺点

• 表单提交后，整个页面会发生跳转，跳转到action URL 所指向的地址
• 提交后，之前页面的状态和数据会丢失

解决缺点

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

2. 通过Ajax提交表单数据

01-监听表单提交事件

//方法1
$("#form1").submit(function (e) {
		alert('监听到了表单的提交事件')
});

//方法2
$("#form1").on('submit', function (e) {
		alert('监听到了表单的提交事件')
})

02-阻止表单的默认提交行为

当表单的提交事件以后，可以调用事件对象的**event.preventDefault()**函数，来阻止表单的提交行为

$("#f1").on('submit', function (e) {
    e.preventDefault()
})

03-快速获取表单中的数据

serialize()函数

jQuery提供的serialize()函数

$(selector).serialize()

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

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

$("#f1").on('submit', function (e) {
    e.preventDefault()
    let data = $(this).serialize()
    console.log(data)
})

3. 模板引擎的基本概念

01-渲染UI结构时遇到的问题

let rows = []
            $.each(res.data, function (i, item) {
            let str = '<li class="list-group-item"><span class="badge" style="background-color: #f0ad4e">评论时间：' + item.time + '</span><span class="badge" style="background-color: #5bc0de">评论人：' + item.username + '</span>' + item.content + '</li>'
            rows.push(str)
            })
$("#cmt-list").empty().append(rows.join(''))

上述代码通过字符串拼接的形式来渲染UI结构

如果UI结构比较复杂，则拼接字符串的时候需要格外注意引导之前的嵌套，而且需要发生改变，修改起来非常麻烦

02-什么是模板引擎

顾名思义，根据指定的模板结构和数据，自动生成一个完整的HTML页面

03-模板引擎的好处

• 减少了字符串的拼接操作
• 代码结构更加清晰
• 使代码更易于阅读与后期维护

4. art-template模板引擎

01-简介

art-template是一个简约、超快的模板引擎

官网文档

http://aui.github.io/art-template/zh-cn/docs/

02-基本使用

使用步骤

• 导入art-template
• 定义数据
• 定义模板
• 调用template函数

导入模板引擎，就会在window全局多一个函数，template(“模板id”,“需要渲染的对象”)

03-art-template基本语法

什么是标准语法

art-template提供了 {{}} 这种语法格式，可以进行变量输出，或者循环数组等操作，这种语法叫做标准语法

标准输出

{{value}}
{{obj.key}}
{{obj['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}

{{}} 可以进行变量输出，对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出

原文输出

{{@ value}}

如果输出的value值中，包括了HTML，则需要使用原文输出语法，才能保证HTMl标签被正常渲染

//渲染
{{@ text}}

//数据
text: '<h3>你好</h3>'

条件输出

可以在{{}}中使用if…else if…/if方式进行输出

{{if value}} 按需输出的内容 {{/if}}

{{if v1}} 按序输出的内容 {{else if v2}} 按需输出的内容 {{/if}}

循环输出

{{}}内，通过each语法循环数组，当前循环的索引使用$index 进行访问，当前循环项使用$value 进行访问

{{each arr}}
	{{$index}}{{$value}}
{{/each}}

过滤器

需要处理的值 ->[参数] -> 过滤器函数 ->[返回值] -> 输出新值

过滤器的本质就是一个function处理函数

{{value | filterName}}		//value：参数，filterName：处理函数

过滤器语法类似管道操作符，它的上一个输出作为下一个输入

定义过滤器的基本语法如下：

template.default.imports.filterName = function (value) {
        /* return 处理的结果 */
}

5. 模板引擎的实现原理

01-正则与字符串的操作

基本语法

exec()函数用于检索字符串中的正则表达式的匹配

RegExpObject.exec(string)

如果字符串中有匹配的值，则返回该匹配的值(数组)，否则返回Null

let str = 'hello'
let pattern = /o/
//输出的结果 ["o", index: 4, input: "hello", groups: undefined]
console.log(pattern.exec(str))

分组

正则表达式（）包起来的内容表示一个分组，可以通过分组来提取自己想要的内容

字符串的replace函数

replace()函数用于在字符串中用一些字符替换另一些字符

var result = '123456'.replace('123',abc)	//得到结果是'abc456'

02-实现简易的模板引擎

实现步骤

• 定义模板结构
• 预调用模板引擎
• 封装template函数
• 导入并使用自定义的模板引擎

Ajax加强

1. XMLHttpRequest的基本使用

01-什么是XMLHttpRequest

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

02-使用xhr发起GET请求

步骤

• 创建xhr对象
• 调用xhr.open(‘method’,‘url’)函数
• 调用xhr.send()函数
• 监听xhr.onreadystatechange事件

// 创建XHR对象
    let xhr = new XMLHttpRequest()
    //调用open函数
    xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks')
    // 调用send函数
    xhr.send()
    //监听 onreadystatechange事件
    xhr.onreadystatechange = function () {
        //前面是发送请求状态、后面是服务器响应状态
        if (xhr.readyState === 4 && xhr.status === 200) {
            //获取服务器响应数据
            console.log(xhr.responseText)
        }
}

03-了解readyState属性

readyState是用来表示当前Ajax请求所处的状态

值	状态	说明
0	UNSENT	未初始化状态：对象创建，但未初始化
1	OPENED	准备发送状态：此时，已经调用了XMLHttpRequest对象的open()方法，并且该对象已经准备好将一个请求发送到服务器
2	HEADERS_RECEIVED	已发送状态：此时，已通过调用send()方法把一个请求发送到服务器，但还没有收到一个响应
3	LOADING	正在接收状态：此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收到
4	DONE	完成响应状态：此时，已完成了HttpResponse响应的接收

04-使用xhr发起带参数的GET请求

//....省略不必要代码

 xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks?id=1')

//....省略不必要代码

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

05-查询字符串

什么是查询字符串

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

格式：将英文的 ? 放在url末尾，然后再加上 参数=值，如果是多个参数的话，使用&符号分隔

GET请求携带参数的本质

直接将参数以查询字符串的形式，追加到URL地址的后面，发送到服务器的

06-URL编码与解码

url编码

URL地址中，只允许出现英文相关的字母、标点符号、数字，因此不允许出现中文字符

如果需要包含中文字符，则必须对中文字符进行编译(转义)

URL编码的原则：使用安全字符，去表示那些不安全的字符

• URL编码原则通俗的解释：用英文字符去表示非英文字符

如何对URL进行编码与解码

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

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

let str = '黑马程序员'
let str2 = '%E9%BB%91%E9%A9%AC%E7%A8%8B%E5%BA%8F%E5%91%98'
console.log(encodeURI(str))
console.log(decodeURI(str2))

URL编码的注意事项

由于浏览器会自动对URL地址进行编码操作，因此不太需要关系URL中文问题

07-使用xhr发起POST请求

步骤

• 创建xhr对象
• 调用xhr.open() 函数
• 调用Content-Type属性(固定写法)
• 调用xhr.send()，同时指定要发送的数据
• 监听xhr.onreadystatechange 事件

// 创建XHR对象
    let xhr = new XMLHttpRequest()
    //调用open函数
    xhr.open('POST','http://www.liulongbin.top:3006/api/addbook')
    //设置Content-Type
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    // 调用send函数
    xhr.send('bookname=水浒传&author=施耐庵&publisher=上海图书出版社')
    //监听 onreadystatechange事件
    xhr.onreadystatechange = function () {
        //前面是发送请求状态、后面是服务器响应状态
        if (xhr.readyState === 4 && xhr.status === 200) {
            //获取服务器响应数据
            console.log(xhr.responseText)
        }
	}

2. 数据交换格式

01-什么是数据交换格式

数据交换格式：服务器端与客户端之间进行数据传输与交换格式

前端领域：经常提到的两种数据交换格式是XML和JSON，XML用的少，重点是JSON

02-XML

xml：可扩展标记语言，类似于HTML也是一种标签语言

区别

XML和HTML虽然都是标记语言，但两者没有任何关系

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

03-XML缺点

• 格式臃肿，和数据无关代码多，体积大，传输效率低
• JS中解析XML比较麻烦

04-JSON

JSON：js对象表示法，简单来说就是JS对象和数组的字符串表示法，使用文本表示一个js对象或数据的信息，因此JSON的本质是字符串

作用：JSON是一种轻量级的文本数据交换格式，专门用于传输和存储数据

JSON已经成为主流数据交换格式

JSON两种结构

• 对象
• 数组

1. 对象结构：JSON中表示为{}括起来的内容，数据结构{key: value, key: value,…}的键值对结构，key必须是使用英文的双引号包裹 的字符串，数据类型有数字、字符串、布尔值、null、数组、对象6种类型
2. 数组结构：JSON中表示为[]括起来的内容，数据结构为{“java”, “javascript”, 30, true…}，数据类型有数字、字符串、布尔值、null、数组、对象6种类型

JSON语法注意事项

• 属性名必须使用双引号包裹
• 字符串类型的值必须使用双引号包裹
• JSON中不允许使用单引号表示字符串
• json中不能写注释
• json最外成必须是对象或数据格式
• 不能使用undefined或函数作为JSON值

json作用：在计算机与网络之间存储和传递数据

json的本质：用字符串来表示js对象数据和数组数据

05-json与js对象关系

json是js对象的字符串表示法，使用文本表示一个js对象或数据的信息，本质是字符串

//这是一个对象
var obj = {a: 'hello'}

//这是一个json字符串，本质是一个字符串
var json = '{"a": "hello"}'

06-json与js对象互转

json字符串转换成js对象

使用JSON.parse()语法

var jsonStr = '{"a": "Hello", "b": "world"}'
var obj = JSON.parse(jsonStr)
console.log(obj)

js对象转换成json字符串

使用JSON.stringify()方法

var obj2 = {
    a: 'hello',
    b: 'world',
    c: false
}
var str = JSON.stringify(obj2)
console.log(str)

07-序列化和反序列化

把数据对象转化为字符串的过程：序列化，eg：JSON.stringify

把字符串转换成数据对象的过程：反序列化，eg：JSON.parse()

3. 封装自己的Ajax函数

function resolveData(data) {
    let arr = []
    for(let k in data) {
        arr.push(k + '=' + data[k])
    }
    return arr.join('&')
}

// console.log(resolveData({name:'zs',age: 20}))

function itheima(options) {
    let xhr = new XMLHttpRequest()

    //把外界传递过来的参数对象转换为查询字符串
    let qs = resolveData(options.data)

    if(options.method.toUpperCase() === 'GET') {
        //发起get请求
        xhr.open(options.method,options.url + '?' + qs)
        xhr.send()

    }else if(options.method.toUpperCase() === 'POST') {
        //发给POST请求
        xhr.open(options.method, options.url)
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
        xhr.send(qs)
    }

    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            let result = JSON.parse(xhr.responseText)
            options.success(result)
        }
    }
}

01-定义options参数选项

itheima()函数是自定义的Ajax函数，接受一个配置对象作为参数，配置对象中可以配置如下属性

• method 请求的类型
• url 请求的URL地址
• data 请求携带的数据
• success 请求成功之后的回调函数

02-处理data参数

需要把data对象，转换成查询字符串的格式，从而提交给服务器，因此提前定义resolveData函数如下

function resolveData(data) {
  let arr = []
  for(let k in data) {
    arr.push(k + '=' + data[k])
  }
  return arr.join('&')
}

03-定义itheima函数

需要创建xhr对象，并监听onreadystatechange事件

function itheima(options) {
    let xhr = new XMLHttpRequest()

    //把外界传递过来的参数对象转换为查询字符串
    let qs = resolveData(options.data)

    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            let result = JSON.parse(xhr.responseText)
            options.success(result)
        }
    }
}

04-判断请求类型

不同请求类型，对应xhr对象的不同操作

if(options.method.toUpperCase() === 'GET') {
    //发起get请求
    xhr.open(options.method,options.url + '?' + qs)
    xhr.send()

}else if(options.method.toUpperCase() === 'POST') {
    //发给POST请求
    xhr.open(options.method, options.url)
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
    xhr.send(qs)
}

4. XMLHttpRequest Level2的新特性

01-认识XMLHttpRequest Level2

旧版XMLHttpRequest的缺点

• 只支持文本数据传输，无法用来读取和上传文件
• 传送和接收数据时，没有进度信息，不能提示有没有完成

XMLHttpRequest Level2的新功能

• 可以设置HTTP请求时限
• 可以用FormData对象管理表单数据
• 可以上传文件
• 可以获取数据传输的进度信息

02-设置HTTP请求时限

Ajax操作很耗时，无法预知要花多少时间

新版XMLHttpRequest对象，增加了timeout实行，可以设置HTTP请求的时限

xhr.timeout = 3000

将最长等待时间设置为3000毫秒，过了这个时限，就自动停止HTTP请求，与之匹配的还有一个timeout事件 ontimeout，用来指定回调函数

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

    let xhr = new XMLHttpRequest()

    //设置时间
    xhr.timeout = 3000
    //设置超时之后的处理事件
    xhr.ontimeout = function() {
        console.log('请求超时！')
    }

    xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks')
    xhr.send()

    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status == 200) {
            console.log(xhr.responseText)
        }
    }

03-FormData对象管理表单数据

• Ajax操作往往用来提交表单数据，为了方便表单操作，HTML增加了一个FormData对象

//创建FormData对象
let fd = new FormData()
//调用 append函数，向fd中追加数据
fd.append('uname','zs')
fd.append('upwd','123456')


// 创建XHR对象
let xhr = new XMLHttpRequest()
//调用open函数
xhr.open('POST','http://www.liulongbin.top:3006/api/formdata')
//不设置Content-Type
// xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 调用send函数
xhr.send(fd)
//监听 onreadystatechange事件
xhr.onreadystatechange = function () {
    //前面是发送请求状态、后面是服务器响应状态
    if (xhr.readyState === 4 && xhr.status === 200) {
        //获取服务器响应数据
        console.log(JSON.parse(xhr.responseText))
    }
}

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

不设置Content-Type

let form = document.querySelector('#form1')
form.addEventListener('submit',function (e) {
    e.preventDefault()

    let fd = new FormData(form)

    let xhr = new XMLHttpRequest()
    //调用open函数
    xhr.open('POST','http://www.liulongbin.top:3006/api/formdata')
    //不设置Content-Type
    // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    // 调用send函数
    xhr.send(fd)
    //监听 onreadystatechange事件
    xhr.onreadystatechange = function () {
        //前面是发送请求状态、后面是服务器响应状态
        if (xhr.readyState === 4 && xhr.status === 200) {
            //获取服务器响应数据
            console.log(JSON.parse(xhr.responseText))
        }
    }
})

04-上传文件

新版XMLHttpRequest对象，不仅可以发送文本信息，还可以上传文件

实现步骤

• 定义UI结构
• 验证是否选择了文件
• 向FormData中追加文件
• 使用xhr发送上传文件的请求
• 监听onreadystatechange事件

//整体逻辑
<script>
    //  获取上传文件上传按钮
    let btnUpload = document.querySelector('#btnUpload')
    //  绑定单击事件处理函数
    btnUpload.addEventListener('click', function () {
        let files = document.querySelector('#file1').files
        if (files.length <= 0) {
            return alert('请选择要上传的文件！')
        }
        let fd = new FormData()
        //将用户选择的文件添加到FormData中
        fd.append('avatar', files[0])

        let xhr = new XMLHttpRequest()

        //监听文件上传的进度
        xhr.upload.onprogress = function(e) {
            if (e.lengthComputable) {
                //计算上传的进度
                let procentComplete = Math.ceil((e.loaded / e.total) * 100)
                console.log(procentComplete)
                $("#percent").attr('style','width: ' + procentComplete + '%').html(procentComplete + '%')
            }
        }
        xhr.upload.onload = function() {
            $("#percent").removeClass().addClass('progress-bar progress-bar-success')
        }

        //调用open函数
        xhr.open('POST','http://www.liulongbin.top:3006/api/upload/avatar')
        // 调用send函数
        xhr.send(fd)
        //监听 onreadystatechange事件
        xhr.onreadystatechange = function () {
            //前面是发送请求状态、后面是服务器响应状态
            if (xhr.readyState === 4 && xhr.status === 200) {
                let data = JSON.parse(xhr.responseText)
                //判定上传文件是否成功
                if(data.status === 200) {
                    //上传成功
                    document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
                } else {
                    //上传失败
                    console.log('图片上传失败' + data.message)
                }
            }
        }
    })
</script>

定义UI结构

<!--文件选择框-->
<input type="file" id="file1">
<!--上传文件的按钮-->
<button id="btnUpload">上传文件</button>
<!--img标签，显示上传成功以后的图片-->
<img src="" alt="" id="img" width="800">

验证是否选择了文件

//  获取上传文件上传按钮
let btnUpload = document.querySelector('#btnUpload')
//  绑定单击事件处理函数
btnUpload.addEventListener('click', function () {
    let files = document.querySelector('#file1').files
    if (files.length <= 0) {
        return alert('请选择要上传的文件！')
    }
    console.log('用户选择了待上传的文件')
})

向FormData中追加文件

avatar：投向。file标签的name值

let fd = new FormData()
//将用户选择的文件添加到FormData中
fd.append('avatar', files[0])

向xhr发起上传文件的请求

let xhr = new XMLHttpRequest()
//调用open函数
xhr.open('POST','http://www.liulongbin.top:3006/api/upload/avatar')
// 调用send函数
xhr.send(fd)

显示文件上传进度

新版本的XMLHttpRequest对象中，可以监听xhr.upload.onprogress事件，来获取文件的上传进度

变量

• e.lengthComputable 是一个布尔值，表示当前上传的资源是否具有可计算的长度
• e.loaded 已传输的字节
• e.total 需要上传的字节

let xhr = new XMLHttpRequest()

//监听文件上传的进度
xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
        //计算上传的进度
        let procentComplete = Math.ceil((e.loaded / e.total) * 100)
        console.log(procentComplete)
        $("#percent").attr('style','width: ' + procentComplete + '%').html(procentComplete + '%')
    }
}

监听上传完成的事件

xhr.upload.onload = function() {
    $("#percent").removeClass().addClass('progress-bar progress-bar-success')
}

5. jQuery高级用法

//总体逻辑
<script>
    //监听ajax请求
    $(document).ajaxStart(function () {
        $('#loading').show()
    })

    $(document).ajaxStop(function () {
        $('#loading').hide()
    })

    $('#btnUpload').on('click',function () {
        let files = $('#file1')[0].files
        if (files.length <= 0) {
            return alert('请选择文件后再上传！')
        }

        let fd = new FormData()
        fd.append('avatar', files[0])

        $.ajax({
            method: 'POST',
            url: 'http://www.liulongbin.top:3006/api/upload/avatar',
            data: fd,

            processData: false,
            contentType: false,
            success: function (res) {
                $('#img').attr('src','http://www.liulongbin.top:3006' + res.url)
            }
        })
    })
</script>

01-定义UI结构

<!--文件选择框-->
<input type="file" id="file1">
<!--上传文件的按钮-->
<button id="btnUpload">上传文件</button>

02-验证是否选中文件

$('#btnUpload').on('click',function () {
    let files = $('#file1')[0].files
    if (files.length <= 0) {
        return alert('请选择文件后再上传！')
    }
})

03-向FormData中追加文件

let fd = new FormData()
fd.append('avatar', files[0])

04-使用jQuery发起上传文件的请求

$.ajax({
    method: 'POST',
    url: 'http://www.liulongbin.top:3006/api/upload/avatar',
    data: fd,
    
    // 不设置Content-Type
    processData: false,
    contentType: false,
    
    success: function (res) {
        console.log(res)
    }
})

05-jQuery实现loading效果

• ajaxStart(callback)

ajax请求开始时，执行ajaxStart函数，可以在ajaxStart的callback中显示loading效果

注意：$(document).ajaxStart()函数会监听当前文档的所有ajax请求

• ajaxStop(callback)

ajax请求结束时，执行ajaxStop函数，可以在ajaxStart的callback中隐藏loading效果

$(document).ajaxStart(function () {
    $('#loading').show()
})

$(document).ajaxStop(function () {
    $('#loading').hide()
})

6. axios

01-什么是axios

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

• 相比于原生的XMLHttpRequest对象，axios简单易用
• 相比于jQuery，axios更加轻量化，只专注于网络数据请求

02-axios发起get请求

axio发起get请求

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

//eg
var url = 'http://www.liulongbin.top:3006/api/get'
var paramsObj = {name: 'zs', age: 20}
axios.get(url, {params: paramsObj}).then(function(res) {
  console.log(res)
})

03-axios发起POST请求

axio发起POST请求

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

//eg
document.querySelector('#btn1').addEventListener('click',function () {
        let url = 'http://www.liulongbin.top:3006/api/post'
        let dataObj = {address: '北京', location: '顺义区'}
        axios.post(url,dataObj).then(function (res) {
            console.log(res.data)
        })
    })

04-直接使用axios发起请求

语法如下

axios({
  method: '请求类型',
  url: '请求url地址',
  data: {	/*POST数据*/	},	//两个属性写对应一个
  params: {		/*GET参数*/	}
}).then(callback)

举例子

//get
document.querySelector('#btn1').addEventListener('click',function () {
    let url = 'http://www.liulongbin.top:3006/api/get'
    let paramsObj = {name: 'zs', age: 20}
    axios({
        method: "GET",
        url: url,
        params: paramsObj
    }).then(function (res) {
        console.log(res.data)
    })
})

//post
document.querySelector('#btn1').addEventListener('click',function () {
        let url = 'http://www.liulongbin.top:3006/api/post'
        let dataObj = {address: '北京', location: '顺义区'}
        axios({
            method: "POST",
            url: url,
            data: dataObj
        }).then(function (res) {
            console.log(res.data)
        })
    })

同源和JSONP

1. 同源策略

01-什么是同源

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

02-什么是同源策略

同源策略：浏览器提供的一个安全功能

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

• 无法读取非同源网页的DOM
• 无法读取非同源网页的Cookie、LocalStorage和indexedD8
• 无法向非同源地址发送Ajax请求

2. 跨域

01-什么是跨域

同源的对立面就是跨域

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

02-浏览器对跨域请求的拦截

1. 网页跨域请求可以正常发起
2. 浏览器能正常接受到跨域相应的数据
3. 但跨域回来的数据，会被浏览器同源策略拦截，无法将页面获得到

03-如何实现跨域数据请求

实现跨域数据请求的主要两种解决方案，JSONP 和 CORS

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

CORS：官方出品，W3C标准，属于跨域Ajax请求的根本解决方案，有些低版本不兼容，支持GET和POST请求

3. JSONP

01-什么是JSONP

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

02-JSONP的实现原理

由于浏览器的同源策略的限制，网页无法通过Ajax请求非同源的接口数据，但是script标签不受浏览器同源策略的影响，可以通过scr属性，请求非同源js脚本

实现原理 ：同过src属性，请求跨域的数据接口，并通过函数调用的形式，接受跨域接口想赢回来的数据

<script>
        function success(data) {
            console.log('Jsonp响应回来的数据是：');
            console.log(data);
        }
    </script>

<script src="http://www.liulongbin.top:3006/api/jsonp?callback=success&name=ls&age=30"></script>

03-JSONP缺点

由于JSONP是通过src属性，来实现跨域数据获取的，所以，JSONP只支持GET数据请求，不支持POST请求

注意：JSONP和AJax之间没有任何关系，不能吧JSONP请求数据的方式叫做AJax，因为JSONP没有用到XMLHttpRequest这个对象

04-jQuery中的JSONP

jQuery提供$.ajax()函数，除了可以发送真正的Ajax数据外，还能发起JSONP数据请求

<script>
        $.ajax({
            url: 'http://www.liulongbin.top:3006/api/jsonp?name=zs&age=20',

            // 如果要发送JSONP请求，必须指定dataType为 jsonp
            dataType: 'jsonp',
            success: function(res) {
                console.log(res);
            }
        })
</script>

默认情况下，使用jQuery发送JSONP请求，会携带一个callback=jQueryxxx的参数，jQueryxxx是随机生成的一个回调函数的名称

05-自定义参数及回调函数名称

<script>
        $.ajax({
            url: 'http://www.liulongbin.top:3006/api/jsonp?name=zs&age=20',

            // 如果要发送JSONP请求，必须指定dataType为 jsonp
            dataType: 'jsonp',
            // 发送到服务器的参数名称，默认值为callback
            jsonp: 'callback',
            // 自定义的回调函数名称，默认值为jQueryxxx格式
            jsonpCallback: 'abc',
            
            success: function(res) {
                console.log(res);
            }
        })
</script>

06-jQuery中JSONP的实现过程

jQuery采用的是动态创建和移除script标签的方法，来发起JSONP数据请求

• 发起JSONP请求，动态向heade标签r中append一个script标签
• 发起JSONP之后，会动态的删除header标签中script标签

4. 输入框的防抖

01-什么是防抖

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

02-防抖的应用场景

用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完成后，才执行查询请求

好处：有效减少请求次数，节约请求资源

5. 缓存列表

01-定义全局缓存对象

//缓存对象
var cacheObj = {};

02-将搜索结果缓存到对象中

// 获取用户输入的内容
var k = $('#ipt').val.trim();
//将数据作为值，进行缓存
cacheObj[k] = res

03-优先从缓存中获取搜索建议

6. 节流

01-什么是节流

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

02-节流的应用场景

• 鼠标连续不断地触发某事件(如点击)，只在单位事件内触发一次
• 懒加载时监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，不会浪费cpu资源

03-节流阀概念

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

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

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

04-防抖和节流区别

• 防抖：如果事件被频繁触发，保证只有最后一次触发生效，前N多次触发被忽略
• 节流：如果事件被频繁触发，节流能够减少触发的频率表，节流是选择性的执行一部分事件

HTTP

1. HTTP协议简介

01-什么是通信

通信，就是信息的传递和交换

三要素

• 通信的主体
• 通信的内容
• 通信的方式

02-通信的协议

通信的协议：通信双方完成通信所必须遵守的规则和约定

互联网的通信协议：HTTP协议

03-HTTP

HTTP协议：规定了客户端与服务器之间进行网页内容传输时，所遵守的传输格式

HTTP协议采用了请求/响应的交互模型

• 客户端发起HTTP请求
• 服务器返回HTTP响应

2. HTTP请求消息

01-概念

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

注意：HTTP请求消息又叫做HTTp请求报文

02-组成部分

HTTP请求消息由请求行、请求头部、空行和请求体4部分组成

1. 请求行：3个部分组成，它们之间用空格隔开
   • 请求方式
   • URL
   • HTTP协议版本
2. 请求头部：用来描述客户端基本信息，从而把客户端相关信息告知服务器
   • 请求头部由多行 键/值 对组成，每行的键值对之间用英文的冒号分隔
3. 空行：最后一个请求头字段的后面好似一个空行，通知服务器请求头部至此结束
   • 用来分隔请求头部和请求体
4. 请求体：通过POST方式提交到服务器的数据
   • 注意：只有POST请求才有请求体，GET请求没有请求体

03-总结[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sVS7gWwJ-1647262666778)(D:\A_study\Ajax\study_image\2.HTTP.jpg)]

3. HTTP响应消息

01-概念

响应消息就是服务器响应给客户端的消息内容，也叫作响应报文

02-组成部分

HTTP响应消息由状态行、响应头部、空行和响应体

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2mRwwXQ5-1647262666779)(D:\A_study\Ajax\study_image\3.HTTP响应消息.jpg)]

1. 状态行：3部分组成，它们之间用空格隔开
   • HTTP协议版本
   • 状态码
   • 状态码的描述文本
2. 响应头部：描述服务器的基本信息，由多行 键/值 对组成
3. 空行：最后一个请求头字段的后面好似一个空行，通知客户端请求头部至此结束
   • 作用：分隔响应头部和响应体
4. 响应体：存放的是服务器应给客户端的资源内容

4. HTTP请求方法

01-概念

HTTP请求方法：属于HTTP协议的一部分，作用：用来表明要对服务器上的资源执行的操作

最常用的请求方法是GET 和 POST

HTTP请求重要的方法

方法	描述
GET	（查询）发送请求来获得服务器上的资源，请求体中不会包含请求数据，请求数据放在协议头中。另外get支持快取、缓存、可保留书签等。幂等
POST	（新增）和get一样很常见，向服务器提交资源让服务器处理，比如提交表单、上传文件等，可能导致建立新的资源或者对原有资源的修改。提交的资源放在请求体中。不支持快取。非幂等
PUT	（修改）和post类似，html表单不支持，发送资源与服务器，并存储在服务器指定位置，要求客户端事先知道该位置；
DELETE	（删除）请求服务器删除某资源。和put都具有破坏性，可能被防火墙拦截。如果是https协议，则无需担心。幂等

5. HTTP响应状态码

01-概念

HTTP响应状态码：用来标识响应的状态

02-组成和分类

HTTP状态码 由三个十进制数字组成

• 第一个十进制定义了状态码的类型
• 后面两个用来对状态码进行细分

HTTP状态码分为5类

• 1**：临时响应并需要请求者继续执行操作
• 2**：请求成功。操作被成功接收接收并处理
• 3**：重定向代码，需要进一步的操作以完成请求
• 4**：客户端错误，请求包含语法错误或者无法完成请求
• 5**：服务器错误，服务器在处理请求的过程中发生错误

03-常见HTTP响应码

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

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

• 3**重定向状态码

状态码	英文名称	中文描述
301	Moved Permanently	永久移动
302	Found	临时移动
304	Not Modified	未修改

• 4**客户端错误相关

状态码	状态消息	含义
400	Bad Request（坏请求）	告诉客户端，它发送了一个错误的请求。
401	Unauthorized（未授权）	需要客户端对自己认证
402	Payment Required（要求付款）	这个状态还没被使用， 保留给将来用
403	Forbidden（禁止）	请求被服务器拒绝了
404	Not Found（未找到）	未找到资源
408	Request Timeout（请求超时）	如果客户端完成请求时花费的时间太长， 服务器可以回送这个状态码并关闭连接

• 5**服务器端错误相关响应状态码

状态码	状态消息	含义
500	Internal Server Error(内部服务器错误)	服务器遇到一个错误，使其无法为请求提供服务
501	Not Implemented（未实现）	客户端发起的请求超出服务器的能力范围(比如，使用了服务器不支持的请求方法)时，使用此状态码。
502	Bad Gateway（网关故障）	代理使用的服务器遇到了上游的无效响应
503	Service Unavailable（未提供此服务）	服务器目前无法为请求提供服务，但过一段时间就可以恢复服务

GIT

1. 起步

01-关于版本控制

• 文件的版本
  • 操作麻烦
  • 命名不规范
  • 容易丢失
  • 协作困难
• 版本控制软件
  • 用来记录文件变化，控制文件版本的软件
• 好处
  • 操作简便
  • 易于对比
  • 易于回溯
  • 不易丢失
  • 协作方便
• 版本控制系统分类
  • 本地版本控制系统：单机运行
  • 集中化版本控制系统：联网运行，支持多人协作开发，性能差
  • 分布式版本控制系统：联网运行，支持多人协作开发，性能优秀、用户体验好

2. GIT基础概念

01-概念

GIT是一个开源的分布式版本控制系统，可以快速高效地处理从很小到非常大的项目版本管理

02-GIT的特性

• 直接记录快照，而非差异比较
• 近乎所有操作都是本地执行

SVN差异比较

• 传统的版本控制系统(SVN)是基于差异的版本控制，存储的是一组基本文件和每个文件随时间逐步累积差异
  • 好处：节省磁盘空间
  • 缺点：耗时、效率低
• Git记录快照：是在原来文件版本的基础上重新生成一个新的文件，类似于备份
  • 缺点：占用磁盘空间较大
  • 优点：版本切换时非常快，每个版本都是完整的文件快照，切换版本时直接恢复目标的快照即可
  • 特点：空间换时间
• 几乎所有操作都是本地执行：只需要访问本地文件和资源，一般不需要来自网络上其他计算机的信息
  • 特点
    • 断网后依旧可以本地对项目进行版本管理
    • 联网后，把本地修改的记录同步到云端服务器即可

03-Git三个区域

• 工作区：处理工作的区域
• 暂存区：已完成的工作的临时存放的区域，等待被提交
• Git仓库：最终存放的区域

04-Git中的三个状态

• 已修改：modified—表示修改了文件，但还没有放到暂存区
• 已暂存：staged—表示已修改的文件做了标记，是之包含在下次提交的列表中
• 已提交：committed—表示文件已经安全存放在本地Git仓库中

05-基本的Git工作流程

流程如下

• 工作区中修改文件
• 将你想要下次提交的更改进行暂存
• 提交更新，找到暂存区的文件，将快照永久性存储到Git仓库

3. Git基础

01-配置用户信息

$ git config --global user.name "itheima"

$ git config --global user.email "itheima@itcast.cn"

注意：如果使用–global选项，那么该命令只需要运行一次，即可永久生效

02-Git全局配置文件

被写入C:/User/用户名文件夹/.gitconfig文件中，这个文件是Git全局配置文件

03-检查配置信息

可以运行如下的终端命令，快速的查看Git全局配置信息

//查看全局配置
$ git config --list --global

//只查看名字
$ git config user.name

//只查看邮箱
$ git config user.email

04-获取帮助信息

可以使用git help <verb> 命令

//打开一个浏览器手册
$ git help config

//在终端里面打开手册
$ git config -h

05-Git基本操作

• 获取Git仓库的两种方式
  • 将尚未进行版本控制的本地目录转换为Git仓库
  • 从其它服务器克隆一个已存在的Git仓库
• 在现有目录中初始化仓库步骤
  • 在项目的根目录中，通过右键打开"Git Bash"
  • 执行git init命令将当前的目录转换成Git 仓库

git init命令创建一个名为.git的隐藏目录，这个.git目录就是当前项目的Git仓库，里面包含了初始化的必要文件，这些文件是Git仓库的必要组成部分

• 工作区中文件的4个状态两大类
  • 未被Git管理
    • 未跟踪：不被Git管理的文件
  • 已被Git管理
    • 未修改
    • 已修改
    • 已暂存

Git操作的终极结果：让工作区中的文件都处于未修改的状态

• 检查文件状态：git status查看

  • 以精简的方式显示文件：git status -s 或者 git status -short

• 跟踪新文件：git add，开始跟踪一个文件

• 提交更新：git commit -m "新建了...文件" -m选项后面是本次的提交信息，用来对提交内容进一步描述

• 对已提交的文件进行修改：已修改的文件的状态发生变化，说明已修改的跟踪文件还没放在暂存区

• 暂存已修改文件：git add

  • 可以用它开始跟踪新文件
  • 把已跟踪的、且已修改的文件放到暂存区
  • 把有冲突的文件标记为已解决状态

• 提交暂存区文件：git conmit -m "提交信息" 命令

• 撤销对文件的修改：把对工作区中对应文件修改，还原成Git中所保存的版本

  • 操作结果会使所有修改的全丢失，且无法恢复
  • git checkout --要撤销文件的名字

• 向暂存区一次性添加多个文件：git add . ‘.’ 代表全部

• 取消暂存的文件：git reset HEAD 要移除的文件名称

• 跳过使用暂存区域：工作区->暂存区->Git仓库，可以跳过暂存区直接提交Git仓库

  • git commit -a -m "描述消息"

• 移除文件：移除文件有两种方式

  • 从Git仓库和工作区中同时移除对应的文件：git rm -f 文件
  • 只从Git仓库中移除对应文件，保留工作区中对应文件：git rm --cached 对应文件

• 忽略文件：不需要纳入Git管理，也不希望出现在未跟踪文件列表，可以创建一个名为.gitignore的配置文件

  • 以#开头的是注释
  • 以/ 结尾的目录
  • 以/ 开头防止递归
  • 以! 开头表示取反
  • 可以使用glob模式进行文件和文件夹的匹配

• glob模式：简化了的正则表达式

  • 星号* 匹配零个或多个任意字符
  • [abc] 匹配任意一个列在方括号中的字符
  • 问号？ 只匹配一个任意字符
  • 在方括号中使用短划线分隔两个字符 表示所有在这两个字符范围内的都可以匹配 [0-9]
  • 两个星号** 表示匹配任意中间目录 （比如 a/**/z 可以匹配 a/z、a/b/z、a/b/c/z等）

• .gitignore文件

  • *.a 忽略所有.a文件
  • !lib.a 跟踪所有lib.a，即使在前面忽略了.a文件
  • /TOOO 只忽略当前目录下的TOOO 文件，而不忽略 subdir/TOOO
  • build/ 忽略任何目录下名为build的文件夹
  • doc/*.txt 忽略doc/notes.txt，但不忽略 doc/server/arch.txt
  • doc/**/.pdf 忽略doc/目录及其所有子目录下的.pdf文件

• 查看提交历史：git log

• 回退到指定版本

  • git log --pretty=online 在一行上展示所有的提交历史
  • git reset --hard <ComitId> 根据提交的ID回退到指定版本
  • git reflog --pretty=online 在旧版本中展示所有提交历史

Github

1. 概念

开源即开放源代码，代码是公开的，任何人都可以去查看、修改和使用

闭源即软件代码是封闭的，只有作者能看到闭源软件的代码，只有作者能对源代码进行

2. 开源许可协议

开源并不意味着完全没有限制，为了限制使用者的使用范围和保护作者的权利，每个开源项目应该遵守开源许可协议

3. 常见5种开源许可协议

• BSD
• Apache Licence2.0
• GPL
  • 具有传染性的一种开源协议，不允许修改后和衍生的代码做为闭源的商业软件发布和销售
  • 著名的软件项目是：Linux
• LGPL
• MIT
  • 目前限制最少的协议，唯一条件：在修改后的代码或者发行包中，必须包含原作者的许可信息
  • 使用MIT软件项目：jquery、Node.js

4. 为什么要拥抱开源

开源核心思想是“我为人人，人人为我”

• 开源给使用者更多的控制权
• 开源让学习变得容易
• 开源才有真正的安全

开源是软件开发领域的大趋势，让开发越来越容易

5. 开源项目托管平台

专门用来免费存放开源项目源代码的网站

• Github(全球最牛的开源项目托管平台)
• Gitlab(对待吗私有性支持较好，企业用户多)
• Gitee(码云，国产)

注意：3个开源项目托管平台，只能托管以Git管理的项目源代码

6. Github

GitHub是全球最大开源项目托管平台

• 关注自己喜欢的开源项目
• 为自己喜欢的开源项目做贡献
• 和开源项目的作者讨论Bug和提需求
• 把喜欢的项目复制一份作为自己的项目进行修改(Fork)
• 创建属于自己的开源项目

01-远程仓库的两种访问方式

• HTTPS：零配置；但是每次访问仓库时，需要重复输入账号密码
• SSH：需要进行额外的配置，但不需要重复账号密码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H8ZC5bTn-1647262666779)(D:\A_study\Ajax\study_image\4.Git_HTTPS.jpg)]

• 之后提交到远程仓库只需要：git push 即可

02-SSH key

• 作用：实现本地仓库和Github之间免登录和加密数据传输
• 两部分组成
  • id_rsa：私钥文件，存放于客户端的电脑中即可
  • id_rsa.pub： 公钥文件，需要配置到Github中

03-生成SSH key

• 打开Git Bash
• ssh-keygen -t rsa -b 4096 -C “you_email@example.com”
• 连续敲击3次回车，即可在C:\User\用户名文件夹.ssh目录中生成id_rsa、id_rsa.pub两个文件
• 判断是否配置成功：ssh -T git@github.com

04-将远程仓库内容克隆到本地

git clone ssh地址

7. Git分支

01-概念

分支就是科幻电影里面的平行宇宙

02-master主分支

初始化Git仓库时候，Git默认创建爱你master分支叫做主分支

• 作用：用来保存记录整个项目已完成的功能代码
• 不允许程序员直接在master修改代码，风险太高，容易导致整个系统崩溃

03-功能分支

指专门用来开发新功能的分支，临时从master主分支上分查出来的，当新功能开发且测试完毕后，最终需要合并到master主分支上

04-查看分支列表

• 查看当前Git仓库中所有的分支列表：git branch
  • *号：当前所处的分支

05-创建新分支

基于当前分支，创建一个新的分支：git branch 分支名称

06-切换分支

切换到指定分支上：git checkout login login是分支名称

07-分支的快速创建和切换

创建指定名称的新分支，并立即切换到新分支上：git checkout -b 分支名称

08-合并分支

开发测试完毕后执行，合并前必须切换到要合并的分支上

• 切换到master分支 git checkout master
• 合并：git merge login

09-删除分支

把功能分支代码合并到master主分支后，要删除功能分支

• git branch -d 分支名称

10-遇到冲突时的分支合并

在两个不同的分支中，对同一个文件进行了不同的修改，Git没法干净的合并他们，此时需要我们打开这些包含冲突的文件然后手动解决冲突

11-将本地分支推送到远程仓库

• 第一次将本地分支推送到远程仓库：git push -u 远程仓库的别名 本地分支名称:远程分支的名称
• 如果希望远程分支和本地分支保持一致：git push -u origin 本地分支名称

12-查看远程仓库中所有分支列表

• git remote show 远程仓库名称

13-跟踪分支

是指：从远程仓库中，把远程分支下载到本地仓库中

• get chekout 远程分支名称
• 下载并重命名：git checkout -b 本地分支名称 远程仓库名称/远程分支名称

14-拉取远程分支最新代码

把远程分支最新代码下载到本地对应分支中

• git pull

15-删除远程分支

• put push 远程仓库名称 --delete 远程分支名称

8. 总结

• Git中基本命令
  • git init
  • git add .
  • git commit -m “提交消息”
  • git status 和 git status -s
• Github 创建和维护远程仓库
  • 能够配置Github的SSH访问
  • 能够将本地仓库上传到Github
• Git分支基本使用
  • git checkout -b 新分支名称
  • git push -u origin 新分支名称
  • git checkout 分支名称
    创建属于自己的开源项目

01-远程仓库的两种访问方式

• HTTPS：零配置；但是每次访问仓库时，需要重复输入账号密码
• SSH：需要进行额外的配置，但不需要重复账号密码

[外链图片转存中…(img-H8ZC5bTn-1647262666779)]

• 之后提交到远程仓库只需要：git push 即可

02-SSH key

• 作用：实现本地仓库和Github之间免登录和加密数据传输
• 两部分组成
  • id_rsa：私钥文件，存放于客户端的电脑中即可
  • id_rsa.pub： 公钥文件，需要配置到Github中

03-生成SSH key

• 打开Git Bash
• ssh-keygen -t rsa -b 4096 -C “you_email@example.com”
• 连续敲击3次回车，即可在C:\User\用户名文件夹.ssh目录中生成id_rsa、id_rsa.pub两个文件
• 判断是否配置成功：ssh -T git@github.com

04-将远程仓库内容克隆到本地

git clone ssh地址

7. Git分支

01-概念

分支就是科幻电影里面的平行宇宙

02-master主分支

初始化Git仓库时候，Git默认创建爱你master分支叫做主分支

• 作用：用来保存记录整个项目已完成的功能代码
• 不允许程序员直接在master修改代码，风险太高，容易导致整个系统崩溃

03-功能分支

指专门用来开发新功能的分支，临时从master主分支上分查出来的，当新功能开发且测试完毕后，最终需要合并到master主分支上

04-查看分支列表

• 查看当前Git仓库中所有的分支列表：git branch
  • *号：当前所处的分支

05-创建新分支

基于当前分支，创建一个新的分支：git branch 分支名称

06-切换分支

切换到指定分支上：git checkout login login是分支名称

07-分支的快速创建和切换

创建指定名称的新分支，并立即切换到新分支上：git checkout -b 分支名称

08-合并分支

开发测试完毕后执行，合并前必须切换到要合并的分支上

• 切换到master分支 git checkout master
• 合并：git merge login

09-删除分支

把功能分支代码合并到master主分支后，要删除功能分支

• git branch -d 分支名称

10-遇到冲突时的分支合并

在两个不同的分支中，对同一个文件进行了不同的修改，Git没法干净的合并他们，此时需要我们打开这些包含冲突的文件然后手动解决冲突

11-将本地分支推送到远程仓库

• 第一次将本地分支推送到远程仓库：git push -u 远程仓库的别名 本地分支名称:远程分支的名称
• 如果希望远程分支和本地分支保持一致：git push -u origin 本地分支名称

12-查看远程仓库中所有分支列表

• git remote show 远程仓库名称

13-跟踪分支

是指：从远程仓库中，把远程分支下载到本地仓库中

• get chekout 远程分支名称
• 下载并重命名：git checkout -b 本地分支名称 远程仓库名称/远程分支名称

14-拉取远程分支最新代码

把远程分支最新代码下载到本地对应分支中

• git pull

15-删除远程分支

• put push 远程仓库名称 --delete 远程分支名称

8. 总结

• Git中基本命令
  • git init
  • git add .
  • git commit -m “提交消息”
  • git status 和 git status -s
• Github 创建和维护远程仓库
  • 能够配置Github的SSH访问
  • 能够将本地仓库上传到Github
• Git分支基本使用
  • git checkout -b 新分支名称
  • git push -u origin 新分支名称
  • git checkout 分支名称
  • git branch