JS實現(xiàn)Ajax的方法分析

更新時間：2016年12月20日 14:42:55 作者：鬼畜十三

這篇文章主要介紹了JS實現(xiàn)Ajax的方法,結合實例形式分析了ajax的概念、原理、js實現(xiàn)與使用方法,需要的朋友可以參考下

本文實例分析了JS實現(xiàn)Ajax的方法。分享給大家供大家參考，具體如下：

一、什么是Ajax

不刷新的情況下讀取數(shù)據(jù)或提交數(shù)據(jù)

（最早出現(xiàn)ajax：谷歌地圖，拖動一下出現(xiàn)一片新的視野）

應用：用戶注冊、在線聊天、微博

特性：只能從服務器上去讀取數(shù)據(jù)（所以我們需要配置自己的服務器程序AMP）

二、使用Ajax

1.基礎：請求并顯示靜態(tài)TXT文件

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

①Ajax里面文件的編碼要和頁面的編碼一致

②緩存、阻止緩存（好處大于缺點，所以不能什么時候都清緩存）
緩存能幫助我們加速網(wǎng)絡訪問，所謂緩存，就是服務器上這個文件，它只讀一次，第二次就從你的硬盤里、緩存里直接去拿，而不是真的通過網(wǎng)絡來請求

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

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

2.動態(tài)數(shù)據(jù)：請求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--用于獲取數(shù)據(jù)（如瀏覽貼子）把數(shù)據(jù)放在URL（網(wǎng)址）里面來提交安全性低、容量低、便于分享（將網(wǎng)址發(fā)給別人）

2.POST--用于上傳數(shù)據(jù)（如用戶注冊）把數(shù)據(jù)放在不是URL的地方安全性一般、容量幾乎無限、不便于分享

四、封裝一個自己的Ajax函數(shù)

1.創(chuàng)建Ajax

2.連接服務器

3.發(fā)送請求

4.接收返回

function ajax(url,fnSucc,fnFaild){
  //1.創(chuàng)建
  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.發(fā)送請求
  oAjax.send();
  //4.接收返回 OnReadyStateChange
  oAjax.onreadystatechange=function(){    //onreadystatechange事件
    if(oAjax.readyState==4){ //readyState屬性：請求狀態(tài) 4是完成（完成不代表成功）
      if(oAjax.status==200){ //status屬性：請求結果 200代表成功
        fnSucc(oAjax.responseText); //responseText屬性：服務器發(fā)回給我們的內(nèi)容
      }
      else{
        if(fnFaild){
          fnFaild();
        }
      }
    }
  };
};

更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題：《JavaScript中ajax操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》

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

您可能感興趣的文章: