文档章节

AJAX问题之XMLHttpRequest status = 0

OSC知行合一
 OSC知行合一
发布于 2017/03/23 12:09
字数 1466
阅读 186
收藏 0

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

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!',
                    text:'3 秒后自动关闭',
                    timer:3000,
                    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: 请求未初始化
 1: 服务器连接已建立
 2: 请求已接收
 3: 请求处理中
 4: 请求已完成,且响应已就绪

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)
2、If the error flag is set, return 0.(如果错误标签被设置,返回0)
3、Return the HTTP status code.(返回HTTP状态码)

如果在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

    This is a network error.

虽然去访问了,应该是浏览器跨域的返回头没有允许,所以浏览器阻止, Access-Control-Allow-Origin这个属性。

 

真确的方法是在自己的服务器,访问自己域名内的url。

在tomcat上跑:

<button onclick="loadXMLDoc('http://localhost:8080/TestServlet/MyServlet')">click</button>  

最后我在反思,我自己一直在寻求问题的答案,但是问其中一些人的时候,只是给出了自己随手百度而来的答案,有些人,甚至我说加括号之后有错了之后就不再理会这个问题,会用就行了。但是我不止于这种答案,还是去问了一个师兄,因为,这位师兄前端了得,重要的是,是一位技术爱好者,就是他把第一个问题的分析给我听,后面自己去Google再深入。

 

搞技术的差距,大概于此,现在可能差距不大,但是几年之后,估计就不是一个级别了。

人之差距,也是如此罢了。

 

最后要感谢另外一个人,他让我见识到了了一个全栈工程师的。前后端通杀,底层也会,业务逻辑也会。几句话能把我下午查的东西串联起来,所谓真正的程序员,也是如此。与他的一番谈话,很是兴奋,也甚是佩服。热爱技术的人,不过与此。

本文转载自:http://blog.csdn.net/iaiti/article/details/42192659

下一篇: javascript 库收藏
OSC知行合一

OSC知行合一

粉丝 71
博文 124
码字总数 89052
作品 2
东城
程序员
私信 提问
Ajax学习体验之一

在没有使用Ajax之前,总觉得Ajax很神秘,局部刷新、与服务器通信等,知道学习了Ajax之后,了解了Ajax语法之后,知道了其语法相当精简,扼要。下面就来说一说Ajax的精妙 AJAX = Asynchronous ...

飞雪无痕
2016/04/16
88
0
好程序员教程分享关于ajax对象一些常见的问题总结

好程序员教程分享关于ajax对象一些常见的问题总结最近比较空闲,于是抽个时间整理些关于ajax方法的东东。在项目中经常发现ajax板块好多问题都是属性,方法,事件大小写不区分问题,最终导致了...

好程序员IT
04/16
3
0
AJAX基础,AJAX验证邮箱是否存在的例子。

例子: 一下为servlet的代码: XMLHttpRequest是ajax的基础,创建xmlhttprequest的方法是:老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象: 在使用时首先判断浏览器是否支持X...

奔跑的码农
2016/08/31
292
0
前端通信:ajax设计方案(七)--- 增加请求错误监控、前端负载均衡以、请求宕机切换以及迭代问题修复

距离上个迭代过了很长时间,中间经历了很多事情,也在每个空余时间构思了这个迭代的东西以及下个迭代要做的东西。时间周期稍微长了,望见谅。 而且,至今这个开源库的start也已经到了165个了...

仲强
2018/06/29
0
0
最简单最实用的ajax(一)基础通用ajax

最简单最实用的ajax(一)基础通用ajax 最通用的ajax实现整理,不调用jquery,asp.net ajax等框架,最原始ajax实现,兼容IE,FireFox。 三种最常用的数据格式(字符串、XML、JSON)的ajax实现...

科技小毛
2017/10/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

是否有内置功能可以打印对象的所有当前属性和值?

所以我在这里寻找的是类似PHP的print_r函数。 这样一来,我可以通过查看问题对象的状态来调试脚本。 #1楼 可能值得一看- 是否有与Perl的Data :: Dumper等效的Python? 我的建议是 https://gi...

技术盛宴
16分钟前
5
0
直击面试,聊聊 GC 机制

前言 文章来源:https://studyidea.cn/ GC 中文直译垃圾回收,是一种回收内存空间避免内存泄漏的机制。当 JVM 内存紧张,通过执行 GC 有效回收内存,转而分配给新对象从而实现内存的再利用。 ...

程序通事
19分钟前
4
0
Mybatis where 1=1 和 标签

在mybatis中拼接查询语句,偶尔会出现where后面可能一个字段的值都没有,就导致所有条件无效,导致where没有存在的意义;但也有可能这些条件会存在。那解决这个问题的方法,最常见的就是: ...

观海562
21分钟前
4
0
git常用初始化设置

日志编辑工具 git config --global core.editor vim ssh访问 cd /home/weiguangyue/.sshssh-keygen -t rsa -C weiyue888999@126.com 提交者信息用户名 git config --global user.nam......

萧默
22分钟前
4
0
面试题-关于Java线程池一篇文章就够了

在Java面试中,线程池相关知识,虽不能说是必问提,但出现的频次也是非常高的。同时又鉴于公众号“程序新视界”的读者后台留言让写一篇关于Java线程池的文章,于是就有本篇内容,本篇将基于J...

程序新视界
26分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部