原生js創(chuàng)建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>
//創(chuàng)建ajax引擎對象
let xhr = new XMLHttpRequest();
//配置請求方式和請求地址
xhr.open("get","http://ajax.h5.itsource.cn:5000/api/testGet?name=張三");
// 監(jiān)聽響應(yīng)碼和狀態(tài)碼
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
// 處理數(shù)據(jù)
let res = JSON.parse(xhr.responseText);
console.log(res);
//判定再渲染
if(res.code == 200){
box.innerHTML = res.data;
}
}
}
// 發(fā)送請求
xhr.send();
</script>
</body>
</html>
原生js創(chuàng)建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>
//創(chuàng)建ajax引擎對象
let xhr = new XMLHttpRequest();
//配置請求方式和請求地址
xhr.open("post","http://ajax.h5.itsource.cn:5000/api/testPost");
// 監(jiān)聽狀態(tài)變化和接收數(shù)據(jù)
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
// 處理數(shù)據(jù)
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');
// 發(fā)送請求
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) {
//創(chuàng)建ajax引擎對象
let xhr = new XMLHttpRequest();
//處理參數(shù),定義一個(gè)空數(shù)組
let arr = [];
//遍歷對象，拼接到數(shù)組中
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);
// 發(fā)送請求
xhr.send();
} else {
//配置請求方式和請求地址
xhr.open(type, url);
//請求頭
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 發(fā)送請求
xhr.send(parmas);
}
// 監(jiān)聽狀態(tài)變化和接收數(shù)據(jù)
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// 處理數(shù)據(jù)
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文章來源：http://www.zghlxwxcb.cn/news/detail-832214.html
<!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) {
//處理參數(shù)
let type = obj.type;
let url = obj.url;
let parmas = obj.params;
let callback = obj.callback;
//創(chuàng)建ajax引擎對象
let xhr = new XMLHttpRequest();
//處理參數(shù),定義一個(gè)空數(shù)組
let arr = [];
//遍歷對象，拼接到數(shù)組中
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);
// 發(fā)送請求
xhr.send();
} else {
//配置請求方式和請求地址
xhr.open(type, url);
//請求頭
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 發(fā)送請求
xhr.send(parmas);
}
// 監(jiān)聽狀態(tài)變化和接收數(shù)據(jù)
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// 處理數(shù)據(jù)
callback(JSON.parse(xhr.responseText));
}
}
}
// 調(diào)用
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的基本使用文章來源地址http://www.zghlxwxcb.cn/news/detail-832214.html
<!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 創(chuàng)建請求
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>
到了這里，關(guān)于原生js創(chuàng)建get/post請求以及封裝方式、axios的基本使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
