Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新，这意味着可以在不影响网页正常浏览的情况下，与服务器交换数据并更新部分网页内容。
原生的Ajax写法主要依赖于JavaScript的XMLHttpRequest对象来实现，以下是一个简单的原生Ajax请求示例：
function ajax(options) {
var xhr = new XMLHttpRequest(); // 创建一个新的XMLHttpRequest对象
xhr.onreadystatechange = function() { // 监听请求状态变化
if (xhr.readyState === 4) { // 4表示请求已完成，且响应已就绪
if (xhr.status === 200) { // 200表示请求成功
console.log(xhr.responseText); // 输出服务器返回的数据
} else {
console.log('请求失败，状态码：' + xhr.status);
}
}
};
xhr.open(options.method, options.url, true); // 初始化请求
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 设置请求头
xhr.send(options.data); // 发送请求
}
使用示例：
var options = {
method: 'GET', // 请求方法，可以是GET、POST等
url: 'https://api.example.com/data', // 请求地址
data: '' // 请求参数，如果是GET请求，可以将其拼接到url中；如果是POST请求，需要设置Content-Type为'application/x-www-form-urlencoded'，并将参数转换为键值对形式
};
ajax(options); // 调用ajax函数发起请求
以上代码实现了一个简单的原生Ajax请求，但在实际项目中，我们通常会使用一些成熟的库（如jQuery、axios等）来简化操作，原生Ajax虽然略显繁琐，但对于理解Ajax原理和掌握底层技术非常有帮助。
接下来，我们将详细介绍原生Ajax的各个阶段和注意事项。
1、XMLHttpRequest对象：XMLHttpRequest是一个内置于所有现代浏览器中的JavaScript对象，用于在后台与服务器交换数据，通过创建一个新的XMLHttpRequest对象，我们可以发起一个Ajax请求。
2、onreadystatechange事件：当XMLHttpRequest对象的readyState属性发生变化时，会触发onreadystatechange事件。readyState的值表示请求的状态，取值范围为0-4，0表示请求未初始化，1表示服务器连接已建立，2表示请求已接收，3表示请求处理中，4表示请求已完成，我们需要在readyState值为4时，判断status属性的值是否为200，以确定请求是否成功。
3、open()方法：用于初始化一个请求，该方法接收三个参数：请求方法（如GET、POST等）、请求地址和是否异步执行（布尔值）。xhr.open('GET', 'https://api.example.com/data', true);。
4、setRequestHeader()方法：用于设置请求头。xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');，需要注意的是，如果设置了多个请求头，它们之间需要用分号分隔。
5、send()方法：用于发送请求，该方法接收一个参数：请求参数，对于GET请求，可以将参数拼接到url中；对于POST请求，需要设置Content-Type为'application/x-www-form-urlencoded'，并将参数转换为键值对形式。xhr.send('key=value');。
在使用原生Ajax时，需要注意以下几点：
1、跨域问题：由于浏览器的同源策略限制，不同域名之间的请求会受到限制，要解决跨域问题，可以使用JSONP或CORS等技术。
2、超时处理：为了避免长时间等待服务器响应，可以为XMLHttpRequest对象设置一个超时时间。xhr.timeout = 5000;，当超过设定的超时时间后，如果服务器仍未响应，将触发超时事件。
3、错误处理：在实际应用中，我们需要对各种可能的错误进行处理，当网络异常时，可以通过监听onerror事件来捕获错误信息，还可以通过检查status属性的值来判断请求是否成功。
原生Ajax虽然实现起来较为繁琐，但它为我们提供了一种直接与服务器交互的方式，有助于我们深入理解Ajax的原理和底层技术，在实际项目中，我们可以根据需求选择使用成熟的库来简化操作。