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

简介: 原生js实现ajax请求带请求头header
//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);
        }
    }
};
相关文章
|
11天前
|
数据采集 前端开发 JavaScript
虎扑APP数据采集:JavaScript与AJAX的结合使用
虎扑APP数据采集:JavaScript与AJAX的结合使用
|
1月前
|
JavaScript
Node.js GET/POST请求
10月更文挑战第6天
36 2
Node.js GET/POST请求
|
1月前
|
缓存 JavaScript CDN
一次js请求一般情况下有哪些地方会有缓存处理?
一次js请求一般情况下有哪些地方会有缓存处理?
37 4
|
2月前
|
缓存 JavaScript 中间件
优化Express.js应用程序性能:缓存策略、请求压缩和路由匹配
在开发Express.js应用时,采用合理的缓存策略、请求压缩及优化路由匹配可大幅提升性能。本文介绍如何利用`express.static`实现缓存、`compression`中间件压缩响应数据,并通过精确匹配、模块化路由及参数化路由提高路由处理效率,从而打造高效应用。
158 10
|
2月前
|
移动开发 前端开发 JavaScript
js之ajax |12-6
js之ajax |12-6
|
2月前
|
JSON JavaScript 前端开发
js请求后端9
js请求后端9
34 2
|
3月前
|
JavaScript
Vue项目打包后都产生了哪些JS请求?
【8月更文挑战第19天】Vue项目打包后都产生了哪些JS请求?
119 0
Vue项目打包后都产生了哪些JS请求?
|
3月前
|
JavaScript Serverless Linux
函数计算产品使用问题之遇到Node.js环境下的请求日志没有正常输出时,该如何排查
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
3月前
|
缓存 JavaScript CDN
一次js请求一般情况下有哪些地方会有缓存处理?
一次js请求一般情况下有哪些地方会有缓存处理?
116 0
|
3月前
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
32 0