JS實作Ajax方法詳解

這次帶給大家JS實作Ajax方法詳解，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(&#39;page&#39;+(this.index+1)+&#39;.txt&#39;,function(str){
        var aData=eval(str);
        oUl.innerHTML=&#39;&#39;;
        for(i=0;i<aData.length:i++){
          var oLi=document.createElement("li");
          oLi.innerHTML=&#39;<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();
        }
      }
    }
  };
};

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

jQuery Ajax解析大全

AJAX注入使用詳解
##

以上是JS實作Ajax方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！