五月综合激情在线,亚洲精品久久区二区三区蜜桃臀,99热官网

原生JS實現ajax詳解

2018-7-25 seo達人

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

原生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>
藍藍設計( www.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

原生JS實現ajax詳解

原生js寫ajax可以類比打電話

分類

日歷

鏈接

個人資料

存檔