1.http协议:通俗来讲就是一种约定,一种规则。其里规范了两种内容:
一.请求(发送内容叫做请求报文):浏览器browser给服务器server发的东西就是请求
- 行 :GET / s?ie=utf-8 HTTP/1.1
- 头 : Host:baidu.com cookies content-type user-Agent
- 空行
- 体 : username=admin&password=admin
二.响应(返回结果叫做响应报文):服务器给客户端/浏览器返回的东西叫做响应
- 行: HTTP/1.1 200/404/403(禁止)/401(未授权)/500(内部错误)/303(跳转) OK
- 头:Content-type:text/html;charset=utf-8
- Content-length:2048
- Content-encoding:gzip
- 体:<html>...</html>
- 空行
F12里面的分析:
headers
预览分析
请求头:requests headers;(请求行,请求头位置)
Query String Parameters:查询字符串参数,用于调整参数
响应头:response Headers
response:响应体
Express框架:
1.npm init --yes(在目标文件夹下) ——>装package.json文件
2.npm install/i express
3.node .js文件 运行文件命令
案例一:
<button>send request</button>
<div style="width: 200px;height:100px;border:2px solid #f40" id="ID"></div>
点击发送请求之后,服务器返回一个响应,响应内容在div内部完成渲染
1.创建对象
2.初始化
3.发送
4.事件绑定
on...when:当...时候
readystate是xhr对象中的属性,表示状态0 1 2 3 4
如果是4,表明服务端返回了所有的结果
判断响应状态码 2XX表示成功
处理结果:行() 头 空行(getAllResponseHeader()) 体(response)
<script>
const btn = document.getElementsByTagName('button')[0];
const ID =document.getElementById('ID');
btn.onclick = function(){
console.log('first')
const md = new XMLHttpRequest();
md.open('GET','http://127.0.0.1:8000/server');
md.send();
md.onreadystatechange = function(){
if(md.readyState === 4)
{
if(md.status >= 200 && md.status < 300)
{
console.log(md.status)
console.log(md.statusText)
console.log(md.getAllResponseHeaders())
console.log(md.response)
ID.innerHTML = md.response;
}
}
}
}
</script>
server.js
//设置响应头 使得ajax可以跨域
// response.setHeader('acess-Control-Allow-Origin','*');
// response.send('Hello Ajax')
const express = require("express");
const app = express();
app.get('/server',(request,response) =>{
response.setHeader('Access-Control-Allow-Origin','*')
response.send('Hello Ajax')
});
app.listen(8000,()=>{
console.log('start server...,port:8000')
})
地址栏传参:
https://www.baidu.com/s?wd=%E7%BE%8E%E5%A5%B3
Ajax传参数:
http://127.0.0.1:8000/server?a=100&b=200
鼠标划过事件:mouseover
ajax之POST请求,前面的是GET请求
这里就是要注意:server.js需要再写一个POST方法,否则不符合规范,不能实现对应的功能
server.js
const express = require("express");
const app = express();
app.get('/server',(request,response) =>{
response.setHeader('Access-Control-Allow-Origin','*')
response.send('Hello Ajax')
});
app.post('/server',(request,response) =>{
response.setHeader('Access-Control-Allow-Origin','*')
response.send('你看到了这段话就是猪')
});
app.listen(8000,()=>{
console.log('start server...,port:8000')
})
<!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>ajax的post请求</title>
</head>
<body>
<div style="width: 200px;height:100px;border:2px solid #f40" id="ID"></div>
<script>
const ID = document.getElementById('ID')
ID.addEventListener('mouseover',function(){
const md = new XMLHttpRequest();
md.open('POST','http://127.0.0.1:8000/server');
md.send();
md.onreadystatechange = function(){
if(md.readyState === 4)
{
if(md.status >= 200 && md.status < 300)
{
ID.innerHTML = md.response;
}
}
}
})
</script>
</body>
</html>
post也是可以传参数的:
md.send('admin=nixaing&password=123456');
md.send('a:100&b:200')
在这里面看参数: