AJAX问题之XMLHttpRequest status = 0

其实这篇文章要写的不止是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:

1、If the state is UNSENT or OPENED, return 0.

2、If the error flag is set, return 0.

3、Return the HTTP status code.

这个简单就不翻译了,如果在HTTP返回之前就出现上面两种情况,就出现0了。

先说两个button,一个是url是:file:///E:/test2.html,另外一个是:http://www.baidu.com。

第一个button的url访问只是本地打开没有通过服务器,自己抓个包就知道了(感谢某位高人指点)。

这里面还有一个问题,就是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.

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

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

在tomcat上跑:

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

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

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

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

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

时间: 2024-10-25 00:53:15

AJAX问题之XMLHttpRequest status = 0的相关文章

解决ant Design dva ajax跨越请求 (status=0)

今天实现了antd作为前端展现,python flask作为后端的数据填充,完全两个独立的服务:过程中遇到ajax跨越请求问题,导致status一直等于0,原来是这么写的: xmlhttp.open("GET", "http://192.168.118.129:8001/test_react_action?user_name=" + values.userName, true); xmlhttp.send(); 被解析为跨越访问了,这个时候需要在dva中添加代理才能

ajax请求状态码为0的解决办法

原文链接:https://blog.csdn.net/changqing5818/article/details/53932463 前言 今天遇到个奇怪的问题,使用JQuery的ajax请求,后台的Controller层也接收到请求了,一切处理很正常,但是很奇怪,浏览器Debug发现,responseText是"error",状态码是0而不是200. 请求源码如下 $.ajax({ type: "POST", url: targetUrl, cache: false

Firefox AJAX请求readyState = 0,status = 0问题

今天在测试的时候,狂刷页面AJAX请求就会出错,Chrome浏览器没问题,Firefox就报错! 跟踪了一下,发现readyState = 0,status = 0,网上查资料发现原来产生这个错误 的原因是"XmlHttpRequest对象尚未初始化"!

ajax加载本地html-Http status: 0 NS_ERROR_DOM_BAD_URI: Access to restricted URI denied

1. 问题描述: 使用jquery的ajax方法加载本地html碎片到主html中去,报错如下: Http status: 0 NS_ERROR_DOM_BAD_URI: Access to restricted URI denied ajaxOptions: error thrownError:NS_ERROR_DOM_BAD_URI: Access to restricted URI denied undefined 本地测试: file:///C:/inetpub/wwwroot/myjs

转载: Ajax关于readyState和status的讨论

转载:Ajax关于readyState和status的讨论 http://www.cnblogs.com/teroy/p/3917439.html 熟悉web开发的程序员想必对Ajax也不会陌生.现在已经有很多js框架封装了ajax实现,例如JQuery的ajax函数,调用起来非常方便.当然本文不打算讲框架的使用,我们将从Ajax的javascript源码实现开始. Ajax源码实现 var getXmlHttpRequest = function () { if (window.XMLHttp

【后知后觉】AJAX核心对象——XMLHttpRequest

自从把AJAX学了之后,就是在云里雾里飘着,想总结,却无从下手,就一直拖到现在.最近看DRP,王勇老师简单的讲了AJAX,对这个又是技术又是技巧的东西做了再一次的解,感觉自己稍微理解了一些.现将我现在理解的分享下. 首先什么是AJAX呢? AJAX简介: AJAX这个名词最早是由Jesse James Garrett提出的,当时给出的解释是:Asynchronous JavaScript And XML,虽然当时Jesse James Garrett也曾发表文章介绍这个技术,但是真正被人们所熟知

Ajax关于readyState和status的讨论

熟悉web开发的程序员想必对Ajax也不会陌生.现在已经有很多js框架封装了ajax实现,例如JQuery的ajax函数,调用起来非常方便.当然本文不打算讲框架的使用,我们将从Ajax的javascript源码实现开始. Ajax源码实现 var getXmlHttpRequest = function () { if (window.XMLHttpRequest) { //主流浏览器提供了XMLHttpRequest对象 return new XMLHttpRequest(); } else

325 AJAX介绍,XMLHttpRequest对象,实现Ajax的异步交互步骤,服务器端通信状态

* Asynchronous JavaScript and Xml \* 直译中文 - javascript和XML的异步 \* (不严格的定义)客户端与服务器端进行交互,而无需刷新当前页面的技术,称之为Ajax. * Ajax实现的是B/S架构下的异步交互 * 实现异步交互的技术: \* <iframe src="">元素 * 同步与异步的区别 * 同步交互 \* 执行速度相对比较慢 \* 响应的是完整的HTML页面 * 异步交互 \* 执行速度相对比较快 \* 响应的是

常见的XMLHttpRequest.status状态码

XMLHttpRequest.status状态码 1xx-信息提示 这些状态代码表示临时的响应.客户端在收到常规响应之前,应准备接收一个或多个1xx响应. 100-继续. 101-切换协议. 2xx-成功 这类状态代码表明服务器成功地接受了客户端请求. 200-确定.客户端请求已成功. 201-已创建. 202-已接受. 203-非权威性信息. 204-无内容. 205-重置内容. 206-部分内容. 3xx-重定向 客户端浏览器必须采取更多操作来实现请求.例如,浏览器可能不得不请求服务器上的不