ajax學習筆記（一）

時間 2019-12-07

標籤 ajax 學習筆記欄目 Ajax 简体版

原文原文鏈接

ajax一詞的實際含義爲「不發生頁面跳轉、異步載入內容並改寫頁面內容的技術」，說白了就是讓js去讀取服務器上的數據，舉個常見的例子，通常網站登陸的時候不用刷新就能夠判斷你輸入的密碼是否正確，這裏就用了ajax技術，ajax不單單會使用XML數據，不少時候也能夠對json或者純文本進行操做。html

準備工做

要進行ajax練習，首先得配置本身的服務器，能夠直接下個PHPstudy或者wamp

本次練習讀取服務器上的靜態TXT文件，這裏涉及到一個問題就是txt的字符集編碼必須跟網頁上的一致，否則讀取出來的數據就會亂碼，常見的字符集編碼有utf-八、gb2312

把軟件根目錄裏面的www文件夾的內容清空放上兩個文件index.html和data.txt,咱們要作的就是在index.html裏面用ajax讀取data.txt裏面的數據

在瀏覽器地址欄中輸入localhost就能訪問到index.html了

編寫ajax

建立XMLHttpRequest對象var xhr=new XMLHTTPRequest;

js動態向服務器發送請求，須要使用XMLHTTPRequest對象，在IE中經過ActiveX插件實現，可能會遇到3中不一樣版本的XHR對象，具體兼容看程序ajax

鏈接到服務器xhr.open(方法，文件名，異步傳輸);

經常使用兩種方法get、post
get：經過URL傳送數據，經常使用於向服務器讀取信息，容量小，有緩存
post:經過http content傳送數據，經常使用於向服務器上傳信息，容量大，無緩存
瀏覽器緩存機制：只要URL不變，瀏覽器就會讀取緩存的內容，沒法作到實時更新
解決方法：動態改變URL，本例中採起的方法：
Ajax('data.txt?t='+new Data().getTime(),fnSucc,fnFail)json

發送請求xhr.send();
接收返回值

首先經過xhr.readyState判斷是否完成了對服務器響應的接受
而後經過xhr.status判斷響應的狀態
若是通信正常結束，就能夠經過xhr.responseText讀取通信的內容，可是格式爲字符串，可使用eval()轉換格式瀏覽器

調用代碼

咱們要作的就是在index.html裏面用封裝好的Ajax函數讀取data.txt裏面的數據緩存

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax練習</title>
    <script src="ajax.js"></script>
    <script>
        window.onload=function(){
            var oBtn=document.getElementById('btn');
            oBtn.onclick=function(){
                Ajax('data.txt?t='+new Date().getTime(),function(str){
                    alert('讀取成功，內容爲: '+str);
                    },function(str){
                    alert('讀取失敗，緣由爲: '+str);
                });
            };
        }
    </script>
</head>
<body>
    <input id="btn" type="button" value="讀取數據">
</body>
</html>

封裝的Ajax函數代碼

/**************************************
* Ajax(url,fnSucc,fnFail）
* url:請求的文件地址
* fnSucc:成功時執行的函數，傳入讀取到的文件的內容
* fnFail:可選，失敗時返回的函數，返回出錯的狀態碼
**************************************/
function Ajax(url,fnSucc,fnFail){
    //建立ajax對象
    //ie6
    if(!window.XMLHttpRequest){
        XMLHttpRequest=function(){
            var objs=['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
            for( var i=0;i<objs.length;i++){
                var obj=objs[i];
                try{
                    return new ActiveXObject(obj);
                }catch(ignore){
                    //跳過
                }
            }
            throw new Error('Cannot create XMLHttpRequest object.');
        }
    }
    var oAjax=new XMLHttpRequest;

    //連接服務器
    //open(方法，文件名，異步傳輸)
    oAjax.open('GET',url,true);

    //發送請求
    oAjax.send();

    //接收返回
    oAjax.onreadystatechange=function(){
        //oAjax.readerState瀏覽器和服務器進行到哪一步了
        if(oAjax.readyState==4)//讀取完成
        {
            if(oAjax.status==200)//成功
            {
                fnSucc(oAjax.responseText);
            }else{
                if(fnFail){
                    fnFail(oAjax.status);
                }
            }
        }
    }
}