在使用惯了各种牛X的插件以后,在使用原生组件写一些小东西的时候总是有踩不完的坑!

今天就来说一说我使用原生ajax请求时踩得坑:

下面是我的代码:

var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.setRequestHeader('Authorization', Token);
xmlhttp.open("GET", url, true); 

 xmlhttp.send(); 
xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
  console.log(xmlhttp.responseText)
}

这时候控制台直接给我报了以下错误:

Uncaught DOMException: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPENED.

当时我第一时间是以为我写错了代码,再三审查后,确定自己写了,并且并没有书写错误我就明白:踩坑了!!

我就去万能娘搜索了一下错误,原来是因为写错了顺序!没错,顺序问题!我滴个亲娘嘞!千想万想没想到是这样!

正确代码应该是这样的:

var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} xmlhttp.open("GET", url, true);
xmlhttp.setRequestHeader('Authorization', Token);
xmlhttp.send();
xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
  console.log(xmlhttp.responseText)
}

就这样解决了!

当时以为自己写错了格式,或者是干脆代码编写错误,谁想到原来是代码顺序带来的错误。

为了加深记忆,就发表了我的第一篇随笔,以后请大家多多关照我这个前端新人~

最后说一句:程序猿太难了!!!

使用Ajax中get请求发送Token时踩的那些坑的更多相关文章

  1. AJAX中的请求方式以及同步异步的区别

    AJAX中的请求方式以及同步异步的区别请求方式,分为GET与POST: GET 最为常见的HTTP请求,普通上网浏览页面就是GET.GET方式的参数请求直接跟在URL后,以问号开始.(JS中用wind ...

  2. AJAX跨域POST发送json时,会先发送一个OPTIONS预请求

    我们会发现,在很多post,put,delete等请求之前,会有一次options请求. 根本原因就是,W3C规范这样要求了!在跨域请求中,分为简单请求(get和部分post,post时content ...

  3. Ajax中Get请求与Post请求的区别

    Get请求和Post请求的区别 1.使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来 2.使用Get请求发送数据量小,Post请求发送数据量大 例子 页面的HTML代码: &l ...

  4. Ajax中Delete请求参数 后台无法获取的解决方法(Restful风格)

    方法一: 在ajax中写入data来传参时,直接把参数拼接到url后面 例如: $.ajax({ url: '/cyberspace/vrv/event/delete/1002?startTime=& ...

  5. .net 中异步SOCKET发送数据时碰到的内存问题

    做CS的开发一直都是这样的方式: server端用 C++编写,采用IOCP机制处理大量客户端连接.数据接收发送的问题 client端用 C++ 或C# 写,没什么特殊要求. 最近工作时间上比较宽裕, ...

  6. [问题解决]RedHat7更换CentOS7的yum源时踩过的坑

    更换yum源的流程 查看当前yum程序 $ rpm -qa|grep yum 这里推荐将其结果截屏或拷贝出来,以免后面报错修复. 删除原有yum源 $ rpm -aq | grep yum|xargs ...

  7. 换行符在ajax中返回json,eval时发生的 Unexpected token ILLEGAL

    用户如果输入了换行在数据中记录为‘空格’,但不是真正的空格. 程序前台采用ajax和json返回数据绑定时会 出现 Unexpected token ILLEGAL 例子: 在sql中存储为下图 在“ ...

  8. ajax中遇到无法发送的问题,以及收不到返回信息的问题

    1.在做ajax时,数据发送成功,后台确认了也返回了信息,但是怎么都在success里面接收不了,我遇见的造成的原因时因为dataType返回值类型错误造成的原因. var url = "请 ...

  9. 重写ajax方法实现请求session过期时跳转登录页面

    jQuery(function($){ var _ajax=$.ajax; // 备份jquery的ajax方法 $.ajax=function(opt){ var _success = opt &a ...

随机推荐

  1. 《C专家编程》读书笔记之第8~11章

    八.为什么程序员无法分清万圣节和圣诞节 1. 整形提升是指char,short int和位段类型(无论signed或unsigned)以及枚举类型将被提升为int或unsigned int(如果int ...

  2. 用java转换文件的字符集

    中文乱码真的是让人很头疼问题,有了这个方法应该能缓解这种头疼,用的是递归方式查找文件,直接在原文件中修改,小心使用(在本地测试效果有点诡异呀,没有达到预期效果). package com.hy.uti ...

  3. 记录一次hadoop2.8.4版本RM接入zk ha问题

    背景: 公司将线上hadoop RM接入ZK 实现高可用 但ZK Znode 默认存储1M,当存储数据量大时候可能导致线上业务的崩溃 处理方案如下: 1,修改ZK配置 增加默认存储上限 2,修改RM数 ...

  4. celery异步任务

    1.安装 pip install celery 2.创建celery_tasks文件夹,创建config配置文件和main文件 # 在config.py文件中配置中间人broker地址信息 - red ...

  5. 剑指offer26:将二叉搜索树转换成一个排序的双向链表。要求不能创建任何新的结点,只能调整树中结点指针的指向。

    1 题目描述 输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向. 2 思路和方法 在二叉搜索树中,每个结点都有两个分别指向其左.右子树的 ...

  6. LC 494. Target Sum

    问题描述 You are given a list of non-negative integers, a1, a2, ..., an, and a target, S. Now you have 2 ...

  7. 基于bootstrap selectpicker ,实现select下拉框模糊查询功能

    1.html代码块 需要引入bootstrap的css js jquery bootstrap.css bootstrap-select.min.css jquery-1.11.3.min.js bo ...

  8. RedHat7 配置yum源

    今天需要搭建一个测试环境,没办法只能找了个Linux服务器,但是之前的其他同事弄过是其他系统的,不是centos的,所以只能自己搞. 合计直接百度,怎么安装docker,结果一直报错,下载失败之类的 ...

  9. select in关键字查询匹配多个字段

    select id from table where (num,name) in ((num1,'name1'),(num2,'name2'))

  10. Scala学习十四——模式匹配和样例类

    一.本章要点 match表达式是更好的switch,不会有意外调入下一个分支 如果没有模式能够匹配,会抛出MatchError,可以用case _模式避免 模式可以包含一个随意定义的条件,称做守卫 你 ...