原生ajax使用（1）
阿新 • • 發佈：2018-03-07
bsp status fun use sub elements pre 字符串類型 對象
<body> <form method="post" action="login"> 用戶名：<input id="user" type="text" name="username"> 密碼：<input id="pwd" type="password" name="password"> <input type="checkbox" id="auto" name="auto" value="1"/>七天免登錄 <input type="button" onclick="SubmitForm();" value="登錄"> <span class="err"></span> </form> </body> </html> <script> var xhr=null; function SubmitForm(){ var username=document.getElementById("user").value; var pwd=document.getElementById(‘pwd‘).value;var chkEle=document.getElementById(‘auto‘); var chk=null; if(chkEle.checked==true) chk=1; else chk=0; xhr=new XMLHttpRequest(); /*參數 發送方式 發送地址 是否異步*/ //xhr.open(‘GET‘,"/login",true); xhr.open("POST","/login",true);//當readystate值改變時會自動去觸發對應函數，先對這個值進行判斷，在決定對應的函數 //0.未初始化，尚未調用open //1.啟動，調用了open未調用send //2.發送，調用了send,未收到響應 //3.接收，已經接收到了部分響應消息 //4.完成，已經接收到所有的數據 xhr.onreadystatechange =func; //setRequestHeader(String header,String value)設置請求頭 //getAllResponseHeaders()獲取所有響應頭 //getResponseHeader(String header)獲取響應頭中指定的header的值 //void abort()終止請求 //post發送數據需要設置請求頭 xhr.setRequestHeader(‘content-type‘,‘application/x-www-form-urlencoded‘) //用於發送數據 xhr.send(‘username=‘+username+‘;password=‘+pwd+‘;auto=‘+chk); //String responseText 服務器返回的數據字符串類型 //XmlDocument responseXML 服務器返回的數據（xml對象） //Number states 狀態碼 //String statesText 狀態碼對應文本 } function func(){ if(xhr.readyState == 4){ console.log(xhr.responseText); var data=xhr.responseText; var ret_dict = JSON.parse(data); if(ret_dict.status){ //登錄成功 }else{ //登錄失敗 var ele=document.getElementsByClassName(‘err‘)[0]; ele.innerHTML="<h1 style=\"color:red;\">"+ret_dict.message+"</h1>" } } } </script>
原生ajax使用（1）