原生ajax 发送请求

原生ajax 发送请求

原生发送请求不带参数

<body>
    <h2>原生ajax</h2>
    <button>

原生发送请求不带参数

</button>
    <script>
      document.querySelector("button").onclick = function () {
        // 1.实例化异步对象 内置的,通过它 不刷新页面发送请求
        const xhr = new XMLHttpRequest();//1.创建异步对象
        // 2.设置请求的 地址 和方法
        xhr.open("get", "http://ajax-api.itheima.net/api/settings");//2.在请求行
          中设置请求地址和方法
        // 3.注册回调函数 服务器响应内容回来之后触发
        xhr.addEventListener("load", function () {
          // response 响应
          console.log(xhr.response);
        });
        //3.设置请求头。。。。。。。
        // 4.发送请求
        xhr.send();//4.在请求体中发送请求
       //5.监听异步对象状态的变化
      };
    </script>
  </body>

get请求传递参数

<body>
    <h2>get请求传递参数</h2>
    <button>聊天机器人</button>
    <script>
      document.querySelector("button").onclick = function () {
        // 1.实例化异步对象 内置的,通过它 不刷新页面发送请求
        const xhr = new XMLHttpRequest();
        // 2.设置请求的 地址 和方法
        // 没有params属性,需要自行拼接
        xhr.open("get", "http://ajax-api.itheima.net/api/province");
        // 3.注册回调函数 服务器响应内容回来之后触发
        xhr.addEventListener("load", function () {
          // response 响应
          console.log(xhr.response);
        });
        // 4.发送请求
        xhr.send();
      };
    </script>
  </body>

post请求传递参数

<body>
    <h2>post请求传递参数</h2>
    <button>发送请求</button>
    <script>
      // 测试-表单提交接口
      document.querySelector("button").onclick = function () {
        // 1.实例化异步对象 内置的,通过它 不刷新页面发送请求
        const xhr = new XMLHttpRequest();
        // 2.设置请求的 地址 和方法
        // 没有params属性,需要自行拼接

        xhr.open("post", "http://ajax-api.itheima.net/api/data");
        // post请求 一定要设置请求头
        xhr.setRequestHeader(
          "content-type",
          "application/x-www-form-urlencoded"
        );
        // 3.注册回调函数 服务器响应内容回来之后触发
        xhr.addEventListener("load", function () {
          // response 响应
          console.log(xhr.response);
        });
        // 4.发送请求 post请求参数url格式化拼接 多个参数用&符隔开
        xhr.send("username=admin&passwoed=123456");
      };
    </script>
  </body>

post发送请求提交JSON

<body>
    <h2>post发送请求提交JSON</h2>
    <button>发送请求</button>
    <script>
      // 测试-表单提交接口
      document.querySelector("button").onclick = function () {
        // 1.实例化异步对象 内置的,通过它 不刷新页面发送请求
        const xhr = new XMLHttpRequest();
        // 2.设置请求的 地址 和方法
        // 没有params属性,需要自行拼接

        xhr.open("post", "http://ajax-api.itheima.net/api/login");
        // post请求 一定要设置请求头
        xhr.setRequestHeader(
          "content-type",
          "application/json"
        );
        // 3.注册回调函数 服务器响应内容回来之后触发
        xhr.addEventListener("load", function () {
          // response 响应
          console.log(xhr.response);
        });
        // 4.发送请求 post请求参数url格式化拼接 多个参数用&符隔开
        // 方法1
        // const data ={username:'admin',password:'123456'}
        // xhr.send(JSON.stringify(data));
        // 方法2
        const data =JSON.stringify({username:'admin',password:'123456'})
        xhr.send(data)
      };
    </script>
    </script>
    
  </body>

原生ajax 发送post请求提交JSON 解析响应数据

 <body>
    <h2>原生ajax 发送post请求 提交JSON 解析响应数据 </h2>
    <button>发送请求</button>
    <script>
      document.querySelector("button").onclick = function () {
        // 1.实例化异步对象 内置的,通过它 不刷新页面发送请求
        const xhr = new XMLHttpRequest();
        // 2.设置请求的 地址 和方法
        xhr.open("post", "http://ajax-api.itheima.net/api/login");
        // 设置提交的内容格式为JSON
        xhr.setRequestHeader("content-type", "application/json");
        // 3.注册回调函数 服务器响应内容回来之后触发
        xhr.addEventListener("load", function () {
          // response 响应
          console.log(xhr.response);
          // 把字符串转换为对象
          const res = JSON.parse(xhr.response);
          alert(res.message);
        });
        // 4.发送请求
        // 请求体的数据 在send中提交
        const data = { username: "admin", password: "123456" };
        // 数据转为JSON并提交给服务器
        xhr.send(JSON.stringify(data));
      };
    </script>
  </body>