原生js创建get/post请求以及封装方式、axios的基本使用
原生js创建get请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script>
//创建ajax引擎对象
let xhr = new XMLHttpRequest();
//配置请求方式和请求地址
xhr.open("get","http://ajax.h5.itsource.cn:5000/api/testGet?name=张三");
// 监听响应码和状态码
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
// 处理数据
let res = JSON.parse(xhr.responseText);
console.log(res);
//判定再渲染
if(res.code == 200){
box.innerHTML = res.data;
}
}
}
// 发送请求
xhr.send();
</script>
</body>
</html>
原生js创建post请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script>
//创建ajax引擎对象
let xhr = new XMLHttpRequest();
//配置请求方式和请求地址
xhr.open("post","http://ajax.h5.itsource.cn:5000/api/testPost");
// 监听状态变化和接收数据
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
// 处理数据
let res = JSON.parse(xhr.responseText);
console.log(res);
//判定再渲染
if(res.code == 200){
box.innerHTML = res.data;
}
}
}
//请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 发送请求
xhr.send("name=李四");
</script>
</body>
</html>
原生get和post封装方式1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function ajax(type, url, parmas, callback) {
//创建ajax引擎对象
let xhr = new XMLHttpRequest();
//处理参数,定义一个空数组
let arr = [];
//遍历对象，拼接到数组中
for (const key in parmas) {
if (Object.hasOwnProperty.call(parmas, key)) {
arr.push(key + "=" + parmas[key]);
}
}
parmas = arr.join("&");
if (type == "get") {
//配置请求方式和请求地址
xhr.open(type, url + "?"+ parmas);
// 发送请求
xhr.send();
} else {
//配置请求方式和请求地址
xhr.open(type, url);
//请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 发送请求
xhr.send(parmas);
}
// 监听状态变化和接收数据
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// 处理数据
callback(JSON.parse(xhr.responseText));
}
}
}
ajax("get","http://ajax.h5.itsource.cn:5000/api/testGet",{
name:"张三"
},function(res){
console.log(res);
})
ajax("post","http://ajax.h5.itsource.cn:5000/api/testPost",{
name:"李四"
},function(res){
console.log(res);
})
</script>
</body>
</html>
原生get和post封装方式2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// //方式二:
function ajax(obj) {
//处理参数
let type = obj.type;
let url = obj.url;
let parmas = obj.params;
let callback = obj.callback;
//创建ajax引擎对象
let xhr = new XMLHttpRequest();
//处理参数,定义一个空数组
let arr = [];
//遍历对象，拼接到数组中
for (const key in parmas) {
if (Object.hasOwnProperty.call(parmas, key)) {
arr.push(key + "=" + parmas[key]);
}
}
parmas = arr.join("&");
// 判定
if (type == "get") {
//配置请求方式和请求地址
xhr.open(type, url + "?" + parmas);
// 发送请求
xhr.send();
} else {
//配置请求方式和请求地址
xhr.open(type, url);
//请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 发送请求
xhr.send(parmas);
}
// 监听状态变化和接收数据
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// 处理数据
callback(JSON.parse(xhr.responseText));
}
}
}
// 调用
ajax({
type: "get",
url: 'http://ajax.h5.itsource.cn:5000/api/testGet',
params: {
name: '张三'
},
callback: function (res) {
console.log(res)
}
})
ajax({
type: "post",
url: 'http://ajax.h5.itsource.cn:5000/api/testPost',
params: {
name: '李四'
},
callback: function (res) {
console.log(res)
}
})
</script>
</body>
</html>
axios的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./axios.min.js"></script>
</head>
<body>
<script>
// 为给定 ID 的 user 创建请求
axios.get('http://ajax.h5.itsource.cn:5000/api/testGet?name=张三')
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
// 上面的请求也可以这样做
axios.get('http://ajax.h5.itsource.cn:5000/api/testGet', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
</script>
</body>
</html>