<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>登錄界面</title>
<style?type="text/css">
.login{width:390px;height:290px;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,0);-moz-transform:translate(-50%,0);-ms-transform:translate(-50%,0);-o-transform:translate(-50%,0);transform:translate(-50%,0);background-color:#FFF;}
.login?div{height:10px;margin:10px?8px?5px?372px;}
.login?div?img{display:block;cursor:pointer;}
.login?form{padding:0?52px?40px?40px;;}
.login?form?legend{line-height:28px;height:28px;font-size:18px;}??
.login?input{display:block;width:293px;height:43px;line-height:43px;margin-top:15px;border:1px?solid?#dfdfdf;border-bottom:0;background-color:#fafafa;text-indent:10px;color:#ccc;font-size:16px;}
.login?button{background-color:#31b656;margin-top:30px;font-size:16px;text-align:center;width:293px;height:46px;box-shadow:2px?2px?0?0?#d5e3da;color:#FFF;}
</style>
<script?type="text/javascript"?src="md5.js"></script>
</head>
<body>
<div>
<form?id="loginForm">
<legend>登錄網(wǎng)易云課堂</legend>
<input?id="username">
<input?id="password">
<button?id="btn">登?錄</button>
<p?id="oText"></p>
</form>
</div>
<script?type="text/javascript">
function?$?(id)?{
return?document.getElementById(id)
}
var?url4='http://study.163.com/webDev/login.htm'
????var?oBox3=$('oText')?
????var?dataL={userName:hex_md5($("username").value),password:hex_md5($('password').value)}
var?inputs=$('loginForm').getElementsByTagName('input')
for?(var?i?=?0;?i?<?inputs.length;?i++)?{
???inputs[i].onfocus=function?()?{
?this.value="";
??};
}
????$('btn').onclick=function(){
????????useAjax(url4,dataL,oBox3,loginsuc)
????}
???
function?loginsuc?(Data,oBox)?{
???var?_data=?JSON.parse(Data);
???if?(_data==1)?{
???????$('mask').style.display="none";
???????document.cookie?=?"loginsuc=1";
???}else{
???????oBox.innerHTML+="您的用戶名或者密碼輸入不正確！"
???????console.log(_data)
???}
}
????function?useAjax?(urls,datas,oPack,sucFun)?{
???ajax({
???????method?:?'get',
???????url?:?urls?,
???????data?:?datas?,
???????success?:?function?(data)?{
???????????sucFun(data,oPack)
???????},
???????async?:?true
???});
}
function?ajax(obj)?{
????var?xhr?=?(function?()?{
????????/*創(chuàng)建XMLHttpRequest對象*/
????????if?(typeof?XMLHttpRequest?!=?'undefined')?{
????????????//?code?for?IE7+,?Firefox,?Chrome,?Opera,?Safari
????????????return?new?XMLHttpRequest();
????????}?else?if?(typeof?ActiveXObject?!=?'undefined')?{
????????????//?code?for?IE6,?IE5
????????????var?version?=?[
????????????????'MSXML2.XMLHttp.6.0',
????????????????'MSXML2.XMLHttp.3.0',
????????????????'MSXML2.XMLHttp'
????????????];
????????????for?(var?i?=?0;?version.length;?i?++)?{
????????????????try?{
????????????????????return?new?ActiveXObject(version[i]);
????????????????}?catch?(e)?{
????????????????????//跳過
????????????????}????
????????????}
????????}?else?{
????????????throw?new?Error('您的系統(tǒng)或瀏覽器不支持XHR對象！');
????????}
????})();
????/*url加隨機參數(shù)，防止緩存*/
????obj.url?=?obj.url+'?rand='+?Math.random();
????/*請求參數(shù)格式化，encodeURIComponent編碼參數(shù)可以出現(xiàn)&*/
????obj.data?=?(function?(data)?{
????????var?arr?=?[];
????????for?(var?i?in?data)?{?
????????????arr.push(encodeURIComponent(i)?+?'='?+?encodeURIComponent(data[i]));
????????}
????????return?arr.join('&');
????})(obj.data);
????if?(obj.method?===?'get')?obj.url?+=?obj.url.indexOf('?')?==?-1???'?'?+?obj.data?:?'&'?+?obj.data;
????if?(obj.async?===?true)?{
????????xhr.onreadystatechange?=?function?()?{
????????????if?(xhr.readyState?==?4)?{
????????????????callback();
????????????}
????????};
????}
?????
????xhr.open(obj.method,?obj.url,?obj.async);
????if?(obj.method?===?'post')?{
????????xhr.setRequestHeader('Content-Type',?'application/x-www-form-urlencoded');
????????xhr.send(obj.data);????
????}?else?{
????????xhr.send(null);
????}
????if?(obj.async?===?false)?{
????????callback();
????}
????function?callback()?{
????????if?(xhr.status?==?200)?{
????????????obj.success(xhr.responseText);????????????//回調(diào)傳遞參數(shù)
????????}?else?{
????????????alert('獲取數(shù)據(jù)錯誤！錯誤代號：'?+?xhr.status?+?'，錯誤信息：'?+?xhr.statusText);
????????}????
????}
}
</script>
</body>
</html>
請教大神，為什么下面點擊button后，請求是cancelled狀態(tài)？求教，謝謝！
七月小麥麥
2015-09-28 11:27:28
