Ajax

博主： Moody
发布时间：2021 年 06 月 20 日
2483 次浏览
1 条评论
7706字数
分类：前端

![Ajax][1]

## Http请求消息##
     http请求消息：发送请求的时候发送了啥消息内容给了服务器 （请求报文）

请求报文由三部分组成： 请求行 请求头 请求体

=================== 请求行（第一行） ===================
    GET /v1/get?name=admin&pwd=1234 HTTP/1.1
    GET 提交方式
    /v1/get 提交地址   
    ?name=admin&pwd=1234 提交的数据 在地址的后面
    HTTP/1.1 http协议版本号

=================== 请求头 ===================
    遵守键值对格式
    忽略即可，因为都是浏览器自己设置添加的

Host: 111.229.6.231:9996
    Connection: keep-alive
    Upgrade-Insecure-Requests: 1
    User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36
    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
    Accept-Encoding: gzip, deflate
    Accept-Language: zh-CN,zh;q=0.9,en;q=0.8

=================== 请求体 ===================
    放置要发送的数据
    get方式，由于数据在url地址后面，所以get方式没有请求体    
##响应报文##
 响应报文 响应回来的内容 响应不分GET POST

三部分：响应行  响应头  响应体

================== 响应行（状态行） 第一行 ================== 
    HTTP/1.1 200 OK
    200 状态码  404 Not Found   500 服务器异常
     菜鸟教程 https://www.runoob.com/http/http-status-codes.html

================== 响应头 ==================
    Access-Control-Allow-Origin: *
    Access-Control-Allow-Headers: Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild
    Access-Control-Allow-Methods: PUT, POST, GET, DELETE, OPTIONS
    Content-Type: text/plain; charset=utf-8
    Content-Length: 12
    Date: Sun, 20 Jun 2021 02:44:26 GMT
    Connection: keep-alive

================== 响应体 ==================
    响应回来的数据
      登录成功

响应报文：关注于响应行 （有状态码）  响应体（响应回来的数据）

无论是请求报文还是响应报文
     都是三部分组成
       请求 行 头 体
       响应 行 头 体

查询字符串：在url地址后面通过?带数据
     数据格式： 参数=值，多个数据使用&链接  参数=值&参数=值&参数=值

##什么是Ajax?##
     ajax： Asynchronous JavaScript and XML
      使用异步的js方式与服务器进行通信，由于使用的是异步，所以ajax这个事情不会影响到其他事情。
      ajax通信遵守http协议规则（请求  +  响应）

synchronous：同步 事情是一件件的来执行的
    Asynchronous：异步 可以同时做多个事情，多个事情之间不会有阻塞问题

比喻: 在家自己做饭
     同步
      洗米：1分钟
      煮饭：30分钟
      买菜： 10分钟
      洗菜：2分钟
      切菜炒菜： 15分钟
      总耗时：58分钟

异步：
      洗米：1分钟
      煮饭：30分钟 在煮饭就可以做其他事情了 31分钟

异步做事效率高，用户体验更好 不会刷新不会跳转页面

##小案例 ajax发送GET请求##
    <body>
      <button>点击发送ajax请求（get请求）</button>
      <script>
        document.querySelector("button").onclick = function () {
      // 1. 创建ajax对象 ==> 通过内置的构造函数 XMLHttpRequest
      let xhr = new XMLHttpRequest();

// 2. ajax请求需要http协议（请求 + 响应）
      //   发送ajax请求
      //   请求三部分组成（请求行 头 体）

// 请求行 ==> xhr.open();
      //  open方法参数1：请求方式 GET POST 参数2：请求的url地址
      //   地址后面带数据，数据成为查询字符串
      xhr.open("GET", "http://111.229.6.231:9996/v1/get?name=admin&pwd=1234567");

// 请求头 ==> 忽略即可，都是浏览器自己设置的

// 请求体 ==> xhr.send(请求体装发送的数据); send方法参数是 请求体装发送的数据
      xhr.send(null); // 参数null可以不写，但是send方法必须调用，否则ajax不会发送
    }

// 如何发送ajax请求
    //  1. 创建ajax对象 ==> new XMLHttpRequest()
    //  2. ajax请求遵守http协议 
      //  请求 + 响应
      //  请求行： xhr.open(请求方式, 请求url地址?参数=值&参数=值);
      //  请求头: get方式忽略
      //  请求体：xhr.send(); get方式参数写null，因为数据在url地址 
      </script>
    </body>
