人在江湖

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

          Ajax是一組技術的集合:javascript, css, DOM, XMLHttpRequest.

          其中XMLHttpRequest是達到異步效果的核心部件。

          一個異步的例子,摘自Ajax in Action:

             1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
             2: "http://www.w3.org/TR/html4/loose.dtd">
             3: <html>
             4: <head>
             5: <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
             6: <title>無標題文檔</title>
             7: <script type="text/javascript">
             1:  
             2: var req=null;
             3: var console=null;
             4: var READY_STATE_UNINITIALIZED=0;
             5: var READY_STATE_LOADING=1;
             6: var READY_STATE_LOADED=2;
             7: var READY_STATE_INTERACTIVE=3;
             8: var READY_STATE_COMPLETE=4;
             9: function sendRequest(url,params,HttpMethod)
            10: {
            11:    if(!HttpMethod)
            12:    {
            13:      HttpMethod="GET";
            14:    }
            15:    req=initXMLHTTPRequest();
            16:    if(req)
            17:    {
            18:       req.onreadystatechange=onReadyState;
            19:       req.open(HttpMethod,url,true);
            20:       req.setRequestHeader("Content-Type","appplication/x-www-form-urlencoded");
            21:       req.send(params);
            22:    } 
            23: }
            24:  
            25: function initXMLHTTPRequest()
            26: {
            27:   var xRequest=null;
            28:   if(window.XMLHttpRequest)
            29:   {
            30:      xRequest=new XMLHttpRequest();
            31:   }
            32:   else if(window.ActiveXObject)
            33:   {
            34:      xRequest=new ActiveXObject("Microsoft.XMLHTTP");
            35:    }
            36:    return xRequest;
            37:   
            38: }
            39:  
            40: function onReadyState()
            41: {
            42:   var ready=req.readyState;
            43:   var data=null;
            44:   if(ready==READY_STATE_COMPLETE)
            45:   {
            46:      data=req.responseText;
            47:   }
            48:   else
            49:   {
            50:      data="loading...["+ready+"]";
            51:   }
            52:   toConsole(data);
            53:   
            54: }
            55:  
            56: function toConsole(data)
            57: {
            58:   if(console!=null)
            59:   {
            60:      var newline=document.createElement("div");
            61:      console.appendChild(newline);
            62:      var txt=document.createTextNode(data);
            63:      newline.appendChild(txt);
            64:   }
            65: }  
            66:   window.onload=function()
            67:   {
            68:     console=document.getElementById("console");
            69:     sendRequest("data.txt"");
            70:   }
            71:  
          </script>
             8: </head>
             9:  
            10: <body>
            11: <div id="console">aaa</div>
            12:  
            13: </body>
            14: </html>

          注意其中 req.onreadystatechange=onReadyState;就是定義了callback handler

          以后需要關注的一些方面:

          DWR: http://directwebremoting.org/dwr/index.html 適合后端為Java的應用. DWR和jQuery是可以混合使用的。

          JSON:它可以取代異步調(diào)用傳輸?shù)膞ml

          posted on 2011-03-16 15:54 人在江湖 閱讀(380) 評論(0)  編輯  收藏 所屬分類: UI & MVC
          主站蜘蛛池模板: 华容县| 安龙县| 舞阳县| 麻江县| 永胜县| 盱眙县| 马龙县| 平和县| 会昌县| 盐山县| 将乐县| 平南县| 兰西县| 大洼县| 罗源县| 苍南县| 镶黄旗| 平定县| 安乡县| 抚远县| 锡林郭勒盟| 左权县| 古丈县| 永济市| 黔西县| 通辽市| 宁蒗| 瑞金市| 中山市| 四子王旗| 长丰县| 玛纳斯县| 阳原县| 微博| 印江| 荣昌县| 白河县| 重庆市| 吉水县| 宝应县| 舟山市|