1、客服端与服务器
1.1、客服端与服务器通信过程
1.2、网页请求数据
1.3、资源请求
2、ajax请求(网页与服务器之间的数据交互)
2.1jquery中得到ajax
2.1.1$.get()函数的语法
eg:有参请求
<script>
$(function() {
$("#btn").on("click",function() {
$.get("URL",{id:1},function(res){
console.log("res");
})
})
})
</script>
2.1.2$.post()函数语法
eg:
<script>
$(function() {
$("#btn").on("click",function() {
$.post("URL",{id:1},function(res) {
console.log(res);
})
})
})
</script>
2.1.3$.ajax()函数语法
eg:
<script>
$(function() {
$("#btn").on("click",function() {
$.ajax({
type:'GETE',
url:("http://www.baidu.com"),
data:{
id:1
},
success:function(res){
console.log(res);
}
})
})
})
</script>
3、接口
3.1接口请求过程
3.2接口测试工具
3.3接口文档
4、form表单
4.1表单属性
4.2表单的同步提交
4.2.1表单同步缺点
4.2.2解决同步提交缺点
方案:表单负责提交,ajax负责将 数据传给服务器
4.3通过ajax提交表单数据
4.3.1监听表单事件
<form action="" id="submit">
<input type="text">
<input type="password" name="" id="">
<input type="submit" placeholder="提交" id="submit">
</form>
<script>
$("#submit").on("submit",function() {
alert("监听到了");
})
</script>
4.3.2阻止表单默认提交行为
<form action="" id="submit">
<input type="text">
<input type="password" name="" id="">
<input type="submit" placeholder="提交" id="submit">
</form>
<script>
$("#submit").on("submit",function(e) {
alert("监听到了");
// 阻止默认行为
e.preventDefault();
})
</script>
4.3.3 serialize()函数
eg;
<form action="" id="submit">
<input type="text" name="uanme">
<input type="password" name="password" id="">
<input type="submit" placeholder="提交" id="submit">
</form>
<script>
$("#submit").on("submit",function(e) {
alert("监听到了");
// 阻止默认行为
e.preventDefault();
var data=$("#submit").serialize();
console.log(data);
})
</script>
5、ajax加强
5.1XMLHttpRequest的基本使用
5.1.1使用xhr发起get请求
eg1:不带惨请求:
eg2:带参请求:
5.1.2查询字符串
5.1.3URL编码与解码
5.1.4利用xhr发起post请求
6、数据交换格式
6.1XML
6.2JSON
7、封装自己的ajax函数
8、XMLHttpRequest Level2新特性
8.1设置http请求时限
eg:
<script>
var 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);
}
}
</script>
8.2formData对象管理表单数据
提交表单
eg;
<script>
// 新增FormData对象
var fd=new FormData();
// 为FormData添加表单项
fd.append('uname','as');
fd.append("upwd",'12343');
// 创建xhr对象
var xhr=new XMLHttpRequest();
// 指定请求类型和地址
xhr.open("POST","http://www.liulongbin.top:3006/api/formdata");
// 直接交FormData对象,与提交网页表单效果一样
xhr.send(fd);
xhr.onreadystatechange=function() {
if(xhr.readyState===4 && xhr.status===200) {
console.log(JSON.parse(xhr.responseText));
}
}
</script>
获取表单值
eg:
<script>
// 通过DOM事件获取到form表单元素
var form=document.querySelector("#form");
form.addEventListener("submit",function(e) {
// 阻止默认行为
e.preventDefault();
// 创建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() {
if(xhr.readyState===4 && xhr.status===200) {
console.log(JSON.parse(xhr.responseText));
}
}
})
</script>
8.3用xhr上传文件
上传文件完整案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../库/bootstrap-3.4.1-dist/css/bootstrap.css">
<script src="../库/jquery.js"></script>
</head>
<body>
<!-- 1.定义UI结构 -->
<!-- 文件选择框 -->
<input type="file" id="filel" />
<!-- 上传文件 -->
<button id="btnUpload">上传文件</button>
<!-- 进度条 bootstrap -->
<div class="progress" style="width: 500px; margin: 15px 10px;">
<div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">
0%
</div>
</div>
<!-- 显示上传服务器的图片 -->
<img src="" alt="" id="img" width="800" />
<script>
// 2.验证是否选择了文件
// 获取上传文件按钮
var btnUpload=document.querySelector("#btnUpload");
// 为按钮添加click事件监听
btnUpload.addEventListener("click",function() {
// 获取选中的文件列表
var files=document.querySelector("#filel").files;
if(files.length<=0) {
return alert("请选择需要上传的文件");
} else {
// 3、向formdata追加文件
// 创建对象
var fd=new FormData();
// 向FromData追加文件
fd.append("avatar",files[0]);
// 4发起上传请求
var xhr=new XMLHttpRequest();
// 显示文件上传进度
xhr.upload.onprogress=function(e) {
// e.lengthComputable是一个布尔值,表示当前上传资源是否具有可计算长度
if(e.lengthComputable) {
// e.loaded 已传输字节
// e.total 需传输字节
// 计算进度条百分比
var percentComplete=Math.ceil((e.loaded/e.total)*100);
// 设置进度条宽度
$("#percent").attr('style','width:'+percentComplete+'%;').html(percentComplete+'%');
}
}
xhr.upload.onload=function() {
$("#percent").removeClass().addClass("progress-bar progress-bar-success");
}
xhr.open("POST","http://www.liulongbin.top:3006/api/upload/avatar");
xhr.send(fd);
// 监听事件
xhr.onreadystatechange=function() {
if(xhr.readyState===4 && xhr.status===200) {
var data=JSON.parse(xhr.responseText);
if(data.status===200) {
// 上传成功
// 将服务器返回的图片地址设为img的属性
document.querySelector("img").src="http://www.liulongbin.top:3006"+data.url;
} else {
// 上传失败
console.log("图片上传失败"+data.message);
}
}
}
}
})
</script>
</body>
</html>
9、axios
eg:
<script>
// get请求
document.querySelector("#btn1").addEventListener("click",function() {
var url='http://www.liulongbin.top:3006/api/get';
var param={name:'zs',age:20};
axios.get(url,{params:param}).then(function(res) {
console.log(res);
})
})
// post请求
document.querySelector("#btn2").addEventListener("click",function() {
var url="http://www.liulongbin.top:3006/api/post";
var param={Location:'北京',address:"顺义"};
axios.post(url,param).then(function(res) {
// result是服务器返回的数据
var result=res.data;
console.log(result);
})
})
//直接发起axios请求 get
document.querySelector("#btn3").addEventListener("click",function() {
var url='http://www.liulongbin.top:3006/api/get';
var param={name:'钢铁侠',age:35};
axios ({
method:"GET",
url:url,
params:param
}).then(function(res) {
console.log(res.data);
})
})
//直接发起axios请求 post
document.querySelector("#btn4").addEventListener("click",function() {
var url='http://www.liulongbin.top:3006/api/post';
var param={name:'钢铁侠',age:35};
axios ({
method:"POST",
url:url,
price:param
}).then(function(res) {
console.log(res.data);
})
})
10、跨域与JSONP
10.1同源策略
10.2跨域
10.3JSONP
10.4防抖和节流
11、HTTP协议
11.1http协议简介
11.2http请求消息
11.3http响应消息
11.4http请求方法
11.5http响应状态代码
常见响应状态码