##处理响应##
    <body>
      <button>点击发送ajax请求（get请求）</button>

let xhr = new XMLHttpRequest();

// console.log(xhr.readyState); // 0

xhr.open("GET", "http://111.229.6.231:9996/v1/get?name=admin&pwd=123456");

// console.log(xhr.readyState); // 1
      xhr.send(null);

// 处理响应结果 ==> 通过 xhr.responseText
      //  以下写法获取响应结果时机不对
      // console.log("执行了");
      //  console.log(xhr.responseText);

// 时机：应该是何时去获取响应结果
      // 等服务器把结果成功响应回来 ==> 给ajax对象注册事件 readystatechange ==> 该事件是当ajax的状态发生了改变就会触发

xhr.onreadystatechange = function () {
        // console.log(xhr.readyState);
        if (xhr.readyState === 4) {
          // 表示服务器响应结束了，可以来获取响应结果了
          // console.log(xhr.responseText);
          // console.log(xhr.status); // 状态码

if (xhr.status === 200) {
            // 响应是成功的
            // 放到div中
            document.querySelector("div").innerText = xhr.responseText;
          } else {
            // 失败了 ==> 来个提示
            alert("网络异常，请稍后重试! ");
          }
        }
      }

// ajax的状态 ==> xhr.readyState
      //  0   表示ajax已经创建了，还未open
      //  1   表示ajax已经open了，但还未send
      //  2   已经send了
      //  3   服务器正在响应结果，但响应还未结束
      //  4   服务器响应结束了   重点关注于4

// ajax请求的状态码 200 ok 404 500 有问题
      //  xhr.status 来获取到状态码
    }
      </script>
    </body>
##发送POST请求##
    <body>
      <button>点击发送ajax请求（post方式）</button>

let xhr = new XMLHttpRequest();

// 行
      xhr.open("POST", "http://111.229.6.231:9996/v1/post");

// 头
      // POST请求头比get方式多个关键头信息 
      //  Content-type: "application/x-www-form-urlencoded"
      // xhr.setRequestHeader(key, value); // 设置请求头信息
      //  如果没有设置，请求是可以发送成功的，但是服务器接收到数据之后，无法正常解析数据
      xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

// 体
      //  请求体的数据格式类似于查询字符串 参数=值&参数=值
      xhr.send("name=admin&pwd=123456");

// POST响应代码处理和GET方式处理一样
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          // 响应结束了
          if (xhr.status === 200) {
            // 成功
            document.querySelector("div").innerText = xhr.responseText;
          } else {
            // 失败
            alert("网络异常，稍后重试!!!");
          }
        }
      }

// 细节
      //  1. POST请求，一定要记得设置请求头信息
      //  2. 发送的数据不再url地址中，在send中做参数

}
      </script>
    </body>
##JQ的ajax方法##
    <body>
      <script src="./jquery-1.12.4.js"></script>
      <script>
        $(function () {
      // jQ的ajax方法
      // 语法： $.ajax({}); // 参数是个对象（配置对象），在对象中就可以配置请求的方式，地址，发送的数据...

/* // 注意事项：
      $("body").css("backgroundColor", "pink");
      // error
      $("body").ajax(); */

// $.ajax() 发送get请求

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

// type 请求方式 GET（默认值） POST
        type: "GET",
        // url 请求url地址
        url: "http://111.229.6.231:9996/v1/get12333",

// success 请求成功的时候会执行该回调函数
        //  如何去获取到服务器响应回来的结果 ==> 通过success回调函数的形参就可以获取到
        success: function (res) { // res response的简写
          console.log("is ok ", res);
        },
        // 请求失败的时候会执行该回调函数
        error: function () {
          console.log("请求失败了");
          alert("网络异常，稍后重试!!!");
        }
      })
    })
      </script>
    </body>
