页面与服务器的交互，，经典案例

  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>