Ajax
ajax简介
ajax 全名 async javascript and XML(异步JavaScript和XML)
它可以在浏览器和服务器之间进行异步数据传输，实现页面不需要重新刷新就可以实现部分内容的更新
AJAX分为同步（async = false）和异步（async = true）
同步请求
同步请求是指当前发出请求后，浏览器什么都不能做， 必须得等到请求完成返回数据之后，才会执行后续的代码，
异步请求
默认异步：异步请求就当发出请求的同时，浏览器可以继续做任何事，
应用场景
Ajax在Web开发中有着广泛的应用，如网页表单验证、数据的异步提交、无刷新局部刷新等。Ajax可以用于Web应用程序的组件交互、数据的异步传输、客户端和服务端的交互等。常见的框架和库，如jQuery、React等，都有提供对Ajax的支持。
- 实时数据加载：AJAX 允许在不重新加载整个网页的情况下，与服务器交换数据并更新部分网页内容。例如，新闻网站可以利用 AJAX 在用户浏览当前新闻的同时，后台加载其他的新闻数据。
- 表单提交：当用户填写网页表单提交数据时，可以用 AJAX 技术异步提交，避免了整个页面的刷新，提升了用户体验。例如，用户在写评论时，可以直接提交而无需刷新页面。
- 分页与无限滚动：在很多网站中，如搜索结果的分页显示，或者新闻阅读、社交网站的滚动加载更多，AJAX 被广泛用于这些应用场景。
- 即时聊天应用：在实时通讯、聊天应用中，AJAX 可以实现新消息的实时接收和发送，提供良好的交互体验。
- 自动补全：在输入框中，当用户开始键入时，可以使用 AJAX 请求相关数据并提供实时的自动完成建议。
- 交互式操作：在一些需要用户频繁与服务器交互的应用中，如在线游戏，AJAX 可以实现高效的数据交互
优势
- 不需要插件的⽀持，原⽣ js 就可以使⽤
- ⽤户体验好（
不需要刷新⻚⾯就可以更新数据） 减轻服务端和带宽的负担- 缺点：搜索引擎的⽀持度不够，因为数据都不在⻚⾯上，搜索引擎搜索不到
使用ajax
1.创建XMLHttpRequest对象
使用new XMLHttpRequest()创建XMLHttpRequest对象。
const xhr = new XMLHttpRequest()
console.log(xhr)
XMLHttpRequest是Ajax技术中最关键的一部分，因为它提供了在JavaScript代码中与服务器进行HTTP网络通信的能力，从而实现了网页与服务器之间的异步通信。
通过使用XMLHttpRequest对象，开发人员可以在网页中通过JavaScript代码向服务器发送HTTP请求，并在不刷新整个页面的情况下获取服务器返回的数据，实现了异步通信和局部更新的效果。
XMLHttpRequest的常用方法
open(method, url, async, user, password)：初始化请求。参数分别为 HTTP 请求方法（GET、POST 等）、请求的 URL、是否异步（true 为异步）、用户名和密码（可选，用于认证）。send(data)：向服务器发送请求。当请求方法为 “POST” 时，可以传递请求主体（如：表单数据）给服务器。setRequestHeader(header, value)：设置请求头。例如，设置请求头 Content-Type 来告诉服务器请求主体的数据类型。getResponseHeader(header)：获取特定的响应头。例如，“Content-Type” 表示响应数据的 MIME 类型。getAllResponseHeaders()：获取所有响应头，响应头以字符串形式返回，每个响应头以换行符分隔。abort()：终止当前的请求，取消异步操作。
2.配置链接信息
常用属性：
readyState：整数值，表示 XMLHttpRequest 对象当前所处的状态（0～4）。status：整数值，表示服务器返回的 HTTP 状态码（如：200、404 等）。statusText：字符串值，表示 HTTP 状态的文本信息（如：“OK”）。response：服务器返回的响应数据，类型由responseType属性确定。responseText：字符串值，表示服务器返回的文本格式的响应数据。responseXML：Document 对象，表示服务器返回的 XML 格式的响应数据。
const xhr = new XMLHttpRequest()
xhr.open('get', './data.php')
// xhr.open('请求方式'，'请求地址',是否异步)
//默认 true 表示异步，false 表示同步
3.发送请求
xhr.send()
4.接受响应
xhr.onload = function () {* console.log(xhr.responseText) }
AJAX 状态码
用来表示一个 ajax 请求的全部过程中的某一个状态
- readyState == = 0 : 表示未初始化完成，也就是 open 方法还没有执行
- readyState == = 1 : 表示配置信息已经完成，也就是执行完 open 之后
- readyState == = 2 : 表示 send 方法已经执行完成
- readyState == = 3 : 表示正在解析响应内容
- readyState === 4 : 表示响应内容已经解析完毕，可以在客户端使用了
当 onreadystatechange 事件触发时，恰好 readyState 属性的值为4，表示请求操作已经完成，且 HTTP status 为 200，表示请求成功，那么就打印出服务器响应的内容，该内容可以通过使用 responseText 属性获取
监听状态
onreadystatechange：当XMLHttpRequest对象的readyState属性值改变时（状态码变更时），会触发该事件，我们可以通过这个事件监听器来判断Ajax请求的状态以及获取服务器响应的数据。
使用 ajax 发送请求时携带参数
get 和 post两个方式
使用post
1.无法使用缓存文件（更新服务器上的文件或数据库）
2 .向服务器发送大量数据（POST 没有数据量限制）
3 .发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
其他情况都使用get
使用post
const xhr = new XMLHttpRequest() xhr.open('post', './data.php')
封装
封装优势
- 代码复用性：通过封装 AJAX，您可以在不同的地方重复使用相同的代码，这可以节省开发时间和减少错误。只需传递不同的参数，就可以在各种不同的情况下使用同一函数。
- 代码的可读性和可维护性：封装后的代码更容易理解和维护。您不再需要在每个 AJAX 请求中重复相同的设置和错误处理代码，所有的复杂性都封装在了一个函数中。
- 错误处理：通过在一个中心位置处理所有 AJAX 错误，您可以保证所有错误都得到适当处理，而不是分散在许多不同的请求中。这在调试和解决问题时也会更为高效。
- 对变化的灵活性：如果您需要改变 AJAX 行为，比如改变某个公共的请求头或状态码处理机制，你只需要在封装的函数中修改，而不需要在每一个 AJAX 请求中单独修改。
只要输入以下便能获得ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
type 代表 请求方式
url 代表 请求url路径
data 代表 发送数据
success 代表 下载数据成功以后执行的函数
error 代表 下载数据失败以后执行的函数
*/
function $ajax({type = "get", url, data, success, error}){
var xhr = null;
try{
xhr = new XMLHttpRequest();
}catch(error){
xhr = new ActiveXObject("Microsoft.XMLHTTP")
}
if(type == "get" && data){
url += "?" + querystring(data);
}
xhr.open(type, url, true);
if(type == "get"){
xhr.send();
}else{
//设置提交数据格式
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
data ? xhr.send(querystring(data)) : xhr.send();
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
if(success){
success(xhr.responseText);
}
}else{
if(error){
error("Error：" + xhr.status);
}
}
}
}
}
function querystring(obj){
var str = '';
for(var attr in obj){
str += attr + "=" + obj[attr] + "&";
}
return str.substring(0, str.length - 1);
}
window.onload = function(){
var aBtns = document.getElementsByTagName("button");
/*
当我们下载完数据以后需要对数据的处理方式不一样
【注】$ajax，我们需要按照传参的顺序，依次传入我们的参数。
*/
aBtns[0].onclick = function(){
$ajax({
url: "code14/1.get.php",
data: {
username: "小明",
age: 18,
password: "123abc"
},
success: function(result){
alert("GET请求到的数据：" + result);
},
error: function(msg){
alert("GET请求数据错误：" + msg);
}
})
}
aBtns[1].onclick = function(){
$ajax({
type: "post",
url: "code14/2.post.php",
data: {
username: "小花",
age: 18,
password: "123abc"
},
success: function(result){
alert("POST请求到的数据：" + result);
},
error: function(msg){
alert("POST请求数据错误：" + msg);
}
})
}
}
</script>
</head>
<body>
<button>GET请求</button>
<button>POST请求</button>
</body>
</html>
