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

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

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 值,而不能为空

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

  <body>
    
    <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()方法传递请求数据

你可能感兴趣的:(笔记,ajax)