1. get和post请求
- 从服务端获取数据:get请求
- 请求参数在地址栏中以urlencoded形式显示
- 格式:username=xcr&userAge=18
- 通过location.search可获取当前地址栏中 ? 及其后面的请求参数内容
- 可发送 2kb左右的数据
- 只能发送文本形式的数据
- get请求可以被缓存,将地址保存,这个请求所携带的请求参数都将被保存
- 给服务端发送数据:post请求
- post请求的参数在请求体中,不会在地址栏中体现,发送一些隐私数据时使用post请求发送,相对get请求来说安全一些,但不是绝对安全
- 可发送数据理论上没有限制
- 实际上会受服务端的限制
- 可发送的数据类型不限,如果需要发送文件,只能使用post请求发送
- post请求无法被缓存
2. jQuery中$.ajax的get和post请求发送的方式
$.ajax({
type: , //请求方式
url: , //请求的接口地址
data: , //请求参数:data是一个对象
success: function(res){
//请求成功后执行的函数
}
})
3. jQuery中的$.get
和$.post
的使用
$.get({
url: 'http://localhost:8080/common/get',
data: {
username: 'xcr',
userAge: 18,
password: 123456,
gender: '男'
},
success: function(res) {
console.log(res)
}
});
$.post({
url: 'http://localhost:8080/common/post',
data: {
username: 'xcr',
userAge: 18,
password: 123456,
gender: '男'
},
success: function(res) {
console.log(res);
}
});
这两种书写方式是$.ajax的快捷方式
-
在发送简单请求时会使用如下方式
$.get('http://localhost:8080/common/get', function(res) { console.log(res); })
4. FormData对象的使用
- 用来对表单数据进行处理的一种方式,可自己随意添加数据
// 创建一个FormData对象,参数为DOM对象形式的form标签
var fd = new FormData($('#form')[0]);
// fd中包含了form中所有数据
// 如果想查看数据,可使用get方式指定查看
// fd.get(表单元素的name)
// 添加表单元素以外的数据
// fd.append('参数名',’参数值);
fd.append('Subject', 'vue');
// 通过ajax将fd发送给服务端
// 要使用post形式发送
$.ajax({
type: 'post',
url: 'http://localhost:8080/common/post',
data: fd,
// 使用jQuery发送FormData对象,必须设置以下属性,让jQuery不处理fd这个对象
contentType: false,
processData: false,
success: function(res) {
console.log(res);
}
})
-
通过FormData进行文件上传
//设置input[type=file]的name属性值必须跟接口一致 //请求发送 $.ajax({ type: 'post', url:'http://localhost:8080/formData/upload', data: new FormData($('#form')[0]), contentType: false, processData: false, success: function(res) { console.log(res); } })
5. 原生ajax的使用方式
// 初始化一个请求,调用xhr.open();
var xhr = new XMLHttpRequest();
// get请求需要在url后自行拼接get请求的参数,使用?连接
// 形式为urlencoded:'名1=值1&名2=值2';
xhr.open('get', '请求地址');
// 发送请求 调用xhr.send();异步任务
xhr.send();
// 响应处理部分
// 通过事件来检测ajax的进行状态,readyState是xhr的属性,用来表示ajax操作的状态, readyState属性的值是数值类型
// 0 初始化阶段,1 建立了连接,2 请求已经发送, 3 下载中, 4 下载完毕
// 必须确保readyState属性的值为4,才可以使用响应体的数据
// 原生js不会自动识别服务端响应的JSON格式的数据,需要手动转换
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
console.log(xhr.responseText);
// 将json格式字符串转换为js数据
console.log(JSON.parse(xhr.responseText));
}
}
5.1 原生Ajax的get请求操作方式
var xhr = new XMLHttpRequest();
xhr.open('get','http://localhost:8080/common/get?username=xcr');
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
console.log(xhr.responseText);
console.log(JSON.parse(xhr.responseText));
console.log(xhr.getAllResponseHeaders());
console.log(xhr.getResponseHeader('Content-Type'));
}
};
5.2 原生post请求的发送方式
// 初始化
var xhr = new XMLHttpRequest();
// 建立连接 调用open()参数1:请求方式 参数2: 请求的url地址
xhr.open('post', '请求地址');
// 发送请求: 调用send() 请求参数传入到send()的参数中,参数格式为urlencoded
// 由于post请求参数不在url中传递,需要给服务器发送一些额外的数据,即请求头
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('username=xcr&userAge=18');
// 进行响应的相关处理
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
// indexOf() 方法对大小写敏感!如果要检索的字符串值没有出现,则该方法返回 -1。
// 如果indexOf()的值不返回-1,则说明判断的子串存在,就要做JSON.parse转换
if(xhr.getResponseHeader('Content-Type').indexOf('json') !== 1) {
console.log(JSON.parse(xhr.responseText));
} else {
console.log(xhr.responseText);
}
}
}
6. 检测服务端响应的内容类型
服务端的响应信息中除了有主要的数据外,还有一些额外信息,称为Response Headers响应头
-
获取响应头的信息,可使用以下方法
//获取所有响应头信息 xhr.getAllResponseHeaders(); //常用,获取某个响应头的信息 xhr.getResponseHeader('传入某个具体的响应头的名称')
可以通过判断Content-Type中是否是json的内容类型,从而设置对应的转换操作
7. 封装ajax相关函数
- 封装数据处理函数