Ajax的几种请求方式

原生AJAX

AJAX 代表异步的 JavaScript 和 XML（Asynchronous JavaScript And XML）
你可以使用 AJAX 最主要的两个特性做下列事：

在不重新加载页面的情况下发送请求给服务器。
接收并使用从服务器发来的数据。

	//原生Ajax请求
	var xmlHttp;
	//创建XMLHttpRequest实例
	if (window.XMLHttpRequest) {
		xmlHttp = new XMLHttpRequest();
	} else {
		xmlHttp = ActiveXObject("Microsoft.xmlHttp")
	}

	if (!xmlHttp) {
		console.log("创建XMlHttpRequest未成功！")
		return false;
	}

	xmlHttp.onreadystatechange = function () {
		try {
			if (xmlHttp.readyState === XMLHttpRequest.DONE || xmlHttp.readyState === 4) {
				//很好，服务器以及接收到了响应
				if (xmlHttp.status === 200) {
					//响应码为200成功！
					//解析返回的json数据
					console.log("收到服务器数据：", JSON.parse(xmlHttp.responseText).data);
				} else {
					//请求有问题
					console.log("请求有问题！")
				}
			} else {
				// 还没准备好。
				console.log("目前的请求状态：", xmlHttp.readyState);
			}
		} catch (e) {
			console.log("遇到了问题：", e.description)
		}
	}

	//发送get请求（请求方式，请求地址，是否异步）
	// xmlHttp.open("get", "http://127.0.0.1:5000?name=vghunter&age=12", true)
	// //发送的数据
	// xmlHttp.send("原生ajax发送的请求数据");

	//post请求
	xmlHttp.open("POST", "http://127.0.0.1:5000", true)
	//向服务器发送请求头指定内容数据类型使用MIME
	xmlHttp.setRequestHeader("Content-type", "application/json");
	xmlHttp.send(JSON.stringify({ name: "vght" }));
}

• 我们首先创建一个XMLhttpRequest实例赋值给xmlHttp
• 使用xmlHttp.open()来打开一个请求，其中第一个参数是HTTP的请求方法如GET、POST等。第二个参数是请求地址（URL）,可以使用query方式向服务端传输数据。第三个参数是可选择的，用于设置是否进行异步请求。如果为true则为异步请求，true为默认值。
• 使用xmlHttp.send()来设置需要给服务端发送的数据，只支持字符串，可以利用JSON来进行编译。
• 使用xmlHttp.setRequestHeader来设置请求头部，比如在使用POST请求的时候你必须告诉服务器你发送的数据类型是什么，如果为表单数据需要设置请求头Context-type为application/x-www-form-urlencoded，属性值使用MIME类型。如果发送的数据类型为json则设置Content-type为application/json。
• 使用xmlHttp.onreadystatechange来处理服务端响应的数据，一般将其赋值为一个函数。在函数体内我们需要验证请求是否被服务端接收并相应了，使用xmlHttp.readyState获取状态值，其中在XMLHTTPRequest.readyState有记载，如下所示：
  • 0（未初始化）或（请求还未初始化）
  • 1（正在加载）或（已建立服务器链接）
  • 2（已加载）或（请求已接收）
  • 3（交互）或（正在处理请求）
  • 4（完成）或（请求已完成并且响应已准备好）

在通信错误的事件中（例如服务器宕机），在访问响应状态 onreadystatechange 方法中会抛出一个 exception。为了缓和这种情况，可以使用 try…catch 把 if…else 语句包裹起来。

jquery的Ajax

$.ajax({
	type: "post",//get
	url: "http://127.0.0.1:5000",
	data: {
		name: "vghunter",
		age: 20
	},
	xhrFields: {
		withCredentials: true  //是否携带身份凭证（cookie)
	},
	dataType: null,
	success: function (response, status) {
		console.log("收到后端返回数据：", response)
		console.log("状态码：", status)
	},
	error: function (error) {
		console.log("错误：", error)
	}
});

axios基础请求

//axios使用get请求
axios.get("http://127.0.0.1:5000", { params: { name: "vghunter", age: 15 } })
	.then(function (response) {
		console.log(response.data)
	})
	.catch(function (error) {
		console.log(error)
	})
	.finally(function () {
		// 总是会执行
	});

//axios使用post请求
axios.post("http://127.0.0.1:5000", { name: "vghunter", age: 16 })
	.then(function (response) {
		console.log(response)
	})
	.catch(function () {
		console.log(error)
	})
	.finally(function () {
		//总是会执行
	})

nodejs接收前端ajax数据

nodejs中使用express创建一个简单的服务器，用于实现接收前端ajax请求

var express = require("express")
//bodyParser中间件
const bodyParser = require('body-parser'); 

//解决跨域问题
var cors = require('cors')
var app = express();

