原生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 =newXMLHttpRequest();//配置请求方式和请求地址
        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 =newXMLHttpRequest();//配置请求方式和请求地址
        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>functionajax(type, url, parmas, callback){//创建ajax引擎对象let xhr =newXMLHttpRequest();//处理参数,定义一个空数组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>// //方式二:functionajax(obj){//处理参数let type = obj.type;let url  = obj.url;let parmas = obj.params;let callback = obj.callback;//创建ajax引擎对象let xhr =newXMLHttpRequest();//处理参数,定义一个空数组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>

标签： javascript 前端 ajax

本文转载自: https://blog.csdn.net/tangtanglinli/article/details/129460509
版权归原作者 烧脑的小白 所有，如有侵权，请联系我们删除。

原生js创建get/post请求以及封装方式、axios的基本使用

发表评论

“原生js创建get/post请求以及封装方式、axios的基本使用”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航