Javascript---AJAX get post 请求的区别

最新推荐文章于 2024-06-20 11:23:25 发布

桃子耶耶

最新推荐文章于 2024-06-20 11:23:25 发布

阅读量110

点赞数 2

本文链接：https://blog.csdn.net/m0_46677484/article/details/126549355

版权

ajax 中 get和post的区别：

1 语义化的区别:

get偏向于获取,post偏向于提交数据

2 携带给后端的信息位置不一样

get直接在地址后面拼接查询字符串
post在请求体内进行信息的查询

3 携带的数据格式不一样

get:因为携带的数据是直接拼接在地址后面,只能使用url编码
post:因为在请求体内,所以可有多种形式,但是需要提前说明

4 携带的数据大小不一样

get:因为拼接在地址后面,大小在2kb左右
post:因为在请求体内,数据大小不受限制,除非服务器有显示

5 安全性能

get:明文发送,不安全
post:相对安全

6 浏览器缓存

get: 浏览器会主动缓存
post:浏览器不会主动缓存

使用get发送有参请求

第一种方式：

<!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>Document</title>
  <!-- 引入qs -->
  <script src="./qs.js"></script>
</head>
<body>
  <!-- 输入框 -->
  <input type="text" name="" id="inp">
  <!-- 获取数据的按钮 -->
  <button onclick="getWeatherData()">获取天气数据</button>
  <script>
    // 获取用户输入的值
    var inp = document.getElementById('inp')
    var cityName;
    inp.oninput = function () {
      cityName = this.value
    }
    // https://api.muxiaoguo.cn/api/tianqi?city=长沙&type=1&api_key=779d7e46708290a5
    function getWeatherData() {
      var request = new XMLHttpRequest()
      // 第一种方式 拼接字符串
      request.open('get','https://api.muxiaoguo.cn/api/tianqi?city=' + cityName + '&type=1&api_key=779d7e46708290a5')
      
      request.send()
      request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
          console.log(request.responseText);
          var res = JSON.parse(request.responseText);
          console.log(res);
          alert(`${res.data.time}————${cityName}的温度是${res.data.temp}摄氏度`)
        }
      }
    }
  </script>
</body>
</html>

第二种方式

<!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>Document</title>
  <!-- 引入qs -->
  <script src="./qs.js"></script>
</head>
<body>
  <!-- 输入框 -->
  <input type="text" name="" id="inp">
  <!-- 获取数据的按钮 -->
  <button onclick="getWeatherData()">获取天气数据</button>
  <script>
    // 获取用户输入的值
    var inp = document.getElementById('inp')
    var cityName;
    inp.oninput = function () {
      cityName = this.value
    }
    // https://api.muxiaoguo.cn/api/tianqi?city=长沙&type=1&api_key=779d7e46708290a5
    function getWeatherData() {
      var request = new XMLHttpRequest()
      
      // 第二种方式 封装参数对象
      var params = {
        city: cityName,
        type: 1,
         api_key:'779d7e46708290a5'
       }
      
      request.open('get','https://api.muxiaoguo.cn/api/tianqi?' + Qs.stringify(params))
      request.send()
      request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
          console.log(request.responseText);
          var res = JSON.parse(request.responseText);
          console.log(res);
          alert(`${res.data.time}————${cityName}的温度是${res.data.temp}摄氏度`)
        }
      }
    }
  </script>
</body>
</html>

post 有参数请求

<!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>Document</title>
</head>
<body>
  <button onclick="toLogin()">登录</button>
  <script>

    function toLogin() {
      var request = new XMLHttpRequest()
      request.open('post','http://xxx.x.xx.xx:xxxx/user/login')
      // 配置参数
      var params = {
        username: 'admin1',
        password: '123321'
      }
      // 设置请求头
      request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
      request.send(JSON.stringify(params))
      request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
          console.log(request.responseText);
        }
      }
    }
  </script>
</body>
</html>