原生ajax詳解

標籤：伺服器   eva   dev   art   inf   tool   部落格   cal   dom   

原生Ajax:

Ajax基礎:
--ajax:無重新整理資料讀取,讀取伺服器上的資訊
--HTTP要求方法:
    --GET:用於擷取資料,如瀏覽文章
    --POST:用於上傳資料,如使用者註冊

--GET與POST的區別:
    GET:--通過網址傳遞(放入url中),會將傳遞的資料放到網址上面,--名字=值&名字=值
        --get方式容量小
        --安全性低
        --有緩衝
    POST:--不通過網址傳遞
         --post容量較大,一般可達2G
         --安全性相對較高
         --沒有緩衝


原生Ajax的編寫:
Ajax運行步驟:
  1.建立一個Ajax對象
    非IE6瀏覽器:var oAjax=new XMLHttpRequest();
    IE6瀏覽器:var oAjax=new ActiveXObject("Microsoft.XMLHTTP");

  2.串連到伺服器
    oAjax.open(方法,檔案名稱,非同步傳輸);
    阻止緩衝方法:
      oAjax.open(‘GET‘,‘a.txt?t=‘+new Date().getTime(),true);
      --同步:js中指事情必須一件一件來
      --非同步:js中指多件事情要一起做
      --ajax是做非同步傳輸的,並不是同步

  3.發送請求
    oAjax.send();

  4.接收傳回值
    請求狀態監控:onreadystatechange事件:當自己的Ajax與伺服器之間有通訊時觸發
    主要通過readyState屬性來判斷結束沒有,結束了也並沒有代表成功,status屬性來判斷
    1.--readyState屬性:請求狀態
        　--0(未初始化)還沒有調用open方法
        　--1(載入)已經調用send()方法,正在發送請求
        　--2(載入完成)send()方法完成,已經收到全部相應內容
        　--3(解析)正在解析收到的響應內容
        　--4(完成)響應內容解析完成,可以在用戶端調用(完成並不一定成功,需要status來檢測是成功還是失敗)
    2.--status屬性:請求結果,是成功(200)還是失敗(404):oAjax.status==200
    3.--傳回值responseText:從伺服器返回來的文本:oAjax.responseText
          (返回的值是一個字串,有時需要進一步處理成其他格式的形式)
    　oAjax.onreadystatechange=function(){
      　//oAjax.readyState: 表示瀏覽器和伺服器之間進行到哪一步了
     　 if(oAjax.readyState==4){  //讀取完成
        　if(oAjax.status==200){  //讀取的結果是成功
          　alert(‘成功:‘+oAjax.responseText);
       　 }
      　}
    　}

將原生Ajax封裝成一個函數使用,最終編寫的原生Ajax為:
1) GET方法封裝的函數為:
　　function ajax(url,fnSuccess,fnFaild){
  　　//1.建立Ajax對象
  　　//js中,使用一個沒有定義的變數會報錯,使用一個沒有定義的屬性,是undefined
  　　//IE6下使用沒有定義的XMLHttpRequest會報錯,所以當做window的一個屬性使用
  　　if (window.XMLHttpRequest) {
    　　//非IE6
    　　var oAjax=new XMLHttpRequest();
  　　}else{
    　　//IE6
    　　var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
  　　}

  　　//2.串連到伺服器
  　　oAjax.open(‘GET‘,url,true);

  　　//3.發送請求
  　　oAjax.send();

  　　//4.接收傳回值
  　oAjax.onreadystatechange=function(){
    　　//oAjax.readyState--瀏覽器和伺服器之間進行到哪一步了
    　 if(oAjax.readyState==4){  //讀取完成
      　　if(oAjax.status==200){  //讀取的結果是成功
        　　　　fnSuccess(oAjax.responseText); //成功時執行的函數
      　　  }else{
        　　   if(fnFaild){   //判斷是否傳入失敗是的函數,即使用者是否關心失敗時的結果
          　　　　 fnFaild(oAjax.responseText);  //對失敗的原因做出處理
        　　   }
      　　  }
    　　 }
  　　}
　 }

 