##JQ发送POST方法##
    <body>
      <script src="./jquery-1.12.4.js"></script>
      <script>
        $(function () {
      // 带数据呢？ 
      //  配置对象中通过data来携带数据发送给服务器

// 发送post请求，请求头不需要自己写了，因为jQ会帮我们设置好的
      /* $.ajax({
        type: "POST", // type不写默认是GET
        url: "http://111.229.6.231:9996/v1/post",

// 带的数据
        // data: "name=admin&pwd=123456",

// jQ的data，写法可以如上，直接写字符串（不方便）。更好写法，直接写对象
        //  对象写法只是方便了开发书写代码，最终还是要把对象里面的数据处理好
        data: {
          name: "admin",
          pwd: "123456"
        },

success: function (res) {
          console.log(res);
        }
      }) */

// GET方式
      $.ajax({
        url: "http://111.229.6.231:9996/v1/get",
        // 如果是GET方式，把data对象的数据处理到url地址后面，做查询字符串
        data: {
          name: "admin",
          pwd: "123456"
        },
        success: function (res) {
          console.log(res);
        },
        error: function () {

}
      })
    })
      </script>
    </body>

[1]: https://z3.ax1x.com/2021/07/07/RH0Vts.jpg

END

最后修改：2021 年 09 月 08 日

如果觉得我的文章对你有用，请随意赞赏

1 条评论

ngkthyfpqb
September 22nd, 2024 at 06:02 pm

博主真是太厉害了！！！

回复

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

今日已经过去小时

这周已经过去天

本月已经过去天

今年已经过去个月

Ajax

Moody • 2021 年 06 月 20 日

![Ajax][1]

## Http请求消息##
     http请求消息：发送请求的时候发送了啥消息内容给了服务器 （请求报文）

请求报文由三部分组成： 请求行 请求头 请求体

=================== 请求头 ===================
    遵守键值对格式
    忽略即可，因为都是浏览器自己设置添加的

三部分：响应行  响应头  响应体

================== 响应体 ==================
    响应回来的数据
      登录成功

响应报文：关注于响应行 （有状态码）  响应体（响应回来的数据）

无论是请求报文还是响应报文
     都是三部分组成
       请求 行 头 体
       响应 行 头 体

查询字符串：在url地址后面通过?带数据
     数据格式： 参数=值，多个数据使用&链接  参数=值&参数=值&参数=值

synchronous：同步 事情是一件件的来执行的
    Asynchronous：异步 可以同时做多个事情，多个事情之间不会有阻塞问题

比喻: 在家自己做饭
     同步
      洗米：1分钟
      煮饭：30分钟
      买菜： 10分钟
      洗菜：2分钟
      切菜炒菜： 15分钟
      总耗时：58分钟

异步：
      洗米：1分钟
      煮饭：30分钟 在煮饭就可以做其他事情了 31分钟

异步做事效率高，用户体验更好 不会刷新不会跳转页面

// 2. ajax请求需要http协议（请求 + 响应）
      //   发送ajax请求
      //   请求三部分组成（请求行 头 体）

// 请求头 ==> 忽略即可，都是浏览器自己设置的

let xhr = new XMLHttpRequest();

// console.log(xhr.readyState); // 0

xhr.open("GET", "http://111.229.6.231:9996/v1/get?name=admin&pwd=123456");

// console.log(xhr.readyState); // 1
      xhr.send(null);

// 处理响应结果 ==> 通过 xhr.responseText
      //  以下写法获取响应结果时机不对
      // console.log("执行了");
      //  console.log(xhr.responseText);

let xhr = new XMLHttpRequest();

// 行
      xhr.open("POST", "http://111.229.6.231:9996/v1/post");

// 体
      //  请求体的数据格式类似于查询字符串 参数=值&参数=值
      xhr.send("name=admin&pwd=123456");

// 细节
      //  1. POST请求，一定要记得设置请求头信息
      //  2. 发送的数据不再url地址中，在send中做参数

/* // 注意事项：
      $("body").css("backgroundColor", "pink");
      // error
      $("body").ajax(); */

// $.ajax() 发送get请求

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

// type 请求方式 GET（默认值） POST
        type: "GET",
        // url 请求url地址
        url: "http://111.229.6.231:9996/v1/get12333",

// 带的数据
        // data: "name=admin&pwd=123456",

success: function (res) {
          console.log(res);
        }
      }) */

}
      })
    })
      </script>
    </body>

[1]: https://z3.ax1x.com/2021/07/07/RH0Vts.jpg

Ajax

1 条评论

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

GIT的基本命令.

Mac 自带终端美化教程（oh my zsh）+ 配置

如何实现jwt鉴权机制

Office正版永久免费使用详细教程

Ajax

Windows 终端（windows terminal）

Office正版永久免费使用详细教程

Android 证书获取和打release包

Mac 51 单片机开发环境搭建

Rust 方法和特性概览

Ajax

1 条评论

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Ajax

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款