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

ajax也分下面4步：
1.創(chuàng)建ajax對象
2.連接到服務器
3.發(fā)送請求（告訴服務器我要什么文件）
4.接收返回值

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

    


        


            


                


                

            

            


                

                    <script>
                

            

        

        


            


                


                

            

            


                

                    window.onload=function()
                

            

        

        


            


                


                

            

            


                

                    {
                

            

        

        


            


                


                

            

            


                

                    var oBtn = document.getElementById("btn1");
                

            

        

        


            


                


                

            

            


                

                    oBtn.onclick = function()
                

            

        

        


            


                


                

            

            


                

                    {
                

            

        

        


            


                


                

            

            


                

                    //1.創(chuàng)建ajax對象
                

            

        

        


            


                


                

            

            


                

                    //只兼容非ie6的瀏覽器，在ie6瀏覽器上運行會提示沒有被定義
                

            

        

        


            


                


                

            

            


                

                    //var oAjax = new XMLHttpRequest();//這才是ajax實際的請求
                

            

        

        


            


                


                

            

            


                

                    //alert(oAjax);
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    //ie6瀏覽器下按照下面方法寫,但是在別的瀏覽器中不能用，會報錯。
                

            

        

        


            


                


                

            

            


                

                    //var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
                

            

        

        


            


                


                

            

            


                

                    //alert(oAjax);
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    //鑒于上面出現(xiàn)的問題，可以采取下面的方法解決，用if判斷是否為IE6瀏覽器
                

            

        

        


            


                


                

            

            


                

                    if(window.XMLHttpRequest)//如果有XMLHttpRequest，那就是非IE6瀏覽器。()里面加window的原因下面會有描述。
                

            

        

        


            


                


                

            

            


                

                    {
                

            

        

        


            


                


                

            

            


                

                    var oAjax = new XMLHttpRequest();//創(chuàng)建ajax對象
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    else//如果沒有XMLHttpRequest，那就是IE6瀏覽器
                

            

        

        


            


                


                

            

            


                

                    {
                

            

        

        


            


                


                

            

            


                

                    var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6瀏覽器創(chuàng)建ajax對象
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    //2.連接服務器
                

            

        

        


            


                


                

            

            


                

                    //open(方法、文件名、異步傳輸）
                

            

        

        


            


                


                

            

            


                

                    //方法：
                

            

        

        


            


                


                

            

            


                

                    //傳輸方式是get方式還是post方式。
                

            

        

        


            


                


                

            

            


                

                    //文件名
                

            

        

        


            


                


                

            

            


                

                    //告訴服務器要讀哪個文件
                

            

        

        


            


                


                

            

            


                

                    //異步傳輸
                

            

        

        


            


                


                

            

            


                

                    //異步：多件事一件一件的做
                

            

        

        


            


                


                

            

            


                

                    //同步：多件事情一起進行
                

            

        

        


            


                


                

            

            


                

                    //但是js里面的同步和異步和現(xiàn)實的同步異步相反。
                

            

        

        


            


                


                

            

            


                

                    //同步：多件事一件一件的做
                

            

        

        


            


                


                

            

            


                

                    //異步：多件事情一起進行
                

            

        

        


            


                


                

            

            


                

                    //ajax天生是用來做異步的
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    oAjax.open("GET","a.txt?t='+new Date().getTime()",true);//加上t='+new Date().getTime()"的目的是為了消除緩存，每次的t的值不一樣。
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    //3.發(fā)送請求
                

            

        

        


            


                


                

            

            


                

                    oAjax.send();
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    //4.接收返回
                

            

        

        


            


                


                

            

            


                

                    //客戶端和服務器端有交互的時候會調用onreadystatechange
                

            

        

        


            


                


                

            

            


                

                    oAjax.onreadystatechange=function()
                

            

        

        


            


                


                

            

            


                

                    {
                

            

        

        


            


                


                

            

            


                

                    //oAjax.readyState  //瀏覽器和服務器，進行到哪一步了。
                

            

        

        


            


                


                

            

            


                

                    //0->（未初始化）：還沒有調用 open() 方法。
                

            

        

        


            


                


                

            

            


                

                    //1->（載入）：已調用 send() 方法，正在發(fā)送請求。
                

            

        

        


            


                


                

            

            


                

                    //2->載入完成）：send() 方法完成，已收到全部響應內(nèi)容。
                

            

        

        


            


                


                

            

            


                

                    //3->（解析）：正在解析響應內(nèi)容。
                

            

        

        


            


                


                

            

            


                

                    //4->（完成）：響應內(nèi)容解析完成，可以在客戶端調用。
                

            

        

        


            


                


                

            

            


                

                    if(oAjax.readyState==4)
                

            

        

        


            


                


                

            

            


                

                    {
                

            

        

        


            


                


                

            

            


                

                    if(oAjax.status==200)//判斷是否成功,如果是200，就代表成功
                

            

        

        


            


                


                

            

            


                

                    {
                

            

        

        


            


                


                

            

            


                

                    alert("成功"+oAjax.responseText);//讀取a.txt文件成功就彈出成功。后面加上oAjax.responseText會輸出a.txt文本的內(nèi)容
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    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)//系統(tǒng)會報錯，而不是undefind，因為沒有定義變量a。
                

            

        

        


            


                


                

            

            


                

                    alert(window.a);//如果是這樣寫，系統(tǒng)就不會報錯了，會顯示undefind。
                

            

        

        


            


                


                

            

            


                

                    
                

            

        

        


            


                


                

            

            


                

                    //出現(xiàn)上面的原因是因為直接寫a從根上就找不到a，而前面加上window只是找不到window的屬性a了。*/
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    </script>
                

            

        

    

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

封裝ajax代碼如下：

    


        


            


                


                

            

            


                

                    //最后把代碼封裝起來,封裝起來以后，要給這個函數(shù)加上一個參數(shù)url.參數(shù)是為了替換要讀取的文件名
                

            

        

        


            


                


                

            

            


                

                    function ajax(url,fnSucc)
                

            

        

        


            


                


                

            

            


                

                    {
                

            

        

        


            


                


                

            

            


                

                    if(window.XMLHttpRequest)
                

            

        

        


            


                


                

            

            


                

                    {
                

            

        

        


            


                


                

            

            


                

                    var oAjax = new XMLHttpRequest();
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    else
                

            

        

        


            


                


                

            

            


                

                    {
                

            

        

        


            


                


                

            

            


                

                    var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6瀏覽器創(chuàng)建ajax對象
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    oAjax.open("GET",url,true);//把要讀取的參數(shù)的傳過來。
                

            

        

        


            


                


                

            

            


                

                    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文件里面的內(nèi)容
                

            

        

        


            


                


                

            

            


                

                    alert(str);//將讀取的內(nèi)容輸出
                

            

        

        


            


                


                

            

            


                

                    })
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    };
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    </script>