请求
www.w3school.com.cn/jquery/jque…
$.ajax()
常用选项参数介绍:
• url:请求地址
• type:请求方法,默认为
get
• dataType:服务端响应数据类型
• contentType:请求体内容类型,默认
application/x-www-form-urlencoded
• data:需要传递到服务端的数据,如果 GET 则通过 URL 传递,如果 POST 则通过请求体传递
• timeout:请求超时时间
• beforeSend:请求发起之前触发
• success:请求成功之后触发(响应状态码 200)
• error:请求失败触发
• complete:请求完成触发(不管成功与否)
GET 请求
$.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 请求快捷方法
• $.post(url, data, callback)
POST 相当于新增一条数据, 返回的是新增的数据
// 发送 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 更改
没有快捷方法
- url发生了变化, 比如要更改comments中id为4的数据, 需要加
/4
- 可以局部更改也可以整体更改, 更改后的数据就是
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 删除
- 没有返回, 不需要传参, 不用写
data
和dataType
// delete 请求,删除数据
$.ajax({
url: "http://localhost:3000/comments/5",
type: "delete",
success: function (data) {
console.log(data)
}
})
ajaxSetup() 方法
设置默认的参数, 在其他的ajax()方法中相同的内容就不用写了, 可以简化操作.
// ajaxSetup() 方法,设置默认的参数
$.ajaxSetup({
url: "http://localhost:3000/users",
type: "post"
})
// 发送 ajax请求
$.ajax({
data: {"name": "polly", "age": 17, "class": 4}
})
$.ajax({
data: {"name": "james", "age": 18, "class": 4}
})
Axios
Axios 是目前应用最为广泛的 AJAX 封装库, 地址:unpkg.com/axios/dist/…
使用 script 标签引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
例. get请求
axios.get("http://localhost:3000/users?id=1")
.then(function (response) {
console.log(response.data)
})
.catch(function (error) {
console.log(error)
})
response的内容:
response.data 得到的就是我们需要的数据
Axios API
可以通过向 axios() 传递相关配置来创建请求, 有下面两种方式:
-
axios(config)
, config为对象格式的配置选项 -
axios(url, config)
config 可以不设置, 不设置默认get. 除了把url单独拿出来放到前面以外, 跟第一种方式没有什么不同.
// axios(url, config) 方法
axios("http://localhost:3000/posts", {
params: {
id: 1
}
})
.then(function (res) {
console.log(res.data)
})
.catch(function (error) {
console.log(error)
})
常用配置项:
• url 用于请求的服务器 URL,必需
• method 创建请求时使用的方法,get,post等
• baseURL 传递相对 URL 前缀,将自动加在 url 前面,可以不设置
• headers 即将被发送的自定义请求头, 值是对象类型的参数, 设置给post (可以省略, 默认是json格式的)
• params 即将与请求一起发送的 URL 参数, 值是对象类型的参数, 设置给get或delete方法. 不设置params, 直接写在url上也是可以的.
• data 作为请求主体被发送的数据
• timeout 指定请求超时的毫秒数(0 表示无超时时间)
• responseType 表示服务器响应的数据类型,默认 “json”,可以不设置
• axios(url, config) config 可选
then 和 catch 的用法
axios()
.then(function (response) {
// 正常请求的响应信息对象 response
})
.catch(function (error) {
//捕获错误
})
全局配置默认值
可以指定将被用在各个请求的配置默认值
例
// 全局配置默认值
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)
})
拦截器
在请求或响应被 then 或 catch 处理前拦截它们。
全局拦截, 对所有的axios方法都进行拦截, 可以替换全局配置默认值这种方式.
请求拦截器: 在axios方法的then和catch执行之前, 将request拦截器中的内容设置给axios方法.
响应拦截器: 先于then和catch方法得到响应内容, 然后再返回给axios方法执行. 比如可以只返回response中的data部分, 在then中就可以不加.data了
// 使用拦截器,对请求进行拦截处理
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.get(url[, config])
• axios.post(url[, data[, config]])
• axios.delete(url[, config])
• axios.put(url[, data[, config]])
get和delete是一样的, post和put是一样的
axios.get(url[, config])
// get 请求
// 方法一: 直接把参数加在url后面
axios.get("http://localhost:3000/users?id=2")
.then(function (res) {
console.log(res.data)
})
//方法二: 通过params传参
axios.get("http://localhost:3000/users",{
params: {
id: 3
}
})
.then(function (res) {
console.log(res.data)
})
axios.post(url[, data[, config]])
// post 请求 ,添加数据
axios.post("http://localhost:3000/users",{
"name": "nancy",
"age": 19,
"class": 2
})
.then(function (res) {
console.log(res.data)
})
post的then()方法可以不写, 因为本质上是添加了数据; 但get必须写then()方法, 因为要对数据进行后续操作.
XMLHttpRequest 2.0
onload / onprogress
• xhr.onload
事件:只在请求完成时触发(readyState=4时触发), 可以替换之前的原生Ajax响应结束条件.
• xhr.onprogress
事件:只在请求进行中触发(readyState=3时触发), 不常用
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost:3000/posts");
//为了同步异步都顺利, 写在send之前
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);
response 属性
以对象的形式表述响应体,其类型取决于 responseType
的值。设置responseType
的值,可以通过特定的类型请求数据, 避免后面用parse()
方法把数据转换成对象.
responseType 要在调用 open() 初始化请求之后,在调用 send() 发送请求到服务器之前设置方可生效。
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost:3000/posts");
xhr.responseType = "json";
xhr.onload = function () {
console.log(this.response);
}
xhr.send(null);