实现Ajax异步交互

其他 2020-09-14 10:09:21 阅读次数: 0

实现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 会在 XMLHttpRequest 的readyState 属性发生改变时触发 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的核心对象

虽然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>

我们会看到在请求负载（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>

实现效果如下

我们会看到在表单数据（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>

实现效果如下

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

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

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

猜你喜欢

转载自blog.csdn.net/Cool_breeze_/article/details/108326320
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
[编程题]学英语
[codeforces 1288A] Deadline 约数+模
Python的web开发
Docker在Centos 7上的部署
python编码
解决Ubuntu16.04 fatal error: json/json.h: No such file or directory
mysql并发插入
rest接口如何适应jsonp的方案
linux 终端上网设置
高数——等号两边同时求导、积分的解释
每日归档
更多
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022