一、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)
}
})
既然了解了概念，那我们就实操一下，下面看个例题：实现图书列表的增删显示功能
实现代码如下：
Document
添加新图书
书名
作者
出版社
Id
书名
作者
出版社
操作
二、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 请求获取数据，并渲染到页面
实现代码：
Document