JavaScript全局变量和局部变量实例
来源:互联网 发布:淘宝买黑曜石哪家真 编辑:程序博客网 时间:2024/05/19 17:57
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去掉,看能不能弹出提示,很好,终于成了!
0 0
- JavaScript全局变量和局部变量实例
- JavaScript全局变量和局部变量
- javascript局部变量和全局变量
- javascript-全局变量和局部变量
- JavaScript 全局变量和局部变量
- js---局部变量和全局变量(3)---实例
- JavaScript的全局变量和局部变量
- javascript中的全局变量和局部变量
- javascript 关于局部变量和全局变量
- JavaScript的全局变量和局部变量
- javascript的全局变量和局部变量
- JavaScript之全局变量和局部变量
- javascript的全局变量和局部变量
- JavaScript 诡异的全局变量和局部变量
- 3.6Javascript函数-局部变量和全局变量
- html javascript 全局变量和局部变量
- JavaScript的全局变量和局部变量
- JavaScript学习笔记: 局部变量和全局变量
- C++逗号运算符与逗号表达式
- 一路两输入正与门SN74AHC1G08学习
- WCF:Maximum number of items that can be serialized or deserialized in an object graph is '65536'.
- 四大组件之Service
- Maven学习(八)- 构建MyBatis项目
- JavaScript全局变量和局部变量实例
- 图片保存到本地相册
- 深入理解Neutron -- OpenStack网络实践:概述和基本概念
- 编译安装linux内核步骤
- CSS 优先级法则:
- fastdfs结合nginx做一个网盘
- Longest Valid Parentheses
- SSH WebShell的适用(python)
- csdn第一天