pingpang

            BlogJava :: 首頁 :: 聯系 :: 聚合  :: 管理
            21 Posts :: 0 Stories :: 3 Comments :: 0 Trackbacks

          2012年8月12日 #

          這幾天自己琢磨起來javascript,以前都是看看沒有實戰過,現在覺得實戰起來果然錯誤多多,以后要不斷總結錯誤,關鍵可以減少調試時間,菜鳥啊:

          1.js通常有一個地方錯誤了, 下邊的函數都不會再繼續執行啦(本來覺得很正常的事,但是...)

          2.為什么open()請求服務器的時候,請求的servlet后邊要加一個參數變化,告知服務器這是一個新的請求???否則在IE8中請求失敗

          var bojingNum = 0;
          //定義一個變量用來存儲xmlHttpRequest對象
            var xmlHttp=null;
            //該函數用于創建一個xmlHttpRequest對象
            function createXMLHttpRequest()
            {
              if (window.ActiveXObject)//ActiveXObject這個對象是IE瀏覽器提供的控件,所以有的網銀只支持這樣的控件的IE瀏覽器
              {
                  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE瀏覽器生成的對象
                  
              } else if (window.XMLHttpRequest)//除了IE外的其他瀏覽器
              {
                  xmlHttp = new XMLHttpRequest();
              }
            }
            //這是一個通過ajax刷新統計圖的方法
            function  autoFlush()
            {
                //創建日期變量時間變量
                var tempTime = new Date();
                var tempParameter = tempTime.getTime();
                //創建一個xmlHttpRequest對象
                createXMLHttpRequest();
                if(xmlHttp!=null)
                {
                //這里放置一個時間參數是為了讓服務器知道這是一個新的請求
                xmlHttp.open("GET", "SerialDataSvt?tmd="+tempParameter);
                 //將狀態觸發器綁定到一個函數
                xmlHttp.onreadystatechange=processor;
                
                //請求發送
                xmlHttp.send(null);
                }
               
                
            }
            //處理從服務器返回的xml文檔
            function processor()
            {
                //定義一個變量用于存儲從服務器返回的結果
                var  result;
                if(xmlHttp.readyState==4)//如果響應完成
                    {
                       if(xmlHttp.status==200)//如果返回成功
                           {
                          
                             //取出服務器返回的xml文檔的所有counter標簽的子節點
                           result = xmlHttp.responseXML.getElementsByTagName("data");//alert(result);
                      
                          //解析xml中的數據并更新統計圖狀態
                          
                           for(var i = 0 ; i < result.length; i++)
                               {
                                    //用于統計數據更新統計圖片狀態
                               var id =result[i].getAttribute("id");//alert(id);
                               var dir =result[i].getAttribute("dir"); //alert(dir);
                              
                              var  datas =xmlHttp.responseXML.getElementsByTagName("dataContent")[0].childNodes[0].nodeValue;
                              var  addTime =xmlHttp.responseXML.getElementsByTagName("addTime")[0].childNodes[0].nodeValue;
                              
                              
                                  if(datas.substring(17,18)=="1")
                                      { 
                                       document.getElementById("yujing"+(i+1)).innerHTML="<embed   src='video/wartgroud.mp3'  type=audio/x-ms-wma autostart='true' loop='true'>報警中</embed> ";
                                       document.getElementById("yujingPic"+(i+1)).style.display = 'block';
                                      bojingNum++;
                                      document.getElementById("yujingNum"+(i+1)).innerHTML="預警次數:"+bojingNum;
                                      }
                                  else
                                      {
                                      document.getElementById("yujing"+(i+1)).innerHTML="暫無報警";
                                       document.getElementById("yujingPic"+(i+1)).style.display = 'none';
                                      }
                               document.getElementById("n_nodeID"+i).innerHTML= id+dir;
                               document.getElementById("n_nodeData"+i).innerHTML= datas; 
                               document.getElementById("n_nodeTime"+i).innerHTML= addTime; 
                               
                               document.getElementById("s_nodeID"+i).innerHTML= id+dir;
                               document.getElementById("s_nodeData"+i).innerHTML= datas; 
                               document.getElementById("s_nodeTime"+i).innerHTML= addTime; 
                               
                               document.getElementById("e_nodeID"+i).innerHTML= id+dir;
                               document.getElementById("e_nodeData"+i).innerHTML= datas; 
                               document.getElementById("e_nodeTime"+i).innerHTML= addTime; 
                               
                               document.getElementById("w_nodeID"+i).innerHTML= id+dir;
                               document.getElementById("w_nodeData"+i).innerHTML= datas; 
                               document.getElementById("w_nodeTime"+i).innerHTML= addTime; 
                    
                               }
                           }
                    }  
            }
            //每隔一秒就執行一次autoFlush方法
           setInterval(autoFlush, 2000);

          posted @ 2012-08-16 22:41 往事隨風 閱讀(2103) | 評論 (1)編輯 收藏

          昨天看到C#群里有人問一個投票功能如何實現...

          我對此很感興趣,為了練習一下,就有了以下代碼。

          投票功能使用jQuery實現..純html代碼...數據通過json字符串傳遞,通過 eval轉換為json對象

          投票功能分為:

          1.設置投票內容:



          2.投票:



          3.投票結果:


          文件列表:



          傳值:

          {
              info: 
          "   由京東針對國美蘇寧發起的新一輪電商大戰隨著當當、易訊等企業的“亂入”,正演變為整個國內電商行業的混戰。電商“8.15”價格戰誰會是最后的贏家?今年的電商排位戰,誰能笑到最后?<br/><br/>1.今年是電商排位戰,你最看好誰?<br/>--------------------isea533----------------------",
              choices: [{
                  name: 
          "choice0",
                  value: 
          "京東商城",
                  num: 
          6,
                  percent: 
          0.25
              },
              {
                  name: 
          "choice1",
                  value: 
          "蘇寧易購",
                  num: 
          5,
                  percent: 
          0.20833333333333334
              },
              {
                  name: 
          "choice2",
                  value: 
          "國美商城",
                  num: 
          4,
                  percent: 
          0.16666666666666666
              },
              {
                  name: 
          "choice3",
                  value: 
          "當當網",
                  num: 
          2,
                  percent: 
          0.08333333333333333
              },
              {
                  name: 
          "choice4",
                  value: 
          "亞馬遜中國",
                  num: 
          3,
                  percent: 
          0.125
              },
              {
                  name: 
          "choice5",
                  value: 
          "天貓(原淘寶商城)",
                  num: 
          4,
                  percent: 
          0.16666666666666666
              }]
          }


          posted @ 2012-08-16 22:39 往事隨風 閱讀(2552) | 評論 (0)編輯 收藏

          jQuery對象初始化的傳參方式包括:
          1.$(DOMElement)
          2.$('<h1>...</h1>'), $('#id'), $('.class') 傳入字符串, 這是最常見的形式, 這種傳參數經常也傳入第二個參數context指定上下文,其中context參數可以為$(...), DOMElement
          3.$(function() {}); <===> $(document).ready(function() { });
          4.$({selector : '.class', context : context}) <===> $('.class', context)

          jQuery.fn = jQuery.prototype = {
              constructor: jQuery,
              init: function( selector, context, rootjQuery ) {
                  var match, elem, ret, doc;

                  // 處理$(""), $(null), $(undefined), $(false)這幾種參數,直接返回this
                  if ( !selector ) {
                      return this;
                  }

                  // 當傳參selector為DOM結點時,將context置為selector
                  if ( selector.nodeType ) {
                      this.context = this[0] = selector;
                      this.length = 1;
                      return this;
                  }

                  // Handle HTML strings
                  // 當傳入的selector參數為字符串時,
                  if ( typeof selector === "string" ) {
                      if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
                          // Assume that strings that start and end with <> are HTML and skip the regex check
                          match = [ null, selector, null ];

                      } else {
                          match = rquickExpr.exec( selector );
                      }

                      // Match html or make sure no context is specified for #id
                      if ( match && (match[1] || !context) ) {

                          // HANDLE: $(html) -> $(array)
                          if ( match[1] ) {
                              context = context instanceof jQuery ? context[0] : context;
                              doc = ( context && context.nodeType ? context.ownerDocument || context : document );

                              // scripts is true for back-compat
                              selector = jQuery.parseHTML( match[1], doc, true );
                              if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
                                  this.attr.call( selector, context, true );
                              }

                              return jQuery.merge( this, selector );

                          // HANDLE: $(#id)
                          } else {
                              elem = document.getElementById( match[2] );

                              // Check parentNode to catch when Blackberry 4.6 returns
                              // nodes that are no longer in the document #6963
                              if ( elem && elem.parentNode ) {
                                  // Handle the case where IE and Opera return items
                                  // by name instead of ID
                                  if ( elem.id !== match[2] ) {
                                      return rootjQuery.find( selector );
                                  }

                                  // Otherwise, we inject the element directly into the jQuery object
                                  this.length = 1;
                                  this[0] = elem;
                              }

                              this.context = document;
                              this.selector = selector;
                              return this;
                          }

                      // HANDLE: $(expr, $(...))
                      } else if ( !context || context.jquery ) {
                          return ( context || rootjQuery ).find( selector );

                      // HANDLE: $(expr, context)
                      // (which is just equivalent to: $(context).find(expr)
                      } else {
                          return this.constructor( context ).find( selector );
                      }

                  // HANDLE: $(function)
                  // Shortcut for document ready
                  // 當selector為function時相當于$(document).ready(selector);
                  } else if ( jQuery.isFunction( selector ) ) {
                      return rootjQuery.ready( selector );
                  }

                  // 當selector參數為{selector:'#id', context:document}之類時,重置屬性selector和context
                  if ( selector.selector !== undefined ) {
                      this.selector = selector.selector;
                      this.context = selector.context;
                  }

                  return jQuery.makeArray( selector, this );
              }
          }; 
          posted @ 2012-08-16 22:39 往事隨風 閱讀(1808) | 評論 (0)編輯 收藏

          最近項目任務繁重,更新博客會較慢,不過有時間希望可以把自己的積累分享出來。

             JavaScript正則實戰(會根據最近寫的不斷更新)

          1、javascript 正則對象替換創建 和用法: /pattern/flags  先簡單案例學習認識下replace能干什么

              正則表達式構造函數: new RegExp("pattern"[,"flags"]); 

              正則表達式替換變量函數:stringObj.replace(RegExp,replace Text);

          參數說明: 
          pattern -- 一個正則表達式文本 
          flags -- 如果存在,將是以下值: 
          g: 全局匹配 
          i: 忽略大小寫 
          gi: 以上組合 

          //下面的例子用來獲取url的兩個參數,并返回urlRewrite之前的真實Url
          var
           reg=new RegExp("(http://www.qidian.com/BookReader/)(\\d+),(\\d+).aspx","gmi");
          var url="http://www.qidian.com/BookReader/1017141,20361055.aspx";

          //方式一,最簡單常用的方式
          var rep=url.replace(reg,"$1ShowBook.aspx?bookId=$2&chapterId=$3");
          alert(rep);

          //方式二 ,采用固定參數的回調函數
          var rep2=url.replace(reg,function(m,p1,p2,p3){return p1+"ShowBook.aspx?bookId="+p3+"&chapterId="+p3});
          alert(rep2);

          //方式三,采用非固定參數的回調函數
          var rep3=url.replace(reg,function(){var args=arguments; return args[1]+"ShowBook.aspx?bookId="+args[2]+"&chapterId="+args[3];});
          alert(rep3);

          //方法四
          //方式四和方法三很類似, 除了返回替換后的字符串外,還可以單獨獲取參數
          var bookId;
          var chapterId;
          function capText()
          {
              var args=arguments; 
              bookId=args[2];
              chapterId=args[3];
              return args[1]+"ShowBook.aspx?bookId="+args[2]+"&chapterId="+args[3];
          }

          var rep4=url.replace(reg,capText);
          alert(rep4);
          alert(bookId);
          alert(chapterId);

          //使用test方法獲取分組
          var reg3=new RegExp("(http://www.qidian.com/BookReader/)(\\d+),(\\d+).aspx","gmi");
          reg3.test("http://www.qidian.com/BookReader/1017141,20361055.aspx");
          //獲取三個分組
          alert(RegExp.$1); 
          alert(RegExp.$2);
          alert(RegExp.$3);

          2、 學習最常用的 test exec match search  replace  split 6個方法

          1) test  檢查指定的字符串是否存在
          var data = “123123″;
          var reCat = /123/gi;
          alert(reCat.test(data));  //true
          //檢查字符是否存在  g 繼續往下走  i 不區分大小寫

          2) exec 返回查詢值
          var data = “123123,213,12312,312,3,Cat,cat,dsfsdfs,”;
          var reCat = /cat/i;
          alert(reCat.exec(data));  //Cat

          3)match  得到查詢數組
          var data = “123123,213,12312,312,3,Cat,cat,dsfsdfs,”;
          var reCat = /cat/gi;
          var arrMactches = data.match(reCat)
          for (var i=0;i < arrMactches.length ; i++)
          {
          alert(arrMactches[i]);   //Cat  cat
          }

          4) search  返回搜索位置  類似于indexof
          var data = “123123,213,12312,312,3,Cat,cat,dsfsdfs,”;
          var reCat = /cat/gi;
          alert(data.search(reCat));  //23

          5) replace  替換字符  利用正則替換
          var data = “123123,213,12312,312,3,Cat,cat,dsfsdfs,”;
          var reCat = /cat/gi;
          alert(data.replace(reCat,”libinqq”));

          6)split   利用正則分割數組
          var data = “123123,213,12312,312,3,Cat,cat,dsfsdfs,”;
          var reCat = /\,/;
          var arrdata = data.split(reCat);
          for (var i = 0; i < arrdata.length; i++)
          {
          alert(arrdata[i]);
          }

          3、常用表達式收集:

          "^\\d+$"  //非負整數(正整數 + 0)
          "^[0-9]*[1-9][0-9]*$"  //正整數
          "^((-\\d+)|(0+))$"  //非正整數(負整數 + 0)
          "^-[0-9]*[1-9][0-9]*$"  //負整數
          "^-?\\d+$"    //整數
          "^\\d+(\\.\\d+)?$"  //非負浮點數(正浮點數 + 0)
          "^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$"
          //正浮點數
          "^((-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$"  //非正浮點數(負浮點數 + 0)
          "^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$"
          //負浮點數
          "^(-?\\d+)(\\.\\d+)?$"  //浮點數
          "^[A-Za-z]+$"  //由26個英文字母組成的字符串
          "^[A-Z]+$"  //由26個英文字母的大寫組成的字符串
          "^[a-z]+$"  //由26個英文字母的小寫組成的字符串
          "^[A-Za-z0-9]+$"  //由數字和26個英文字母組成的字符串
          "^\\w+$"  //由數字、26個英文字母或者下劃線組成的字符串
          "^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$"    //email地址
          "^[a-zA-z]+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?$"  //url
          "^[A-Za-z0-9_]*$"。

          ============================================正則表達式基礎知識==============================================

          ^ 匹配一個輸入或一行的開頭,/^a/匹配"an A",而不匹配"An a" 
          $ 匹配一個輸入或一行的結尾,/a$/匹配"An a",而不匹配"an A" 
          * 匹配前面元字符0次或多次,/ba*/將匹配b,ba,baa,baaa 
          + 匹配前面元字符1次或多次,/ba+/將匹配ba,baa,baaa 
          ? 匹配前面元字符0次或1次,/ba?/將匹配b,ba 
          (x) 匹配x保存x在名為$1...$9的變量中 
          x|y 匹配x或y 
          {n} 精確匹配n次 
          {n,} 匹配n次以上 
          {n,m} 匹配n-m次 
          [xyz] 字符集(character set),匹配這個集合中的任一一個字符(或元字符) 
          [^xyz] 不匹配這個集合中的任何一個字符 
          [\b] 匹配一個退格符 
          \b 匹配一個單詞的邊界 
          \B 匹配一個單詞的非邊界 
          \cX 這兒,X是一個控制符,/\cM/匹配Ctrl-M 
          \d 匹配一個字數字符,/\d/ = /[0-9]/ 
          \D 匹配一個非字數字符,/\D/ = /[^0-9]/ 
          \n 匹配一個換行符 
          \r 匹配一個回車符 
          \s 匹配一個空白字符,包括\n,\r,\f,\t,\v等 
          \S 匹配一個非空白字符,等于/[^\n\f\r\t\v]/ 
          \t 匹配一個制表符 
          \v 匹配一個重直制表符 
          \w 匹配一個可以組成單詞的字符(alphanumeric,這是我的意譯,含數字),包括下劃線,如[\w]匹配"$5.98"中的5,等于[a-zA-Z0-9] 
          \W 匹配一個不可以組成單詞的字符,如[\W]匹配"$5.98"中的$,等于[^a-zA-Z0-9]。 

          posted @ 2012-08-12 23:07 往事隨風 閱讀(55047) | 評論 (0)編輯 收藏

          在瀏覽網頁時,經常會看到分頁顯示的頁面。如果想把大量的數據提供給瀏覽者,分頁顯示是個非常實用的方法。分頁顯示數據能夠幫助瀏覽者更好地查看信息,能夠有條理的顯示信息。
          在傳統的web技術中,分頁顯示的相關操作都是在服務器端進行的,服務器端獲取客戶端的請求分頁,并根據請求頁數獲取指定的結果集。最后把結果集中的數據返回到客戶端,這時返回結果中不但包含了數據,還可能包含了數據的顯示樣式。客戶端的每一次數據更新,都會重新打開一個網頁,如果網頁中包含了很多html元素,就會造成網頁打開速度較慢的情況。
          為了顯示部分數據,而需要加載整個頁面的數據,顯得有點得不償失。使用Ajax技術可以很好的彌補這些問題,服務器端只傳輸數據庫表中的數據,客戶端獲取這些數據只更新局部內容,與數據無關的其他元素保持不變。
          現在創建一個實例,以演示使用Ajax技術實現數據的分頁顯示。該實例的代碼實現分為服務器端和客戶端。

          1,準備工作


          我們這里使用Mysql數據庫,我在shop數據庫中創建了一張mobileshop表,這張表有兩個字段name,model。
          打開記事本,輸入下列代碼:

          <%@ page language="java" import="java.util.*,java.sql.*,java.io.*" pageEncoding="GBK"%>
          <%
           class DBManager{
               
          String userName="root";
              
          String password="123456";
              Connection conn
          =null;
              Statement stmt
          =null;
              
          String url="jdbc:mysql://localhost:3306/shop";
              ResultSet rst;
          public DBManager(String sql){

              try {
                  Class.forName(
          "com.mysql.jdbc.Driver");
                  conn
          =DriverManager.getConnection(url,userName,password);
                  stmt
          =conn.createStatement();
                  rst
          =stmt.executeQuery(sql);
              } catch (Exception e) {
                  
          // TODO Auto-generated catch block
                  e.printStackTrace();
              }    
          }
          public ResultSet getResultSet(){
          return rst;
          }
          }

          %>

          將上述代碼保存為Conn.jsp,用于返回查詢結果集。

          2,服務器端代碼


               在本實例中,服務器端代碼具有獲取客戶端請求頁數和產生指定記錄集的功能。打開記事本,輸入下列代碼:


          <%@ page contentType="text/html; charset=utf-8" import="java.sql.*" errorPage="" %>
          <%@ include file="Conn.jsp" %>
          <%@ page import="java.util.*" %>
          <%@ page import="java.io.*" %>
          <%
           try
           {
          ResultSet rs
          =new DBManager("select name,model from mobileshop").getResultSet();
          int intPageSize;      //一頁顯示的記錄數
          int intRowCount;      //記錄的總數
          int intPageCount;     //總頁數
          int intPage;         //待顯示的頁碼
          String strPage;
          int i;
          intPageSize
          =2;       //設置一頁顯示的記錄數
          strPage
          =request.getParameter("page");         //取得待顯示的頁碼
          if(strPage==null)             //判斷strPage是否等于null,如果是,則顯示第一頁數據
          {
          intPage
          =1;
          }
          else{
          intPage
          =java.lang.Integer.parseInt(strPage);   //將字符串轉化為整形
          }
          if(intPage<1)
          {
          intPage
          =1;
          }
          //獲取記錄總數
          rs.last();
          intRowCount
          =rs.getRow();
          //計算總頁數
          intPageCount
          =(intRowCount+intPageSize-1)/intPageSize;
          //調整顯示的頁碼
          if(intPage>intPageCount) intPage=intPageCount;
          if(intPageCount>0)
          {
          //將記錄指針定位到待顯示頁的第一條記錄上
          rs.absolute((intPage
          -1)*intPageSize+1);
          }
          //下面用于顯示數據
          i
          =0;
            StringBuffer content
          =new StringBuffer(""); 
            response.setContentType(
          "text/xml"); 
            response.setHeader(
          "Cache-Control","no-cache");
            content.append(
          "<?xml version=\"1.0\"   encoding=\"UTF-8\" ?>");
            content.append(
          "<contents>");
          while(i<intPageSize && !rs.isAfterLast())
          {
               
               
          String name=rs.getString("name");
               
          String email=rs.getString("model");
               content.append(
          "<content>");
               content.append(
          "<name>"+ name +"</name>");
               content.append(
          "<model>"+email+"</model>");
               content.append(
          "</content>");
           rs.next();
           i
          ++;
           }
           content.append(
          "</contents>");
           System.out.print(content);
           out.print(content);
           }
           catch(Exception e)
           {
           e.printStackTrace();
           }
           
          %>

          posted @ 2012-08-12 23:05 往事隨風 閱讀(1983) | 評論 (2)編輯 收藏

          網頁自動刷新功能在web網站上已經屢見不鮮了,如即時新聞信息,股票信息等,都需要不斷獲取最新信息。在傳統的web實現方式中,想要實現類似的效果,必須進行整個頁面的刷新,在網絡速度受到一定限制的情況下,這種因為一個局部變動而牽動整個頁面的處理方式顯得有些得不償失。Ajax技術的出現很好的解決了這個問題,利用Ajax技術可以實現網頁的局部刷新,只更新指定的數據,并不更新其他的數據。
             現在創建一個實例,以演示網頁的自動刷新功能,該實例模擬火車侯票大廳的顯示字幕。

          1,服務器端代碼


          該實例服務器端代碼的功能比較簡單,即產生一個隨機數,并以XML文件形式返回給客戶端。打開記事本,輸入下列代碼:

          <%@ page contentType="text/html; charset=gb2312" %>
          <%
          response.setContentType(
          "text/xml; charset=UTF-8");//設置輸出信息的格式及字符集
          response.setHeader(
          "Cache-Control","no-cache");
          out.println(
          "<response>"); 
          for(int i=0;i<2;i++){
              out.println(
          "<name>"+(int)(Math.random()*10)+"</name>");
              out.println(
          "<count>" +(int)(Math.random()*100)+ "</count>");
          }
          out.println(
          "</response>");
          out.close();
          %> 

           


          保存上述代碼,名稱為auto.jsp。在該文件中,使用java.lang包中的Math類,產生一個隨機數。

          2,客戶端代碼


          本實例客戶端代碼主要利用服務器端返回的數字,指定顯示樣式。打開記事本,輸入下列代碼

          <%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
          <head>
          <META http-equiv=Content-Type content="text/html; charset=gb2312">
          </head>
          <script language="javascript">


          var XMLHttpReq;
            
          //創建XMLHttpRequest對象       
              function createXMLHttpRequest() {
            
          if(window.XMLHttpRequest) { //Mozilla 瀏覽器
             XMLHttpReq = new XMLHttpRequest();
            }
            
          else if (window.ActiveXObject) { // IE瀏覽器
             try {
              XMLHttpReq 
          = new ActiveXObject("Msxml2.XMLHTTP");
             } 
          catch (e) {
              
          try {
               XMLHttpReq 
          = new ActiveXObject("Microsoft.XMLHTTP");
              } 
          catch (e) {}
             }
            }
           }
           
          //發送請求函數
           function sendRequest() {
            createXMLHttpRequest();
                  
          var url = "auto.jsp";
            XMLHttpReq.open(
          "GET", url, true);
            XMLHttpReq.onreadystatechange 
          = processResponse;//指定響應函數
            XMLHttpReq.send(null);  // 發送請求
           }
           
          // 處理返回信息函數
              function processResponse() {
               
          if (XMLHttpReq.readyState == 4) { // 判斷對象狀態
                   if (XMLHttpReq.status == 200) { // 信息已經成功返回,開始處理信息
              DisplayHot();
              setTimeout(
          "sendRequest()"1000);
                      } 
          else { //頁面不正常
                          window.alert("您所請求的頁面有異常。");
                      }
                  }
              }
              
          function DisplayHot() {
               
          var name = XMLHttpReq.responseXML.getElementsByTagName("name")[0].firstChild.nodeValue;
               
          var count = XMLHttpReq.responseXML.getElementsByTagName("count")[0].firstChild.nodeValue;

                     document.getElementById(
          "cheh").innerHTML = "T-"+name+"次列車"
              document.getElementById(
          "price").innerHTML = count+""
           }


          </script> 
          <body onload =sendRequest()>
          <table style="BORDER-COLLAPSE: collapse" borderColor=#5555555 cellSpacing=0 cellPadding=0 width=200     border=0>

          <TR>
             <TD align=middle bgColor=#abc2d0 height=19 colspan="2"><B>開往北京的列車</B> </TD>
          </TR>
          <tr>
             <td height="20"> 車號:</td>
             <td height="20" id="cheh"> </td>
          </tr>
          <tr>
             <td height="20"> 價格:</td>
             <td height="20" id="price"> </td>
          </tr>
          </table> 
          </body> 
           

          將上述代碼保存,名稱為autoRefresh.jsp。在該文件中,createXMLHttpRequest()函數用于創建異步調用對象;sendRequest()函數用于發送請求到客戶端;processResponse()函數用于處理服務器端的響應,在處理過程中調用DisplayHot()函數設定數據的顯示樣式。其中,setTimeout(“sendRequest()”,1000)函數的含義為每隔1秒的時間調用sendRequest()函數,該函數在Ajax頁面刷新中起了一個主導作用。DisplayHot()函數主要用于從服務器端返回的XML文件進行解析,并獲取返回數據,顯示在當前頁面。

          posted @ 2012-08-12 23:03 往事隨風 閱讀(2105) | 評論 (0)編輯 收藏

          主站蜘蛛池模板: 亳州市| 武冈市| 南靖县| 通辽市| 合川市| 繁昌县| 土默特右旗| 当阳市| 昆明市| 牟定县| 尖扎县| 津南区| 偏关县| 永济市| 绍兴县| 阜宁县| 安达市| 苏尼特右旗| 长武县| 屏山县| 安仁县| 山阴县| 南投县| 思茅市| 紫阳县| 海林市| 台中市| 揭西县| 会昌县| 和政县| 霞浦县| 青铜峡市| 慈利县| 时尚| 寿光市| 叙永县| 武功县| 黄龙县| 澄城县| 柳州市| 威远县|