通过之前不断地学习，我们终于从html、css、javascript的全世界路过，正式来到了Ajax的世界，那么，让我们一起来认识一下它吧！
一、什么是Ajax?
Ajax的全称是 Asynchronous Javascript And XML(异步 JavaScript 和 XML)
我们可以将它理解为一种：在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式
二、学习Ajax有什么好处？
不同于我们之前学的html、css等，Ajax除了“华丽的外表”，它还有“真本事”，它能让我们轻松的实现网页和服务器之间的数据交互。是不是超赞！
三、如何在发起Ajax请求？
由于XMLHttpRequest的用法比较复杂，因此jqery对XMLHttpRequest进行了封装，提供了一系列Ajax相关的函数，极大的降低了Ajax的使用难度。
在jquery中发起Ajax请求的三种方法：
$.get()
$.post()
$.ajax()
现在让我们来仔细了解以下这三种方法吧！
- $.get()
向服务器发送get请求，将服务器上的资源请求到客户端来进行使用（“查”的一个过程）
$.get()分两种情况：带参数和不带参数
参数就是你要请求的主元素
不带参数：
其语法如下： $.get('url地址',回调函数);
带参数：
其语法如下： $.get('url地址',{指定携带的对象},回调函数);
具体代码如下：（注意：ajax使用过程中一定要引入jquery.js文件，否则代码无法运行，一切都白搭）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="lib/jquery.js"></script>
</head>
<body>
<button id="btnGETInfo">发起带参数的GET请求</button>
<script>
(function () {
// 给按钮绑定事件
$('#btnGETInfo').on('click', function () {
// 1.发起不带参数的GET请求
// 格式如下： $.get('url地址',回调函数);
$.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
console.log(res);
})
// 2.发起带参数的GET请求
// 格式如下： $.get('url地址',{指定携带的对象},回调函数);
// 注意：{指定携带的对象} 它的结尾部分不能使用分号";"
$.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, function (res) {
console.log(res);
})
})
})()
</script>
</body>
</html>
2.$.post()
向服务器发送post请求，向服务器提交数据（“添”的一个过程）
其语法和$.get()的相差无几，不过因为 post 是主动传输，所以它一定带参数
具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="lib/jquery.js"></script>
</head>
<body>
<button id="btnPost">发起POST请求</button>
<script>
(function () {
$('#btnPost').on('click', function () {
// post 提交数据
// 格式如下：$.post('url',{传送内容},回调函数);
// 注意:数据不能重复添加，否则会出现重叠的情况 它的url值和请求的时候有所不同
$.post('http://www.liulongbin.top:3006/api/addbook', {
bookname: '红楼梦', author: '曹雪芹', publisher: '人民文学出版社'
}, function (res) {
console.log(res);
})
})
})()
</script>
</body>
</html>
3.$.ajax()
这一看它的名字就知道它不一般，没错，它是综合型“人才”，既可以“查”，也可以“添”
其基本语法如下：
$.ajax({
type: '', // 请求方式， GET 或者 POST
url: '', // 请求的 url 地址
data：{}, // 请求所带的数据
success: function (res) {
// 请求成功后的回调函数
}
})
具体代码如下：
GET
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="lib/jquery.js"></script>
</head>
<body>
<button id="btnGet">发起GET请求</button>
<script>
(function () {
$('#btnGet').on('click', function () {
// type 中可以选择数据类型(get/post)
$.ajax({
type: 'GET',
url: 'http://www.liulongbin.top:3006/api/getbooks',
data: {
id: 1
},
success: function (res) {
console.log(res);
}
})
})
})()
</script>
</body>
</html>
POST
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="lib/jquery.js"></script>
</head>
<body>
<button id="btnPost">发起POST请求</button>
<script>
(function () {
$('#btnPost').on('click', function () {
$.ajax({
type: 'POST',
url: "http://www.liulongbin.top:3006/api/addbook",
data: {
bookname: '三国演义', author: '罗贯中', publisher: '人民文学出版社'
}
})
})
})()
</script>
</body>
</html>
好了，到这里，我们算是初始了Ajax的基础内容，欲知后事如何，请看下回分解！
如有错误，请在评论区中指正，我们共同进步！
