用原生JavaScript寫AJAX

標籤：fun   field   src   代碼   同步   ext   blog   解決   發送   

//原生js寫ajax就像打電話

//打電話分下面4步
//1.拿出手機
//2.撥號
//3.說話
//4.聽對方說話

//ajax也分下面4步
//1.建立ajax對象
//2.串連到伺服器
//3.發送請求（告訴伺服器我要什麼檔案）
//4.接收傳回值

下面是原生js寫ajax的具體寫法

<script>window.onload=function(){    var oBtn = document.getElementById("btn1");    oBtn.onclick = function()    {        //1.建立ajax對象        //只相容非ie6的瀏覽器，在ie6瀏覽器上運行會提示沒有被定義        //var oAjax = new XMLHttpRequest();//這才是ajax實際的請求        //alert(oAjax);                //ie6瀏覽器下按照下面方法寫,但是在別的瀏覽器中不能用，會報錯。        //var oAjax = new ActiveXObject("Microsoft.XMLHTTP");        //alert(oAjax);                //鑒於上面出現的問題，可以採取下面的方法解決，用if判斷是否為IE6瀏覽器        if(window.XMLHttpRequest)//如果有XMLHttpRequest，那就是非IE6瀏覽器。()裡面加window的原因下面會有描述。        {            var oAjax = new XMLHttpRequest();//建立ajax對象        }        else//如果沒有XMLHttpRequest，那就是IE6瀏覽器        {            var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6瀏覽器建立ajax對象        }                //2.串連伺服器        //open(方法、檔案名稱、非同步傳輸）        //方法：            //傳輸方式是get方式還是post方式。        //檔案名稱            //告訴伺服器要讀哪個檔案        //非同步傳輸            //非同步：多件事一件一件的做            //同步：多件事情一起進行            //但是js裡面的同步和非同步和現實的同步非同步相反。                //同步：多件事一件一件的做                //非同步：多件事情一起進行        //ajax天生是用來做非同步                oAjax.open("GET","a.txt?t=‘+new Date().getTime()",true);//加上t=‘+new Date().getTime()"的目的是為了消除緩衝，每次的t的值不一樣。                //3.發送請求        oAjax.send();                //4.接收返回        //用戶端和伺服器端有互動的時候會調用onreadystatechange        oAjax.onreadystatechange=function()        {            //oAjax.readyState  //瀏覽器和伺服器，進行到哪一步了。                //0->（未初始化）：還沒有調用 open() 方法。                //1->（載入）：已調用 send() 方法，正在發送請求。                //2->載入完成）：send() 方法完成，已收到全部響應內容。                //3->（解析）：正在解析響應內容。                //4->（完成）：響應內容解析完成，可以在用戶端調用。            if(oAjax.readyState==4)            {                if(oAjax.status==200)//判斷是否成功,如果是200，就代表成功                {                    alert("成功"+oAjax.responseText);//讀取a.txt檔案成功就彈出成功。後面加上oAjax.responseText會輸出a.txt文本的內容                }                else                {                    alert("失敗");                }            }        };    }};/*//上面if裡面需要些window的原因//js裡面的變數和屬性var a = 12;alert(a);//頁面上彈出12很正常，而實際上輸出的是下面的寫法，是屬於window的，只是window能省就省了。alert(window.a);//輸出結果是一樣的window.alert(window.a);//想a這種全域變數實際上是winow的一個屬性。//如果不定義一個變數a直接像下面那樣輸出aalert(a)//系統會報錯，而不是undefind，因為沒有定義變數a。alert(window.a);//如果是這樣寫，系統就不會報錯了，會顯示undefind。//出現上面的原因是因為直接寫a從根上就找不到a，而前面加上window只是找不到window的屬性a了。*/</script>

但是，不能每次用ajax的時候都寫那麼多代碼，要把這段ajax代碼封裝起來，方便使用。

封裝ajax

//最後把代碼封裝起來,封裝起來以後，要給這個函數加上一個參數url.參數是為了替換要讀取的檔案名稱function ajax(url,fnSucc){    if(window.XMLHttpRequest)        {            var oAjax = new XMLHttpRequest();        }        else        {            var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6瀏覽器建立ajax對象        }        oAjax.open("GET",url,true);//把要讀取的參數的傳過來。        oAjax.send();        oAjax.onreadystatechange=function()        {            if(oAjax.readyState==4)            {                if(oAjax.status==200)                {                    fnSucc(oAjax.responseText);//成功的時候調用這個方法                }                else                {                    if(fnfiled)                    {                        fnField(oAjax.status);                    }                }            }        };}

將封裝的ajax調用

<script src="new_ajax.js"></script>//引用封裝的ajax檔案<script>window.onload=function(){    var oBtn = document.getElementById("btn1");    oBtn.onclick = function()    {        ajax(‘a.txt‘,function(str){//讀取a.txt檔案裡面的內容                alert(str);//將讀取的內容輸出            })                }};</script>

用原生JavaScript寫AJAX