ajax对象使用的简单实例

来源：互联网发布：淘宝usa商城假货编辑：程序博客网时间：2024/05/24 03:13

<%@page pageEncoding="utf-8" contentType="text/html;charset=utf-8"%>
<html>
   <head>
       <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
   </head>
   <body style="font-size: 30px; font-style: italic;">
       <select name="city" id="s1" onchange="getCity(this.value, true)">
           <option value="bj">
               北京
           </option>
           <option value="hb">
               河北
           </option>
           <option value="sd">
               山东
           </option>
       </select>
       <select name="city1" id="s2">
       </select>
   </body>

   <script type="text/javascript">
       $(function() {
           getCity('bj', true);
       });

       var ajaxActionFlag = "0";
       function getCity(val, waitingFlag) {
           if (ajaxActionFlag == "1" && !waitingFlag) {
               alert("数据提交中，请等待");
               return;
           }

           cursor_wait();

           var url = "/getCity.do";
           var ajax = getXhr();
           ajax.open("POST", encodeURI(url), true);
           ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
           ajax.send('city=' + val);
           ajaxActionFlag = "1";
           ajax.onreadystatechange = function() {
               if (ajax.readyState == 1) {
               } else {
                   if (ajax.readyState == 2) {
                   } else {
                       if (ajax.readyState == 3) {
                       } else {
                           if (ajax.readyState == 4) {
                               if (ajax.status == 200) {
                                   $('#s2').innerHTML = "";
                                   var txt = ajax.responseText;
                                   var strs = txt.split(';');
                                   for ( var i = 0; i < strs.length; i++) {
                                       var str1s = strs[i].split(',');
                                       var option = new Option(str1s[0], str1s[1]);
                                       document.getElementById('s2').options[i] = option;
                                   }
                               }
                               ajaxActionFlag = "0";
                               cursor_clear();
                           } else {
                               alert("提交数据出错，请稍后重试！");
                               ajaxActionFlag = "0";
                               cursor_clear();
                           }
                       }
                   }
               }
           };
       }

       function getXhr() {
           var ajax = false;
           try {
               ajax = new ActiveXObject("Msxml2.XMLHTTP");
           } catch (e) {
               try {
                   ajax = new ActiveXObject("Microsoft.XMLHTTP");
               } catch (E) {
                   ajax = false;
               }
           }
           if (!ajax && typeof XMLHttpRequest != "undefined") {
               ajax = new XMLHttpRequest();
           }
           return ajax;
       }

       function cursor_wait() {
           document.body.style.cursor = 'wait';
       }

       function cursor_clear() {
           document.body.style.cursor = 'default';
       }
   </script>

</html>

0 0