AJAX入门之深入理解JavaScript中的函数

2023年5月28日上午12:08 • JavaScript

下面我来详细讲解“AJAX入门之深入理解JavaScript中的函数”的完整攻略。

AJAX入门

在开始讲解 AJAX （Asynchronous Javascript And XML）之前，我们需要先了解一下 JavaScript 中的函数。

JavaScript 函数

JavaScript 函数可以分为两类，一类是声明式函数，另一类是表达式函数。

声明式函数

声明式函数是一种显式地声明函数并为其分配一个名称的函数。例如：

function add(x, y) {
  return x + y;
}

在声明式函数中，函数名可以省略，这时候我们称之为匿名函数，例如：

const add = function (x, y) {
  return x + y;
}

表达式函数

表达式函数是一种在表达式中定义函数的函数方式，例如：

const add = function (x, y) {
  return x + y;
}

表达式函数也可以是匿名函数。另外，表达式函数可以被传递给其他函数作为参数，这使得函数的组合更加容易。

AJAX 简介

AJAX 是 JavaScript 与服务器通信的一种技术。通过 AJAX，我们能够在不刷新页面的情况下更新页面内容。实现 AJAX 的主要技术是 XMLHTTP 请求。

XMLHttpRequest 对象

XMLHttpRequest （XHR）对象用于与服务器异步交互。创建 XMLHttpRequest 对象的语法如下：

const xhttp = new XMLHttpRequest();

一旦创建了 XMLHttpRequest 对象，我们就可以使用其 open() 和 send() 方法与服务器进行交互。

open() 方法

open() 方法用于指定请求类型、URL 以及是否异步处理请求。open() 方法的语法如下：

xhttp.open(method, url, async);

其中，method 参数指定请求的类型，可以是 GET 或 POST；url 参数指定服务器请求的 URL；async 参数指定请求是否异步处理，默认值为 true。

send() 方法

send() 方法用于将请求发送到服务器。send() 方法的语法如下：

xhttp.send();

需要注意的是，如果请求为异步处理，send() 方法将在后台发送请求。如果请求完成，则 readyState 属性会被更新为 4。

onreadystatechange 属性

onreadystatechange 属性存储处理 XMLHttpRequest 对象状态变化的函数。当 readyState 属性发生变化时，onreadystatechange 属性就会被调用。

AJAX 实例

下面是一个简单的示例，使用 AJAX 实现点击按钮从服务器请求 JSON 数据并将其展示在页面上：

<!DOCTYPE html>
<html>
<head>
  <title>AJAX Example</title>
  <script>
    function loadDoc() {
      const xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
          const data = JSON.parse(this.responseText);
          document.getElementById("demo").innerHTML = data.name;
        }
      };
      xhttp.open("GET", "https://jsonplaceholder.typicode.com/users/1", true);
      xhttp.send();
    }
  </script>
</head>
<body>

  <button type="button" onclick="loadDoc()">Click Me!</button>
  <p id="demo"></p>

</body>
</html>

在上面的代码中，当用户点击按钮时，loadDoc() 函数将被调用。该函数初始化 XMLHttpRequest 对象并异步发送 GET 请求到独立的服务器。在服务器响应成功时，将返回 JSON 数据，我们将使用 JSON.parse() 方法将其解析为对象并将其 name 属性显示在页面上。

另一个示例是将表单数据发送到服务器并显示服务器响应的结果。代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>AJAX Example</title>
  <script>
    function loadDoc() {
      const xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
          document.getElementById("demo").innerHTML = this.responseText;
        }
      };
      const name = document.getElementById("name").value;
      const email = document.getElementById("email").value;
      const params = "name=" + name + "&email=" + email;
      xhttp.open("POST", "https://jsonplaceholder.typicode.com/posts", true);
      xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      xhttp.send(params);
    }
  </script>
</head>
<body>

  <form>
    <label for="name">Name:</label><br>
    <input type="text" id="name" name="name"><br>
    <label for="email">Email:</label><br>
    <input type="text" id="email" name="email"><br><br>
    <input type="button" onclick="loadDoc()" value="Submit">
  </form>

  <p id="demo"></p>

</body>
</html>

在上面的代码中，当用户点击提交按钮时，loadDoc() 函数将被调用。该函数初始化 XMLHttpRequest 对象并异步发送 POST 请求到独立的服务器，其中包含表单数据。在服务器响应成功时，我们将服务器的响应显示在 id 为 demo 的元素中。

以上就是 AJAX 初步入门的简要介绍以及两个实例的详细讲解。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：AJAX入门之深入理解JavaScript中的函数 - Python技术站