AJAX问题之XMLHttpRequest status = 0
error:function(XHR,textStatus,errorThrown){
if (XHR.status == 403){
// 全文替换 " 为 空字符串
var errMsg = XHR.responseText.replace(/"/g,"");
swal({
title:errMsg,text:'3 秒后自动关闭',timer:3000,type:'error'
});
} else {
swal({
title:'服务器内部错误,sorry!',type:'error'
});
}
其实这篇文章要写的不止是XMLHttpRequest status = 0 这个问题，还有我重新看AJAX遇到的一些问题和自己的反思。 先看整个例子： <html>
<head>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url) {
xmlhttp = null;
if (window.XMLHttpRequest) {// code for all new browsers
xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {// code for IE5 and IE6
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp != null) {
xmlhttp.onreadystatechange = state_Change;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
}
function state_Change() {
if (xmlhttp.readyState == 4) {
alert(xmlhttp.status);
alert(xmlhttp.responseText);
if (xmlhttp.status == 200) {
alert("200");
} else {
alert(xmlhttp.status);
alert("Problem retrieving XML data");
}
}
}
</script>
<title>Document</title>
<button onclick="loadXMLDoc('file:///E:/test2.html')">click</button>
</head>
<body>
</body>
</html>
1、为什么是xmlhttp.onreadystatechange = state_Change而不是xmlhttp.onreadystatechange = state_Change(); 调用函数不是要用（）写明的吗？难道它会根据函数名去找函数？问了几个前端的，感觉对这个都是模模糊糊也不懂真正的原因在哪里，最后还是去请教了另外一位师兄。 为的是把整个函数给onreadystatechange，而不是将函数最后处理完的值返回给onreadystatechange。 再来理一遍思路，XMLHttpRequest对象是在我最近在重看xml的教程时看到了，立刻和AJAX联系在一起。 w3c这样描述，它用于后台与服务器交换数据，是开发者的梦想。 现在的浏览器直接可以通过new拿到对象，但是IE就不可以了，xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 同时在IE6运行的时候浏览器会提示你设置ActiveX。 onreadystatechange是一个事件句柄，同样功能的还有onclick这些，就是有点击事件的时候会进行特定处理，具体看你的函数怎么写了。而onreadystatechange是由readyState触发，readyState存着XMLHttpRequest的状态， 0: 请求未初始化 readyState改变，调用onreadystatechange这个函数，注意，是这个函数，那我们是不是要赋值一个函数给他，而不是单纯地返回一个值。 所以，问题解决了。 同时不同于： <button onclick="dodo()">click</button> 这个是HTML里面的，虽然也是事件句柄，但是格式不同。上面那个是在JS代码里面的。 2、XMLHttpRequest status = 0 问题。 xmlhttp.readyState =4的时候，一直xmlhttp.status ！= 200。便随手输出，发现xmlhttp.status=0，http协议里可是没这个状态码的。最后翻啊翻啊，找啊找啊，最后找到一个XMLHttpRequest的说明：http://www.w3.org/TR/XMLHttpRequest/。 The status attribute must return the result of running these steps: status的值一定会返回运行这些步骤的结果。 1、If the state is UNSENT or OPENED,return 0.（如果状态是UNSENT或者OPENED，返回0） 如果在HTTP返回之前就出现上面两种情况，就出现0了。 先说两个button，一个是url是：file:///E:/test2.html，另外一个是：http://www.baidu.com。 第一个button的url访问只是本地打开没有通过服务器，自己可以用Wireshark捉包（感谢某位高人指点）。 这里面还有一个问题，就是xmlhttp.readyState一直会变， 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪。 以这种情况看的话，应该是xmlhttp自己在模拟，因为根本就没通过服务器。本地直接打开而已。OPENED了，所以status为0。 第二个button的url访问虽然是其他域名，抓包是有的，但是，这是跨域访问了， If the cross-origin request status is network error 虽然去访问了，应该是浏览器跨域的返回头没有允许，所以浏览器阻止， Access-Control-Allow-Origin这个属性。 真确的方法是在自己的服务器，访问自己域名内的url。 在tomcat上跑： <button onclick="loadXMLDoc('http://localhost:8080/TestServlet/MyServlet')">click</button>
最后我在反思，我自己一直在寻求问题的答案，但是问其中一些人的时候，只是给出了自己随手百度而来的答案，有些人，甚至我说加括号之后有错了之后就不再理会这个问题，会用就行了。但是我不止于这种答案，还是去问了一个师兄，因为，这位师兄前端了得，重要的是，是一位技术爱好者，就是他把第一个问题的分析给我听，后面自己去Google再深入。 搞技术的差距，大概于此，现在可能差距不大，但是几年之后，估计就不是一个级别了。 人之差距，也是如此罢了。 最后要感谢另外一个人，他让我见识到了了一个全栈工程师的。前后端通杀，底层也会，业务逻辑也会。几句话能把我下午查的东西串联起来，所谓真正的程序员，也是如此。与他的一番谈话，很是兴奋，也甚是佩服。热爱技术的人，不过与此。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |