实现Ajax异步交互

时间:2020-9-1 作者:admin


实现Ajax异步交互

文章目录

实现Ajax的执行步骤

创建Ajax的核心对象

通过Ajax异步请求数据

请求方式

Ajax异步交互

文章包含以下几点内容

  • 实现Ajax的执行步骤

  • 创建Ajax的核心对象

  • 通过Ajax异步请求数据

  • 监听服务器端通信状态

  • 处理服务器端响应数据

实现Ajax的执行步骤

实现Ajax异步交互需要服务器端逻辑进行配合,而作为客户端的HTML页面需要完成以下步骤:

  1. 创建Ajax的核心对象XMILHlttpRequest对象

  2. 通过XMLHttpRequest对象的open()方法与服务器端建立连接

    具体可以去MDN了解XMLHttpRequest.open()

  3. 构建请求所需的数据内容,并通过XMLHttpRequest对象的send()方法发送给服务器端

    具体可以去MDN了解XMLHttpRequest.send()

  4. 通过XMLHttpRequest对象提供的onreadystatechange事件监听服务器端的通信状态

    只要 readyState 属性发生变化,就会调用相应的处理函数。这个回调函数会被用户线程所调用。XMLHttpRequest.onreadystatechange 会在 XMLHttpRequestreadyState 属性发生改变时触发 readystatechange 事件的时候被调用。

    具体可参考MDN上的XMLHttpRequest.readyState

  5. 接收并处理服务器端向客户端响应的数据结果

  6. 将处理结果更新到HTMIL页面中

  • 具体步骤代码

    <!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>
        <button id="btn">按钮</button>
        <script src="js/createXMLHttpRequest.js"></script>
        <script>
          var btn = document.getElementById("btn");
          btn.addEventListener("click", function () {
            // 实现Ajax的异步交互
    
            // 创建XMLHttpRequest对象
            var xhr = createXMLHttpRequest();
            /*
            2. 调用XMLHttpRequest对象的open()方法
             * 作用 - 与服务器端建立连接
             open(method, url)方法
             * method - 表示当前的请求方式
                * 常见的请求方式为GET和POST
             * url - 表示当前请求的服务器端地址链接
          */
            xhr.open("get", "https://extheor.github.io/");
    
            /*
            3. 调用XMLHttpRequest对象的send()方法
             * 作用 - 将客户端页面的数据发送给服务器
             send()方法
             * 如果不传递任何数据内容时 - 向该方法传递null
         */
            xhr.send(null);
    
            /*
            4. 利用XMLHttpRequest对象的onreadystatechange事件
             * 作用 - 用于监听服务器端的通信状态
             * 服务器端的通信状态中 - 存在着处理完毕(信号)
                * 接收服务器端返回的处理结果
         */
            xhr.onreadystatechange = function () {
              /*
                    XMLHttpRequest对象的readyStatee属性
                    * 作用 - 表示服务器端的通信状态
                    * 值
                        * 0 - 未初始化
                        * 1 - open()方法被调用
                        * 2 - send()方法被调用
                        * 3 - 正在响应
                        * 4 - 响应已完毕
                */
              if (xhr.readyState === 4) {
                /*
                    接收服务器端返回的处理结果
                    XMLHttpRequest对象的responseText属性
                    * 作用 - 用于接收服务器端的响应结果
                */
                console.log(xhr.responseText);
              }
            };
    
            /*
            5. 将接收到的结果更新到HTML页面
         */
          });
        </script>
      </body>
    </html>
    
    

    实现效果如下

    实现Ajax异步交互

创建Ajax的核心对象

虽然XMLHttpRequest对象目前由W3C组织进行标准化,但在不同浏览器中,创建的方式略有不同。

function createXMLHttpRequest(){
    var httpRequest;
      if (window.XMLHttpRequest) {
        // 适用于Chrome,Firefox,Safari,...
        httpRequest = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        // 适用于IE浏览器
        try {
          httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); // IE7+
        } catch (e) {
          try {
            httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); // IE6-
          } catch (e) {}
        }
      }
      return httpRequest;
}

通过Ajax异步请求数据

通过Ajax异步请求数据是通过XMLHttpRequest对象的send()方法实现,语法结构如下

httpRequest.send(data);
  • data:表示请求的数据内容。
httpRequest.send(null);
httpRequest.send('name=wolongxueyuan&password=123456');

