共计 7537 个字符，预计需要花费 19 分钟才能阅读完成。
一、jQuery 形式
浏览器中提供的 XMLHttpRequest 用法比较复杂，所以 jQuery 对 XMLHttpRequest 进行了封装, 提供了一系列 Ajax 相干的函数，极大地升高了 Ajax 的应用难度。
jQuery 中发动 Ajax 申请最罕用的三个办法如下：
- $.get() 获取数据
$.get(url,[data],[callback])
参数名 参数类型 是否必选 阐明
url string 是 要申请的资源地址
data object 否 申请资源期间要携带的参数
callback function 否 申请胜利时的回调函数
① $.get() 发动不带参数的申请
$.get(‘http://www.atguigu.com:3006/a…’,function(res){
console.log(res) // 这里的 res 是服务器返回的数据
})
② $.get() 发动带参数的申请
$.get(‘http://www.atguigu.com:3006/a…’, { id: 1}, function(res){
console.log(res)
})
切记！！！其中参数是以对象的模式
- $.post() 提交数据
$.post(url,[data],[callback])
参数名 参数类型 是否必选 阐明
url string 是 提交数据的地址
data object 否 要提交的数据
callback function 否 数据提交胜利时的回调函数
$.post() 向服务器提交数据
$.post(
‘http://www.www.atguigu.com:30…’, // 申请的 URL 地址
{bookname: ‘ 水浒传 ’, author: ‘ 施耐庵 ’, publisher: ‘ 上海图书出版社 ’}, // 提交的数据
function(res) {// 回调函数
console.log(res)
}
)
- $.ajax() 既能够获取也能够提交数据
$.ajax({
type: ‘ ‘, // 申请的形式，例如 GET 或 POST
url: ‘ ‘, // 申请的 URL 地址
data: {}, // 这次申请要携带的数据
success: function(res) {} // 申请胜利之后的回调函数
})
① 应用 $.ajax() 发动 GET 申请（只须要将 type 属性设置为 ’ GET ‘ 即可）
$.ajax({
type: ‘get’,
url: ‘http://www.www.atguigu.com:30…’,
data: {id: 1}
success: function(res) {
console.log(res)
}
})
② 应用 $.ajax() 发动 POST 申请
$.ajax({
type: ‘post’,
url: ‘http://www.atguigu.com:3006/a…’,
data: {
bookname: ‘ 水浒传 ’,
author: ‘ 施耐庵 ’,
publisher: ‘ 上海图书出版社 ’
},
success: function(res) {
console.log(res)
}
})
既然理解了概念，那咱们就实操一下，上面看个例题：实现图书列表的增删显示性能
实现代码如下：
<!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>
<link rel="stylesheet" href="bootstrap.css">
<script src="jQuery.min.js"></script></head>
<body style=”padding: 15px”>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"> 增加新图书 </h3>
</div>
<div class="panel-body form-inline">
<div class="input-group">
<div class="input-group-addon"> 书名 </div>
<input type="text" class="form-control" id="iptBookname" placeholder="请输出书名">
</div>
<div class="input-group">
<div class="input-group-addon"> 作者 </div>
<input type="text" class="form-control" id="iptAuthor" placeholder="请输出作者">
</div>
<div class="input-group">
<div class="input-group-addon"> 出版社 </div>
<input type="text" class="form-control" id="iptPublisher" placeholder="请输出出版社">
</div>
<button id="btn" class="btn btn-primary"> 增加 </button>
</div>
</div>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Id</th>
<th> 书名 </th>
<th> 作者 </th>
<th> 出版社 </th>
<th> 操作 </th>
</tr>
</thead>
<tbody id="tb">
</tbody>
</table>
<script>
$(function(){
// 获取图书列表数据
function getBookList(){$.get('http://www.liulongbin.top:3006/api/getbooks',function(res){if(res.status !== 200) return alert('获取数据失败！');
// 把获取到的数据都寄存在数组中
var rows = []
$.each(res.data, function(i,item){rows.push('<tr><td>'+item.id+'</td><td>'+item.bookname+'</td><td>'+item.author+'</td><td>'+item.publisher+'</td><td><a href:"javascript:;"class="del"data-id="'+item.id+'"> 删除 </a></td></tr>')
})
// 将数组转化为字符串渲染到页面
$('#tb').empty().append(rows.join(''))
})
}
getBookList()
// 删除图书
$('tbody').on('click','.del',function(){var id = $(this).attr('data-id')
$.get('http://www.liulongbin.top:3006/api/delbook',{id: id},function(res){if(res.status !== 200) return alert('删除图书失败！')
// 调用该函数，把页面从新渲染一遍
getBookList()})
})
$('#btn').on('click',function(){// trim() 函数能够去除字符串两端的空格
var bookname = $('#iptBookname').val().trim()
var author = $('#iptAuthor').val().trim()
var publisher = $('#iptPublisher').val().trim()
if(bookname.length <= 0 || author.length <=0 || publisher.length <=0) {return alert('请填写残缺的图书信息！')
}
// 增加图书
$.post('http://www.liulongbin.top:3006/api/addbook',{bookname: bookname, author: author,publisher: publisher},function(res){if(res.status !== 201) return alert('增加图书失败！')
getBookList()
// 清空输入框内容
$('#iptBookname').val('')
$('#iptAuthor').val('')
$('#iptPublisher').val('')
})
})
})
</script></body>
</html>
二、xhr 形式
XMLHttpRequest(简称 xhr) 是浏览器提供的 Javascript 对象，通过它，能够 申请服务器上的数据资源。之前所学前端培训技术的 jQuery 中的 Ajax 函数，就是基于 xhr 对象封装进去的
- 应用 xhr 发动 GET 申请
办法如下图所示：
// 1. 创立 xhr 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数，指定 申请形式 与 URL 地址
xhr.open(‘GET’,’http://www.atguigu.com:3006/a…’)
// 3. 调用 send 函数，发动 Ajax 申请
xhr.send()
// 4. 监听 onreadystatechange 事件
xhr.onreadystatechange = function() {
// 4.1 监听 xhr 对象的申请状态 readyState; 与服务器响应的状态 status
if(xhr.readyState === 4 && xhr.status === 200) {
// 4.2 打印服务器响应回来的数据
console.log(xhr.responseText);
}
}
如果发动的是带参数的 GET 申请，只须要在调用 xhr.open 期间，为 URL 地址指定参数即可：
xhr.open(‘GET’,’http://www.liulongbin.top:300… 西游记 ’)
多个参数之间用 & 连贯
- 应用 xhr 发动 POST 申请
办法如下图所示：
// 1. 创立 xhr 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数，指定 申请形式 与 URL 地址
xhr.open(‘POST’,’http://www.liulongbin.top:300…’)
// 3. 设置 Content-Type 属性（固定写法）
xhr.setRequestHeader(‘Content-Type’,’application/x-www-form-urlencoded’)
// 4. 调用 send 函数，同时将数据以 查问字符串 的模式，提交给服务器
xhr.send(‘bookname= 水浒传 &author= 施耐庵 &publisher= 天津图书出版社 ’)
// 5. 监听 onreadystatechange 事件
xhr.onreadystatechange = function() {
// 4.1 监听 xhr 对象的申请状态 readyState; 与服务器响应的状态 status
if(xhr.readyState === 4 && xhr.status === 200) {
// 4.2 打印服务器响应回来的数据
console.log(xhr.responseText);
}
}
以 xhr 形式发动 PSOT 和 GET 申请的区别：
① 传递数据参数的地位不同：GET 形式是写在 URL 地址的前面，而 POST 形式是写在 xhr.send() 中
② 发动 POST 申请时，必须写 xhr.setRequestHeader(‘Content-Type’,’application/x-www-form-urlencoded’)，GET 申请不须要写
三、axios 形式
Axios 是专一于网络数据申请的库，相比于原生的 XMLHttpRequest 对象，axios 简略易用. 相比于 jQuery，axios 更加轻量化，只专一于网络数据申请
应用前要先导入 axios.js 包
- 应用 axios 发动 GET 申请
语法：
axios.get(‘url’, { params: { / 参数 /} }).then(callback)
代码如下：
// 申请 URL 地址
var url = ‘http://www.liulongbin.top:300…’
// 申请的参数对象
var paramsObj = {name: ‘zs’, age: 20}
// 调用 axios.get() 发动 GET 申请
axios.get(url, { params: paramsObj}).then(function(res){
// res.data 是服务器返回的数据
var result = res.data
console.log(res);
})
- 应用 axios 发动 POST 申请
语法：
axios.post(‘url’, { / 参数 /} ).then(callback)
代码如下：
// 申请 URL 地址
var url = ‘http://www.liulongbin.top:300…’
// 要提交到服务器的数据
var dataObj = {location: ‘ 北京 ’, address: ‘ 顺义 ’}
// 调用 axios.post() 发动 POST 申请
axios.post(url, dataObj).then(function(res){
// res.data 是服务器返回的数据
var result = res.data
console.log(res);
})
axios 发动 GET 和 POST 语法的区别：
GET 申请时，参数要通过 params 属性提供，而 POST 不必
- 间接应用 axios 发动申请
axios 也提供了相似于 jQuery 中 $.ajax() 的函数，语法如下：
axios({
method: ‘ 申请类型 ’,
url: ‘ 申请的 URL 地址 ’
data: {/ POST 数据 /}，
params: {/ GET 参数 /}
}).then(callback)
① 间接应用 axios 发动 GET 申请
axios({
method: ‘GET’,
url: ‘http://www.liulongbin.top:300…’,
params: {// GET 参数要通过 params 属性提供
name: ‘zs’,
age: 20
}
}).then(function(res){
console.log(res.data);
})
② 间接应用 axios 发动 POST 申请
axios({
method: ‘POST’,
url: ‘http://www.liulongbin.top:300…’,
data: {// POST 参数要通过 data 属性提供
bookname: ‘ 程序员的自我涵养 ’,
price: 666
}
}).then(function(res){
console.log(res.data);
})
案例实际：应用 axios 发动 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="./axios.js"></script>
<style>
body {padding-left: 50px;}
.container {
width: 300px;
height: 150px;
box-shadow: 0 0 5px rgba(0,0,0,0.8);
background-color: #c7c7c7;
margin-bottom: 20px;
}
</style></head>
<body>
<div class="container">
</div>
<button id="btn1">get 更换 </button>
<button id="btn2">post 更换 </button>
<script>
document.querySelector('#btn1').addEventListener('click',function(){
var url = 'https://xl.xilinglaoshi.com:8001/fenshou'
axios({
method: 'GET',
url: url,
}).then(function(res){
// 获取到须要的数据并渲染到页面
document.querySelector('.container').innerHTML = res.data.data[0].content;
})
})
document.querySelector('#btn2').addEventListener('click',function(){
var url = 'https://xl.xilinglaoshi.com:8001/qingshi'
axios({
method:'POST',
url: url,
}).then(function(res){document.querySelector('.container').innerHTML = res.data.data[0].content;
})
})
</script></body>
</html>
