ajax笔记精简-CSDN博客

本文链接：https://blog.csdn.net/ZZ13593580786/article/details/119211127

概念：异步的js和xml

作用：与后台服务器交互，进行数据传输，实现页面的局部刷新

应用：

1.创建xhr实例对象

2.设置请求头，打开请求链接

3.设置请求体，并发送请求

4.监听连接状态的改变，做出响应

例：

<!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>ajax</title>
  <script>
    //1.创建一个xhr实例对象
     var xhr = new XMLHttpRequest();
    //2.设置请求头，打开请求连接
     xhr.open('get','https://api.muxiaoguo.cn/api/dujitang');
    //3.设置请求体，并发送请求
     xhr.send();
     //4.监听连接状态的改变，做出响应
     xhr.onreadystatechange = function(){
       if(xhr.readyState === 4 && xhr.status ===200){
          console.log(xhr.response);
      }
      }       

  </script>
</head>
<body>
  
</body>
</html>

传参：

get

参数格式：查询字符串（表单数据）application/x-www-form-urlencoded

传参位置：拼接到url地址后面，用？拼接

post

参数格式：查询字符串（表单数据）、json数据application/json

传参位置：send(data)参数放在http请求报文的请求体

修改当前请求的参数格式

1.请求头

xhr.setRequestHeader('Content-Type','application/json')

2.将参数转码（和content-type保持一致）

对象-->查询字符串