JS實現Ajax的方法分析_javascript技巧

本文執行個體分析了JS實現Ajax的方法。分享給大家供大家參考，具體如下：

一、什麼是Ajax

不重新整理的情況下讀取資料或提交資料

（最早出現ajax：Google地圖，拖動一下出現一片新的視野）

應用：使用者註冊、線上聊天、微博

特性：只能從伺服器上去讀取資料（所以我們需要配置自己的伺服器程式AMP）

二、使用Ajax

1.基礎：請求並顯示靜態TXT檔案

btn.onclick=function(){  ajax('abc.txt',function(str){    alert(str);  });}

①Ajax裡面檔案的編碼要和頁面的編碼一致

②緩衝、阻止緩衝（好處大於缺點，所以不能什麼時候都清緩衝）
緩衝能協助我們加速網路訪問，所謂緩衝，就是伺服器上這個檔案，它唯讀一次，第二次就從你的硬碟裡、緩衝裡直接去拿，而不是真的通過網路來請求

有時候我們需要阻止緩衝（比如伺服器上東西變化了，但用戶端請求來的還是原來的東西），辦法如下，加時間戳記：

ajax('abc.txt?t='+new Date().getTime(),function(str){});//new Date().getTime()為現在的毫秒數，使用者絕對不可能在1毫秒內點兩次，所以每次請求的t都不一樣

2.動態資料：請求Js（或json）檔案

Ajax從伺服器上讀取的所有東西都是以文本的形式（字串）存在的，如何轉換？

eval（）計算字串裡的值

ajax('abc.txt',function(str){    var arr=eval(str);    alert(arr);});

例子：分頁

<ul id="list"></ul><a href="#"></a><a href="#"></a><a href="#"></a>

window.onload=function(){  var oUl=getElementById("list");  var aBtn=getElementsByTagName("a");  var i;  for(i=0;i<aBtn.length;i++){    aBtn[i].index=i;    aBtn[i].onclick=function(){      ajax('page'+(this.index+1)+'.txt',function(str){        var aData=eval(str);        oUl.innerHTML='';        for(i=0;i<aData.length:i++){          var oLi=document.createElement("li");          oLi.innerHTML='<strong>'+aData[i].user+'</strong><i>'+aData[i].pass+'</i>';          oUl.appendChild(oLi);        }      });    };  }};

三、Ajax原理

HTTP要求方法

1.GET--用於擷取資料（如瀏覽貼子） 把資料放在URL（網址）裡面來提交     安全性低、容量低、便於分享（將網址發給別人）

2.POST--用於上傳資料（如使用者註冊） 把資料放在不是URL的地方     安全性一般、容量幾乎無限、不便於分享

四、封裝一個自己的Ajax函數

1.建立Ajax

2.串連伺服器

3.發送請求

4.接收返回

function ajax(url,fnSucc,fnFaild){  //1.建立  var oAjax=null;  if(window.XMLHttpRequest){ //對ie6來說，直接用XMLHttpRequest是不存在的會出錯    oAjax=new XMLHttpRequest(); //ie6以上  }else{    oAjax=new ActiveXObject("Microsoft.XMLHTTP"); //ie6  }  //2.串連伺服器，open(方法，url，是否非同步)  oAjax.open('GET'，url，true);  //3.發送請求  oAjax.send();  //4.接收返回 OnReadyStateChange  oAjax.onreadystatechange=function(){    //onreadystatechange事件    if(oAjax.readyState==4){ //readyState屬性：請求狀態 4是完成（完成不代表成功）      if(oAjax.status==200){ //status屬性：請求結果 200代表成功        fnSucc(oAjax.responseText); //responseText屬性：伺服器發回給我們的內容      }      else{        if(fnFaild){          fnFaild();        }      }    }  };};

更多關於JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript中ajax操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript尋找演算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍曆演算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程式設計有所協助。