Ajax原理-XMLHttpRequest

最新推荐文章于 2024-08-24 23:57:15 发布

桃汁11

最新推荐文章于 2024-08-24 23:57:15 发布

阅读量428

点赞数 15

文章标签： ajax xml

本文链接：https://blog.csdn.net/weixin_55269913/article/details/134406035

版权

文章详细介绍了如何使用XMLHttpRequest对象在JavaScript中实现服务器交互，包括GET和POST方法的应用，以及如何处理不同数据格式（如JSON）的请求和响应。同时展示了axios库内部使用XMLHttpRequest的方式。

摘要由CSDN通过智能技术生成

定义

XMLHttpRequest对象用于服务器交互，通过XMLHttpRequest可以在不刷新页面的情况下，请求特定url获取数据。axios内部采用XMLHttpRequest与服务器交互

使用XMLHttpRequest

基本使用

<!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>
  <script>
    // 1.创建请求实例
    var xhr =  new XMLHttpRequest();
    // console.log(xhr);
    // 2.打开一个连接  open(method(请求方式),url(请求路径))
    xhr.open('get','http://121.199.0.35:8888/index/carousel/findAll');
    // 3.发送请求
    xhr.send();
    // 4.监听响应
    xhr.onreadystatechange = function(){
      // xhr.readyState ===4表示请求发送完成 xhr.status===200表示请求发送成功
      if(xhr.readyState ===4&&xhr.status===200){
        // 获取请求实例返回得响应数据
        // console.log(xhr.response);
        // 服务器返回的数据格式是json字符串 需要转为js对象 JSON.parse
        var res =  JSON.parse(xhr.response);
        console.log(res);
        res.data.forEach(function(item){
          // item ---> {id,name,introduce,url}
          var div = document.createElement('div');
          var img = document.createElement('img');
          document.body.appendChild(div);
          document.body.appendChild(img);
          div.innerHTML = item.name +'-'+ item.introduce;
          img.src = item.url;
          img.style.width = '150px';
          
        })
      }
    }
  </script>
</body>
</html>

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>
  <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.2/qs.min.js"></script>
</head>
<body>
  <script>
    // 1.创建XMLHttpRequest请求实例
    var xhr = new XMLHttpRequest();
    var params = {
      page:1,
      pageSize:10
    };
    // 将js对象转为查询字符串 ?page=1&pageSize=10
    var parseObj = Qs.stringify(params);
    // console.log(parseObj);
    // 2.打开一个连接
    xhr.open('get','http://121.199.0.35:8888/index/article/pageQuery?'+parseObj);
    // 3.发送请求
    xhr.send();
    // 4.监听响应
    xhr.onreadystatechange = function(){
      if(xhr.readyState ===4 && xhr.status===200){
        // console.log(xhr.response);
        var res = JSON.parse(xhr.response);
        // console.log(res);
        res.data.list.forEach(function(item){
          // item---> {title:"",content:""}
          var dt = document.createElement('dt');
          var dd = document.createElement('dd');
          dt.innerHTML = item.title;
          dd.innerHTML = item.content;
          document.body.appendChild(dt);
          document.body.appendChild(dd);
        })
      }
    }
  </script>
</body>
</html>

post 方法json请求

<!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>
  <script>
    // 1.创建XMLHttpRequest请求实例
    var xhr = new XMLHttpRequest();
    var form = {
      username:'admin2',
      password:123321
    }
    // 2.打开一个连接
    xhr.open('post','http://121.199.0.35:8888/user/login');
    // 设置请求头数据格式为json格式
    xhr.setRequestHeader('Content-Type','application/json')
    // 3.发送请求
    xhr.send(JSON.stringify(form));
    // 4.监听响应
    xhr.onreadystatechange = function(){
      if(xhr.readyState ===4 && xhr.status===200){
        console.log(JSON.parse(xhr.response))
      }
    }
  </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>
  <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.2/qs.min.js"></script>
</head>
<body>
  <script>
    // 1.创建XMLHttpRequest请求实例
    var xhr = new XMLHttpRequest();
    // 2.打开一个连接
    xhr.open('post','http://121.199.0.35:8888/baseUser/saveOrUpdate');
    var params = {
      username:"狗蛋123",
      password:123321
    }
    // 将js对象转为表单格式数据(查询字符串)传给后端 
    var formObj = Qs.stringify(params);
    // 设置请求头格式为表单格式 
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    // 3.发送请求
    xhr.send(formObj);
    // 4.监听响应
    xhr.onreadystatechange = function(){
      if(xhr.readyState ===4 && xhr.status===200){
        console.log(JSON.parse(xhr.response))
      }
    }
  </script>
</body>
</html>