回顾之前写代码时遇到的疑问
目录
为什么在Ajax中需要为post请求设置响应头，而get请求不需要
上述js代码中第三行的event是什么，event.preventDefault()方法有什么作用
代码案例
使用Ajax发送get请求案例：
//1.创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//使用xhr对象调用回调函数
xhr.onreadystatechange=function (){
if (this.readyState == 4) {
if (this.status == 200) {
document.getElementById("div1").innerText=this.responseText
}else{
alert(this.status)
}
}
}
let value = document.getElementById("ipt1").value;
//打开通道
xhr.open("get","/ajax/ajaxrequest1?value="+value,true)
//发送数据
xhr.send()使用Ajax发送post请求案例：
//1.创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//使用xhr调用回调函数
xhr.onreadystatechange=function (){
if (this.readyState == 4) {
if (this.status == 200) {
document.getElementById("div2").innerText=this.responseText
}else{
alert(this.status)
}
}
}
//打开通道
xhr.open("post","/ajax/ajaxrequest1",true)
//为post请求添加响应头信息
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
let value1 = document.getElementById("ipt1").value;
//发送数据
xhr.send("username="+value1)很明显在发送post请求的时候，我们为其加入了请求头信息；为什么会这样呢？
为什么在Ajax中需要为post请求设置响应头，而get请求不需要
在Ajax中，POST请求和GET请求都需要设置响应头。无论请求方式是POST还是GET，服务器端都需要在响应头中设置Content-Type和其他相关的头信息来告知客户端返回的数据类型和编码方式。然而，由于POST请求通常会传递更多的数据，因此在处理POST请求时更加需要注意请求头和响应头的设置。
对于post请求：
在Ajax中，POST和GET请求的主要区别在于数据传递方式。GET请求通过URL发送数据，而POST请求则是将数据放在请求体中传输。由于POST请求需要在请求体中传输数据，因此需要设置响应头以告知服务器相应的数据格式和编码类型。
设置响应头可以确保服务器能够正确地解析请求体中的数据，以及客户端能够正确地处理来自服务器的响应。而GET请求中没有请求体，因此无需设置响应头。
此外，在Ajax中使用POST请求时，还需要注意一些安全性问题，如跨站点脚本攻击（XSS）和跨站点请求伪造（CSRF）。因此，在使用POST请求时，必须确保请求头和响应头都被正确设置，并且数据传输过程中进行了适当的加密和验证。
然而对应get请求：
实际上每当Ajax发送GET请求时，浏览器会自动为该请求设置响应头。在接收到服务器的响应后，浏览器会根据响应头中的Content-Type字段来判断响应内容的类型，并将其解析为对应的数据格式。
因为GET请求的数据通常包含在URL中，而不是在请求体中传输，所以在服务器端没有必要设置Content-Type和Content-Length等响应头信息。浏览器可以根据响应头中的Content-Type字段来判断响应内容的类型，并自动进行解析和处理。
虽然在GET请求中不需要设置响应头信息，但是在某些情况下，可能需要设置其他响应头，例如Cache-Control和Expires等，以便浏览器缓存响应结果并优化性能。但这些设置并非强制性要求，而应根据实际需要进行设置。
Ajax中为post请求设置响应头，底层实现原理；
在Ajax中，POST请求和GET请求都需要设置响应头。无论请求方式是POST还是GET，服务器端都需要在响应头中设置Content-Type和其他相关的头信息来告知客户端返回的数据类型和编码方式。
从底层实现原理角度来看，在Ajax中发送POST请求时，会创建一个XMLHttpRequest对象，并向服务器发起请求。当服务器收到请求后，会根据请求头中的Content-Type字段判断请求体的类型。如果Content-Type被设置为application/x-www-form-urlencoded，则说明请求数据是经过URL编码的键值对形式，此时服务器会将请求体解析为键值对的形式并处理请求。如果Content-Type被设置为application/json，则说明请求数据是以JSON格式提交的，此时服务器会解析JSON数据并进行相应的处理。
由于POST请求通常会传递更多的数据，因此在处理POST请求时更加需要注意请求头和响应头的设置，以确保数据能够正确地传递和解析。因此，无论是POST请求还是GET请求，都需要设置响应头来确保数据能够正确地传输和解析。
AJAX中get请求方式为什么不用我们手动的为其设置响应头
在AJAX中，GET请求方式不需要手动设置响应头。当浏览器发起一个AJAX GET请求时，浏览器会自动为该请求设置一些默认的请求头，其中包括Accept、Accept-Encoding、Accept-Language等，而服务器会根据这些请求头来判断浏览器所能接受的数据格式和编码方式，并返回相应的内容。因此，我们在使用AJAX GET请求时通常不需要手动设置响应头。
不过，如果我们需要指定一些特定的响应头，比如设置响应结果的Content-Type，也可以在服务器端通过设置HTTP响应头来实现。此时，无论是GET请求还是POST请求，都需要在服务器端设置相应的响应头信息。
AJAXpost请求的请求格式以及代码案例
AJAX是一种在不刷新整个页面的情况下更新部分网页的技术。POST请求可以向服务器发送数据并接收响应。AJAX POST请求的请求格式通常包括头部和数据两个部分。
请求头部：
-
Content-Type: 指定请求数据的格式，通常为application/json或application/x-www-form-urlencoded。
-
X-Requested-With: XMLHttpRequest，指示这是一个AJAX请求。
请求数据：
数据可以是纯文本、JSON格式或表单数据。
以下是一个AJAX POST请求的代码例子，向服务器发送用户名和密码，并接收响应：
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
}
};
xhttp.open("POST", "/login", true);
xhttp.setRequestHeader("Content-type", "application/json");
xhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
var data = JSON.stringify({"username": "Alice", "password": "123"});
xhttp.send(data);此代码将请求发送到服务器的/login端点，使用JSON格式向服务器发送数据。当响应可用时，该函数将打印响应文本。请注意，在open()方法中，第三个参数设置为true，表示AJAX请求是异步的。
在Ajax的post请求中以下代码能不能没有：xhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
可以没有设置请求头部 X-Requested-With 为 XMLHttpRequest，但是这个请求头部通常被用来标识 AJAX 请求。如果没有设置该请求头部，服务器可能无法判断请求是否为 AJAX 请求，从而影响处理方式。因此，建议在 AJAX POST 请求中添加该请求头部，以确保服务器能正确地处理请求。
使用Ajax做一个登陆验证项目
一个基本的登录验证项目可以使用 AJAX 发送 POST 请求，将用户名和密码发送到服务器验证，然后根据服务器响应决定是否允许用户登录。
以下是一个简单的登录验证项目的代码示例：
HTML 文件：
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="login.js"></script>
</head>
<body>
<form id="loginForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Login">
</form>
<div id="message"></div>
</body>
</html>此 HTML 文件包含一个表单，用户输入用户名和密码。当用户提交表单时，将触发 JavaScript 文件中的 AJAX 请求。
JavaScript 文件：
$(document).ready(function() {
$('#loginForm').submit(function(event) {
event.preventDefault();
var username = $('#username').val();
var password = $('#password').val();
$.ajax({
type: 'POST',
url: '/login',
data: {username: username, password: password},
success: function(response) {
if (response === 'success') {
$('#message').text('Login successful.');
} else {
$('#message').text('Invalid username or password.');
}
},
error: function(xhr, status, error) {
console.log(error);
}
});
});
});此 JavaScript 文件包含一个事件监听器，当用户提交表单时，将触发 AJAX POST 请求。请求的数据为用户名和密码，并发送到服务器的/login端点。如果响应为“success”，则显示登录成功消息；否则，显示无效的用户名或密码消息。
在服务器端，可以使用任何后端语言处理 POST 请求并验证用户凭据。如果验证通过，则可以向客户端发送“success”响应，否则发送其他错误信息。
上述js代码中第三行的event是什么，event.preventDefault()方法有什么作用
在上述JavaScript代码中，第三行的event是一个事件对象，它代表了提交表单时触发的事件。
event.preventDefault()方法的作用是阻止浏览器执行默认的表单提交行为。由于我们使用Ajax发送表单数据进行
异步提交，所以需要阻止默认的表单提交行为，从而避免页面的刷新和跳转。
event事件对象是不是内置对象
是的，事件对象是浏览器内置的对象，它在触发事件时自动创建并传递给事件处理函数，包含与该事件相关的信息，如事件类型、触发元素、鼠标位置等。不同的事件类型会创建不同类型的事件对象。在JavaScript中，我们可以通过事件处理函数的参数来访问事件对象。例如：
document.getElementById("myButton").addEventListener("click", function(event){
// 在这里访问事件对象
console.log(event.type); // 输出 "click"
console.log(event.target.id); // 输出 "myButton"
});