原生javascript实现的ajax异步封装功能示例

下面是对于“原生javascript实现的ajax异步封装功能示例”的完整攻略。

AJAX简介

AJAX全称是Asynchronous JavaScript and XML，即使用JavaScript异步更新页面的技术。AJAX通过后台与服务器进行交互，获取数据并实现数据与用户的交互。在Web应用中，AJAX使得网页可以异步加载数据而不需要重新加载整个页面，从而提高用户的体验。

明确需求

通过AJAX实现异步获取数据，以达到不刷新页面的效果。此处以异步获取GitHub上的个人库数据为例。

基础知识

• XMLHTTPRequest对象：XMLHTTPRequest对象是AJAX的核心部分，它负责与服务器进行数据交互。
• readyState属性：XMLHTTPRequest对象具有一个readyState属性，存储XMLHTTPRequest对象的状态，其值有0至4，用于检测请求是否完成。
• onreadystatechange事件：XMLHTTPRequest对象的onreadystatechange事件可以指定当readyState的值改变时执行的函数。
• send()方法：XMLHTTPRequest对象的send()方法用于向服务器发送请求。

实现步骤

• 创建一个XMLHTTPRequest对象。
• 通过XMLHTTPRequest对象的open()方法设置请求类型、URL以及异步参数。
• 监听XMLHTTPRequest对象的onreadystatechange时间，当其状态发生改变时触发相应的处理程序。
• 调用XMLHTTPRequest对象的send()方法向服务器发送请求。
• 服务器向客户端响应信息，客户端获取到响应信息并做出相应的处理。

下面就来看两个具体的示例。

示例1：异步获取GitHub库数据

function loadRepositories() {  // 定义异步函数，用于获取GitHub上的repositories
  var request = new XMLHttpRequest();  // 创建XMLHTTPRequest对象
  request.onreadystatechange = function() {  // 监听状态改变事件
    if (request.readyState === 4 && request.status === 200) {  // 请求完成且请求成功
      var repositories = JSON.parse(request.responseText);  // 从响应结果中获取repositories并保存在变量中
      var list = "<ul>";  // 创建包含repositories的ul元素
      for (var i=0; i < repositories.length; i++) {
        list += "<li>" + repositories[i].name + "</li>";
      }
      list += "</ul>";
      document.getElementById("repositories").innerHTML = list;  // 将repositories插入DOM元素中
    }
  };
  request.open("GET", "https://api.github.com/users/maryjing/repos", true);  // 设置请求类型、URL以及异步参数
  request.send();  // 发送请求
}

该示例中，我们通过XMLHTTPRequest实现了异步获取GitHub上的repositories数据，并将其展示在页面上。

示例2：异步提交表单数据

HTML

<form id="myForm">
  <label>
    Name:
    <input type="text" name="name" required>
  </label>
  <label>
    Email:
    <input type="email" name="email" required>
  </label>
  <button type="submit">Submit</button>
</form>

JavaScript

document.getElementById("myForm").addEventListener("submit", function(event) {  //监听表单提交事件
  event.preventDefault();  //禁止表单提交时刷新页面
  var form = document.getElementById("myForm");  //获取表单数据
  var request = new XMLHttpRequest();  //创建XMLHTTPRequest对象
  request.onreadystatechange = function() {  //监听状态改变事件
    if (request.readyState === 4 && request.status === 200) {  //请求完成且请求成功
      alert(request.responseText);  //展示响应结果
    }
  };
  request.open("POST", "http://example.com/submitForm", true);  //设置请求类型、URL以及异步参数
  request.setRequestHeader("Content-Type", "application/json");  //设置请求头，以确保正确解析POST数据
  request.send(JSON.stringify({  //发送JSON数据
    name: form.elements["name"].value,
    email: form.elements["email"].value
  }));
});

该示例中，当用户提交表单时，我们通过监听submit事件阻止默认行为，使用XMLHTTPRequest对象异步向服务器提交表单数据，并在请求完成后展示相应结果。

综上，以上两个示例都是通过原生JavaScript实现的AJAX异步请求，分别对异步获取数据以及异步提交数据进行了说明。在实际开发中，可根据实际情况自行修改或扩展。