{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 成全新的幸福 的问题《Different Behavior of XMLHttpRequest for <input》','https://www.manongdao.com/q-821824.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
Consider the following code:
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<form>
<button id="getInfoButton1"></button>
<input type="button" id="getInfoButton2"></input>
</form>
</body>
</html>
With the accompanying JavaScript file:
script.js
window.onload = initAll;
var req;
function initAll()
{
document.getElementById("getInfoButton1").onclick = getInfo;
document.getElementById("getInfoButton2").onclick = getInfo;
}
function getInfo()
{
req = new XMLHttpRequest();
var URL = "index.html";
req.open("GET", URL, true);
req.onreadystatechange = whatsTheStatus;
req.send(null);
}
function whatsTheStatus()
{
if (req.readyState != 4) { return; }
alert(req.status);
}
(I've pared down my code a lot, but this example still highlights the error)
The question is this: When you load this, and click both buttons, the first one will display a status of 0, while the second one displays a status of 200.
Of course, I'm expecting both to display 200, and I have no idea why the <button> is behaving differently. It's not a terribly big deal, but I would like to maintain the same use of <button> throughout my site.
I've looked around the web and asked some other developers at my company, and we can't seem to find the answer. Any ideas?
If it helps, I'm testing on Firefox 3.6.8. Also, I'm running it from localhost via WAMPserver 2.0.
You would need
<button type="button">to reproduce the behaviour of<input type="button">.If you omit the type on
<button>it defaults tosubmit(except on IE<8 due to a bug; for this reason you should always use atypeattribute on<button>). A submit button would cause the form to submit, causing a navigation and cancelling the XMLHttpRequest.In general you should be trapping
onsubmiton the form rather thanonclickon a particular button, to ensure you always get informed if the form is submitted by another means such as Enter being pressed. (Consequently you'd use a normalsubmitbutton.) Usereturn falsefrom the event handler to prevent the form submission from going ahead.