<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    pingpang

      BlogJava :: 首頁 :: 聯(lián)系 :: 聚合  :: 管理
      21 Posts :: 0 Stories :: 3 Comments :: 0 Trackbacks

    2012年8月12日 #

    這幾天自己琢磨起來javascript,以前都是看看沒有實(shí)戰(zhàn)過,現(xiàn)在覺得實(shí)戰(zhàn)起來果然錯誤多多,以后要不斷總結(jié)錯誤,關(guān)鍵可以減少調(diào)試時間,菜鳥啊:

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

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

    var bojingNum = 0;
    //定義一個變量用來存儲xmlHttpRequest對象
      var xmlHttp=null;
      //該函數(shù)用于創(chuàng)建一個xmlHttpRequest對象
      function createXMLHttpRequest()
      {
        if (window.ActiveXObject)//ActiveXObject這個對象是IE瀏覽器提供的控件,所以有的網(wǎng)銀只支持這樣的控件的IE瀏覽器
        {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE瀏覽器生成的對象
            
        } else if (window.XMLHttpRequest)//除了IE外的其他瀏覽器
        {
            xmlHttp = new XMLHttpRequest();
        }
      }
      //這是一個通過ajax刷新統(tǒng)計圖的方法
      function  autoFlush()
      {
          //創(chuàng)建日期變量時間變量
          var tempTime = new Date();
          var tempParameter = tempTime.getTime();
          //創(chuàng)建一個xmlHttpRequest對象
          createXMLHttpRequest();
          if(xmlHttp!=null)
          {
          //這里放置一個時間參數(shù)是為了讓服務(wù)器知道這是一個新的請求
          xmlHttp.open("GET", "SerialDataSvt?tmd="+tempParameter);
           //將狀態(tài)觸發(fā)器綁定到一個函數(shù)
          xmlHttp.onreadystatechange=processor;
          
          //請求發(fā)送
          xmlHttp.send(null);
          }
         
          
      }
      //處理從服務(wù)器返回的xml文檔
      function processor()
      {
          //定義一個變量用于存儲從服務(wù)器返回的結(jié)果
          var  result;
          if(xmlHttp.readyState==4)//如果響應(yīng)完成
              {
                 if(xmlHttp.status==200)//如果返回成功
                     {
                    
                       //取出服務(wù)器返回的xml文檔的所有counter標(biāo)簽的子節(jié)點(diǎn)
                     result = xmlHttp.responseXML.getElementsByTagName("data");//alert(result);
                
                    //解析xml中的數(shù)據(jù)并更新統(tǒng)計圖狀態(tài)
                    
                     for(var i = 0 ; i < result.length; i++)
                         {
                              //用于統(tǒng)計數(shù)據(jù)更新統(tǒng)計圖片狀態(tà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="預(yù)警次數(shù):"+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; 
              
                         }
                     }
              }  
      }
      //每隔一秒就執(zhí)行一次autoFlush方法
     setInterval(autoFlush, 2000);

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

    昨天看到C#群里有人問一個投票功能如何實(shí)現(xiàn)...

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

    投票功能使用jQuery實(shí)現(xiàn)..純html代碼...數(shù)據(jù)通過json字符串傳遞,通過 eval轉(zhuǎn)換為json對象

    投票功能分為:

    1.設(shè)置投票內(nèi)容:



    2.投票:



    3.投票結(jié)果:


    文件列表:



    傳值:

    {
        info: 
    "   由京東針對國美蘇寧發(fā)起的新一輪電商大戰(zhàn)隨著當(dāng)當(dāng)、易訊等企業(yè)的“亂入”,正演變?yōu)檎麄€國內(nèi)電商行業(yè)的混戰(zhàn)。電商“8.15”價格戰(zhàn)誰會是最后的贏家?今年的電商排位戰(zhàn),誰能笑到最后?<br/><br/>1.今年是電商排位戰(zhàn),你最看好誰?<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: 
    "當(dāng)當(dāng)網(wǎng)",
            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 往事隨風(fēng) 閱讀(2550) | 評論 (0)編輯 收藏

    jQuery對象初始化的傳參方式包括:
    1.$(DOMElement)
    2.$('<h1>...</h1>'), $('#id'), $('.class') 傳入字符串, 這是最常見的形式, 這種傳參數(shù)經(jīng)常也傳入第二個參數(shù)context指定上下文,其中context參數(shù)可以為$(...), 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)這幾種參數(shù),直接返回this
            if ( !selector ) {
                return this;
            }

            // 當(dāng)傳參selector為DOM結(jié)點(diǎn)時,將context置為selector
            if ( selector.nodeType ) {
                this.context = this[0] = selector;
                this.length = 1;
                return this;
            }

            // Handle HTML strings
            // 當(dāng)傳入的selector參數(shù)為字符串時,
            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
            // 當(dāng)selector為function時相當(dāng)于$(document).ready(selector);
            } else if ( jQuery.isFunction( selector ) ) {
                return rootjQuery.ready( selector );
            }

            // 當(dāng)selector參數(shù)為{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 往事隨風(fēng) 閱讀(1803) | 評論 (0)編輯 收藏

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

       JavaScript正則實(shí)戰(zhàn)(會根據(jù)最近寫的不斷更新)

    1、javascript 正則對象替換創(chuàng)建 和用法: /pattern/flags  先簡單案例學(xué)習(xí)認(rèn)識下replace能干什么

        正則表達(dá)式構(gòu)造函數(shù): new RegExp("pattern"[,"flags"]); 

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

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

    //下面的例子用來獲取url的兩個參數(shù),并返回urlRewrite之前的真實(shí)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);

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

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

    //方法四
    //方式四和方法三很類似, 除了返回替換后的字符串外,還可以單獨(dú)獲取參數(shù)
    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、 學(xué)習(xí)最常用的 test exec match search  replace  split 6個方法

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

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

    3)match  得到查詢數(shù)組
    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   利用正則分割數(shù)組
    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á)式收集:

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

    ============================================正則表達(dá)式基礎(chǔ)知識==============================================

    ^ 匹配一個輸入或一行的開頭,/^a/匹配"an A",而不匹配"An a" 
    $ 匹配一個輸入或一行的結(jié)尾,/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 匹配一個字?jǐn)?shù)字符,/\d/ = /[0-9]/ 
    \D 匹配一個非字?jǐn)?shù)字符,/\D/ = /[^0-9]/ 
    \n 匹配一個換行符 
    \r 匹配一個回車符 
    \s 匹配一個空白字符,包括\n,\r,\f,\t,\v等 
    \S 匹配一個非空白字符,等于/[^\n\f\r\t\v]/ 
    \t 匹配一個制表符 
    \v 匹配一個重直制表符 
    \w 匹配一個可以組成單詞的字符(alphanumeric,這是我的意譯,含數(shù)字),包括下劃線,如[\w]匹配"$5.98"中的5,等于[a-zA-Z0-9] 
    \W 匹配一個不可以組成單詞的字符,如[\W]匹配"$5.98"中的$,等于[^a-zA-Z0-9]。 

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

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

    1,準(zhǔn)備工作


    我們這里使用Mysql數(shù)據(jù)庫,我在shop數(shù)據(jù)庫中創(chuàng)建了一張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,用于返回查詢結(jié)果集。

    2,服務(wù)器端代碼


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


    <%@ 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;      //一頁顯示的記錄數(shù)
    int intRowCount;      //記錄的總數(shù)
    int intPageCount;     //總頁數(shù)
    int intPage;         //待顯示的頁碼
    String strPage;
    int i;
    intPageSize
    =2;       //設(shè)置一頁顯示的記錄數(shù)
    strPage
    =request.getParameter("page");         //取得待顯示的頁碼
    if(strPage==null)             //判斷strPage是否等于null,如果是,則顯示第一頁數(shù)據(jù)
    {
    intPage
    =1;
    }
    else{
    intPage
    =java.lang.Integer.parseInt(strPage);   //將字符串轉(zhuǎn)化為整形
    }
    if(intPage<1)
    {
    intPage
    =1;
    }
    //獲取記錄總數(shù)
    rs.last();
    intRowCount
    =rs.getRow();
    //計算總頁數(shù)
    intPageCount
    =(intRowCount+intPageSize-1)/intPageSize;
    //調(diào)整顯示的頁碼
    if(intPage>intPageCount) intPage=intPageCount;
    if(intPageCount>0)
    {
    //將記錄指針定位到待顯示頁的第一條記錄上
    rs.absolute((intPage
    -1)*intPageSize+1);
    }
    //下面用于顯示數(shù)據(jù)
    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 往事隨風(fēng) 閱讀(1979) | 評論 (2)編輯 收藏

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

    1,服務(wù)器端代碼


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

    <%@ page contentType="text/html; charset=gb2312" %>
    <%
    response.setContentType(
    "text/xml; charset=UTF-8");//設(shè)置輸出信息的格式及字符集
    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類,產(chǎn)生一個隨機(jī)數(shù)。

    2,客戶端代碼


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

    <%@ 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;
      
    //創(chuàng)建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) {}
       }
      }
     }
     
    //發(fā)送請求函數(shù)
     function sendRequest() {
      createXMLHttpRequest();
            
    var url = "auto.jsp";
      XMLHttpReq.open(
    "GET", url, true);
      XMLHttpReq.onreadystatechange 
    = processResponse;//指定響應(yīng)函數(shù)
      XMLHttpReq.send(null);  // 發(fā)送請求
     }
     
    // 處理返回信息函數(shù)
        function processResponse() {
         
    if (XMLHttpReq.readyState == 4) { // 判斷對象狀態(tài)
             if (XMLHttpReq.status == 200) { // 信息已經(jīng)成功返回,開始處理信息
        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()函數(shù)用于創(chuàng)建異步調(diào)用對象;sendRequest()函數(shù)用于發(fā)送請求到客戶端;processResponse()函數(shù)用于處理服務(wù)器端的響應(yīng),在處理過程中調(diào)用DisplayHot()函數(shù)設(shè)定數(shù)據(jù)的顯示樣式。其中,setTimeout(“sendRequest()”,1000)函數(shù)的含義為每隔1秒的時間調(diào)用sendRequest()函數(shù),該函數(shù)在Ajax頁面刷新中起了一個主導(dǎo)作用。DisplayHot()函數(shù)主要用于從服務(wù)器端返回的XML文件進(jìn)行解析,并獲取返回數(shù)據(jù),顯示在當(dāng)前頁面。

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

    主站蜘蛛池模板: 亚洲综合婷婷久久| 亚洲一卡2卡4卡5卡6卡在线99| 亚洲春色另类小说| 久久精品国产亚洲AV| 国产精品区免费视频| 午夜免费不卡毛片完整版| 国产午夜亚洲不卡| 91丁香亚洲综合社区| 国产精品视频全国免费观看| 国产又大又粗又长免费视频| 亚洲黄片毛片在线观看| 亚洲一区二区三区四区视频 | 免费国产成人18在线观看| 最近中文字幕mv免费高清视频7| 亚洲国产日韩在线视频| 亚洲欧美国产日韩av野草社区| 免费人成在线观看视频高潮| 成人爱做日本视频免费| 99久久精品国产亚洲| 免费中文字幕视频| 97免费人妻无码视频| 亚洲日产无码中文字幕| 亚洲av无码专区亚洲av不卡| 日韩精品人妻系列无码专区免费 | 国产精品成人免费综合| 久久丫精品国产亚洲av不卡| 四虎国产精品成人免费久久 | 亚洲国产精品成人综合色在线婷婷| 牛牛在线精品观看免费正| 99在线视频免费观看视频| 亚洲V无码一区二区三区四区观看| 国产亚洲午夜精品| 一个人免费高清在线观看| 亚洲AV无码久久| 成人午夜免费视频| 免费看美女让人桶尿口| 亚洲综合区图片小说区| 最新亚洲成av人免费看| 亚洲av午夜精品一区二区三区| 日本亚洲色大成网站www久久| 3d动漫精品啪啪一区二区免费|