纯js封装的ajax功能函数与用法示例

下面就为大家详细介绍一下“纯js封装的ajax功能函数与用法示例”的攻略。

一、什么是纯js封装的ajax功能函数？

首先，我们先来了解一下“ajax”是什么。XMLHttpRequest（XHR）是浏览器内置的一个对象，通过它可以向服务器发送请求并获取服务器返回的数据。而AJAX则是基于XHR技术的一种网页开发技术，它能够异步地向服务器发送请求并更新页面，这样能够使用户获得更加良好的网页使用体验。

而“纯js封装的ajax功能函数”就是指用Javascript语言自己编写一个函数来封装XHR对象的操作，使之更加易于使用。这样的封装函数一般包含有发起请求和回调函数两个重要的参数。

二、纯js封装的ajax功能函数的用法

发送GET请求

使用纯js封装的ajax功能函数，我们可以很容易地通过发起GET请求向服务器获取数据。

function ajaxGet(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
      var data = xhr.responseText;
      callback(data);
    }
  }
  xhr.send();
}

通过上述代码，我们就封装了一个名为ajaxGet的函数，它接收两个参数：URL和回调函数。当我们使用ajaxGet函数时，只需传入需要请求的URL和对应的回调函数即可完成一个GET请求。

发送POST请求

除了GET请求外，我们也可以通过纯js封装的ajax功能函数发送POST请求来向服务器提交数据。

function ajaxPost(url, data, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", url, true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
      var data = xhr.responseText;
      callback(data);
    }
  }
  xhr.send(data);
}

通过上述代码，我们封装了一个名为ajaxPost的函数，它接收三个参数：URL、数据和回调函数。当我们使用ajaxPost函数时，只需传入需要请求的URL、需要提交的数据以及对应的回调函数即可完成一个POST请求。

三、纯js封装的ajax功能函数使用示例

示例一：利用ajaxGet函数获取后台返回的字符串

// HTML
<div id="result"></div>

// JS
var url = "http://example.com/test";
function callback(data) {
  document.getElementById("result").innerHTML = data;
}
ajaxGet(url, callback);

通过上述代码，我们可以向指定URL发送GET请求，并通过回调函数将服务器返回的数据显示在页面上。

示例二：利用ajaxPost函数向服务器提交表单数据

// HTML
<form>
  <input type="text" id="name" name="name"><br>
  <input type="password" id="password" name="password"><br>
  <button type="button" onclick="submitForm()">提交</button>
</form>

// JS
function submitForm() {
  var name = document.getElementById("name").value;
  var password = document.getElementById("password").value;
  var url = "http://example.com/login";
  var data = "name=" + name + "&" + "password=" + password;
  function callback(data) {
    alert(data);
  }
  ajaxPost(url, data, callback);
}

通过上述代码，我们可以在页面上定义一个表单，当用户通过表单提交按钮提交数据时，我们可以通过利用ajaxPost函数来向服务器提交表单数据，并使用回调函数将服务器返回的信息展示给用户。

以上就是关于“纯js封装的ajax功能函数与用法示例”的详细介绍，希望对大家有所帮助。