一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第16天，点击查看活动详情。
ajax设置请求参数
在ajax中传递参数方式是在url里面添加后缀参数，如果有多个参数就用&符号分割
举个例子
http://127.0.0.1:8000/server?a=100&b=200
修改之后在网页中呈现的效果如图所示：
ajax发送post请求
post请求的发送与get请求雷同，只需要
1.在初始化阶段将类型设置为"POST"
2.在js中的设置响应头中设置为post
post设置请求体
post设置请求体，是在send中设置，例如:
xhr.send("a=100&b=200&c=300");
//或者
xhr.send("a:100&b:200&c:300");
//其实它的格式是不固定且随意的，只要只要服务端可以解析即可
ajax设置请求头信息
ajax设置请求头信息只需要在open方法后面再设置一个方法调用即可
例如：
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
//请求头信息也可以自定义,但是在打开网页时会报错，这是因为浏览器有安全机制，如果想要不报错，
//可以增加一个特殊响应头
此时我们就要改一下js的请求头部分
response.setHeader('Access-Control-Allow-Headers','*')
ajax服务端响应json数据
我们以一个具体的例子来研究ajax服务端是如何让响应Jason数据的
首先明确我们的需求是：在窗口下，只要我们按下任何一个键盘按键，就会向服务端发送请求，然后服务端返回结果，最后将结果在div当中做一个呈现
其前端代码如下：
<!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>JSON 响应</title>
<style>
#result {
width: 200px;
height: 150px;
border:solid 2px black;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
const result = document.getElementById("result");
//绑定键盘按下事件
window.onkeydown = function(){
//发送请求
const xhr = new XMLHttpRequest();
//设置响应体数据的类型
xhr.responseType="json";
//初始化
xhr.open("GET","http://127.0.0.1:8000/json-server");
//发送
xhr.send();
//事件绑定
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status>=200&&xhr.status<300){
console.log(xhr.response);
result.innerHTML=xhr.response;
}
}
}
}
</script>
</body>
</html>
其后端代码如下所示：
const express = require("express");
const app = express();
app.all("/json-server",(request,response)=>{
//设置响应头
response.setHeader('Access-Control-Allow-Origin','*')
response.setHeader('Access-Control-Allow-Headers','*')
//响应一个数据
const data={
name:"happy"
};
//对对象进行字符串转换
let str=JSON.stringify(data);
//send方法里面只能接收字符串
response.send(str);
});
//监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动，8000端口监听中...");
})
但是当数据量较大时这样的方式显然是不行的，于是我们就来介绍以下两种方法。
一.手动对数据转换
将事件绑定体中的语句换为这几句即可
let data=JSON.parse(xhr.response);
console.log(data);
result.innerHTML=data.name;
二.自动转换
1.在初始化前添加：
xhr.responseType="json";
2.在事件绑定体中添加:
console.log(xhr.response);
result.innerHTML=xhr.response.name;
