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

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

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

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

一、什么是Ajax

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

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

應(yīng)用：用戶注冊(cè)、在線聊天、微博

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

二、使用Ajax

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

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

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

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

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

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

2.動(dòng)態(tài)數(shù)據(jù)：請(qǐng)求Js（或json）文件

Ajax從服務(wù)器上讀取的所有東西都是以文本的形式（字符串）存在的，如何轉(zhuǎn)換？

eval（）計(jì)算字符串里的值

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請(qǐng)求方法

1.GET--用于獲取數(shù)據(jù)（如瀏覽貼子）把數(shù)據(jù)放在URL（網(wǎng)址）里面來提交安全性低、容量低、便于分享（將網(wǎng)址發(fā)給別人）

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

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

1.創(chuàng)建Ajax

2.連接服務(wù)器

3.發(fā)送請(qǐng)求

4.接收返回

function ajax(url,fnSucc,fnFaild){
  //1.創(chuàng)建
  var oAjax=null;
  if(window.XMLHttpRequest){ //對(duì)ie6來說，直接用XMLHttpRequest是不存在的會(huì)出錯(cuò)
    oAjax=new XMLHttpRequest(); //ie6以上
  }else{
    oAjax=new ActiveXObject("Microsoft.XMLHTTP"); //ie6
  }
  //2.連接服務(wù)器，open(方法，url，是否異步)
  oAjax.open('GET'，url，true);
  //3.發(fā)送請(qǐng)求
  oAjax.send();
  //4.接收返回 OnReadyStateChange
  oAjax.onreadystatechange=function(){    //onreadystatechange事件
    if(oAjax.readyState==4){ //readyState屬性：請(qǐng)求狀態(tài) 4是完成（完成不代表成功）
      if(oAjax.status==200){ //status屬性：請(qǐng)求結(jié)果 200代表成功
        fnSucc(oAjax.responseText); //responseText屬性：服務(wù)器發(fā)回給我們的內(nèi)容
      }
      else{
        if(fnFaild){
          fnFaild();
        }
      }
    }
  };
};

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: