花花JAVA
          
		____________花花之java寒舍
	
          

          
          		
	

          

          


          
	
		
          
			


          
posts - 10,comments - 4,trackbacks - 0


          
	

          


          
	
					


          
	
	Ajax(Asynchronous JavaScript and XML,異步JavaScript與XML)，俗稱“阿賈克斯”。
          
        由4部分組成：JS + CSS + DOM + XMLHttpRequest 
          

          
案例：實現ajax異步通信，局部刷新。開發環境：tomcat服務器(必須)。。
          

          
          ajax_1_1.html：
          

          <script>    
          
          var xmlHttp;
          

          
          //創建XMLHttpRequest異步對象
          
          function createXMLHttpRequest(){
          
              if(window.ActiveXObject){
          
                  // 如果存在ActiveXObject，就是IE瀏覽器
          
                  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
          
    }          else if(window.XMLHttpRequest){
          
                  // 用于除IE以外的其他瀏覽器
          
                  xmlHttp = new XMLHttpRequest();
          
    }
          
}
          

          
          function startCallback() {
          
              if(xmlHttp.readyState == 4){ 
          
                  // 請求狀態為４，即請求完成
          
                  if(xmlHttp.status == 200){
          
                      // 服務器的狀態碼為200,即狀態OK,沒有異常，在這里做你想做的。。
          
                      alert(xmlHttp.responseText);
          
        }           
          
    }
          
}              
          

          
          function doajax(){
          
    createXMLHttpRequest();
          
              var url = "ajax_2_2.jsp";
          
    xmlHttp.open(          "GET",url,true);
          
    xmlHttp.onreadystatechange          =startCallback;
          
    xmlHttp.send(          null);
          
}
          
          </script>
          

          
          <input type="button" value="測試異步通信" onclick="doajax();">
          

          

          
將上述doajax換成 "POST" 方法請求ajax：
          
          

          //post方式請求ajax，需要設置setRequestHeader，將參數放置在send中。
          
              function doajax_post() {
          
        createXMLHttpRequest();
          
                  var par = "abcd";
          
        xmlHttp.open(          "POST", "/ajax_jquery/ajax_old/testajax.do", true);
          
                  //需要設置setRequestHeader
          
        xmlHttp.setRequestHeader("Content-Type",
          
                "application/x-www-form-urlencoded");
          
        xmlHttp.onreadystatechange           = startCallback;
          
                  //在send()方法中傳參
          
                  xmlHttp.send("param=" + par);
          
    }
          

          

          
ajax_2_2.jsp：(注意字符編碼問題)
          

          <%@ page language="java" pageEncoding="UTF-8"%>
          
異步測試成功，恭喜您！！！
          

          

          
將上述返回值的形式改為 XML： ( 只要改一下回調函數。Action中需要設置response.setContentType("text/xml;charset=utf-8"); )
          

          function callback_responseXML() {
          
                  if (xmlHttp.readyState == 4) {
          
                      if (xmlHttp.status == 200) {
          
                alert(xmlHttp.responseText);
          
                          var domObj = xmlHttp.responseXML; //返回XML格式的數據
          
                          var messageNodes = domObj.getElementsByTagName("message"); //返回的是一個數組
          
                          var textNode = messageNodes[0].firstChild; //取到文本內容對應的結點
          
                          var messageStr = textNode.nodeValue; //返回文本信息
          
                          alert(messageStr);
          
            }
          
        }
          
    }
          

          

          
*  Action返回給ajax數據的方式：response.getWriter().println("responseText");           

	
          posted on 2009-01-07 11:42 花-花 閱讀(251) 評論(1)  編輯  收藏  所屬分類: ajax_jquery 
          

          







          
	    
    


          
FeedBack:

          
	

		
          
			
          # re: ajax入門
          
			
          
				2009-01-07 12:39 | 花貓的花生
          
				
               常來看看，監督你學習，哈哈。加油，成為最牛的產品經理我當你助理，哈哈。  回復  更多評論
            
          
			
          
			
			
		
          
	








          








          

				

          



    







          
        
	




主站蜘蛛池模板：
景东|
新乐市|
德格县|
灌南县|
襄汾县|
遵化市|
灵石县|
罗江县|
松溪县|
宣汉县|
扶风县|
津南区|
汾阳市|
包头市|
乌兰察布市|
大洼县|
宜兴市|
葫芦岛市|
郸城县|
资阳市|
汝阳县|
冷水江市|
枣阳市|
林甸县|
航空|
岳阳县|
武川县|
罗甸县|
万荣县|
陇川县|
辉南县|
潞西市|
新昌县|
万州区|
尉犁县|
临海市|
望城县|
富宁县|
侯马市|
武川县|
长海县|