學習筆記：ajax使用規則講解

標籤：http   java   使用   os   io   檔案   資料   for   

ajax: 局部資料更新：
1.ajax 由 html css Dhtml  js xml json dom 的一種結合.
　　ajax 是一種技術，它是一種解決方案。  具有一些互動性的不需要頁面重新整理，減少使用者的心理等待時間，並能夠及時響應資料的一種解決方案
2.ajax 的特點：
    ajax 是基於標準的html css xml的構造
    使用dom對象動態顯示和互動資料
    它的資料互動格式 文字格式設定 xml  json
    使用基於瀏覽器的xmlHTTPRquest 對象進行資料同步的
    使用js 進行任意的綁定資料
3.不能使用ajax 的地方：  資料及時性的部分  大量的文本替換  導航部分
4.對不同瀏覽器的調用方法

new XMLHttpRequest();  ie8以上 Firefox等其他符合w3c標準瀏覽器的xmlhttpRequest對象
new ActiveXObject("Msxml2.XMLHTTP");  ie7 ie6
產生ajax所需的xmlhttp 對象
  var xmlhttp;
        function ajax(){
            try{
                xmlhttp=new XMLHttpRequest()
            }catch(e){
                try{
                   xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");  
                } catch(e){
                    alert("你的瀏覽器是骨灰級，請升級");
                    return false;
                }
            }
        }

5. xmlhttp.open("資料傳遞方式",url,true);開啟一個非同步資料傳送
   如果需要伺服器返回資料那麼調用xmlhttp的onreadystatechange設定一個回呼函數.
   xmlhttp.onreadystatechange=回呼函數;
   xmlhttp.send()； 發送
   如果資料傳遞方式 是 get  send(null)
   post  send(資料)
   get較為簡單  post較為複雜
6.xmlhttp實現ajax資料非同步傳輸的5種狀態
    0---建立 xmlhttpRequest 對象
    1---調用open 方法
    2. ---發送send
    3.---伺服器正在接受和處理但是沒有完成
    4.--伺服器處理完成，用戶端完成整個流程
 所以我們在處理回呼函數的時候需要判斷 當前的xmlhttRequest 對象是否已經完成了它的5種狀態.
  xmlhttp.readState==4
 7.xmlhttp.status 表示當前瀏覽器狀態  http 協議規定 瀏覽器狀態是 200 
   xmlhttp.status==200
  xmlhttp.responseText 以文本的方式接收伺服器端的返回.
  401 未授權
  403  禁止訪問
  404  訪問的檔案未找到
  500 伺服器內部發生錯誤
8.  encodeURIComponent()//對所傳字串進行編碼！防止亂碼！
_________________________________________
  <script type="text/javascript">
      //  var xmlhttp=new XMLHttpRequest();
    function getVal(){
       ajax();
       var url=‘11.php?username=zhangsan&‘+Math.random();
        xmlhttp.open(‘GET‘,url,true);
        xmlhttp.onreadystatechange=test;
        xmlhttp.send(null);
     }
     function test(){
         if(xmlhttp.readyState==4 && xmlhttp.status==200){
              //  alert(xmlhttp.responseText);
                var myspan=document.getElementById(‘myspan‘);
               var text=xmlhttp.responseText;
                if(text==‘1‘){
                    myspan.innerHTML=‘請重新換一個使用者名稱，該使用者名稱已經被註冊‘;   
                }else{
                     myspan.innerHTML=‘該使用者名稱允許註冊‘;   
              
         }
     }
     
  </script>

-----------------------------------------
9.post方式
<script type="text/javascript">
     function dj(id){
         ajax();
         var data="id="+id+"&type=x";
         var url=‘12.php‘;
         xmlhttp.open("POST",url,true);
         xmlhttp.onreadystatechange=callback;
         // 告訴瀏覽器當前資料發送長度 以及類型  header  
         xmlhttp.setRequestHeader("content-length",data.length);
         xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
          xmlhttp.send(data);
     }
     
     function callback(){
         if(xmlhttp.readyState==4 && xmlhttp.status==200){
              alert(xmlhttp.responseText);
         }
     }
  </script>