原生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);
        }
    }
};
相关文章
|
XML 前端开发 JavaScript
|
数据采集 Web App开发 前端开发
处理动态Token:Python爬虫应对AJAX授权请求的策略
处理动态Token:Python爬虫应对AJAX授权请求的策略
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
523 4
|
JSON 前端开发 JavaScript
Python中如何判断是否为AJAX请求
AJAX请求是Web开发中常见的异步数据交互方式,允许不重新加载页面即与服务器通信。在Python的Django和Flask框架中,判断AJAX请求可通过检查请求头中的`X-Requested-With`字段实现。Django提供`request.is_ajax()`方法,Flask则需手动检查该头部。本文详解这两种框架的实现方法,并附带代码示例,涵盖安全性、兼容性、调试及前端配合等内容,帮助开发者提升Web应用性能与用户体验。
514 0
|
Web App开发 存储 JavaScript
《JavaScript和jQuery实战手册(原书第2版)》——2.7节教程:请求信息
本节书摘来自华章社区《JavaScript和jQuery实战手册(原书第2版)》一书中的第2章,第2.7节教程:请求信息,作者:David Sawyer McFarland,更多章节内容可以访问云栖社区“华章社区”公众号查看
1413 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
608 2
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
453 1
JavaScript中的原型 保姆级文章一文搞懂
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
365 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
727 5
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
561 4