Ajax的请求和响应

最新推荐文章于 2022-07-14 18:58:42 发布

LSSHFF

最新推荐文章于 2022-07-14 18:58:42 发布

阅读量570

点赞数

分类专栏： Ajax入门文章标签： javascript

本文链接：https://blog.youkuaiyun.com/LSSHFF/article/details/118076259

版权

Ajax入门专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用JavaScript（JS）和jQuery（JQ）进行HTTP的GET和POST请求。通过示例代码展示了如何创建XMLHttpRequest对象、设置请求参数、处理响应状态以及错误处理。对于JQ方式，利用$.ajax方法简化了请求过程，提供了data参数传递数据，并通过success和error回调函数处理响应结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、JS方式

get/post请求

    document.querySelector("button").onclick = function () {
      //创建ajax对象
      let xhr = new XMLHttpRequest();
      //ajax请求需要http协议（请求 + 响应）
      //请求三部分组成（请求行 头 体）

      //请求行xhr.open()
      //  open方法参数1：请求方式 GET 参数2：请求的url地址
      //   地址后面带数据，数据成为查询字符串
      xhr.open("GET", "地址/get?name=admin&pwd=123456");
      
      // 请求头 ==> 忽略即可，都是浏览器自己设置的

      //请求体xhr.send(发送的数据)。get方式数据直接在家地址栏后,所以这里给个null就可以
      xhr.send(null);

      //post请求方式
      //请求行
      // xhr.open("POST", "地址/post");
      //请求头 post请求头比get方式多个关键头信息 
      //xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      // 请求体的数据格式类似于查询字符串 参数=值&参数=值
      //xhr.send("name=admin&pwd=123456");


      // ajax是异步任务，同时进行，直接获取响应结果是获取不到的
      // 给ajax对象注册事件 readystatechange ==> 该事件是当ajax的状态发生了改变就会触发
      // ajax的状态 ==> xhr.readyState
      //  0   表示ajax已经创建了，还未open
      //  1   表示ajax已经open了，但还未send
      //  2   已经send了
      //  3   服务器正在响应结果，但响应还未结束
      //  4   服务器响应结束了   重点关注于4

      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          // 表示服务器响应结束了，可以来获取响应结果了
          // 此时只能代表响应结束，只有当status状态码为200时才能确认响应成功
          if (xhr.status === 200) {
            // 响应是成功的
            // 放到div中
            //responseText响应结果
            document.querySelector("div").innerText = xhr.responseText;
          } else {
            // 失败了 ==> 来个提示
            alert("网络异常，请稍后重试! ");
          }
        }
      }

二、JQ方式

$(function () {

      $.ajax({
        // 遵守键值对 key:value 写法

        // type 请求方式 GET（默认值） 
        //POST方式 将对应的get改为post即可
        type: "GET",
        url: "地址/get",
        data:{
          name:'admin',
          pwd:'123456'
        },
        // success 请求成功的时候会执行该回调函数
        //  如何去获取到服务器响应回来的结果 ==> 通过success回调函数的形参就可以获取到
        success: function (res) { // res response的简写
          console.log(res);
        },
        // 请求失败的时候会执行该回调函数
        error: function () {
          console.log("请求失败了");
 
        }
      })
    })