JavaScript全局变量和局部变量实例

w3school网站PHP AJAX样例中,有一个类似百度的实时搜索框界面,当输入关键词时则下方弹出与关键相关的搜索内容。于是我结合bootstrap对界面进行了美化,在编写过程中遇到了个奇怪的问题。浏览器端怎么都弹不出提示内容,到底问题出在哪里?

1.首先我用httpwatch抓包工具实时监测了请求头和响应头,发现数据能提交,响应数据也成功接收,可排除服务端PHP脚本的问题。

2.问题可能出在JS脚本上,我设定的是当用户在文本框中输入文本时,弹出搜索提示。数据可以提交,但是无法显示,显然是接收操作出了问题。

3.当XMLHttpRequest对象的onreadystatechange事件触发时,执行stateChanged函数。

//调用XMLHTTP 对象的onreadystatechange事件,并在触发一个变化时告知此函数执行名为 stateChanged 的一个函数
xmlHttpObject.onreadystatechange=stateChanged;

4.在stateChaned函数中判断响应状态,若响应数据准备完毕则处理响应数据。

//处理响应数据
function stateChanged(){
	//判断响应数据是否准备就绪
	if (xmlHttpObject.readyState==4 || xmlHttpObject.readyState=="complete") {
		document.getElementById("livesearch").innerHTML = xmlHttpObject.responseText;
		document.getElementById("livesearch").style.border = "1px solxmlHttpObject.responseTextid #333";
	}
}

5.乍一看好像没问题,于是我添加了else语句,并注释其他语句,只通过alert弹窗提示信息。

//处理响应数据
function stateChanged(){
	//判断响应数据是否准备就绪
	if (xmlHttpObject.readyState==4 || xmlHttpObject.readyState=="complete") {
		alert('YES');
		//document.getElementById("livesearch").innerHTML = xmlHttpObject.responseText;
		//document.getElementById("livesearch").style.border = "1px solxmlHttpObject.responseTextid #333";
	}else{
		alert('NO');
	}
}

6.然而我发现这样做并没有什么卵用,我就纳闷了,难道两种情况都不触发吗?于是我判断,可能是触发条件有问题,于是我分别在在条件判断之前和之后alert。

(1)条件之前:噔噔噔噔,当我按下按键时连弹出4个提示框,这应当是readState的4种状态

//处理响应数据
function stateChanged(){
	alert('hello');
	//判断响应数据是否准备就绪
	if (xmlHttpObject.readyState==4 || xmlHttpObject.readyState=="complete") {
		alert('YES');
		//document.getElementById("livesearch").innerHTML = xmlHttpObject.responseText;
		//document.getElementById("livesearch").style.border = "1px solxmlHttpObject.responseTextid #333";
	}else{
		alert('NO');
	}
}


:
(2)条件之后:嗯,什么都没有,如此判断定然是if语句的条件出问题了。

//处理响应数据
function stateChanged(){
	
	//判断响应数据是否准备就绪
	if (xmlHttpObject.readyState==4 || xmlHttpObject.readyState=="complete") {
		alert('YES');
		//document.getElementById("livesearch").innerHTML = xmlHttpObject.responseText;
		//document.getElementById("livesearch").style.border = "1px solxmlHttpObject.responseTextid #333";
	}else{
		alert('NO');
	}
	alert('hello');
}


7.经过仔细检查发现这条件貌似没问题啊,于是我比对w3school的源码,发现源码中XMLHttpObject被声明在函数外,而我是在函数内声明的,难道是因为声明为局部变量导致stateChanged函数无法访问它?于是我立马将其声明在函数外,测试弹出三个"NO",一个"YES",条件触发成功!泪流满面,终于找到原因了,接着我突然想到了什么,试着在函数内把xmlHttpObject的var声明关键字去掉直接使用,不在外面声明,也能弹出三个"NO",一个"YES",看来函数内不声明的变量默认为全局变量。

8.把alert去掉,看能不能弹出提示,很好,终于成了!


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值