人在江湖

            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 人在江湖 閱讀(385) 評論(0)  編輯  收藏 所屬分類: UI & MVC
          主站蜘蛛池模板: 肇州县| 苍溪县| 乡宁县| 越西县| 常德市| 青岛市| 普兰店市| 蕉岭县| 涿州市| 仙桃市| 板桥市| 武穴市| 四川省| 岫岩| 柘城县| 康马县| 思茅市| 二手房| 通州市| 滨海县| 象山县| 金山区| 客服| 鹿泉市| 青铜峡市| 云浮市| 长垣县| 秦皇岛市| 万盛区| 长岛县| 青龙| 扶沟县| 道真| 榆树市| 吉水县| 久治县| 龙江县| 井研县| 云林县| 榆树市| 南皮县|