文章目录

- 1.5查询字符串
- 1.6URL编码与解码
- 1.7使用xhr发送post请求
2.数据交换格式
- 2.1xml与html
- 2.2json
- - 2.1数据结构
- 4.1 认识XMLHttpRequest Level
- 4.3 FormData对象管理表单数据
- 4.4上传文件
- 4.5显示文件上传进度
5.通信协议
git

1.5查询字符串

2.get请求携带参数的本质

无论使用 $.ajax()，还是使用$.get()，又或者直接使用xhr对象发起GET请求，当需要携带参数的时候，本质上，都是直接将参数以查询字符串的形式，追加到URL地址的后面，发送到服务器的。

$.get('url', {name: 'zs', age: 20}, function() {})
// 等价于 $.get('url?name=zs&age=20', function() {}) $.ajax({ method: 'GET', url: 'url', data: {name: 'zs', age: 20}, success: function() {} })
// 等价于 $.ajax({ method: 'GET', url: 'url?name=zs&age=20', success: function() {} })

1.6URL编码与解码

什么是url编码

http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记l
经过URL编码之后,URL地址变成了如下格式:
http://w.liulongbin.top:3006/api/getbooks?id=1&bookname=8E88A58BF8卫63B88B8%E8%AE8B0

3.URL编码的注意事项
由于浏览器会自动对URL地址进行编码操作，因此，大多数情况下，程序员不需要关心URL地址的编码与解码操作。

1.7使用xhr发送post请求

// 1. 创建 xhr 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open()
xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
// 3. 设置 Content-Type 属性（固定写法）
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 4. 调用 send()，同时将数据以查询字符串的形式，提交给服务器
xhr.send('bookname=水浒传&author=施耐庵&publisher=天津图书出版社')
// 5. 监听 onreadystatechange 事件
xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText)}
}

2.数据交换格式

2.1xml与html

区别：
XML 和 HTML 虽然都是标记语言，但是，它们两者之间没有任何的关系。
HTML 被设计用来描述网页上的内容，是网页内容的载体
XML 被设计用来传输和存储数据，是数据的载体

2.2json

概念：JSON 的英文全称是 JavaScript Object Notation，即“JavaScript 对象表示法”。简单来讲，JSON 就是 Javascript 对象和数组的字符串表示法，它使用文本表示一个 JS 对象或数组的信息，因此，JSON 的本质是字符串。
作用：JSON 是一种轻量级的文本数据交换格式，在作用上类似于 XML，专门用于存储和传输数据，但是 JSON 比 XML 更小、更快、更易解析。
现状：JSON 是在 2001 年开始被推广和使用的数据格式，到现今为止，JSON 已经成为了主流的数据交换格式。
JSON 就是用字符串来表示 Javascript 的对象和数组。所以，JSON 中包含对象和数组两种结构，通过这两种结构的相互嵌套，可以表示各种复杂的数据结构。

2.1数据结构

里面的数据不能是undefined，function等不存在的值，必须从6种中取

把数据对象转换为字符串的过程，叫做序列化，例如：调用 JSON.stringify() 函数的操作，叫做 JSON 序列化。
把字符串转换为数据对象的过程，叫做反序列化，例如：调用 JSON.parse() 函数的操作，叫做 JSON 反序列化。

4.1 认识XMLHttpRequest Level

旧版XMLHttpRequest的缺点
只支持文本数据的传输，无法用来读取和上传文件
传送和接收数据时，没有进度信息，只能提示有没有完成
XMLHttpRequest Level2的新功能
可以设置 HTTP 请求的时限
可以使用 FormData 对象管理表单数据
可以上传文件
可以获得数据传输的进度信息

4.3 FormData对象管理表单数据

Ajax 操作往往用来提交表单数据。为了方便表单处理，HTML5 新增了一个 FormData 对象，可以模拟表单操作：
1.append一个一个的追加

   // 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', 'http://www.liulongbin.top:3006/api/formdata')// 5. 直接提交 FormData 对象，这与提交网页表单的效果，完全一样xhr.send(fd)

2.利用已经填写好的表单，直接将表单作为formdata的参数，数据自动填充到formdata中

 // 获取表单元素var form = document.querySelector('#form1')// 监听表单元素的 submit 事件form.addEventListener('submit', function(e) {e.preventDefault()// 根据 form 表单创建 FormData 对象，会自动将表单数据填充到 FormData 对象中var fd = new FormData(form)var xhr = new XMLHttpRequest()xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')xhr.send(fd)xhr.onreadystatechange = function() {}
})

4.4上传文件

新版 XMLHttpRequest 对象，不仅可以发送文本信息，还可以上传文件。
实现步骤：
定义 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').filesif (files.length <= 0) {return alert('请选择要上传的文件！')}// ...后续业务逻辑})

3.向FormData中追加文件

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

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

 // 1. 创建 xhr 对象var xhr = new XMLHttpRequest()// 2. 调用 open 函数，指定请求类型与URL地址。其中，请求类型必须为 POSTxhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')// 3. 发起请求xhr.send(fd)

