浅谈JS原生Ajax，GET和POST

什么是Ajax？

Ajax，指的是Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），是一种无需重新加载整个页面就能实现局部更新的技术。它是通过在后台与服务器进行少量数据交换来实现这一目标的。这意味着可以实现快速动态更改网页内容，更好的用户体验。

Ajax的优缺点

优点

1. 局部刷新：可以局部更新页面，而无需重新加载整个页面，提高页面响应速度和用户体验；
2. 无需插件：原生的 JavaScript 支持 Ajax 技术，无需安装插件；
3. 减轻服务器压力：减少不必要的带宽占用，减轻了服务器的负担，增强服务器的承载能力。

缺点

1. 对 SEO 不友好：由于 Ajax 是通过 JavaScript 的后台来执行更新，而非实际的 HTML 和链接，因此对搜索引擎优化（SEO）不友好；
2. 安全问题：如果不注意安全问题，可能导致安全漏洞，例如 XSS 和 CSRF 攻击。

Ajax的原生实现

XMLHttpRequest对象

XMLHttpRequest 对象是一个 JavaScript 对象，可在不重载页面的情况下向服务器发送请求、接收服务器响应。

XMLHttpRequest的基本用法如下：

let xhr = new XMLHttpRequest();  // 创建 XMLHTTPReauest 对象
xhr.open(method, url, async);  // 初始化请求
xhr.send(data);  // 发送请求
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 对响应进行处理
  }
};

其中，xhr.open() 方法用来初始化请求，包括方法、URL、是否异步等参数；xhr.send() 方法用来发送请求，可用于发送数据；xhr.onreadystatechange 事件用来监听响应，它会在 readyState 值发生改变时被触发。

发送 GET 请求

当使用 XMLHttpRequest 对象发送 GET 请求时，将 URL 作为 open() 方法的第二个参数传递，将 send() 方法设置为 null。下面是一个简单的示例：

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
xhr.send(null);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

发送 POST 请求

POST 请求需要发送数据，可以在 send() 方法中传递需要发送的数据。需要设置Content-Type头信息，告诉服务器接收到的是什么类型的数据。下面是一个简单的示例：

let xhr = new XMLHttpRequest();
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('title=foo&body=bar&userId=1');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 201) {
    console.log(xhr.responseText);
  }
};

结语

以上是关于 Ajax 和原生实现的简单介绍。由于篇幅所限，不足尽有，还请见谅。

更多内容可见我的 blog。

——完——