如果该请求是异步模式(默认),该方法会立刻返回。相反,如果请求是同步模式,则直到请求的响应完全接受以后,该方法才会返回。

提交表单时,向服务器端发送数据

  • 请求数据被添加请求链接地址中 – ?user=maxiaoyu&pwd=123456
    • 请求数据的格式
      1. 如果具有多个请求数据的话,之间使用”&”进行分隔
      2. 每个数据格式 -> name=value

向服务器端发送请求数据

send(data)方法

  • 参数data – 表示要向服务器端发送的请求数据

  • 请求方式

    • 如果当前的请求方式为GET的话 – send()方法中只能传递null值
    • 将请求数据添加到请求地址链接中
  • 两种情况

    • 发送数据 – user=maxiaoyu&pwd=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>
    <form action="#" method="get">
      <input type="text" id="user" name="user" />
      <input type="text" id="user" name="pwd" />
      <input type="submit" />
    </form>

    <button id="btn">按钮</button>
    <script src="js/createXMLHttpRequest.js"></script>
    <script>
      var btn = document.getElementById("btn");
      btn.addEventListener("click", function () {
        // 实现Ajax的异步交互

        // 创建XMLHttpRequest对象
        var xhr = createXMLHttpRequest();
        xhr.onreadystatechange = function () {
          //   console.log(xhr.readyState);
          if (xhr.readyState === 4) {
            console.log(xhr.status);
            if (xhr.status === 200) {
              console.log(xhr.responseText);
            }
            if (xhr.status === 404) {
              console.log("服务器端地址未找到");
            }
          }
        };
        xhr.open("get", "https://extheor.github.io/");
          
        // 人为方式获取当前的数据,构建成制定的数据格式

        xhr.send("user=maxiaoyu&pwd=123456");
      });
    </script>
  </body>
</html>