2)POST方法封裝的函數為:
　　function ajaxPost(url,id,fnSuccess,fnFaild){
  　　//1.建立Ajax對象
 　　 if (window.XMLHttpRequest) {
    　　//非IE6
    　　var xhr=new XMLHttpRequest();
  　　}else{
    　　//IE6
   　　 var xhr=new ActiveXObject("Microsoft.XMLHTTP");
 　　 }
  　　//2.串連到伺服器
  　　xhr.open("POST",url,true);
  　　//設定頭資訊
  　　xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  　　var form=document.getElementById(id);
  　　//3.發送請求，傳遞資料
  　　xhr.send(serialize(form));
  　　xhr.onreadystatechange=function(){
    　　if(xhr.readyState==4){
      　　if ((xhr.status>=200 && xhr.status<300) || xhr.status==304) {
        　　fnSuccess(xhr.responseText);
     　　 }else{
        　　fnFaild(xhr.responseText);
      　　}
    　　}
  　　};
　　}


注**
1--字元集編碼:網頁和被請求的檔案的編碼要相同,如都是utf8
2--緩衝,阻止緩衝(經常改變的資料等,不能夠緩衝.主要用於GET方法)
  --傳參時在路徑後面加?+‘可變的資料‘ 可以不影響原資料
    ajax(‘a.txt?t=‘+new Date().getTime(),function(str){
      alert(str);
    },function(str){
      alert(str);
    });

3--ajax請求動態資料:如json檔案
    3.1--ajax傳回值是一個字串,可通過eval轉換後來讀取返回的數組/json資料
        alert(str);
        alert(typeof(str));
        var arr=eval(str);
        alert(typeof(arr));
        alert(arr[1]);
        alert(arr[1].c);

    3.2--結合DOM建立元素,來顯示返回的內容
      oBtn.onclick=function(){
        ajax(‘data/arr3.txt?t=‘+new Date().getTime(),function(str){
          var arr=eval(str);
          for (var i = 0; i < arr.length; i++) {
            var oLi=document.createElement(‘li‘);
            oLi.innerHTML=‘使用者名稱:<span>‘+arr[i].user+‘</span>密碼:<span>‘+arr[i].pass+‘</span>‘;
            oUl.appendChild(oLi);
          }
        },function(str){
          alert(str);
        });
      }

4--資料類型-->返回的資料類型可能是xml(幾乎已經淘汰),json(現在常用)

 

樣本1：原生Ajax向伺服器請求資料(即GET方法)

