jQuery 中的 Ajax
jQuery 中有一套专门针对 AJAX 的封装,功能十分完善
手册:http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp
1、$.ajax()
$.ajax({
url: "str",
type: "str",
dataType: "str",
data: {"id", 2},
beforSend: function(){},
success: function(){},
error: function(){},
complete: function(){}
});
常用选项参数介绍
url: 请求地址
type:请求方法,默认为 'get'
dataType: 服务端响应数据类型
contentType: 请求体内容类型,默认 'application/x-www-from-rulencoded'
data: 需要传递到服务端的数据,如果 GET 则通过 URL 传递,如果 POST 则通过请求体传递
timeout: 请求超时事件
beforSend: 请求发起之前触发
success: 请求成功之后触发(响应状态码 200)
error: 请求失败触发
complete: 请求完成触发(不管成功与否)
2、$.get()
GET 请求快捷方法
$.get(url, data, callback)
3、$. post()
POST 请求快捷方式
$.post(url, data, callback)
4、其他类型请求、
put 更改
delete 删除
jQuery 中其他 Ajax 方法
$.ajaxSetup() 设置全局 AJAX 默认选项
Axios
5、Axios
Axios 是目前应用最广泛的 AJAX 封装库
网址:axios-js.com
库地址:https://unpkg.com/axios/dist/axios.min.js
使用 script 标签引入
6、Axios API
可以通过 axios () 传递相关配置来创建请求
axios(config) consfig 为对象格式的配置选项
axios(url, config) config 可选
常用配置项
url 用于请求的服务器 URL,必须
method 创建请求时使用的方法
baseURL 传递相对 URL 前缀,将自动加在 url 前面
headers 即将被发送的自定义请求头
params 即将与请求一起发送的 URL 参数
data 作为请求主体被发送的数据
timeout 指定请求超时的毫秒数(0 表示无超时时间)
responseType 表示服务器响应的数据类型,默认“json”
7、全局配置默认值
可以指定将被用在各个请求的配置默认值
axios.defaults.baseURL = 'https://api.example.com';
8、axios拦截器
在请求或响应被 then 或 catch 处理前拦截他们
// 添加请求拦截器
axios.interceptors.request.use(function(config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做些什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
9、快速请求方法
axios.get(url[, config[)
axios.post(url[,data[, config]])
axios.delete(url[,config])
axios.put(url[, data[, config]])
10、XMLHttpRequest 2.0
HTML5 中对 XMLHttpRequest 类型全面升级,更易用,更强大
onload / onprogress
xhr.onload 事件:只在请求完成时触发
xhr.onprogress 事件:只在请求进行中触发
11、response 属性
以对象的形式表述响应体,其类型取决于 responseType 的值。你可以尝试设置 responseType 的值,以便通过特定的类型请求数据
responseType 要在调用 open() 初始化请求之后,在调用 send() 发送请求到服务器之前设置方可生效