ajax實現異步交互

 

        今天用ajax實現了頁面無刷新和後臺交互並更新頁面數據的功能，現在整理出來和大家分享，希望大家補充。

1、javascript代碼，實現ajax與後臺交互，在前臺頁面調用receive方法；

<script language="javascript" type="text/javascript">    
     
        var xmlHttpRequest;  //定義一個變量用於存放XMLHttpRequest對象
        //定義一個用於創建XMLHttpRequest對象的函數
        function createXMLHttpRequest()
        {
           if(window.ActiveXObject)
           {
              //IE瀏覽器的創建方式
              xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
           }else if(windew.XMLHttpRequest)
           {
              //Netscape瀏覽器中的創建方式
              xmlHttpRequest = new XMLHttpRequest();
           }
        }
        //響應HTTP請求狀態變化的函數
        function httpStateChange()
        {
           //判斷異步調用是否完成
           if(xmlHttpRequest.readyState == 4)
           {
              //判斷異步調用是否成功,如果成功開始局部更新數據
              if(xmlHttpRequest.status == 200||xmlHttpRequest.status == 0)
              {
            	 var flag = xmlHttpRequest.responseText;
            	 alert(flag);
              }else
              {
                  //如果異步調用未成功,彈出警告框,並顯示出錯信息
                   alert("異步調用出錯/n返回的HTTP狀態碼爲:"+xmlHttpRequest.status + "/n返回的HTTP狀態信息爲:" + xmlHttpRequest.statusText);
              }
            }
         }
            //異步調用服務器段數據
         function receive(id)
         {                   
            //創建XMLHttpRequest對象
            createXMLHttpRequest();
            var url = "xxx.do?method=xxx&parameter="+id;
            if(xmlHttpRequest!=null)
            {
               //創建HTTP請求
               xmlHttpRequest.open("get",url,true);
               //設置HTTP請求狀態變化的函數
               xmlHttpRequest.onreadystatechange = httpStateChange;
               //發送請求
               xmlHttpRequest.send(null);
             }
          }

     //edit 20140809 用jQuery  <pre name="code" class="javascript">$.ajax({ //一個Ajax過程 
	type: "post", 
	url : url,  
	dataType:'json',
	<pre name="code" class="javascript">        success: function(json){
	    for(var i = 0; i < json.length; i++){  //通過for循環獲取json裏面的數據
		alert(json[i].flag);
		alert(json[i].notionString);
            }
        } 

}); 

</script>

2、xmlHttpRequest.open("get",url,true) ;  通過url鏈接到後臺，前臺可以獲取到flag參數，如上httpStateChange方法，alert（flag）；

    update 20140926 返回json數組

         public void xxx(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response) throws Exception {
		<pre code_snippet_id="446311" snippet_file_name="blog_20140809_5_4894517" class="html" name="code"><span style="white-space:pre">		</span>String flag = "返回到前臺的數據";
		String data = "[{\"flag\":\"" + flag + "\",\"notionString\":\"" + notionString + "\"}]";//拼接json格式字符串

                //設置編碼格式 

                response.setContentType("text/html");
		response.setCharacterEncoding("UTF-8");
		PrintWriter out = response.getWriter();       
		out.write(<span style="font-family:Arial, Helvetica, sans-serif;">data</span>); 

        }