Ajax

AJAX

优点

1. 无需刷新网页与服务器通信
2. 允许用户事件更新部分页面内容

缺点

1. 没有浏览记录，不能回退
2. 存在跨域问题（同源）
3. SEO不友好（搜索引擎优化）

express基本使用

安装

在当前文件夹下 open in terminal

node init --yes
node i express

创建

//1、引入express
const express = require('express')

//2、创建应用对象
const app = express()

//3、创建路由规则
//request 是对请求报文的封装
//response是对响应报文的封装
app.get('/', (req, res) => {
   
//设置响应
	res.send("hello express")
});

//4、监听端口启动服务
app.listen(8000, () => {
   
	console.log("服务已经启动，8000端口监听中")
})

测试

GET请求

server.js

//1、引入express
const express = require("express");

//2、创建应用对象
const app = express();

//3、创建路由规则
//request 是对请求报文的封装
//response是对响应报文的封装
app.get("/server", (req, res) => {
   
	//设置响应 设置允许跨域
	res.setHeader("Access-Control-Allow-Origin", "*");
	//设置响应体
	res.send("Hello AJAX");
});

//4、监听端口启动服务
app.listen(8000, () => {
   
	console.log("服务已经启动，8000端口监听中");
});

html页面

		<script>
			const btn = document.querySelector("button");
			const show = document.querySelector(".show");
			btn.addEventListener("click", function () {
   
				//1、创建对象
				const xhr = new XMLHttpRequest();
				// 2、初始化 设置请求方法和url
				xhr.open("GET", "http://localhost:8000/server");
				// 3、发送
				xhr.send();
				// 4、事件绑定 处理服务端返回的结果
				// readystate 是xhr对象的属性 表示状态 0 1 2 3 4
				xhr.onreadystatechange = function () {
   
					//判断（服务器返回的所有结果）
					if (xhr.readyState === 4) {
   
						// 判断响应状态码 200 404 401 500
						// 2xx 成功
						if (xhr.status >= 200 && xhr.status < 300) {
   
							//处理结果 行 头 空 体
							//1响应行
							console.log(xhr.status);//状态码
							console.log(xhr.responseText);//响应字符串
							console.log(xhr.getAllResponseHeaders());//所有响应头
							console.log(xhr.response);//响应体
							show.insertAdjacentHTML("afterbegin", xhr.response);
						} else {
   

						}
					}
				};
			});
		</script>

POST请求

server.js

app.post("/server", (req, res) => {
   
	res.setHeader("Access-Control-Allow-Origin", "*");
	//响应头
	res.setHeader("Access-Control-Allow-Headers", "*");
	res