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去掉，看能不能弹出提示，很好，终于成了！