原生Ajax中get、post请求方法的使用

一、什么是Ajax：

AJAX即“Asynchronous Javascript And XML”（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。

二、Ajax中的请求方式：

1、get请求方式：参数携带在地址栏，是一种显式的、不安全的请求方式。

2、post请求方式：参数携带在请求体中，是一种隐式的、更为安全的请求方式。

三、代码实现Ajax中的get请求方式

（1）get不带参数时的请求

//第一步：创建一个实例
var xhr=new XMLHttpRequest();
//第二步：打开一个连接，第一参数为请求的方式；第二参数为请求的地址
xhr.open("get","http://47.93.206.13:8002/index/findAllCategory");
//第三步：发送请求
xhr.send();
//第四步：接收响应
xhr.onreadystatechange=function(){
    //readyState=4 代表http请求完成
    // httpRequest.status=200 代表请求成功
    if(xhr.readyState===4 && xhr.status===200){
         console.log(xhr.responseText);   
    }
    if(xhr.readyState===4 && xhr.status===500){
         console.log(xhr.responseText);   
    }
}

（2）get带参数时的请求

get携带参数，需要将js中的字符串转换为JSON格式的字符串即查询字符串，如此才能将后台的数据在前台中显示出来。

//引入第三方的Qs组件库
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.js"></script>
    <script>
      var xhr = new XMLHttpRequest();
      var qs = Qs;
      let obj = {
        page: 1,
        pageSize: 10,
      };
      //js中的的字符串转换为查询字符串--通过QS.stringify(obj)来转换
      xhr.open(
        "get",
        "http://47.93.206.13:8002/index/pageQueryArticles" +"?" +
          qs.stringify(obj)
      );
      xhr.send();
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(xhr.responseText);
        }
        if (xhr.readyState === 4 && xhr.status === 500) {
          console.log(xhr.responseText);
        }
      };
    </script>

四、代码实现Ajax中post请求方式

<script>
      let obj = {
        username: "admin2",
        password: 123321,
      };
      var xhr = new XMLHttpRequest();
      xhr.open("post", "http://47.93.206.13:8002/user/login");
      //设置post请求头的数据格式
      xhr.setRequestHeader("Content-Type", "application/json");
      //发送请求，将post的参数放入（post的参数放在请求体中）
      xhr.send(JSON.stringify(obj));
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(xhr.responseText);
        }
        if (xhr.readyState === 4 && xhr.status === 500) {
          console.log(xhr.responseText);
        }
      };
    </script>