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

原创 2015年11月19日 16:36:48

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


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

局部变量和全局变量总汇

  • 2013年11月28日 00:05
  • 49KB
  • 下载

Javascript:谈谈JS的全局变量跟局部变量

今天公司一个实习小妹子问我两段JS代码的区别: var a = "Hello"; function test(){ var a; alert(a); a = ...

C语言中局部变量、全局变量.pdf

  • 2015年12月17日 10:21
  • 1.72MB
  • 下载

javascript基础笔记(八)之js的全局变量和局部变量

js的全局变量和局部变量 全局变量:在script标签里面定义一个变量,这个变量在页面js 部分都可以使用 ...

全局变量&局部变量

  • 2011年12月13日 15:32
  • 47KB
  • 下载

Javascript:谈谈JS的全局变量跟局部变量(转zyz511919766)

今天公司一个实习小妹子问我两段JS代码的区别: var a = "Hello"; function test(){ var a; alert(a); a = "...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript全局变量和局部变量实例
举报原因:
原因补充:

(最多只允许输入30个字)