初學NodeJS（一）

Ajax 介紹

在node.js中先後臺交互數據常常會用到這個東西，Ajax不是新的編程語言，而是一種使用現有標準的新方法，他能夠實現不刷新網頁部分更新數據。

Ajax數據格式

ajax封裝

使用封裝Ajax須要瞭解什麼是XMLHttpRequest；

---

什麼是XMLHttpRequest

XMLHttpRequest 用於在後臺與服務器交換數據。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新

---

建立XMLHttpRequest對象實例：
var XMLHttpRequest=new XMLHttpRequest();

Ajax的傳輸方式

傳輸數據方式有兩種，一種get，一種post。

get: 地址欄 - 數據均可視， 不安全， 方便 可傳輸數據大小32kb
post: 加密 - 數據不可視，安全， 不方便 可傳輸數據大小2gb

向後端發送數據

利用XMLHttpRequest對象的open方法

open方法用於解析數據傳輸方式，數據內容，是否異步調用

get方法

var XMLHttpRequest = new XMLHttpRequest();
XMLHttpRequest.open('GET','數據',true);
XMLHttpRequest.send();

var XMLHttpRequest = new XMLHttpRequest();
XMLHttpRequest.open('POST','數據',true);
XMLHttpReuqest.send();

---

異步 - True 或 False
同步：後臺進程一步一步完成
異步：後臺進程同時調用運行

XMLHttpRequest的open方法第三個參數‘true’ or ‘false’就是選擇是否異步，固然選擇true啦，高效。

XMLHttpRequest.onreadystatechange=function() {
            if(XMLHttpRequest.readyState == 4) {
                if(XMLHttpRequest.status >= 200 && XMLHttpRequest.status < 300 || XMLHttpReuqest.status == 304) {
                    //console.log(XMLHttpRequest.responseText);
                    json.success(XMLHttpReuqest.responseText);
                }else{
                    //console.log('服務器錯誤');
                }
            }
        }

onreadystatechange方法：當狀態碼改變時觸發，
readyState 當前狀態碼

什麼是狀態碼

ajax狀態碼 - ajax readyState：

    0 - （未初始化）尚未調用send()方法
    1 - （載入）已調用send()方法，正在發送請求
    2 - （載入完成）send()方法執行完成，已經接收到所有響應內容
    3 - （交互）正在解析響應內容
    4 - （完成）響應內容解析完成，能夠在客戶端調用了

• XMLHttpRequest.state

當前進程加載狀態，例如404是無迴應的，200是加載成功等

服務器響應

若是服務器有內容響應也就是後端有數據返回前端則有兩個XMLHttpRequest對象獲取responseText，responseXML。
responseText返回字符串形式的數據
responseXML返回XML形式的數據

responseText 例子

html:
    <div id="div1"></div>
js:
    var XMLHttpRequest = new XMLHttpRequest();
    document.getElementById("div1").innerHTML=XMLHttpRequest.responseText;