IDEA激活码
http协议
- 定义：超文本传输协议，基于请求响应模式的无状态，无连接应用层协议，一般应用于web程序中，制定客户端于服务端通讯规则
无状态：http协议不会保存数据，需要自己写代码保存
无连接：每次请求响应完成，连接自动断开 - url：统一资源定位符
作用：定位网络中的资源
格式：http://ip:port/path/res
| 单词 | 含义 |
|---|---|
| http | 网络传输协议 |
| ip | 服务器ip地址 |
| port | 网络端口 |
| path | 路径 |
| res | 资源 |
工作原理
- 建立连接，客户端与服务端建立连接
- 三次握手协议，客户端与服务端建立稳定可靠连接
- 发送请求，客户端向服务端发起一个请求
- 请求是一串有格式的文本信息=>请求包
- 请求行：请求方法，请求url地址，协议版本
- 请求头部，格式=>名称：值
content-type:数据类型
multipat/formdate表示参数是文件形式 - 请求正文
post请求时，发送给服务端的内容
username=‘admin’&password=123
注：post请求时，内容放请求正文
get请求时，内容放在url地址后面
- 响应信息
- 有格式的文本信息=>响应包
- 响应包：状态行，响应头部，响应正文
- 状态行:协议 状态码 状态码描述
- 响应头部 名称：值
- 响应正文
| 状态码 | 含义 |
|---|---|
| 200 | 成功 |
| 404 | 未找到 |
| 404.0 | 没有找到文件或目录 |
| 404.1 | 无法在所请求的端口访问web站点 |
| 404.2 | web服务扩展锁定策略阻止本请求 |
| 404.3 | MIME映射策略阻止本次请求 |
| 500 | 错误 |
| 500.12 | 应用程序正在wbe服务器上重新启动 |
| 500.13 | web服务器太忙 |
| 500.15 | 不允许直接请求Global.asa |
| 500.16 | UNC授权凭据不正确 |
| 500.18 | UNC授权凭据不能打开 |
| 500.100 | 内部ASP错误 |
- 断开连接：四次握手
进度事件
| 事件状态码 | 含义 |
|---|---|
| loadstart | 在接受第一个字节时触发 |
| error | 在请求出错时触发 |
| abort | 在调用abort()终止连接时触发 |
| load | 在成功接受完响应时触发 |
| loadend | 在通信完成时触发 |
注：
- load事件，在响应完成时立即触发，不用检查readyState属性
- progress事件，该属性在浏览器接受数据期间反复触发，该事件由三个属性：lengthComputable是一个布尔值，表示进度信息是否可用；position是接收到的字节数，totalSize是响应的content-length头部定义的总字节数
应用:显示响应百分比
let xhr=new XMLHttpRequest()
xhr.onload=function(e){
if((xhr.status>=200 &&xhr.status<300)||xhr.status==304){
alert(xhr.responseText)
}else{
alert('Request was unsuccessful:'+xhr.status)
}
}
xhr.onprogress=fucntion(e){
let divStatus=document.getElmentById('status')
if(e.lengthComputable){
divStatus.innerHTML='Received'+e.position+'of'+e.totalSize+'bytes'
}
}
xhr.open('get',网址，true)
xhr.send(null)
ajax异步网络通讯技术
定义：允许浏览器与服务器通信而无需刷新当前页面技术，不需要刷新整个页面，只刷新局部页面的一种异步通讯技术
- ajax核心对象XMLHttpRequest
注：这是window对象，每次调用new一个 - open(method,url,[true])建立与客户端与服务端的连接
注：ture表示异步，可选择写于不写
注：请求时内容类型要设置
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded') - send()发送请求
注：post参数放send()方法作为参数发送
get参数拼接到open()地址栏后
onreadstatechange=function(){
处理数据响应
1.就绪码属性响应当前进度（readyState）==4 表示响应完成
2. 状态码（status）==200表示ok 状态描述（statusText）
3. 响应responseText
}
接口文档
一个应用程序都会有一个对应的接口文档
前端怎么知道，我请的业务接口url地址是什么?请求方法是什么，需不需传参，服务端收到我请求后响应数据是什么?
登录接口
url:
method:
参数: username=admin&password=123
响应数据:
{
resultCode:1,
resultInfo:{
nick:'jack',
...
}
}
应用：登录页面正确后跳转到主页面
登陆页面代码
<!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>
</head>
<body>
<form action="">
<input type="text" name="name"><br>
<input type="password" name="password"><br>
<input type="submit" name="button" value="确定">
</form>
<script>
var formEle=document.querySelector('form')
var nameEle=document.querySelector('input[name="name"]')
var passwordEle=document.querySelector('input[name="password"]')
//表单提交时执行用户即密码验证
formEle.addEventListener('submit',function(e){
e.preventDefault()
//获取内置模块
let xhr=new window.XMLHttpRequest()
//建立连接
xhr.open('post','http://10.7.178.115:8088/api/login')
//传输格式
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
//发送请求 xhr.send(`username=${nameEle.value}&password=${passwordEle.value}`)
xhr.onreadystatechange=function(){
//判定是否成功
if(xhr.readyState==4){
if(xhr.status==200){
//成功拿到返回的数据
let data=xhr.responseText
data=JSON.parse(data)
if(data.resultCode==1){
//数据正确的话存储到本地 localStorage.setItem('usernews',JSON.stringify(data.resultInfo))
//跳转到主界面
location.href='index.html'
}else{
alert('用户名密码出错哦')
}
}else{
alert('网络错误')
}
}
}
})
</script>
</body>
</html>
主页面代码
<!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>
</head>
<body>
<div>主界面</div>
<div class="usernews"></div>
<script>
var newsEle=document.querySelector('.usernews')
//拿到存储在本地的后端数据
let userStr=localStorage.getItem('usernews')
let user=JSON.parse(userStr)
//拼接
let str=`
<p>${user.nick}</P>
<img src="${user.headerimg}">
`
newsEle.innerHTML=str
</script>
</body>
</html>
