为啥用ajax发送post请求时，需要设置请求头类型为application/x-www-form-urlencoded
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了为啥用ajax发送post请求时，需要设置请求头类型为application/x-www-form-urlencoded相关的知识，希望对你有一定的参考价值。
在书上看到的解释是：默认情况下，服务器对post请求和提交表单的请求不会一视同仁，需要服务器端有程序读取发送过来的原始数据，并从中解析出有用的部分。不过，可以模仿表单提交。。。
看过以后不是很理解，难道是服务器有现成的处理表单数据的方法，而如果是一般的post数据，需要我们在服务器上自己写处理的方法？所以才伪装成表单提交？
求解答，谢谢！
发送post请求的方法如下面所示：
var XMLHttpReq;
//创建XMLHttpRequest对象
function createXMLHttpRequest() if(window.XMLHttpRequest) //Mozilla 浏览
XMLHttpReq = new XMLHttpRequest();
else if (window.ActiveXObject) // IE浏览器
try XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
catch (e) try XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
catch (e)
//发送请求函
function sendRequest(url,para)
createXMLHttpRequest();
XMLHttpReq.open("POST", url,true);
XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
XMLHttpReq.setRequestHeader("Content-Type", "application/x-www-form-
urlencoded");
XMLHttpReq.send(para); // 发送请求
// 处理返回信息函数
function processResponse()
if (XMLHttpReq.readyState == 4) // 判断对象状态
if (XMLHttpReq.status == 200) // 信息已经成功返回，开始处理信息
var res=XMLHttpReq.responseText;
window.alert(res);
else //页面不正常
window.alert("您所请求的页面有异常。");
注意：用ajax发送post需要设置请求头类型为application/x-www-form-urlencoded。
Ajax--发送POST请求 & POST设置请求体 & 设置请求头信息
1.Ajax–发送POST请求
鼠标移动到窗口中，会发送POST请求，鼠标离开窗口时，会把窗口内容清空
1.1 请求前的准备
1.1.1 HTML页面
ajaxDemo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX GET 请求</title>
<style>
#result {
width: 300px;
height: 150px;
border: solid 2px black;
margin: auto;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
</script>
</body>
</html>
1.1.2 服务端
server.js
//1. 引入express
const express = require('express');
//2. 创建应用对象
const app = express();
//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (request, response) => {
//设置响应体 => 允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//设置响应
response.send('HELLO EXPRESS');
});
app.post('/server', (request, response) => {
//设置响应体 => 允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//设置响应
response.send('HELLO EXPRESS');
});
//4. 监听端口启动服务
app.listen(8000, () => {
console.log("服务已经启动, 8000 端口监听中....");
});
启动服务端:
1.2 AJAX GET 请求
代码:
ajaxDemo.html 中的script标签
//获取元素对象
const result = document.getElementById("result");
//绑定事件
result.addEventListener("mouseover", function () {
//1. 创建对象
const xhr = new XMLHttpRequest();
//2. 初始化 设置类型与 URL
xhr.open('POST', '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) {
//处理服务端返回的结果
result.innerText = xhr.response;
}
}
}
});
result.addEventListener('mouseleave', () => {
result.innerText = "";
})
1.3 测试: 我们并没有刷新就从服务器拿回了结果
2. POST设置请求体
代码:
ajaxDemo.html 中的script标签
发送ajax请求:
//3. 发送
xhr.send('a=100&b=200&c=300');
// xhr.send('a:100&b:200&c:300');
// xhr.send('1233211234567');
发送的内容可以是任意个数，前提是服务器有对应的解析方式，一般情况下用第一种方式和Json个数居多
结果:
3. 设置请求头信息
代码:
ajaxDemo.html 中的script标签
发送ajax请求:
//设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.setRequestHeader('name','HaiMianBaoBao');
一般会把身份校验的信息放在头信息里面，把他传递给服务器，由服务器对参数做一个提取,对用户的身份做一个校验。
如何设置自定义请求头标签: 更改服务端代码:
server.js
//1. 引入express
const express = require('express');
//2. 创建应用对象
const app = express();
//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
// all可以接收任意方式的请求
app.all('/server', (request, response) => {
response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Headers', '*');
//设置响应
response.send('HELLO EXPRESS');
});
//4. 监听端口启动服务
app.listen(8000, () => {
console.log("服务已经启动, 8000 端口监听中....");
});
以上是关于为啥用ajax发送post请求时，需要设置请求头类型为application/x-www-form-urlencoded的主要内容，如果未能解决你的问题，请参考以下文章
Ajax--发送POST请求 & POST设置请求体 & 设置请求头信息
为啥 POST 不支持字符集，但 AJAX 请求可以？雄猫 6