人在江湖

            BlogJava :: 首頁 :: 聯系 :: 聚合  :: 管理
            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:它可以取代異步調用傳輸的xml

          posted on 2011-03-16 15:54 人在江湖 閱讀(386) 評論(0)  編輯  收藏 所屬分類: UI & MVC
          主站蜘蛛池模板: 米易县| 太康县| 达州市| 吉林省| 白城市| 永济市| 贞丰县| 上林县| 遵义县| 巩留县| 商丘市| 台南市| 乐亭县| 宁河县| 建湖县| 安庆市| 武宁县| 阿巴嘎旗| 江山市| 宁海县| 河曲县| 伊吾县| 白银市| 海淀区| 阳山县| 海伦市| 开远市| 苍南县| 凤翔县| 余江县| 斗六市| 甘南县| 渝北区| 镇赉县| 新邵县| 玉林市| 屏山县| 平昌县| 甘谷县| 图片| 承德县|