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


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

面试题之JavaScript 的全局变量与局部变量

先看一道面试题问:如下代码结果是? var a = 100 ; function test() { alert(a) ; var a = 10 ; alert(a) ;...
  • wenteryan
  • wenteryan
  • 2016年05月23日 11:18
  • 1657

js中变量的声明,及全局变量和局部变量

1、变量一般用var 声明 2、全局变量不能用var 声明,用var 声明的变量是局部变量 3、全局变量可以在声明的函数外调用,局部变量不能再函数外调用。 代码说明: ...
  • xuehyunyu
  • xuehyunyu
  • 2017年06月11日 10:32
  • 322

轻松理解javascript中的局部变量与全局变量以及this的问题

javascript有两种变量:局部变量和全局变量。当然,我们这篇文章是帮助大家真正的区别这两种变量。 首先,局部变量是指只能在本变量声明的函数内部调用。全局变量时整个代码中都可以调用的变量。当...
  • dihuiqin
  • dihuiqin
  • 2016年08月18日 13:53
  • 510

跟我学JavaScript--作用域,局部变量,全局变量,变量生命周期

作用域: 作用域是可访问变量,对象,函数的集合 JavaScript函数作用域:变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的 如.//此处不能调用car变量function my...
  • panlu666_pl
  • panlu666_pl
  • 2017年04月18日 23:49
  • 835

js局部变量和全局变量的区别

var的规则是: 使用var声明变量就是内部变量, 否则就是先调用全局变量, 不管多少层函数. this的规则是: method函数里的this永远指向自身, 普通函数的this永远指向DOMW...
  • web_note
  • web_note
  • 2016年10月11日 19:02
  • 530

js的局部变量和全局变量的定义形式举例

无标题文档 var n=10;m=100;//全局变量 任何地方都可以使用 function demo(){ var i=10;//局部变量 只能在当前函数中使用 ...
  • u012110719
  • u012110719
  • 2015年09月02日 00:28
  • 1366

局部变量和全局变量的区别

局部变量可以与全局变量重名,但是局部bianl
  • cgl1079743846
  • cgl1079743846
  • 2014年05月29日 09:20
  • 38126

全局变量、局部变量、静态变量和实例变量的区别

一、预备知识 虚拟机的存储机制: 栈:用来存放基本类型的变量数据和对象的引用,这部分是虚拟机自动分配和管理的。堆:存放所有new出来的对象。栈中存放对象的引用,堆中存放对象。常量池:存放字...
  • fanxiaobin577328725
  • fanxiaobin577328725
  • 2017年01月27日 18:02
  • 2066

局部变量与全局变量区别

局部变量:在使用之前必须赋初始值。                  例如:int   var = 0;                             System.out.printl...
  • miaozheyuan
  • miaozheyuan
  • 2016年12月09日 23:02
  • 900

JS中全局变量和局部变量

全局变量,作用域为所属的整个程序。 定义形式: 在函数外定义。 在函数内定义,但是不加 var 声明。 使用 window.变量名 的形式定义。(注:兼容性未知) 使用 windo...
  • Mr_28
  • Mr_28
  • 2017年01月10日 23:03
  • 2651
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript全局变量和局部变量实例
举报原因:
原因补充:

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