AJAX基本认识

AJAX简单介绍

AJAX，全称为 Asynchronous JavaScript and XML，是一种使用 JavaScript、XML、CSS 和 HTML 技术进行 Web 开发的方法。

它可以在不刷新页面的情况下向服务器发送请求和接收响应，从而提升用户体验。本文将介绍 AJAX 的代码编写以及其优缺点。

AJAX 的代码怎么写

在 JavaScript 中，可以使用 XMLHttpRequest 对象来实现 AJAX。以下是一个简单的 AJAX 请求的示例：

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const response = xhr.responseText;
    console.log(response);
  }
}
xhr.send();

上述代码中，我们创建了一个 XMLHttpRequest 对象，并使用 open() 方法指定请求的方法和 URL，然后使用 onreadystatechange 事件来处理响应。在 onreadystatechange 中，我们检查 readyState 和 status 的值，以确保请求已经完成，并且服务器返回的状态码是 200。如果满足条件，我们就可以使用 responseText 属性获取响应内容，并进行处理。

我们也可以封装一个AJAX后再使用

function ajax(options) {
  const xhr = new XMLHttpRequest();
  xhr.open(options.method || 'GET', options.url);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
        const response = xhr.responseText;
        options.success && options.success(response);
      } else {
        options.error && options.error(xhr.status);
      }
    }
  };
  xhr.onerror = function() {
    options.error && options.error(xhr.status);
  };
  xhr.send(options.data || null);
}

该函数接受一个配置对象作为参数，配置对象中包含请求的方法、URL、请求参数等信息。函数内部使用 XMLHttpRequest 对象来发送 AJAX 请求，并在请求完成后根据响应状态码进行处理。

使用该函数的示例代码如下：

ajax({
  method: 'POST',
  url: '/api/login',
  data: {
    username: 'test',
    password: '123456'
  },
  success: function(response) {
    console.log(response);
  },
  error: function(status) {
    console.error('请求出错，状态码为：' + status);
  }
});

以上示例代码演示了如何使用该 AJAX 函数来发送一个 POST 请求，并将请求参数以对象形式传递。在请求完成后，根据响应状态码和响应内容进行处理。

当然，实际开发中的 AJAX 函数会更加复杂，需要考虑更多的情况和错误处理

AJAX 的优缺点

AJAX 作为一种前端技术，有其优点和缺点。

优点：

• 改善用户体验：AJAX 可以在不刷新页面的情况下更新部分页面，从而提升用户的使用体验。
• 提高页面性能：由于不需要每次都刷新整个页面，所以页面的响应速度更快。
• 减轻服务器负载：由于只需要更新部分页面，所以服务器不需要每次都返回整个页面，从而减轻服务器的负载。

缺点：

• 对搜索引擎不友好：由于 AJAX 请求是异步的，因此搜索引擎无法对其进行解析和索引。
• 安全性问题：由于 AJAX 可以发送请求到任意服务器，因此可能存在安全性问题。
• 对浏览器兼容性要求高：不同浏览器对 AJAX 的支持程度不同，需要对不同的浏览器进行兼容性处理。

综上所述，AJAX 可以提升用户体验和页面性能，但同时也存在一些缺点。在实际开发中，需要根据实际情况进行选择。