JQ中的AJAX
- 常用选项参数介绍
- url：请求地址
- type：请求方法，默认为"GET"
- dataType：服务端响应数据类型
- contentType：请求体内容类型，默认"application/x-www-form-urlencoded"
- data：需要传递到服务端的数据，如果 GET 则通过 URL 传递，如果 POST 则通过请求体传递
- timeout：请求超时时间
- beforeSend：请求发起之前触发
- success：请求成功之后触发（响应状态码200）
- error：请求失败触发
- complete：请求完成触发（不管成功与否）
$.ajax({
url: "http://localhost:3000/posts",
type: "get",
dataType: "json",
data: {
"id": 2},
beforeSend: function (xhr) {
console.log("before send");
},
success: function (data) {
console.log(data);
},
error: function (xhr) {
console.log(xhr);
},
complete: function (xhr) {
console.log(xhr);
}
});
$.get() 请求
- GET 请求快捷方法
$.get(url, data, callback)
// 发送 get 请求
// $.ajax({
// url: "http://localhost:3000/comments",
// type: "get",
// dataType: "json",
// data: {"id": 2},
// success: function (data) {
// console.log(data);
// }
// })
// 化简后的方法直接发送 get 请求
$.get("http://localhost:3000/comments", {
"id": 1}, function (data) {
console.log(data);
})
$.post() 请求
- POST 请求快捷方法
$.post(url, data, callback)
// 发送 post 请求
// $.ajax({
// url: "http://localhost:3000/comments",
// type: "post",
// dataType: "json",
// data: {"postId": 2, "content": "bad"},
// success: function (data) {
// console.log(data);
// }
// })
// $.post() 快捷方法发送请求
$.post("http://localhost:3000/comments", {
"postId": 3, "content": "bad"},function (data) {
console.log(data);
})
其他类型的请求
// put 请求，更改数据
// $.ajax({
// url: "http://localhost:3000/comments/4",
// type: "put",
// dataType: "json",
// data: {"content": "good", "postId": 2},
// success: function (data) {
// console.log(data)
// }
// })
// delete 请求，删除数据
$.ajax({
url: "http://localhost:3000/comments/5",
type: "delete",
success: function (data) {
console.log(data)
}
})
Axios
Axios 是目前应用最广泛的 AJAX 封装库
体验Axios
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入axios包 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// 体会 get 请求
axios.get("http://localhost:3000/posts")
.then(function (response) {
console.log(response.data)
})
.catch(function (error) {
console.log(error)
})
</script>
</head>
<body>
</body>
</html>
Axios API
- 可以通过向 axios() 传递相关配置来创建请求
- axios(config) config 为对象格式的配置选项
- axios(url, config) config 可选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// axios 方法
axios("http://localhost:3000/posts", {
params: {
id: 1
}
})
.then(function (res) {
console.log(res.data)
})
.catch(function (error) {
console.log(error)
})
</script>
</head>
<body>
</body>
</html>
常用配置项
- url：用于请求的服务器 URL，必需
- method：创建请求时实用的方法
- baseURL：传递相对 URL 前缀，将自动加在 url 前面
- headers：即将被发送的自定义请求头
- params：即将与请求一起发送的 URL 参数
- data：作为请求主体被发送的数据
- timeout：指定请求超时的毫秒数(0 表示无超时事件)
- responseType：表示服务器响应的数据类型，默认"json"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// axios 方法
axios({
url: "/comments",
method: "post",
baseURL: "http://localhost:3000",
headers: {
"Content-Type": "application/json"
},
timeout: 1000,
data: {
"postId": 3,
"content": "better"
}
}).then(function (res) {
console.log(res.data)
}).catch(function (error) {
console.log(error)
})
</script>
</head>
<body>
</body>
</html>
全局默认配置
- 可以指定将被用在各个请求的配置默认值
axios.defaults.baseURL = 'https://api.example.com';axios.defaults.headerspost['Content-Type'] = 'application/x-www-form-urlencoded';
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// 全局配置默认值
axios.defaults.baseURL = "http://localhost:3000";
// axios 方法
axios({
url: "/comments",
method: "get"
}).then(function (res) {
console.log(res.data)
}).catch(function (error) {
console.log(error)
})
</script>
</head>
<body>
</body>
</html>
axios 拦截器
- 在请求或响应被 then / catch 处理前拦截它们
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// 使用拦截器，对请求进行拦截处理
axios.interceptors.request.use(function (config) {
config.params = {
id: 2
}
config.baseURL = "http://localhost:3000"
return config
})
// 对响应进行拦截
axios.interceptors.response.use(function (response) {
return response.data;
})
// axios 方法
axios("/posts")
.then(function (res) {
console.log(res)
})
.catch(function (error) {
console.log(error)
});
axios("/comments")
.then(function (res) {
console.log(res)
})
.catch(function (error) {
console.log(error)
})
</script>
</head>
<body>
</body>
</html>
快速请求方法 get 和 post
axios.get(url[, config])axios.post(url[, data[, config]])axios.delete(url[, config])axios.put(url[, data[, config]])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// get 请求
// axios.get("http://localhost:3000/users?id=2")
// .then(function (res) {
// console.log(res.data)
// })
// axios.get("http://localhost:3000/users",{
// params: {
// id: 3
// }
// })
// .then(function (res) {
// console.log(res.data)
// })
// post 请求 ，添加数据
axios.post("http://localhost:3000/users",{
"name": "nancy",
"age": 19,
"class": 2
})
.then(function (res) {
console.log(res.data)
})
</script>
</head>
<body>
</body>
</html>
XHR 2.0-onload和onprogress事件
- HTML5 中对 XMLHttpRequest 类型全面升级，更易用，更强大
- xhr.onload 事件：只在请求完成时触发
- xhr.onprogress 事件：只在请求进行中触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost:3000/posts");
xhr.onload = function () {
console.log("load",this.readyState)
}
xhr.onprogress = function (e) {
console.log("progress",this.readyState)
// 在周期性请求过程中，接收到的数据的个数
console.log(e.loaded);
// 接收数据的总个数
console.log(e.total);
}
xhr.send(null);
</script>
</head>
<body>
</body>
</html>
response 和 responseType 属性
- response 属性
- 以对象的形式表述响应体，其类型取决于 responseType 的值。你可以尝试设置 responseType 的值，一边通过特定的类型请求数据
- responseType 要在调用 open() 初始化请求后，在调用 send() 发送请求到服务器之前设置方可生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost:3000/posts");
xhr.responseType = "json";
xhr.onload = function () {
console.log(this.response);
}
xhr.send(null);
</script>
</head>
<body>
</body>
</html>