使用Ajax中get请求发送Token时踩的那些坑

Posted 2020-11-23 有点小九九

在使用惯了各种牛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) 
}

就这样解决了！

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

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

最后说一句：程序猿太难了！！！