　　data/arr3.txt為:[{user:‘blue‘,pass:‘123‘},{user:‘red‘,pass:‘234‘},{user:‘yellow‘,pass:‘567‘}]

 1 HTML代碼: 2 <input type="button" name="" value="按鈕" id="btn1"> 3 <ul id="ul"></ul> 4  5  6 JS代碼: 7 <script type="text/javascript"> 8 var oBtn=document.getElementById(‘btn1‘); 9 var oUl=document.getElementById(‘ul‘);10 11 oBtn.onclick=function(){12       ajax(‘data/arr3.txt?t=‘+new Date().getTime(),function(str){13            var arr=eval(str);14            for (var i = 0; i < arr.length; i++) {15               var oLi=document.createElement(‘li‘);16               oLi.innerHTML=‘使用者名稱:<span>‘+arr[i].user+‘</span>密碼:<span>‘+arr[i].pass+‘</span>‘;17               oUl.appendChild(oLi);18         }19       },function(str){20             alert(str);21       });22     };23 24 25 function ajax(url,fnSuccess,fnFaild){26   //1.建立Ajax對象27   //js中,使用一個沒有定義的變數會報錯,使用一個沒有定義的屬性,是undefined28   //IE6下使用沒有定義的XMLHttpRequest會報錯,所以當做window的一個屬性使用29   if (window.XMLHttpRequest) {30     //非IE631     var oAjax=new XMLHttpRequest();32   }else{33     //IE634     var oAjax=new ActiveXObject("Microsoft.XMLHTTP");35   }36   //2.串連到伺服器37   oAjax.open(‘GET‘,url,true);38   //3.發送請求39   oAjax.send();40   //4.接收傳回值41   oAjax.onreadystatechange=function(){42     //oAjax.readyState--瀏覽器和伺服器之間進行到哪一步了43     if(oAjax.readyState==4){  //讀取完成44       if(oAjax.status==200){  //讀取的結果是成功45         fnSuccess(oAjax.responseText); //成功時執行的函數46       }else{47         if(fnFaild){   //判斷是否傳入失敗是的函數,即使用者是否關心失敗時的結果48           fnFaild(oAjax.responseText);  //對失敗的原因做出處理49         }50       }51     }52   }53 }54 <script>

 

樣本2：原生Ajax向伺服器發送資料(即POST方法)
        這裡用到了表單序列化，將表單序列化之後再傳遞給後台，序列化內容見部落格“表單序列化”。
        後台資料:data/postexample.php

<?php
  header("Content-Type:text/plain");
  echo <<<EOF
  Name:{$_POST[‘username‘]}
  Email:{$_POST[‘userpass‘]}
EOF;
?>　　

  1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4   <meta charset="UTF-8">  5   <meta name="viewport" content="width=device-width, initial-scale=1.0">  6   <meta http-equiv="X-UA-Compatible" content="ie=edge">  7   <title>原生ajaxPost</title>  8 </head>  9 <body> 10   <form id="user-info"> 11     <label>使用者名稱:</label><input type="text" name="username" value=""> 12     <label>密碼:</label><input type="text" name="userpass" value=""> 13     <input type="button" name="" value="按鈕2" id="btn2"> 14   </form> 15  16  17   <script type="text/javascript"> 18     window.onload=function(){ 19       var oBtn2=document.getElementById(‘btn2‘); 20       var oUl=document.getElementById(‘ul‘); 21  22       oBtn2.onclick=function(){ 23         ajaxPost(‘data/postexample.php?t=‘+new Date().getTime(),"user-info",function(str){ 24           //當後台返回的是json資料時,可以用eval(函數來處理)，與get方法類似 25           alert(str); 26         },function(str){ 27           alert(str); 28         }); 29       }; 30     } 31  32  33     //封裝的ajaxPost函數 34     function ajaxPost(url,id,fnSuccess,fnFaild){ 35       //1.建立Ajax對象 36       if (window.XMLHttpRequest) { 37         //非IE6 38         var xhr=new XMLHttpRequest(); 39       }else{ 40         //IE6 41         var xhr=new ActiveXObject("Microsoft.XMLHTTP"); 42       } 43       //2.串連到伺服器 44       xhr.open("POST",url,true); 45       //設定頭資訊 46       xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 47       var form=document.getElementById(id); 48       //3.發送請求，傳遞資料 49       xhr.send(serialize(form)); 50       xhr.onreadystatechange=function(){ 51         if(xhr.readyState==4){ 52           if ((xhr.status>=200 && xhr.status<300) || xhr.status==304) { 53             fnSuccess(xhr.responseText); 54           }else{ 55             fnFaild(xhr.responseText); 56           } 57         } 58       }; 59     } 60  61  62  63     //表單序列化函數 64     function serialize(form){ 65       var parts=[], 66           field=null, 67           i, 68           len, 69           j, 70           optLen, 71           option, 72           optValue; 73           for (i = 0; i < form.elements.length; i++) { 74             field=form.elements[i]; 75             switch (field.type) { 76               case ‘select-one‘: 77               case ‘select-multiple‘: 78               if(field.name.length){ 79                 for (var j = 0; j < field.options.length; j++) { 80                   option=field.options[j]; 81                   if (option.selected) { 82                     optValue=""; 83                     if (option.hasAttribute) { 84                       optValue=(option.hasAttribute(‘value‘) ? option.value : option.text); 85                     }else{ 86                       optValue=(option.attribute[‘value‘].specified ? option.value : option.text); 87                     } 88                     parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue)); 89                   } 90                 } 91               } 92               break; 93               case undefined:   //欄位集 94               case "file":      //文本輸入 95               case "submit":    //提交按鈕 96               case "reset":     //重設按鈕 97               case "button":    //自訂按鈕 98                 break; 99               case "radio":    //選項按鈕100               case "checkbox": //複選框101                 if (!field.checked) {102                   break;103                 }104                 //執行預設操作105               default:106                 //不包含沒有名字的表單欄位107                 if(field.name.length){108                   parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));109                 }110             }111           }112           return parts.join("&");113     }114 115   </script>116 </body>117 </html>

原生ajax詳解