用原生JavaScript寫AJAX

//原生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直接像下面那樣輸出a
alert(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>