学习AJAX必知必会(2)~Ajax基本使用,设置请求行、请求体、请求头,服务端响应JSON数据
一、Ajax的基本使用
1、核心对象 XMLHttpRequest
,AJAX 的所有操作都是通过该对象进行的。
2、发送ajax请求(4个步骤):
- 创建xhr对象,然后open方法初始化,设置请求方式和请求路径,接着send方法发送请求,从而接收服务端响应回来的数据(通过绑定事件onreadystatechange)
//Ajax发送get请求
//1、创建XmlHttpRequset对象
const xhr = new XMLHttpRequest();
//2、通过xhr对象的open方法进行初始化,设置请求方式get和请求url,请求参数(第一个参数使用?,其余使用&)
xhr.open('get', 'http://127.0.0.1:8000/server?a=1&b=2');
//3、发送Ajax请求
xhr.send();
//4、事件绑定,处理服务端返回结果
xhr.onreadystatechange = function () {
//处理前判断服务端是否返回所有结果和服务端的状态码是2**
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300){
//处理结果(响应行、响应头、空行、响应体)
// //1、响应行
// console.log(xhr.status);//状态码
// console.log(xhr.statusText);//状态字符串,若成功响应式为OK
// console.log(xhr.getAllResponseHeaders());//所有响应头
// console.log(xhr.response);//所有响应体
//将响应内容显示到dom视图
result.innerHTML = xhr.response;
}
}
}
■ onreadystatechange
(on 意思是:当...的时候;readystate:是XmlHttpRequset对象的状态属性,有五个值,分别是0、1、2、3、4 )
0 未初始化
1 open方法调用完毕
2 send方法调用完毕
3 服务端返回部分结果
4 服务端返回所有结果
//Ajax发送post请求(跟get请求不同的地方:open方法第一个参数是post,然后请求参数(请求体)是设置为send方法的参数)
//1、创建XmlHttpRequset对象
const xhr = new XMLHttpRequest();
//2、通过xhr对象的open方法进行初始化,设置请求方式post和请求url
xhr.open('post', 'http://127.0.0.1:8000/server');
//3、发送Ajax请求(设置请求参数)
xhr.send('a=1&b=2');
//4、事件绑定,处理服务端返回结果
xhr.onreadystatechange = function () {
//处理前判断服务端是否返回所有结果和服务端的状态码是2**
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300){
//处理结果(响应行、响应头、空行、响应体)
// //1、响应行
// console.log(xhr.status);//状态码
// console.log(xhr.statusText);//状态字符串,若成功响应式为OK
// console.log(xhr.getAllResponseHeaders());//所有响应头
// console.log(xhr.response);//所有响应体
//将响应内容显示到dom视图
result.innerHTML = xhr.response;
}
}
}
3、设置请求头(在xhr的send方法之前进行设置)
- 通过xhr.setRequestHeader方法
//设置请求头
//属性:Content-Type:设置请求体的类型
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//也可以自定义请求头,但是需要服务端设置允许,
// 例如服务端的代码中添加响应头的设置:response.setHeader('Access-Control-Allow-Headers', '*');
//自定义请求头
xhr.setRequestHeader('custom', '111');
✿ 总结一下:在Ajax请求中设置请求行、请求体、请求头
(1)请求行
的请求方式、请求路径设置在xhr对象的open方法的第一个参数、第二个参数上
(2)请求体
(请求参数-要传输的数据): 请求方式是get时,请求参数拼接在请求路径url上,请求方式是post时,请求参数设置为send方法的参数。
(3)请求头
在send方法之前进行设置,通过xhr.setRequsetHeader('请求头名', '请求头值')方法进行设置
4、服务端响应Json数据
■ 服务端代码server.js 文件:
- 通过JSON.stringify(json对象); 将json对象转化成字符串,然后再响应给客户端-
//3、创建路由规则
//请求方式设置为all,可以接收http任意类型的请求
app.all('/server', (request, response) => {
//设置响应头(允许跨域)
response.setHeader('Access-Control-Allow-Origin', '*');
//设置响应头(允许自动自定义请求头)
response.setHeader('Access-Control-Allow-Headers', '*');
//响应一个json数据(因为send方法的参数类型是字符串,所以需要先对json数据进行转化)
const data = {
name: '小明',
age: 18,
sex: '男'
};
//data 数据类型转化(通过JSON.stringify()方法进行转化),
// 接收的时候通过设置响应体数据格式为json即可,也可以通过JSON.parse(xhr.response) 将数据类型转为json对象
let str = JSON.stringify(data);
//设置响应体
response.send(str);
});
■ 发送ajax请求.html 文件:
- 客户端的html代码中设置xhr响应数据格式为Json; xhr.responseType = 'json';
<script>
//获取按钮
const btn = document.getElementsByTagName('button')[0];
const result = document.getElementById('result');
btn.onclick = function () {
// console.log('test');
//接下来发送ajax请求(4个步骤)
//1、创建XmlHttpRequset对象
const xhr = new XMLHttpRequest();
//设置响应的数据格式为json
xhr.responseType = 'json';
//2、通过xhr对象的open方法进行初始化,设置请求方法和请求url,请求参数(第一个参数使用?,其余使用&)
xhr.open('get', 'http://127.0.0.1:8000/server');
//设置请求头
//属性:Content-Type:设置请求体的类型
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//也可以自定义请求头,但是需要服务端设置允许,
// 例如服务端的代码中添加响应头的设置:response.setHeader('Access-Control-Allow-Headers', '*');
//自定义请求头
xhr.setRequestHeader('custom', '111');
//3、发送Ajax请求
xhr.send();
//4、事件绑定,处理服务端返回结果
xhr.onreadystatechange = function () {
//处理前判断服务端是否返回所有结果和服务端的状态码是2**
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
//处理结果(响应行、响应头、空行、响应体)
// //1、响应行
// console.log(xhr.status);//状态码
// console.log(xhr.statusText);//状态字符串,若成功响应式为OK
// console.log(xhr.getAllResponseHeaders());//所有响应头
// console.log(xhr.response);//所有响应体
//将响应内容显示到dom视图
// result.innerHTML = xhr.response;
console.log(xhr.response);
}
}
}
}
</script>
本文来自博客园,作者:一乐乐,转载请注明原文链接:https://www.cnblogs.com/shan333/p/15831922.html