input 的onclick事件 为什么不能用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.test{
background-color: blue;
}
</style>

</head>
<body>
<input type="button" onclick="showMsg()" value="调用Ajax显示内容" />
<span id="msg"></span>

<script type="text/javascript">
var xmlHttp;
function createXMLHttp(){
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function showMsg(){
createXMLHttp();
xmlHttp.open("POST","content.html");
xmlHttp.onreadystatechange= showMsgCallback;
xmlHttp.send(null);
}
function showMsgCallback(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status ==200){
var text =xmlHttp.responseText;
document.getElementById("msg").className="test";
document.getElementById("msg").innerHTML=text;
}
}
}
</script>
</body>
</html>