使用/不使用';var';在javascript中
books.xml:使用/不使用';var';在javascript中,javascript,Javascript,books.xml: <?xml version="1.0" encoding="UTF-8" standalone="yes"?> <datas> <book> <id> 1 </id> <title> PHP Enterprise </title> <author> Wiwit
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<datas>
<book>
<id>
1
</id>
<title>
PHP Enterprise
</title>
<author>
Wiwit
</author>
</book>
<book>
<id>
2
</id>
<title>
PHP Undercover
</title>
<author>
Wiwit
</author>
</book>
</datas>
1.
PHP企业
在这个函数函数handleXMLData()
中,一些地方使用var
,例如var xmlResponse=xmlHttp.responseXML
,有些地方没有使用var
,例如:xmlRoot=xmlResponse.documentElement代码>所以我的问题是:
为什么不把var
放在xmlRoot
前面
通常在函数(){}中,如果我们不将var放在变量前面,它将是全局变量,例如:
功能测试()
{gar='9';}
test();
控制台日志(gar);
但是当我放置console.log(xmlRoot)时
就在chrome控制台中标记
之前,它显示:未捕获引用错误:未定义xmlRoot,为什么?xmlRoot
不是全局变量,因为它前面没有var
var
可能未在此处使用,因为作者希望变量为全局变量
它抛出错误是因为当console.log(xmlRoot)时代码>,执行上下文不知道xmlRoot
,因为handleXMLData
可能尚未执行(因为它在异步调用的回调函数中使用)
xmlRoot
将是一个全局变量(如果已定义)。如果尚未调用引用它的函数,则不会定义xmlRoot
在脚本退出之前,即在第一次执行代码期间,在调用handleXMLData()
之前,您测试了xmlRoot
。任何依赖于读取到浏览器中的远程数据的操作都应由响应处理程序执行。如果有用的话,响应处理程序甚至可以调用您编写的额外函数。否则,代码可能运行得太快,数据将不存在将定义代码>xmlRoot。异步调用的魔力@卡尔·安德烈·加农——我希望你只是建议作为一个快速测试。您通常应该使用回调,而不是等待任意的时间来发生某些事情。@jahroy我说glabal变量将在回调之后声明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Client</title>
<script type="text/javascript">
var xmlHttp = createXmlHttpRequestObject();
// creates XMLHttpRequest Instance
function createXmlHttpRequestObject(){
// will store XMLHttpRequest object
// at here
var xmlHttp;
// works all exceprt IE6 and older
try
{
// try to create XMLHttpRequest object
xmlHttp = new XMLHttpRequest();
}
catch(e)
{
// assume IE 6 or older
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){ }
}
// return object or display error
if (!xmlHttp)
alert("Error creating the XMLHttpRequest Object");
else
return xmlHttp;
}
function process()
{
if(xmlHttp)
{
try
{
xmlHttp.open("Get","books.xml", true);
xmlHttp.onreadystatechange = handleRequestStateChange;
xmlHttp.send(null);
}
catch(e)
{
alert("Can't connect to server\n" + e.toString());
}
}
}
function handleRequestStateChange()
{
myDiv = document.getElementById("myDivElement");
if(xmlHttp.readyState == 1)
{
myDiv.innerHTML += "Request status: 1 (loading) <br/>";
}
else if (xmlHttp.readyState == 2)
{
myDiv.innerHTML += "Request status: 2 (loaded) <br/>";
}
else if (xmlHttp.readyState == 3)
{
myDiv.innerHTML += "Request status: 3 (interactive) <br/>";
}
else if (xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
try
{
handleXMLData();
}
catch(e)
{
alert("Error reading the response: " + e.toString());
}
}
else
{
alert("Problem retrieving data:\n" + xmlHttp.statusText);
}
}
}
function handleXMLData()
{
var xmlResponse = xmlHttp.responseXML;
xmlRoot = xmlResponse.documentElement;
idArray = xmlRoot.getElementsByTagName("id");
titleArray = xmlRoot.getElementsByTagName("title");
authorArray = xmlRoot.getElementsByTagName("author");
var html = "";
for( var i=0; i<titleArray.length; i++)
{
html += idArray.item(i).firstChild.data + ", " + titleArray.item(i).firstChild.data + ", " + authorArray.item(i).firstChild.data + "<br/>";
}
myDiv = document.getElementById("myDivElement");
myDiv.innerHTML += "Server says: <br/>" + html;
}
console.log(xmlRoot);
</script>
</head>
<body onload="process()">
Our collections:
<div id="myDivElement" />
</body>
</html>