ajax发送post请求和get请求
一：前言
最近分配了一个小需求，修改一下官网的静态html网页，将其原有的静态页面，改为后端获取部分数据，进行页面渲染的方式。让其可以进行调用接口，获得接口返回信息，从而可以和后端管理系统相配合，不必每次去服务器上手动修改对应的html文件。
二：具体实现
由于是修改静态网页，本着最快，最简单实现的原则，选择了直接通过ajax进行接口调用。
2.1 什么是ajax
Ajax是一种用于创建动态Web应用程序的技术，它可以在不刷新整个页面的情况下向Web服务器发送请求和接收响应。这使得Web应用程序更加灵活和响应，因为它可以更新部分页面内容，而不需要重新加载整个页面。
Ajax是一种使用JavaScript、XML和HTTP等技术的客户端和服务器端之间进行异步通信的技术。通过使用Ajax，Web应用程序可以异步地从Web服务器获取数据，而不需要刷新整个页面。这使得Web应用程序更加流畅和高效，因为它可以在后台处理数据并更新页面内容，而不会使用户的浏览体验受到影响。
2.2 如何实现通过ajax发送http请求
2.2.1 实现流程
2.2.2 整体代码
下面贴出通过ajax发送http请求的整个实例代码，大家可以重点看 javascript 代码，先对整体的流程有一个了解即可。下面我们会着重的解释此篇代码的重点部分！
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ajax get 请求</title> <head> <body> <button> 点击发送请求</button> <a onclick="onLoad">点击下载</a> <script type="text/javascript"> function onLoad(){ console.log("调用onload"); window.open("https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0b98d257-1fd1-45f4-8cc4-8b230ee6cc4a/c66dbd9a-9f91-456b-a2e3-5b9d4039af8a.apk?filename=AR助教机器人v2.2.53.apk") } //获取button元素 const btn = document.getElementsByTagName('button')[0]; btn.onclick = function(){ // 创建对象 const xhr = new XMLHttpRequest(); xhr.responseType="json" //初始化 xhr.open('GET','http://localhost:8000/app-web/AppInfoManage/getAppInfoUrl'); //发送 xhr.send(); //处理返回值 xhr.onreadystatechange = function(){ if(xhr.readyState === 4){ if(xhr.status == '200'){ console.log("url",xhr.response); //手动对数据转化 let data = xhr.response; console.log(data.data); } } } } </script> </body> </html>
三：重点代码解释
这里发送的是一个get请求，请求的地址是一个我自己使用SpringBoot编写的后端接口。下面说一下里面的重点语句。
3.1 创建XMLHttpRequest对象
// 创建对象 const xhr = new XMLHttpRequest();
这行代码创建了一个名为xhr的新XMLHttpRequest对象。
XMLHttpRequest是浏览器提供的一种用于发送HTTP请求和接收响应的API。
创建一个XMLHttpRequest对象后，可以使用其方法和属性来设置和发送请求，处理响应，以及更新页面内容。
具体来说，可以使用XMLHttpRequest对象的open()方法来指定请求类型（如GET或POST）、请求的URL和是否异步处理请求。
3.2 初始化XMLHttpRequest对象
xhr.open('GET','http://localhost:8000/app-web/AppInfoManage/getAppInfoUrl');
这行代码使用XMLHttpRequest对象的open()方法来设置HTTP请求的类型和URL.第一个参数指定了请求的类型，第二个参数指定了请求的url地址。
注意，open()方法只是设置了HTTP请求的类型和URL，而没有真正发送HTTP请求。
3.3 发送HTTP请求
xhr.send();
调用xhr.send()方法后，浏览器将异步发送请求，并在收到响应时触发XMLHttpRequest对象的onload事件或onreadystatechange事件。
3.4 根据响应进行处理
xhr.onreadystatechange = function(){ if(xhr.readyState === 4){ if(xhr.status == '200'){ console.log("url",xhr.response); //手动对数据转化 let data = xhr.response; console.log(data.data); } } }
XMLHttpRequest对象的onreadystatechange事件是用于监听HTTP请求状态变化的事件，该事件会在 XMLHttpRequest 对象发生状态改变时触发。具体来说，当XMLHttpRequest对象的状态发生改变时，会自动调用该事件的回调函数，这个回调函数可以用来检查请求的状态并做出相应的处理。
这里的xhr.readyState ===4 标识的就是XMLHttpRequest对象的状态码，状态码一共有5个状态分别是：
我们这里选择状态为4，也就是调用完全结束的时候，通过判断状态码来获取对应的data数据，获取到我们想要从后端接口内所需要的数据
3.5 请求带参
这就是使用原始的ajax方式发送get请求，并且没有携带任何参数。
如果我们的请求需要携带参数的话，可以考虑下面两个方案
1.将参数拼接在 URL 的后面
xhr.open('GET','http://localhost:8000/app-web/AppInfoManage/getAppInfoUrl?param1=value1¶m2=value2');
其中 param1 和 param2 代表参数名，value1 和 value2 代表参数值。多个参数之间用 & 连接。
2.如果需要根据不同情况动态添加参数，可以先将参数保存在一个对象中，然后使用 JavaScript 的 Object.entries() 方法将参数转换为字符串，再拼接在 URL 后面
const params = {param1: value1, param2: value2}; const url = 'http://localhost:8000/app-web/AppInfoManage/getAppInfoUrl?' + Object.entries(params).map(([key, value]) => `${key}=${value}`).join('&'); xhr.open('GET', url);
这里使用了 Object.entries() 将对象转化为二维数组，然后使用 map() 方法将数组中的每个元素转换为 key=value 的形式，最后使用 join(‘&’) 将数组中的元素用 & 连接起来。
四：Post请求
要发送 POST 请求，需要修改 XMLHttpRequest 实例的 open() 方法的第一个参数为 “POST”，并且将参数作为 send() 方法的参数传递。
五：总结&提升
1.该文章主要介绍了如何将静态html页面改为后端获取部分数据，然后通过ajax实现调用接口获得数据，使页面可以进行渲染。
2.其中，通过XMLHttpRequest对象的open()方法设置HTTP请求的类型和URL，
3.使用send()方法异步发送请求，然后通过onreadystatechange 事件处理响应。
4.通过实现该功能，可以避免每次需要手动修改对应的html文件，提高工作效率。
希望大家看完此篇文章能够有所收获，学会使用ajax发送请求。
