javascrip中ajax

時間 2019-12-14

原文原文鏈接

移動端對加載速度要求比較高，因爲jquery插件有270多k，無形中增長加載的速度，下面整理一下原生js中ajax：javascript

先了解ajax的基礎知識php

（1）XMLHttpRequest 對象html

　　XMLHttpRequest對象是ajax的核心，經過XMLHttpRequest對象來向服務器發異步請求，從服務器得到數據，全部現代瀏覽器（IE7+、Firefox、Chrome、Safari、Opera）均支持 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。　　java

　　建立一個兼容的XMLHttpRequest對象代碼以下：jquery

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

（2）向服務器發送請求ajax

xhr.open(method,url,async);
    //method：請求的類型；GET 或 POST
    //url：請求的URL
    //async：true（異步）或 false（同步）
xhr.send(string);
    //將請求發送到服務器
    //string：僅用於 POST 請求
 
//GET 比 POST 請求方式更簡單也更快，而且在大部分狀況下都能用
//在如下狀況中，請使用 POST 請求：
    //沒法使用緩存文件（更新服務器上的文件或數據庫）
    //向服務器發送大量數據（POST 沒有數據量限制）
    //發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

（3）服務器響應數據庫

使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性得到來自服務器的響應。瀏覽器

　若是來自服務器的響應是 XML，並且須要做爲 XML 對象進行解析，請使用 responseXML 屬性。緩存

　若是來自服務器的響應並不是 XML，請使用 responseText 屬性，responseText 屬性返回字符串形式的響應。服務器

（4）onreadystatechange 事件

當請求被髮送到服務器時，咱們須要執行一些基於響應的任務。每當 readyState 改變時，就會觸發 onreadystatechange 事件。readyState 屬性存有 XMLHttpRequest 的狀態信息。

　　 XMLHttpRequest 對象的三個重要的屬性：

　　　　onreadystatechange　　//存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數

　　　　readyState　　//存有 XMLHttpRequest 的狀態, 從 0 到 4 發生變化　　　　　

- 0: 請求未初始化
- 1: 服務器鏈接已創建
- 2: 請求已接收
- 3: 請求處理中
- 4: 請求已完成，且響應已就緒

　　　　status　　//200: "OK", 404: 未找到頁面

　　在 onreadystatechange 事件中，咱們規定當服務器響應已作好被處理的準備時所執行的任務, 當 readyState等於4 且 status爲200 時，表示響應已就緒。

xhr.onreadystatechange = function(){
    if( xhr.readyState == 4 && xhr.status == 200 ){
        //準備就緒 能夠處理返回的 xhr.responseText 或者 xhr.responseXML 
    }
};

（5）開始寫一個完整的簡單ajax

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xhr.onreadystatechange = function(){
    if( xhr.readyState == 4 && xhr.status == 200 ){
        //準備就緒 能夠處理返回的 xhr.responseText 或者 xhr.responseXML 
    }
};
xhr.open(method,url,async);
xhr.send(string);

（6）實際項目中應用了檢測app版本進行更新，大概代碼以下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>hello world</title>
    <script type="text/javascript">
var wgtVer=null;
function plusReady(){
    // Android處理返回鍵
    plus.key.addEventListener('backbutton',function(){
        if(confirm('確認退出？')){
            plus.runtime.quit();
        }
    },false);
    // 獲取本地應用資源版本號
    plus.runtime.getProperty(plus.runtime.appid,function(inf){
        wgtVer=inf.version;
        console.log("當前應用版本："+wgtVer);
    });
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready',plusReady,false);
}
// 檢測更新
var checkUrl="http://demo.dcloud.net.cn/test/update/check.php";
function checkUpdate(){
    plus.nativeUI.showWaiting("檢測更新...");
    var xhr=new XMLHttpRequest();
    xhr.onreadystatechange=function(){
        switch(xhr.readyState){
            case 4:
            plus.nativeUI.closeWaiting();
            if(xhr.status==200){
                console.log("檢測更新成功："+xhr.responseText);
                var newVer=xhr.responseText;
                if(wgtVer&&newVer&&(wgtVer!=newVer)){
                    downWgt();    // 下載升級包
                }else{
                    plus.nativeUI.alert("無新版本可更新！");
                }
            }else{
                console.log("檢測更新失敗！");
                plus.nativeUI.alert("檢測更新失敗！");
            }
            break;
            default:
            break;
        }
    }
    xhr.open('GET',checkUrl);
    xhr.send();
}
// 下載wgt文件
var wgtUrl="http://demo.dcloud.net.cn/test/update/H5EF3C469.wgt";
function downWgt(){
    plus.nativeUI.showWaiting("下載wgt文件...");
    plus.downloader.createDownload( wgtUrl, {filename:"_doc/update/"}, function(d,status){
        if ( status == 200 ) { 
            console.log("下載wgt成功："+d.filename);
            installWgt(d.filename);    // 安裝wgt包
        } else {
            console.log("下載wgt失敗！");
            plus.nativeUI.alert("下載wgt失敗！");
        }
        plus.nativeUI.closeWaiting();
    }).start();
}
// 更新應用資源
function installWgt(path){
    plus.nativeUI.showWaiting("安裝wgt文件...");
    plus.runtime.install(path,{},function(){
        plus.nativeUI.closeWaiting();
        console.log("安裝wgt文件成功！");
        plus.nativeUI.alert("應用資源更新完成！",function(){
            plus.runtime.restart();
        });
    },function(e){
        plus.nativeUI.closeWaiting();
        console.log("安裝wgt文件失敗["+e.code+"]："+e.message);
        plus.nativeUI.alert("安裝wgt文件失敗["+e.code+"]："+e.message);
    });
}
    </script>
</head>
<body>
    Hello HBuilder for test update.<br/>
    <br/>
    version 1.0
    <br/><br/><br/>
    <button onclick="checkUpdate()">Check Update</button>
</body>
</html>