目录
- 一、发送请求四个步骤
- 1.open(method,url)
- 2.requestHeader(属性名称, 属性值)
- 3.send()设置发送的数据,开始和服务器端交互
- 4.接收响应,获取数据
- 二、原生get请求
- 三、原生post请求
- 四、JQuery-$.ajax
- 1 ajax请求(通用请求)
- 2 get 请求
- 2 post 请求
- 五、自定义$.ajax
ajax: 浏览器和服务器数据交互的网页技术 异步的xml和javascript
下文中会用到qs这个序列化工具,将js对象转换成所需的查询字符串或表单格式
一、发送请求四个步骤
//1.创建实例
var xhr=new XMLHttpRequest();
//2.打开链接
xhr.open('请求方法','请求 url地址');
//2.1设置请求头
xhr.setRequestHeader('Content-Type','application/json');
//3.发送请求
xhr.send();
//4.接收响应
xhr.onreadystatechange=function(){
if(xhr.readyState===4&&xhr.status===200){
console.log(JSON.stringify(xhr.responseText))
}
}
注意: 服务器返回给客户端的数据都是json格式,如果最后,接收到的不是json格式,则是使用的第三方库帮忙转化的。
上述代码,相关说明
1.open(method,url)
参数:
mthod: 取值可以为GET/POST/HEAD/DELETE/OPTIONS/PUT
url: 请求的主体,发送请求的接口地址
2.requestHeader(属性名称, 属性值)
在AJAX中,如果要post特定格式的数据,需要使用 setRequestHeader() 方法来添加 HTTP 头
,否则,后台可能接收不到需要的数据。数据通过send()方法发送
,setRequestHeader()方法需要在open()和send()方法之间调用
。
-
常用的数据格式(编码可带可不带)
- 发送json格式数据
xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
- 发送表单数据
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');
- 发送纯文本(不指定Content-type时,此是默认值)
xhr.setRequestHeader('Content-type', 'text/plain; charset=utf-8');
- 发送html文本
xhr.setRequestHeader('Content-type', 'text/html; charset=utf-8');
3.send()设置发送的数据,开始和服务器端交互
参数: 请求主体内容,如果没有,为null,或者省略。post携带的参数才会在send中发送。
注意:
如果发送的请求携带参数
get: 请求参数以查询字符串的方式拼接在url后方
//请求设置一
xhr.open('get','http:127.0.0.1:8080?a=1&b=2');
let obj={
a:1
b:2
}
//请求参数设置二(使用qs转换工具)
xhr.open('get',url路径+Qs.stringify(obj));
post: 请求参数需要传入send()中发送,并且需要根据设置的请求头,发送对应格式的数据
let obj={
a:1
b:2
}
//1.json数据格式
//告诉后端你传递得数据格式是什么
xhr.setRequestHeader('Content-type', 'application/json');
//发送数据
xhr.send(JSON.stringify(obj));
//2.表单格式数据 Qs.stringify(obj);
//告诉后端你传递得数据格式是什么
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
//发送数据(方法一)
xhr.send(Qs.stringify(obj));
//发送数据(方法二)
xhr.send('a=1&b=2');
4.接收响应,获取数据
发送请求后,会收到响应,收到响应后,XHR对象的以下属性会被填充上数据。
-
responseText: 作为响应体返回的文本。
-
responseXML: 如果响应的内容类型是"text/xml"或"application/xml",那就是包含响应数据的 XML DOM 文档。
-
status: 响应的 HTTP 状态。
-
statusText: 响应的 HTTP 状态描述。
-
readyState: 返回HTTP请求状态
0 open()尚未调用 UNSENT
1 open()已调用 OPENED
2 接收到头信息 HEADERS_RECEIVED
3 接收到响应主体 LOADING
4 响应完成 DONE -
readystatechange: 请求状态改变事件
当readyState值改变为4或服务器的响应完成时,所有的浏览器都触发该事件
二、原生get请求
//创建实例
var xhr=new XMLHttpRequest();
//设置与服务器交互的信息
xhr.open('get','http://127.0.0.1:8000?a=1&b=2');
//发送请求
xhr.send();
//接收响应
xhr.onreadystatechange=function(){
if(xhr.readystate===4&&xhr.status===200){
console.log(JSON.stringify(xhr.responseText))
}
}
三、原生post请求
//创建实例
var xhr=new XMLHttpRequest();
//设置与服务器交互的信息
xhr.open('post','http://127.0.0.1:8000');
//设置请求头
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
//发送请求
xhr.send('a=1&b=2');
//接收响应
xhr.onreadystatechange=function(){
if(xhr.readyState===4&&xhr.status===200){
console.log(JSON.stringify(xhr.responseText))
}
}
四、JQuery-$.ajax
1 ajax请求(通用请求)
$.ajax({
//url
url: 'http://127.0.0.1:8000/jquery-server',
//请求参数
data: {a:100, b:200},
//请求类型
type: 'GET',
//响应体结果
dataType: 'json',
//请求头信息
headers: {
Content-Type:'application/json',
Authrization:token,
},
//超时时间
timeout: 2000,
//成功的回调
success: function(data){
console.log(data);
},
//失败的回调
error: function(){
console.log('出错啦!!');
},
});
2 get 请求
$.get(url, [data], [callback], [type])
url: 请求的 URL 地址。
data: 请求携带的参数。
callback: 载入成功时回调函数。
type: 设置返回内容格式,xml, html, script, json, text, _default。
var obj = {
page: 1,
pageSize: 10
}
url='http://127.0.0.1:8080'
$.get(url, obj, function(res) {
console.log(res)
})
2 post 请求
同get一样使用
$.post(url, [data], [callback], [type])
url: 请求的 URL 地址。
data: 请求携带的参数。
callback: 载入成功时回调函数。
type: 设置返回内容格式,xml, html, script, json, text, _default。
五、自定义$.ajax
该自定义ajax默认发送表单格式的数据
_ajax.js
function resloveData(data) {
let arr = []
for (let i in data) {
var str = i + '=' + data[i]
arr.push(str)
}
return arr.join('&')
}
function _ajax(data) {
var xhr = new XMLHttpRequest()
var qs = resloveData(data.data)
if (data.method.toUpperCase() === 'GET') {
xhr.open(data.method, data.url + qs);
xhr.send()
} else if (data.method.toUpperCase() === 'POST') {
xhr.open(data.method, data.url);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(qs);
}
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var res = JSON.parse(xhr.responseText);
data.success(res);
}
}
}
test.html
<script src="./_ajax.js"></script>
<script>
// 2. 调用自定义的 itheima 函数,发起 Ajax 数据请求
_ajax({
method: '请求类型',
url: '请求地址',
data: { /* 请求参数对象 */ },
success: function(res) { // 成功的回调函数
console.log(res) // 打印数据
}
})
</script>