vanilla_带有Vanilla JavaScript的AJAX示例

vanilla

在介绍AJAX之后 ，下面是一个使用XMLHttpRequest API初始化AJAX请求的示例。

AJAX示例

看一下以下基本结构：

   
   

          
    
    
          
    
    Learn more about Einstein
          
    
    

      
   
   

另外，请考虑相关的可视化：

这是我们想要发生的事情：单击按钮时，将执行AJAX请求。 然后，将显示具有bio ID的元素，并将其内容填充响应数据。 该数据是静态的，并存储在Bio.txt文件中。

注意：文件已上传到Codepen服务器。 这样，我们避免了可能发生的跨域问题。

以下是必需的AJAX代码：

var btn = document.getElementById('request');
      var bio = document.getElementById('bio');

      var request = new XMLHttpRequest();

      request.onreadystatechange = function() {
        if(request.readyState === 4) {
          bio.style.border = '1px solid #e8e8e8';
          if(request.status === 200) { 
          	bio.innerHTML = request.responseText;
          } else {
          	bio.innerHTML = 'An error occurred during your request: ' +  request.status + ' ' + request.statusText;
          } 
        }
      }

      request.open('Get', 'Bio.txt');

      btn.addEventListener('click', function() {
        this.style.display = 'none';
        request.send();
      });

分解为步骤

现在让我们描述此请求的步骤：

• 创建一个XMLHttpRequest对象。

• 编写在服务器发回响应数据时将运行的功能。 XMLHttpRequest对象具有onreadystatechange属性，该属性存储此函数。 每次请求状态更改时，都会执行此回调函数。

• 监视XMLHttpRequest对象的其他一些属性。 首先， readyState属性指定了我们请求的状态。 在整个AJAX调用中，其值都会更改，并且可以接收0到4的值（例如，值4表示响应数据可供我们使用）。 其次， status属性指示请求是否成功（例如，值200定义成功的请求）。 在此示例中，假设我们检索了响应数据并且AJAX调用成功，那么我们将更新目标元素的内容。 否则，我们将显示一条消息，其中包含从XMLHttpRequest对象提取的信息。

• 通过使用open方法指定请求的类型。 此方法接受两个必需参数和三个可选参数。 第一个必需参数定义HTTP方法（例如GET或POST ）。 第二个确定我们将请求发送到的URL。 可选地，我们传递第三个布尔参数，该参数指示请求是异步的（即默认true值）还是同步的。 其他两个可选参数可用于身份验证。

• 通过send方法单击按钮时提交请求。 另外，这时我们隐藏了按钮。

注意：如果确实需要支持非常旧版本的Internet Explorer（即IE6及更低版本），则必须创建ActiveXObject对象的实例（请参见“ 步骤1”部分）。

下一个可视化内容显示了请求的主体，该请求的主体显示在浏览器的控制台中。

最终的演示如下所示：

另一方面，如果我们请求一个不存在的文件，则会看到类似于以下内容的消息：

注意：如果您从本地环境运行示例（并将Bio.txt文件存储在其中），则错误消息可能会有所不同。 例如，您可能会看到以下结果：

这是嵌入式Codepen演示：

结论

在本教程中，我们探讨了如何使用原始JavaScript实现简单的AJAX请求。

在本系列的下一部分中，我们将重点介绍与jQuery的AJAX相关的功能和方法。 然后，在本系列的最后一部分，我们将使用一个更复杂的示例。 敬请关注！

翻译自: https://webdesign.tutsplus.com/tutorials/an-example-of-ajax-with-vanilla-javascript--cms-25763

vanilla