5.监听onreadystatechange事件

 xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {var data = JSON.parse(xhr.responseText)if (data.status === 200) { // 上传文件成功// 将服务器返回的图片地址，设置为 <img> 标签的 src 属性document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url} else { // 上传文件失败console.log(data.message)}}
}

4.5显示文件上传进度

新版本的 XMLHttpRequest 对象中，可以通过监听 xhr.upload.onprogress 事件，来获取到文件的上传进度。语法格式如下：

 // 创建 XHR 对象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)}}

使用BootStrap进度条进行渲染
基于Bootstrap渲染进度条

<!-- 进度条 --><div class="progress" style="width: 500px; margin: 10px 0;"><div class="progress-bar progress-bar-info progress-bar-striped active" id="percent" style="width: 0%">0%</div></div>

监听上传进度的事件

xhr.upload.onprogress = function(e) {if (e.lengthComputable) {// 1. 计算出当前上传进度的百分比var percentComplete = Math.ceil((e.loaded / e.total) * 100)$('#percent')// 2. 设置进度条的宽度.attr('style', 'width:' + percentComplete + '%')// 3. 显示当前的上传进度百分比.html(percentComplete + '%')}}

监听上传完成的事件

 xhr.upload.onload = function() {$('#percent')// 移除上传中的类样式.removeClass()// 添加上传完成的类样式.addClass('progress-bar progress-bar-success')}

5.通信协议

通信协议（Communication Protocol）是指通信的双方完成通信所必须遵守的规则和约定。
通俗的理解：通信双方采用约定好的格式来发送和接收消息，这种事先约定好的通信格式，就叫做通信协议。

互联网中的通信协议
客户端与服务器之间要实现网页内容的传输，则通信的双方必须遵守网页内容的传输协议。
网页内容又叫做超文本，因此网页内容的传输协议又叫做超文本传输协议（HyperText Transfer Protocol），简称 HTTP 协议。
由于 HTTP 协议属于客户端浏览器和服务器之间的通信协议。因此，客户端发起的请求叫做 HTTP 请求，客户端发送到服务器的消息，叫做 HTTP 请求消息。

git

git add .将新增和修改后的文件都放到暂存区里

===========================================

ajax零基础整个gitt核心内容全套相关推荐

小甲鱼python教程视频怎么样-小甲鱼零基础入门学习Python视频教程全套96集
资源介绍教程名称: 小甲鱼零基础入门学习Python视频教程全套96集课程简介: xa0 xa0 Python具有跨平台特点,Python可以在各种不同类型的计算机上运行,Windows.MAC. ...
大神匠心打造-零基础到Python工程师视频教程全套白嫖【基础+进阶+项目实战】
从小白到python开发工程师,只需这套系统教程就够了!!! [零基础python开发工程师视频教程全套,基础+进阶+项目实战] 详情 day1 至day28,python基础: 等级1(python ...
python语言学习零基础教学视频_零基础学Python语言CAP全套课程
零基础学Python语言CAP完整版课程目录 ├─{1}–[第1周,第一单元]Python编程之基本方法 │ ├─{1}–1.1课程内容和安排介绍 │ │ ├─(1.1.1)–课程内容和安排介绍-PP ...
量化投资python教程_零基础入门Python量化投资全套教程，30+经典教材打包送！暑期get新技能就靠它了！...
量化投资是指使用数理分析.编程.建模等方式,通过对样本数据进行集中比对处理,找到数据之间的关系,制定量化策略,并使用编写的软件程序来执行交易,从而获得投资回报的方式. 在如今的量化投资领域,已经有了无 ...
零基础学前端之HTML全套基础教程【学习笔记】
[前端总路线学习笔记] 文章目录 HTML全套基础教程[学习笔记] 1.系统结构 2.软件环境准备 3.HTML概述 4. 我的第一个HTML 5. HTML的基本标签 6.HTML的实体符号 7. ...
零基础学ps入门视频全套教程，ps教程入门视频分享给大伙！
链接:https://pan.baidu.com/s/1pQmEc-XgquF1jBXIoS6-Gg 提取码:lcrw 00.CS6新增功能 01.移动工具 02.矩形选框工具 03.椭圆选框工具 ...
学ps需要先学java吗_零基础学ps入门视频全套教程，ps教程入门视频分享给大伙！...
链接:https://pan.baidu.com/s/1pQmEc-XgquF1jBXIoS6-Gg 提取码:lcrw 00.CS6新增功能 01.移动工具 02.矩形选框工具 03.椭圆选框工具 0 ...
python基础教程小甲鱼-小甲鱼零基础入门学习Python3视频教程全套96集
课程目录 000愉快的开始 001我和Python的第一次亲密接触 002用Python设计第一个游戏 003小插曲之变量和字符串 004改进我们的小游戏 005闲聊之Python的数据类型 006P ...
小甲鱼python课件源代码_[Python基础] 小甲鱼零基础入门Python学习视频+全套源码课件 Python视频教程 96讲...
资源介绍课程简介: 小甲鱼的Python课程,对初学者来说相当不错!97讲完全解读,会让大家对Python的认识从无到有,推荐给大家! 课程目录------------------- 第000讲愉 ...

ajax零基础整个gitt核心内容全套