注：文章篇幅有点长，但内容足够丰富。
1. 关于ajax
Ajax即Asynchronous Javascript And XML（异步JavaScript和XML），在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。（------度娘回答）
2. jQuery中的$.ajax()的基本使用
早些年，jQuery作为一个高度封装了JavaScript方法的库，可谓是风靡世界，它对于一些JavaScript的原生语法，做了大量且细致的工作，使这些原生的方法使用起来变得异常简单，这能够让我们程序猿使用少量的代码，就能够完成大量的业务逻辑，不可谓不厉害。尤其是它（jQuery）对于操作DOM而提供的精简的语法，尤其让我们喜爱。
虽然现在前端框架盛行（AngularJS，React，Vue等），jQuery的辉煌时代已经过去了，但是，不可否认，jQuery对于前端领域的影响是巨大的。
对于ajax，jQuery也是做了封装工作，我们可以通过代码来了解一下：
假设，我们现在要用jQuery发送一个ajax请求，请求地址为：'http://localhost:3000/base'，并且发送一些参数params；
代码如下：
// 页面中必须要引入 jQuery库
// <script src="./js/jquery-3.3.1.min.js"></script>
// 要发送的参数
var params = {
name: "zhagnsan",
age: 20
};
//发送ajax请求
$.ajax({
type: 'get', // 请求类型 get/post
url: 'http://localhost:3000/base', // 请求地址
// 发送请求参数
data: JSON.stringify(params), // JSON.stringify() 用于将 JavaScript 值转换为 JSON 字符串
// 指定参数的类型
contentType: 'application/json',
// 在请求被发送之前调用的函数
beforeSend: function() {
// 可以对用户输入的内容进行判断。如果不符合要求，就不会发送请求
// return false 请求不发送
alert('请求即将发送')
},
// 请求成功时 执行的回调
// response形参 请求成功后 接收服务器端返回的数据作为作为实参
success: function(response) {
// 方法内部会自动将json字符串转换为json对象
console.log(response);
},
// 请求出错时 执行的回调函数
error: function(err) {
console.log(err);
}
});上面的代码，就是利用jQuery提供的$.ajax()发送的一个简单的请求，很多人在使用过$.ajax()之后呢，就以为这就是ajax的本质，其实并不是。
$.ajax()它只是一个封装好的请求函数，它将原生JavaScript中发送ajax请求的对象（XMLHttpRequest）进行了封装，从而有了$.ajax()。
扩展：
JSON.stringify() // 用于将 JavaScript 值转换为 JSON 字符串。
JSON.parse() // 用于将一个 JSON 字符串转换为 JavaScript 对象。
3. ajax的基本工作原理
ajax 是一种用于创建快速动态网页的技术。
它的出现，实现了网页的异步更新，对页面在不重新加载的情况下，完成页面的部分更新。
而它的根本实现原理，是基于JavaScript原生语法提供的XMLHttpRequest对象完成的。
-----图片来自《菜鸟教程》
3.1 ajax入门
利用原生XMLHttpRequest对象，发送一个ajax请求：
请求地址：“http://localhost:3000/first”，请求方式：“get”;
// 1.创建Ajax对象
var xhr = new XMLHttpRequest();
// 2.告诉Ajax对象要向哪里发送请求，以什么方式发送请求
// xhr.open(请求方式，请求地址url)
xhr.open("get", "http://localhost:3000/first");
// 3.发送请求
xhr.send();
// 4.获取服务器端的响应到客户端的数据
// 接受完服务器端的数据后，就会自动触发onload事件
xhr.onload = function () {
// xhr.responseText 响应文本 保存的是服务器端响应到客户端的数据
console.log(xhr.responseText); // hello word （输出后台返回的数据）
};以上，就是利用XMLHttpRequest对象发送的原生ajax请求，虽然只有寥寥数语，不过却可窥见其貌了。
首先，实例化一个了XMLHttpRequest对象，然后利用实例出来的对象（xhr）调用open() 方法配置请求方式和请求路径，接着调用send()方法将请求发送出去，在发送请求之后，还得处理服务器返回的数据，调用onload接收一个匿名函数来处理ajax请求返回的各项参数。
3.2 传递get请求参数
在了解了如何利用XMLHttpRequest发送简单ajax之后，我们来了解一下，如何利用原生ajax携带参数发送请求。
1. get请求中携带参数
请求地址：“'http://localhost:3000/get”，请求方式：‘’get”；
HTML代码：
<!--
Ajax中的get请求
需要自己手动拼接请求参数
-->
<p>
<input type="text" id="username">
</p>
<p>
<input type="text" id="age">
</p>
<p>
<input type="button" value="提交" id="button">
</p>JavaScript代码：
// 获取按钮元素
var btn = document.getElementById('button');
// 获取姓名及年龄
var username = document.getElementById("username");
var age = document.getElementById("age");
// 添加点击事件
btn.onclick = function() {
// 获取用户文本框中的值
var namevalue = username.value;
var agevalue = age.value;
// 拼接请求参数字符串 放在请求地址问号的后面
var params = 'username=' + namevalue + '&age=' + agevalue;
// 创建ajax对象
var xhr = new XMLHttpRequest();
// 配置ajax对象
// 一定不要忘记域名之后的？符号
xhr.open('get', 'http://localhost:3000/get?' + params);
// 发送请求
xhr.send();
// 获取服务器端响应的数据
xhr.onload = function() {
console.log(xhr.responseText); // 控制台打印服务器返回的数据
}
}如此，一个携带参数的get请求就被发送出去了，而且也能够返回服务端的数据。
2. 发送post请求携带参数
post请求和get请求的区别之一，就是get请求参数会被暴露在url地址拦中，让人能够一眼看参数的具体内容(不建议发送敏感信息)，而post则不同，它将所发送的参数携带在请求头里(request body)，能够最大限度进行安全的参数传递，且没有数据大小限制。
接下来，我们利用元素JavaScript的XMLHttpRequest对象发送一个post请求，且携带一些参数发送给服务器；
请求地址：“http://localhost:3000/post”，请求方式：“post”;
HTML代码：
<!--
Ajax中的post请求
需要自己手动拼接请求参数
-->
<p>
<input type="text" id="username">
</p>
<p>
<input type="text" id="age">
</p>
<p>
<input type="button" value="提交" id="button">
</p>JavaScript代码：
// 获取按钮元素
var btn = document.getElementById('button');
// 获取姓名及年龄
var username = document.getElementById("username");
var age = document.getElementById("age");
// 添加点击事件
btn.onclick = function() {
// 创建ajax对象
var xhr = new XMLHttpRequest();
// 获取用户文本框中的值
var namevalue = username.value;
var agevalue = age.value;
// 拼接请求参数字符串 post请求参数放入send()中 随着请求传递
var params = 'username=' + namevalue + '&age=' + agevalue;
// 配置ajax对象
xhr.open('post', 'http://localhost:3000/post');
// post与get请求最重要的区别 就是必须声明请求报文头的类型
// 如果你的参数是一个name=zhangsna&age=23这种类型 那么报文头必须是以下形式
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencodd');
// 发送请求 携带参数
xhr.send(params);
// 获取服务器端响应的数据
xhr.onload = function() {
console.log(xhr.responseText);
}
}3.3 ajax错误处理
请求发送之后，有成功，自然也就有失败，成功我们是利用onload方法来接收响应数据的，那么相应的请求失败之后，我们是利用onerror方法来处理的。
onerror同onload一样，也是接收一个匿名函数，然后在函数中进行错误处理。
// 创建ajax请求对象
var xhr = new XMLHttpRequest();
// 配置请求参数
xhr.open('get', 'http://localhost:3000/error');
// 发送请求
xhr.send();
// 将状态码该为400 模拟请求出错
xhr.onload = function() {
// xhr.status 存储的就是HTTP状态码
// console.log(xhr.responseText)
console.log(xhr.status); // status代表请求状态码
if (xhr.status == 400) {
alert('请求出错');
}
};
// 当网络中断，会触发onerror事件
// 在谷歌浏览器中 notwork中模拟网络中断 No throtting
xhr.onerror = function() {
alert('网络中断无法发送请求');
}文章到这里大概也就结束了，虽然我只是简单的梳理了，用JavaScript原生的XMLHttpRequest对象，发送ajax请求的过程，但是其中还有很多内容未涉及到，如果有兴趣的朋友可以找关于XMLHttpRequest更加详细的教程来学习。
在了解了ajax技术的基础之后，我们再对比之前的jQuery中的$.ajax()，其实二者的本质是一样，只不过$.ajax()是将原生的语法进行了一次封装，使其变的更容易使用，而通过上面的代码我们也能够看的出来，如果使用原生的ajax发送请求，那么将会使我们的代码变得异常臃肿，而且书写也不方便，所以才会出现$.ajax()这种便于使用的方法。
后面我也会发布一个关于封装ajax的文章，以便于我们无论何时使用ajax时，都能够及时且方便的使用。
注：菜鸟的学习历程，如有不当之处，欢迎指正！