首頁 > web前端 > js教程 > 主體

JS實作Ajax方法詳解

php中世界最好的语言
發布: 2018-04-24 15:03:25
原創
2511 人瀏覽過

這次帶給大家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);
});
登入後複製

範例:分頁

登入後複製
window.onload=function(){
  var oUl=getElementById("list");
  var aBtn=getElementsByTagName("a");
  var i;
  for(i=0;i'+aData[i].user+''+aData[i].pass+'';
          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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!