点击按钮实现以下效果,请求URL为 http://127.0.0.1:5501/05_send()%E6%96%B9%E6%B3%95.html

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sonuOBIL-1598867411321)(https://cdn.jsdelivr.net/gh/extheor/images/Ajax图片/send()]方法1.gif)

点击表单提交实现以下效果,请求URL为 http://127.0.0.1:5501/05_send()%E6%96%B9%E6%B3%95.html?user=maxiaoyu&pwd=123456

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AOxVFlj8-1598867411323)(https://cdn.jsdelivr.net/gh/extheor/images/Ajax图片/send()]方法2.gif)

**XMLHttpRequest.send() **方法用于发送 HTTP 请求。如果是异步请求(默认为异步请求),则此方法会在请求发送后立即返回;如果是同步请求,则此方法直到响应到达后才会返回。XMLHttpRequest.send() 方法接受一个可选的参数,其作为请求主体;如果请求方法是 GET 或者 HEAD,则应将请求主体设置为 null。

如果没有使用 setRequestHeader() 方法设置 Accept 头部信息,则会发送带有 "* / *"Accept 头部。

send()方法的使用具体可参考MDN XMLHttpRequest.send()

既然请求方法是GET的话,send()方法只能设置为null值,那么我的请求数据应该在哪儿写呢?

  • 将请求数据添加到请求地址链接中

    xhr.open("get", "https://extheor.github.io/?user=maxiaoyu&pwd=123456");
    

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OWeDAv8B-1598867411325)(https://cdn.jsdelivr.net/gh/extheor/images/Ajax图片/send()]方法2.gif)

但是GET请求数据是有问题的,我们发现这请求数据是被写死掉的,我们以后是要动态获取数据的,所以不会用GET请求的

请求方式

GET请求方式

Ajax异步交互中使用GET请求方式的话,需要注意以下几个问题:

  1. 将构建的请求数据添加到open()方法中的url地址中,如下示例代码所示:

    httpRequest.open('GET',
    'http://www.wolongxueyuan.org/some.file?name=wolongxueyuan&password=123456',true);
    

    上述示例代码中,“name=wolongxueyuan&password=123456”表示请求数据

  2. 将发送请求数据的send()方法中参数设置为null值,如下示例代码所示:

    httpRequest.send(null);
    
  • POST请求数据代码演示

    <!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>
        <button id="btn">按钮</button>
        <script src="js/createXMLHttpRequest.js"></script>
        <script>
          var btn = document.getElementById("btn");
          btn.addEventListener("click", function () {
            // 实现Ajax的异步交互
    
            // 创建XMLHttpRequest对象
            var xhr = createXMLHttpRequest();
            xhr.onreadystatechange = function () {
              //   console.log(xhr.readyState);
              if (xhr.readyState === 4) {
                console.log(xhr.status);
                if (xhr.status === 200) {
                  console.log(xhr.responseText);
                }
                if (xhr.status === 404) {
                  console.log("服务器端地址未找到");
                }
              }
            };
            xhr.open("post", "https://extheor.github.io/");
            /*
              send()方法 
              * 如果是GET, send()方法只能传递null值 -> 请求数据添加在请求地址中 
              * 如果是POST, send()方法传递请求数据
            */
            xhr.send("user=maxiaoyu&pwd=123456");
          });
        </script>
      </body>
    </html>
    

    实现Ajax异步交互

我们会看到在请求负载(Request Payload)中有 user=maxiaoyu&pwd=123456 请求数据

POST请求方式

Ajax异步交互中使用POST请求方式的话,需要注意以下几个问题:

  1. 调用send(方法之前,需要通过XMLHttpRequest对象的setRequestHleader()方法设置请求头信息。

    httpRequest.setRequestHeader(header, value);
    
    • header:将要被赋值的请求头名称。
    • value:给指定的请求头赋的值。
    httpRequest.setRequestHeader('Content-Type' , 'application/x-www-form-urlencoded');
    
  2. 通过XMLHttpRequest对象的send()发送请求数据。

代码演示

<!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>
    <button id="btn">按钮</button>
    <script src="js/createXMLHttpRequest.js"></script>
    <script>
      var btn = document.getElementById("btn");
      btn.addEventListener("click", function () {
        // 实现Ajax的异步交互

        // 创建XMLHttpRequest对象
        var xhr = createXMLHttpRequest();
        xhr.onreadystatechange = function () {
          //   console.log(xhr.readyState);
          if (xhr.readyState === 4) {
            console.log(xhr.status);
            if (xhr.status === 200) {
              console.log(xhr.responseText);
            }
            if (xhr.status === 404) {
              console.log("服务器端地址未找到");
            }
          }
        };
        xhr.open("post", "https://extheor.github.io/");
        // 设置请求头部信息
        xhr.setRequestHeader(
          "Content-Type",
          "application/x-www-form-urlencoded"
        );
        /*
          send()方法
          * 如果是GET, send()方法只能传递null值 -> 请求数据添加在请求地址中
          * 如果是POST, send()方法传递请求数据
        */
        xhr.send("user=maxiaoyu&pwd=123456");
      });
    </script>
  </body>
</html>

实现效果如下

实现Ajax异步交互

我们会看到在表单数据(Form Data)中有user: maxiaoyu、pwd: 123456格式的请求数据

Ajax异步交互

用get请求真实的服务器

  • 首先需要写一个服务器
// 引入Node.js中的http模块
const http = require("http");
// 定义当前服务的IP地址和端口号
const hostname = "127.0.0.1"; // 表示本机
const port = 3000;
/**
 * createServer(callback)方法 - 表示创建一个服务
 * * callback - 表示回调函数
 *   function(request, response){}
 *   * request - 表示请求(用于接收客户端发送给服务端的请求)
 *   * response - 表示响应(用于接收服务器端发送给客户端的处理结果)
 */
const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader("Content-Type", "text/plain");
  res.end("Hello, World!\n");
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});
  • 然后再写一个Ajax异步交互代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ajax异步交互</title>
  </head>
  <body>
    <button id="btn">按钮</button>
    <script src="js/createXMLHttpRequest.js"></script>
    <script>
      var btn = document.getElementById("btn");
      btn.addEventListener("click", function () {
        // 实现Ajax的异步交互

        // 创建XMLHttpRequest对象
        var xhr = createXMLHttpRequest();
        xhr.onreadystatechange = function () {
          //   console.log(xhr.readyState);
          if (xhr.readyState === 4) {
            console.log(xhr.status);
            if (xhr.status === 200) {
              console.log(xhr.responseText);
            }
            if (xhr.status === 404) {
              console.log("服务器端地址未找到");
            }
          }
        };
        xhr.open("get", "http://127.0.0.1:3000");
        xhr.send(null);
      });
    </script>
  </body>
</html>

实现效果如下

实现Ajax异步交互

会出现如图之错误,这就是浏览器的跨域限制

那怎么办呢?只需要在Header上加上一行代码即可

res.setHeader("Access-Control-Allow-Origin", "*");

实现Ajax异步交互

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。