1. 概要
1.1 Ajax概要
Ajax 全称作 Asynchronous Javascript and XML， 即触发器的 JS 和 XML
1.2 XML概要
XML 与 HTML 类似于
相同的是，HTML 采用原订义条码，XML 没原订义条码
如：我有两个小学生统计数据，在 XML 中常这种写
// name：唐僧 age：18 sex：男
<student>
<name>唐僧</name>
<age>18</age>
<sex>男</sex>
</student>
1.3 HTTP 概要
HTTP 是一类协定，称LZ77统计数据传输协定。时常采用，且下面会加进，须要单纯介绍。
当他们在腾讯中敲了个quarterfinal，搜寻小东西时，会主要包括下列五个小东西
# 允诺
行 GET<允诺方式> /s?ie=utf-8<传达模块> HTTP/1.1版本<HTTP版>
头 Host: atguigu.com
Cookie: name=guigu
Content-type: application/x-www-form-urlencoded
Uesr-Agent: Chrome 83
空行
体 (假如是GET允诺，这儿允诺体是空的； 假如是POST允诺， 这儿允诺体 可有可无)
# 响应报文
行 HTTP/1.1 200 OK
头 Content-type: text/html;chaeset=utf-8
Content-length: 2048
Content-encoding: gzip
梵天
体 <HTML>
–>
2. GET允诺
实验结果：
点击按钮后
进行上面操作时，首先要下载 node.js 并部署 express . 这儿不多描述
GET允诺案例
需求：点击按钮，向服务端发送允诺，然后将服务端的响应体结果，返回到 div 中
前端环境：
打开 VSCode，建立两个 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>
<style>
.div {
width: 200px;
height: 100px;
border: solid 1px #90b;
</style>
<body>
<butto var btn = document.querySelector(button)
var result = document.querySelector(div)
// 绑定事件
btn.addEventListener(click, function () {
// 1. 创建对象
var xhr = new XMLHttpRequest();
// 2. 初始化 设置允诺方式和 url
xhr.open(GET, http://127.0.0.1.8000/server)
// 3. 发送
xhr.send();
// 4. 事件绑定，处理服务端返回结果
xhr.onreadystatechange = function(){
//判断
if(xhr.readyState === 4){
// 判断响应的状态 200 404 403
// 2xx 成功
if(xhr.status >= 200 && xhr.status <300){
//处理结果
// console.log(xhr.status); //状态码
// console.log(xhr.statusText); //状态字符串// console.log(xhr.getAllResponseHeaders()); // 所有响应头
// console.log(xhr.response); //响应体
xhr.innerHTML = xhr.response;
}
}
}
}
</script>
</body>
</html>
服务端环境：
在同级目录下创建两个 server.js 文件
// 服务端
// 1. 引入express
const express = require(express);
// 2. 创建应用对象
const app = express();
// 3. 创建路由规则
app.get(/server, (request, response) => {
// 设置响应头 设置允许跨域
response.setHeader(Access-Control-Allow-Origin, *);
// 设置响应体
response.send(Hello Ajax!);
})
// 4. 监听端口启动服务
app.listen(8000,() => {
})
3. POST允诺
post 允诺与 GET 允诺大同小异
初始化 open 延展 – 传参
前端代码只需变动两个地方：
// 2. 初始化 设置允诺方式 和 url
xhr.open(POST, http://127.0.0.1.8000/server)
当他们想传达模块时
open( ‘允诺方式’ ，’ 域名 ?a=100&b=200&c=300 )
模块和域名用 ? 隔开；相同模块间用 & 隔开
post路由
服务端须要新增 post 路由：
// 3. 创建路由规则
app.post(/server, (request, response) => {
// 设置响应头 设置允许跨域
response.setHeader(Access-Control-Allow-Origin, *);
// 设置响应体
response.send(Hello Ajax!);
})
1
POST 允诺会伴随 option 允诺发出，所以须要创建路由规则 app.all 内容相同4. 服务端响应 JSON 统计数据
上面操作须要学习两行新代码：// 对对象进行字符串转换
let str = JSON.stringify(data);
// 手动对统计数据转化
let data = JSON.parse(xhr.response)
手动统计数据转化
首先配置路由app.all(/json-server,( request, response) => {
// 设置响应头允许跨域
response.setHeader(Access-Control-Allow-Origin, *)
// 响应头
response.setHeader(Access-Control-Allow-Header, *)
// 响应两个统计数据`在这儿插入代码片`
const data = {
name:atguigu
}
// 对对象进行字符串转换 (此时不能直接将 data 放入 response.send() )
let str = JSON.stringify(data);
// 设置响应体
// response.send(hello Ajax)
response.send(str)
})
前端代码修改
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status <300){
// 手动对统计数据进行转换
let data = JSON.parse(xhr.response);
result.innerHTML = data.name
}
}
}
自动统计数据转化
服务端路由配置，与上文相同
直接修改前端代码：
// 1. 创建对象
var xhr = new XMLHttpRequest();
// 设置统计数据体响应的类型：：
xhr.responseType = json;
// 2. 初始化 设置允诺方式 和 url
xhr.open(GET, http://127.0.0.1.8000/server)
// 3. 发送
xhr.send();
// 4. 事件绑定，处理服务端返回结果
最后打印时：
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status <300){
// 手动对统计数据进行转换
// let data = JSON.parse(xhr.response);
// result.innerHTML = data.name;
result.innerHTML = xhr.response.name;
}
}
}
1
我建了两个前端小白交流群，点击上面复制我的微信号，添加进入交流群。我会给大家分享我收集整理的各种学习资料，组织大家一起做项目练习，帮助大家匹配一位学习伙伴互相监督学习，欢迎加入。
点击加入小白交流群，分享资料，一起打卡学习做项目
