JavaScript和jQuery的AJAX请求

最新推荐文章于 2023-11-12 22:11:00 发布

大鹿deer

最新推荐文章于 2023-11-12 22:11:00 发布

阅读量153

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_46278856/article/details/120339015

版权

AJAX即Asynchronous Javascript And XML，代表异步的JavaScript和XML，是一种网页交互的开发技术，是浏览器和服务器交互数据进行异步请求的一门技术，实现了局部页面的刷新，按需获取数据。AXAJ的实现的原理是XMLHttpRequest对象，它用于后台和服务器之间交换数据。

JavaScript中的AJAX

请求应该分有5个步骤，但是setRequestHeader如果请求头没有要求，则就不需要这个步骤。

get

get无参

<body>
  <button onclick="request()">点击请求</button>
  <script>
    function request() {
      // 1.创建XMLHttpRequest的实例
      let xhr = new XMLHttpRequest();
      // 2.通过open设置交互信息,请求方法、utl
      xhr.open('get', 'https://api.muxiaoguo.cn/api/dujitang');
      // 3.设置请求头信息,数据格式json、查询字符串等,默认不写这个步骤
      // xhr.setRequestHeader('Content-type', 'application/json')
      // 4.send发送请求,send中可以放请求体的内容
      xhr.send();
      // 5.请求完成且响应完成,则获取到数据
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            // 得到的数据是JSON格式,需要转换
            let res = JSON.parse(xhr.responseText);
            console.log(res);
          }
        }
      }
    }
  </script>
</body>

get有参

get有参请求要把数据以查询字符串的格式拼接到url后面，所以需要把请求参数转化成查询字符串

<body>
  <button onclick="request()">点击请求</button>
  <script>
    // https://api.muxiaoguo.cn/api/tianqi?city=长沙&type=1
    function request() {
      let xhr = new XMLHttpRequest();
      // 请求参数
      params = {
        city: '柳州',
        type: 2,
      };
      // 把请求参数变成查询字符串,需要先引入qs库
      let data = Qs.stringify(params)
      xhr.open('get', 'https://api.muxiaoguo.cn/api/tianqi' + '?' + data);
      xhr.send();
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            let res = JSON.parse(xhr.responseText);
            console.log(res);
          }
        }
      }
    }
  </script>
</body>

post

post无参

<body>
  <button onclick="request()">点击请求</button>
  <script>
    function request() {
      let xhr = new XMLHttpRequest();
      xhr.open('post', 'https://api.muxiaoguo.cn/api/Gushici');
      xhr.send();
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            let res = JSON.parse(xhr.responseText);
            console.log(res);
          }
        }
      }
    }
  </script>
</body>

post有参

<body>
  <button onclick="request()">点击请求</button>
  <script>
    function request() {
      let xhr = new XMLHttpRequest();
      xhr.open('post', 'https://api.muxiaoguo.cn/api/tianqi');
      params = {
        city: '柳州',
        type: 2,
      };
      // 设置数据格式为查询字符串
      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
      // 先引入qs
      xhr.send(Qs.stringify(params));
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            let res = JSON.parse(xhr.responseText);
            console.log(res);
          }
        }
      }
    }
  </script>
</body>

jQuery中AJAX

jquery中封装的AJAX会把参数自动装化成查询字符串格式，即请求头默认为application/x-www-form-urlencoded

基本写法

<body>
  <script>
    $.ajax({
      url: 'https://api.muxiaoguo.cn/api/Gushici',
      method: 'post',
      data: {}, // 参数,无参不写
      success: function (res) { // 请求成功回调
        console.log(res);
      },
      error: function (err) { // 失败回调
        console.log(err);
      }
    })
  </script>
</body>

快捷写法

// get有参
<body>
  <script>
    let params = { // 参数
      city: '柳州',
      type: 2,
    }
    // url 参数(自动转换成查询字符串) 回调函数
    $.get('https://api.muxiaoguo.cn/api/tianqi', params, function (res) {
      console.log(res);
    })
  </script>
</body>

// post有参,参数为查询字符串形式
<body>
  <script>
    let params = { // 参数
      city: '柳州',
      type: 2,
    }
    // url 参数(自动转换成查询字符串) 回调函数
    $.post('https://api.muxiaoguo.cn/api/tianqi', params, function (res) {
      console.log(res);
    })
  </script>
</body>