app.use(cors());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());


app.use((req,res,next)=>{
	console.log("请求的资源是：",req.path) 
	console.log("请求的地址是：",req.get("host"))
	next();
})

//处理get请求
app.get('/', function(req,res){
	console.log("有人使用get请求server")
	console.log(req.query)
	res.send({name:"user",age:18});
})

//处理post请求
app.post('/',function(req,res){
	console.log("有人使用post请求server")
	console.log("req.query:",req.query)
	console.log("req.body:",req.body)
	console.log(req.headers["content-type"])
	// res.send("你的post请求成功~")
	res.setHeader("Context-type","application/json")
	res.send({status:200,data:"post返回的数据"})
})


//创建home路由
app.get('/home',function(req,res){
	console.log('有人请求了home路由')
	console.log(req.query)
	res.send("你请求home路由成功")
})

//监听端口为5000
app.listen(5000,function(){
	console.log("应用实例，访问地址为 http://127.0.0.1:5000")
})

body-parser中间件

body-parser是nodejs的一个中间件，用于处理HTTP请求中的数据。当客户端向服务器发送 POST、PUT、DELETE 等请求时，通常会将数据放在请求体中，而 body-parser 可以将请求体中的数据解析出来，供后续的路由处理函数使用。
body-parser可以解析的请求类型如下：

• JSON 格式
• Raw 格式
• 文本格式
• URL-encoded 格式

  在 Express 框架中，我们通常需要使用 body-parser 中间件来解析请求体中的数据。在 Express 4.16.0 之后的版本中，body-parser 已经成为了 Express 的一部分，可以直接通过 express.json() 和 express.urlencoded() 方法来解析请求体中的 JSON 和 URL-encoded 格式数据。

  const express = require('express');
  
  const app = express();
  
  // 解析 URL-encoded 格式请求体
  app.use(express.urlencoded({ extended: false }));
  // 解析 JSON 格式请求体
  app.use(express.json());

  http工作原理原理

http基本介绍

HTTP（HyperText Transfer Protocol）是一种用于传输Web数据的协议。它是建立在TCP/IP协议之上的，用于在Web浏览器和Web服务器之间传输数据。

HTTP通信遵循请求/响应模型，客户端发起请求，服务器端响应请求。具体地说，HTTP的工作原理如下：

1. 客户端发起请求：客户端（如Web浏览器）向服务器发起HTTP请求，请求中包含请求方法（GET、POST等）、请求资源的URL、HTTP版本、请求头等信息。

2. 服务器响应请求：服务器接收到客户端的请求后，进行处理，并向客户端返回HTTP响应，响应中包含状态码、响应头、响应体等信息。

3. 关闭连接：HTTP是一种无状态协议，每次请求和响应完成后都会关闭连接，从而保持了连接的短暂性和低廉性。

http连接过程

HTTP 的链接是基于 TCP 协议的，因此在建立连接和关闭连接的时候，需要进行 三次握手和四次挥手。

具体来说，HTTP 的连接建立过程如下：

1. 客户端发送 SYN 包给服务器端，请求建立连接。
2. 服务器端收到 SYN 包后，回复一个 SYN + ACK 包，表示确认客户端的请求，同时告诉客户端自己也准备好建立连接。
3. 客户端收到 SYN + ACK 包后，再回复一个 ACK 包，表示确认收到了服务器端的回复，连接建立成功。

HTTP 的连接关闭过程如下：

1. 客户端发送一个 FIN 包，表示自己不再发送数据。
2. 服务器端收到 FIN 包后，回复一个 ACK 包，表示确认收到客户端的请求。
3. 服务器端发送一个 FIN 包，表示自己也不再发送数据。
4. 客户端收到服务器端的 FIN 包后，回复一个 ACK 包，表示确认收到了服务器端的请求，连接关闭。

因此，HTTP 的一次完整的交互包括连接建立和连接关闭，需要进行三次握手和四次挥手。

ACK包和SYN包和FIN包

在TCP协议中，三次握手和四次挥手中使用了SYN和ACK包、FIN包等。

SYN（synchronize）：同步序列编号。在建立TCP连接时，SYN用来同步序号，使通信双方都知道从哪里开始发送数据。SYN包中会带有一个初始序号（ISN）。

ACK（acknowledgement）：确认。用于确认收到了对方的数据包。

FIN（finish）：终止。用于关闭连接时发送的包，表示数据发送完毕，希望断开连接。

在TCP连接的建立阶段，第一次握手中发送的是SYN包，第二次握手中发送的是SYN+ACK包，第三次握手中发送的是ACK包。

在TCP连接的关闭阶段，第一次挥手中发送的是FIN包，第二次挥手中发送的是ACK包，第三次挥手中发送的是FIN包，第四次挥手中发送的是ACK包。