什么是 AJAX ?
Ajax
的全称是 Asynchronous JavaScript And XML
(异步 JavaScript
和 xml
)
通俗理解:在网页中利用 XMLHttpRequest
对象和服务器进行数据交互的方式,就是Ajax
。
突出的特点:当前网页没有刷新、没有跳转。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
既然ajax有这么多好处,我们要怎样使用ajax呢?代码说话
原声AJAX
-所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。原声请求分为POST和GET两种方式,GET的参数是通过url?后以键值对的形式传送给服务器的,POST是通过XMLHttpRequest中send方法传递过去的,与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
POST请求方式:
//首先创建一个XMLHttpRequest对象
let xhr = new XMLHttpRequest();
//open向服务器发送请求
xhr.open('POST', url);
//告知服务器post请求报文的格式
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//发送请求
xhr.send(fd);
//判断相应是否成功,并将服务器响应数据赋值
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
let res = JSON.parse(xhr.responseText);
if (res.status !== 200) return alert(res.message);
console.log(res);
}
}
GET请求方式:
//首先创建一个XMLHttpRequest对象
let xhr = new XMLHttpRequest();
//open向服务器发送请求
xhr.open('GET', url?'key:value');
//发送请求
xhr.send();
//判断相应是否成功,并将服务器响应数据赋值
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
let res = JSON.parse(xhr.responseText);
if (res.status !== 200) return alert(res.message);
console.log(res);
}
}
jQuery中的AJAX
由于XMLHttpRequest对象用法比较复杂
jQuery中为我们封装了XMLHttpRequest对象提供了一系列的Ajax相关的函数jQuery
中发起 Ajax 请求最常用的三个方法如下:
-
$.get()
get方式请求,用于获取数据 -
$.post()
post方式请求,用于提交数据 -
$.ajax()
比较综合,既可以获取数据,又可以提交数据
$.get()
$.get(url,[data],[callback])

$.post()
$.post(url,[data],[callback])

$.ajax()
$ajax的基本语法

Axios
Axios
是专注于网络数据请求的库。
相比于原生的 XMLHttpRequest
对象,axios
简单易用。
相比于 jQuery
,axios
更加轻量化,只专注于网络数据请求。
axios.get
axios.get(‘url’, { params: { /参数/ } }).then(callback)
// 请求的 URL 地址
var url = ''
// 请求的参数对象
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 = ''
// 要提交到服务器的数据
var dataObj = { location: '北京', address: '顺义' }
// 调用 axios.post() 发起 POST 请求
axios.post(url, dataObj).then(function(res) {
// res.data 是服务器返回的数据
var result = res.data
console.log(result)
})
axios
axios
也提供了类似于 jQuery
中 $.ajax()
的函数,语法如下:
axios({
method: '请求类型',
url: '请求的URL地址',
data: { /* POST数据 */ },
params: { /* GET参数 */ }
}).then(callback)