- A+
所属分类：Web前端
URL的组成；
https://www.cnblogs.com/wangbojs/p/15339835.html
https 通信协议
www.cnblogs.com 服务器名称
wangbojs/p/15339835.html 资源在服务器上具体的从存放位置
客户端与服务器通讯过程 请求=>处理=>相应
1.客户端请求服务器
2.服务器处理这次请求
3.服务器响应客户端
资源的请求方式
get请求: 通常用于获取服务器资源(要资源)
例如: 根据URL地址 从服务器获取HTML文件, css文件, js文件, 图片文件, 数据资源等
POST请求: 通常用于向服务器提交数据(送资源)
例如: 登录时,向服务器提交登录信息, 注册时向服务器提交注册信息
Ajax
Ajax是在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式, 就是 Ajax
Ajax能然我们轻松实现网页与服务器之间的数据交互
Ajax的应用场景
用户名检测, 注册用户时 通过Ajax的方式动态监测用户名是否被占用
搜索提示, 当输入搜索关键字时, 通过Ajax的形式,动态加载搜索提示列表
数据分页显示 当点击页码时, 通过Ajax的形式,根据页码值动态刷新表格的数据
数据增删改查 都需要通过Ajax的形式来实现数据交互
使用原生js实现Ajax请求步骤
1. 创建xhr实例对象
var xhr = new XMLHttpReuqest
2. 调用xhr.open()函数
xhr.open('请求方式','URL地址[GET方式下写:? + 查询字符串]')
3. 调用xhr.send()函数
xhr.send([POST方式下写查询字符串])
4. 调用xhr.setRequestHeader()函数 固定写法且只有在POST请求会用到
xhr.setRequestHeader('Content-Type','x-www-form-urlencoded')
5. 监听xhr.onreadystatechange事件
xhr.onreadystatechange = function(){
// 固定写法
if(xhr.readystate === 4 && xhr.status === 200){
console.log(xhr.responeText)
}
}
原生Ajax的新特性
xhr.timeout = 1000; // 设置请求时限
xhr.ontimeout = function(){} // 设置请求超时后的回调函数
JSON
JSON就是javascripe对象和数组的字符串表示法
JSON的本质是字符串, 一种轻量级的文本数据交换格式, 专门用于存储和传输数据
JSON的两种结构
JSON就是用字符串来表示 javascript 的对象和数据
例: {name:name} 转换为JSON {"name":"name"}
JSON和JS对象互转
JSON转换为JS JSON.parse(JSON格式的字符串)
JS转换为JSON JSON.stringify(JS格式的对象和数组)
FormData对象 管理表单数据 使用这个对象的表单元素都必须有 name属性
FormData传输简单的数据
1. 获取表单元素
2. new FormData(获取到的表单元素) 这样就得到了表单域内的所有数据
3. 使用xhr对象
FormData传输文件
1. 获取表单域中的文件列表 注意此时的变量 files 是数组形式
var files = document.queryselector('').files;
2. 创建 FormData 实例化对象 把文件传过去
var fd = new FormData(files[0])
3. 使用 xhr 传参的时候把 fd 传过去就好了
4. 计算文件上传进度 固定写法
xhr.upload.onprogress = function(e){
// e.lengthComputable 是一个布尔值, 表示当前上传的资源是否具有可计算的长度
if(e.lengthComputable){
// e.loaded 已传输的字节
// e.total 需要传输的字节
var sum = Math.ceil((e.loaded / e.total)*100)
}
}
// 上传完成事件
xhr.upload.onload = function(){
}
axios 专注于网络数据请求的库
相比于原生的XMLHttpRequest对象, axios简单易用
get请求语法
axios.get(url,{params:请求数据}),then(function(res){
// 请求回调函数
// 需要注意的一点是 res.data是服务器返回的数据, res是axios经过重写的
})
POST请求语法
axios.post('url',{参数}).then(function(res){
// 回调函数, 注意 res.data是服务器返回的数据
})
axios请求语法
axios({
method:'请求类型',
url:'请求的URL地址',
data:{POST请求的数据}
params:{GET请求的数据}
}).then(function(res){
res.data 是服务器返回的数据
})
