原生js实现ajax请求带请求头header

最新推荐文章于 2023-08-11 11:15:54 发布

讓丄帝愛伱

最新推荐文章于 2023-08-11 11:15:54 发布

阅读量726

点赞数

分类专栏：前端技术文章标签： javascript ajax 开发语言

本文链接：https://blog.csdn.net/ximaiyao1984/article/details/131186507

版权

前端技术专栏收录该内容

234 篇文章 7 订阅

订阅专栏

//post请求
 document.querySelector(".postbtn").onclick= function(){
     var xmlhttp = new XMLHttpRequest();
     var obj = {
         name: 'zhansgan',
         age: 18
     };
     xmlhttp.open("POST", "http://192.168.1.200:8080/php/test.php", true);
     xmlhttp.setRequestHeader("token","header-token-value"); // 可以定义请求头带给后端
     xmlhttp.setRequestHeader("dingyi","header-dingyi-value");
     xmlhttp.send(JSON.stringify(obj));  // 要发送的参数，要转化为json字符串发送给后端，后端就会接受到json对象
     // readyState == 4 为请求完成，status == 200为请求陈宫返回的状态
     xmlhttp.onreadystatechange = function(){
         if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
             console.log(xmlhttp.responseText);
         }
     }
 };

//get请求
document.querySelector(".getbtn").onclick= function(){
    var xmlhttp = new XMLHttpRequest();
    // get方法带参数是将参数写在url里面传过去给后端
    xmlhttp.open("GET", "http://192.168.1.200:8080/php/test.php?name='zhansgang'&age=12", true);
    xmlhttp.setRequestHeader("token","header-token-value");
    xmlhttp.setRequestHeader("dingyi","header-dingyi-value");
    xmlhttp.send();
    // readyState == 4 为请求完成，status == 200为请求陈宫返回的状态
    xmlhttp.onreadystatechange = function(){
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
            console.log(xmlhttp.responseText);
        }
    }
};