Ajax的用法总结

Ajax全称为Asynchronous JavaScript And XML，是指通过JavaScript异步和局部更新的方式与服务器交换数据的技术。 Ajax的优点主要有以下几个方面：

• 提高用户体验：在页面不刷新的情况下，用户可以看到更新的数据或内容，从而提高了用户的体验。
• 减轻服务器压力：使用Ajax可以局部更新页面，减少了服务器对整个页面的重新渲染，降低了服务器的负担。
• 优化网站流量：使用Ajax可以动态获取内容，避免了不必要的页面刷新和重新加载，以达到优化网站流量的效果。

使用Ajax的步骤

使用Ajax的一般步骤如下：

1. 创建XMLHttpRequest对象：通过JavaScript创建一个XMLHttpRequest对象，用于向服务器发送请求和接收响应。
   javascript
let xhr;
if (window.XMLHttpRequest) { // 非IE浏览器
xhr = new XMLHttpRequest();
} else { // IE浏览器
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
2. 发送请求并接收响应：调用open()和send()方法向服务器发送请求，并通过onreadystatechange事件监听服务器返回的响应。
   javascript
xhr.open('GET', 'example.com/api', true); // 发送GET请求
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) { // 当请求状态为4且其状态码为200时
console.log(xhr.responseText); // 请求成功，响应内容在xhr.responseText中
}
}
xhr.send(); // 发送请求
3. 处理响应：通过响应类型处理服务器返回的数据，一般有JSON、XML、HTML等类型。根据服务器返回的数据类型进行数据的解析和渲染，将数据展示在网页上。

Ajax的应用场景

Ajax可用于前端的多个应用场景，例如：

• 前台表单动态提交、验证、提示；
• 异步加载数据，渲染列表、表格；
• 延迟加载，减少页面加载时间，提高页面效率；
• 特效实现，动态切换、局部刷新；
• 搜索提示，不用跳转查询，减少查询请求；

Ajax的一些示例

以下是Ajax的两个应用示例：

1. 与API接口交互获取数据

使用Ajax的最为常见的场景就是与API接口交互获取数据，以下是一个示例：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.github.com/users', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    let users = JSON.parse(xhr.responseText);
    let userList = document.getElementById('userList');
    users.forEach(function(user) {
      let li = document.createElement('li');
      li.innerHTML = user.login;
      userList.appendChild(li);
    });
  }
}
xhr.send();

1. 实现异步表单提交

如果我们需要在表单中输入一些内容，然后通过Ajax请求将这些内容保存到服务器上。例如：

<form action="" method="post" id="myForm">
  <input type="text" name="name" placeholder="请输入用户名">
  <input type="email" name="email" placeholder="请输入邮箱">
  <input type="submit" value="提交">
</form>

<script>
let form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认行为
  let xhr = new XMLHttpRequest();
  xhr.open('POST', 'https://example.com/save', true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.responseText);
    }
  }
  let formData = new FormData(form);
  xhr.send(formData);
});
</script>

这样即可实现表单内容异步提交的功能。