Ajax——————XMLHttpRequest对象的属性与方法

最新推荐文章于 2022-03-02 16:36:32 发布

玛莎拉迪迦

最新推荐文章于 2022-03-02 16:36:32 发布

阅读量326

点赞数

分类专栏：笔记文章标签： ajax

本文链接：https://blog.csdn.net/weixin_46156304/article/details/111883158

版权

笔记专栏收录该内容

33 篇文章 0 订阅

订阅专栏

不管你学什么专业找工作一定要找一个你喜欢的这样你每天早晨六点到晚上八点都是高兴的再找个喜欢的人在一起这样晚上八点到早晨六点就是开心的 ——————网易云音乐热评《鱼书》

`readyState`属性与`status`属性

XMLHttpRequest对象的readyState属性

作用 - 表示服务器端的通信状态

值:

0 - 未初始化
1 - open()方法被调用
2 - send()方法被调用
3 - 正在响应
4 - 响应已完毕

当readyState属性移动位置时值会改变，如移动到 open 下面时为 1，但是不会出现 0

XMLHttpRequest对象的status属性

作用 - 得到当前请求之后的响应状态码

值：

200 - 表示请求成功
304 - 表示请求的资源未变化（转向获取本地缓存）
404 - 表示服务器端地址未找到

接收服务器端响应的结果：

responseText属性 - 专门接收字符串类型的结果
responseXML属性 - 专门接收 XHL 数据格式的结果内容

xhr.onreadystatechange = function () {
  //监听服务器端的通信状态
  /*
                  XMLHttpRequest对象的readyState属性
                    作用 - 表示服务器端的通信状态
                    值
                      0 - 未初始化
                      1 - open()方法被调用
                      2 - send()方法被调用
                      3 - 正在响应
                      4 - 响应已完毕
                */
  //    console.log(xhr.readyState);
  if (xhr.readyState === 4) {
    /*
                        保证当前的异步请求一定是正确的
                          XMLHttpRequest对象的status属性
                            作用 - 得到当前请求之后的响应状态码
                              200 - 表示请求成功
                              304 - 表示请求的资源未变化（转向获取本地缓存）
                              404 - 表示服务器端地址未找到
                   */
    console.log(xhr.status);
    if (xhr.status === 200) {
      /*
                            接收服务器端响应的结果
                              responseText属性 - 专门接收字符串类型的结果
                              responseXML属性 - 专门接收XHL数据格式的结果内容
                        */
      console.log(xhr.responseText);
    }
  }
};

`send()`方法

send(data)方法
参数 data - 表示要向服务器端发送的请求数据
请求方式
如果当前的请求方式为 GET 的话 - send()方法中只能传递 null 值
将请求数据添加到请求地址链接中
两种情况:

发送数据 - user=肖德硕&ped=123456#
请求数据的格式 1.如果具有多个请求数据的话，之间使用“&”进行分隔 2.每个数据格式 -> name=value
不发送数据 - send()方法中必须传递 null 值，而不能为空

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!--  
        提交表单时，向服务器端发送数据
          请求数据被添加请求连接地址中 - ?user=肖德硕&ped=123456#
            请求数据的格式
             1.如果具有多个请求数据的话，之间使用“&”进行分隔
             2.每个数据格式 -> name=value
    -->
    <form action="#" method="GET">
      <input type="text" id="user" name="user" />
      <input type="text" id="pwd" name="ped" />
      <input type="submit" />
    </form>

    <button id="btn">按钮</button>
    <script src="createXHLHttpRequest.js"></script>

    <script>
      var btn = document.getElementById("btn");

      btn.addEventListener("click", function () {
        var xhr = createXMLHttpRequest();

        xhr.open(
          "get",
          "file:///D:/%E5%90%AF%E5%98%89%E7%8F%AD%E5%AD%A6%E4%B9%A0/shodeshuo/06_Ajax/201114/%E4%BB%A3%E7%A0%81/send()%E6%96%B9%E6%B3%95.html?user=%E8%82%96%E5%BE%B7%E7%A1%95&ped=123456#"
        );

        /*
                向服务器端发送请求数据
                send(data)方法
                  参数data - 表示要向服务器端发送的请求数据
                  请求方式
                    如果当前的请求方式为GET的话 - send()方法中只能传递null值
                      将请求数据添加到请求地址链接中
                  两种情况
                    发送数据 - user=肖德硕&ped=123456#
                      请求数据的格式
                      1.如果具有多个请求数据的话，之间使用“&”进行分隔
                      2.每个数据格式 -> name=value
                    不发送数据 - send()方法中必须传递null值，而不能为空  
            */
        xhr.send(null);

        xhr.onreadystatechange = function () {
          //监听服务器端的通信状态

          if (xhr.readyState === 4) {
            console.log(xhr.responseText);
          }
        };
      });
    </script>
  </body>
</html>

请求方式

open()方法

open(method,url)方法

method - 表示当前的请求方式
常见的请求方式为 GET 和 POST
url - 表示当前请求的服务器端地址链接

send()方法

如果是 get，send()方法只能传递 null 值 -> 请求数据添加在请求地址中
如果是 post，send()方法传递请求数据

玛莎拉迪迦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax——————XMLHttpRequest对象的属性与方法

不管你学什么专业找工作一定要找一个你喜欢的这样你每天早晨六点到晚上八点都是高兴的再找个喜欢的人在一起这样晚上八点到早晨六点就是开心的 ——————网易云音乐热评《鱼书》readyState属性与status属性XMLHttpRequest对象的readyState属性作用 - 表示服务器端的通信状态值:0 - 未初始化1 - open()方法被调用2 - send()方法被调用3 - 正在响应4 - 响应已完毕当readyState属性移动位置时值会改.
复制链接

扫一扫