頁面與服務器的交互，，經典案例

時間 2019-12-02
標籤頁面服務器交互經典案例简体版
原文原文鏈接
  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style type="text/css">
  7         .sp {
  8             width: 50px;
  9             height: 23px;
 10             display: inline-block;
 11             border-bottom: solid 1px;
 12             margin-bottom: 10px;
 13             font-size: 18px;
 14             font-weight: bold;
 15         }
 16 
 17         .totle {
 18             width: 550px;
 19             height: 220px;
 20             font-size: 15px;
 21             margin: auto;
 22             padding: 15px 15px 15px 15px;
 23             border: solid 1px;
 24         }
 25 
 26         div {
 27             width: 550px;
 28             height: 50px;
 29             margin-bottom: 0px;
 30             font-size: 12px;
 31         }
 32 
 33         #zhuce {
 34             float: left;
 35             margin-left: 75px;
 36             color: white;
 37             width: 70px;
 38             height: 30px;
 39             background-color: #0066CC;
 40         }
 41 
 42         #res {
 43             float: right;
 44             color: white;
 45             width: 70px;
 46             height: 30px;
 47             background-color: #0066CC;
 48             margin-right: 240px;
 49         }
 50 
 51         .span {
 52             display: inline-block;
 53             margin-left: 80px;
 54             color: red;
 55             font-size: 12px;
 56         }
 57 
 58         .siz {
 59             font-size: 12px;
 60             color: darkgray;
 61         }
 62 
 63         #name, #mima, #qmi {
 64             height: 30px;
 65             width: 250px;
 66         }
 67     </style>
 68 </head>
 69 <script type="text/javascript" src="../../js/system.js"></script>
 70 <body>
 71 <div class="totle">
 72     <form>
 73         <span class="sp">注 冊</span>
 74 
 75         <div>
 76             &nbsp;用戶名:<input type="text" id="name" placeholder="請輸入用戶名">
 77             <span class="siz">字母開頭,只能是6-10位字母數字下劃線</span></br>
 78             <span class="span"></span>
 79         </div>
 80         <div>
 81             &nbsp;密&nbsp;碼:<input type="password" id="mima" placeholder="請輸入密碼">
 82             <span class="siz">只能是6位數字</span><br/>
 83             <span class="span"></span>
 84         </div>
 85         <div>
 86             肯定密碼:<input type="password" id="qmi" placeholder="請再次肯定密碼">
 87             <span class="siz">輸入與上次一致的密碼</span><br/>
 88             <span class="span"></span>
 89         </div>
 90         <div>
 91             <input type="button" value="註冊" id="zhuce">
 92             <input type="reset" value="重置" id="res">
 93         </div>
 94     </form>
 95 </div>
 96 <script type="text/javascript">
 97     var sp = document.getElementsByClassName("span");
 98     var bInStatus = false;
 99     var reg = /^[a-zA-Z]{1}\w{5,9}$/g;
100     var reg2 = /^\d{6}$/g;
101     $$("name").onchange = function () {
102         if (reg.test(this.value)) {
103             sp[0].innerHTML = "";
104             bInStatus = true;
105         } else {
106             sp[0].innerHTML = "用戶名格式不正確!";
107             $$("name").focus();
108             bInStatus = false;
109             return;
110         }
111     }
112     $$("mima").onchange = function () {
113         if (reg2.test(this.value)) {
114             sp[1].innerHTML = "";
115             bInStatus = true;
116         } else {
117             sp[1].innerHTML = "密碼格式不正確!";
118             $$("mima").focus();
119             bInStatus = false;
120             return;
121         }
122     }
123     $$("qmi").onchange = function () {
124         if ($$("mima").value == this.value) {
125             sp[2].innerHTML = "";
126             bInStatus = true;
127         } else {
128             sp[2].innerHTML = "密碼確認錯誤";
129             $$("qmi").focus();
130             bInStatus = false;
131         }
132     }
133     function checkIMp(v) {//判斷是否爲空，
134         return v.length > 0 ? true : false;
135     }
136     $$("zhuce").onclick = function () {
137         if (checkIMp($$("name").value) && checkIMp($$("mima").value) && checkIMp($$("qmi").value)) {
138             if (bInStatus) {//若是填寫各項均符合格式，就能夠執行下面的代碼了
139                 //能夠提交數據了
140                 comm.cl("OK");
          /////////如下內容，會常常重複使用，固定不變/////////
141                 //生成地址
142                 var url = "http://ama.adwo.com/advmessage/adv/addResultJsonP.action?advid=30125";//會長期使用，老死不變的網址，呵呵。
143                 //實例化xhr對象，用於在後臺與服務器交換數據
                    //AJAX利用一個構建到全部現代瀏覽器內部的對象-XMLHttpRequest-來實現發送和接收HTTP請求與響應信息。
144                 var xhr = null;//因爲要進行兼容性處理，先設爲空
145                 //兼容性處理
146                 if (window.XMLHttpRequest) {//通常的瀏覽器使用
147                     xhr = new XMLHttpRequest();
148                 } else if (window.ActiveXObject) {//IE6如下使用
149                     xhr = new ActiveXObject("Microsoft.XMLHTTP");
150                 }
151                 //先打開這個對象
152                 url += "?name=" + $$("name").value;
153                 xhr.open("GET", url, true);//發送數據的方式GET,路徑url，
154                 //而後再發送請求
155                 xhr.send();
156                 xhr.onreadystatechange = function () {
157                     if (xhr.readyState == 4) {
158                         //200對應OK,如404-未找到網頁
159                         if (xhr.status == 200) {
160                             sp[0].innerHTML = xhr.response;
161                             comm.cl(xhr.response);
162                         }
163                     }
164                 }
165             } else {
166                 comm.cl("ERROR");
167             }
            ///////////////////////////////////////////////////////////
168             //下面三個else if用來判斷填寫的內容是否爲空
169         } else if (checkIMp($$("name").value) == false) {
170             sp[0].innerHTML = "用戶名不能爲空";
171             $$("name").focus();
172         }
173         else if (checkIMp($$("mima").value) == false) {
174             sp[1].innerHTML = "密碼不能爲空";
175             $$("mima").focus();
176         }
177         else if (checkIMp($$("qmi").value) == false) {
178             sp[2].innerHTML = "確認密碼不能爲空";
179             $$("qmi").focus();
180         }
181     }
182 </script>
183 </body>
184 </html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。