Ajax技術的一些總結

今天來說一下ajax的有關知識點。

ajax概念

ajax全稱叫Asynchronous JavaScript and XML,意思是異步的 JavaScript 和 XML。

ajax是現有標準的一種新方法，不是編程語言，能夠在不刷新網頁的狀況下，和服務器交換數據而且更新部分頁面內容，不須要任何插件，只須要遊覽器容許運行JavaScript就能夠。

而傳統的網頁（不使用ajax的）若是須要更新頁面內容，就須要從新請求服務器，返回網頁內容，從新渲染刷新頁面。

ajax的原理

原理：ajax的運行過程包括如下幾個方面

1. Browser遊覽器經過事件觸發方法，本地經過XMLHttpRequest對象，建立而且發送請求經過互聯網到服務器；
2. Server服務器收到請求的內容，響應請求，發送所需數據到遊覽器；
3. Browser遊覽器經過XMLHttpRequest對象的onreadystatechange的方法收到請求的數據後，解析和渲染數據到頁面中。

注意： ajax依賴的標準有如下幾個

1. XMLHttpRequest對象,異步的與服務器交換數據
2. JavaScript/DOM,信息顯示/交互
3. XML,做爲轉換數據的格式

XMLHttpRequest的使用

建立XMLHttpRequest對象，經過new實例化一個XMLHttpRequest對象。

var xhr = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP'); // 兼容ie和Firefox，google chrome,opera,safari
複製代碼

發送請求使用XMLHttpRequest對象的open和send方法

open方法使用

open(method,url,async),接受三個參數。

• 第一個是method請求的類型，如：get和post;
• 第二個是url請求地址，即文件在服務器的位置；
• 第三個是是否處理異步處理請求,值爲true和false；

例如：

xhr.open('get','https://www.abc.com/service.php?tamp='+Date.parse(new Date()),true);
複製代碼

send方法使用

send(string)接受的參數爲請求類型爲post傳遞的值，爲get類型時候不傳值。

例如：

send('tamp='+Date.parse(new Date());
複製代碼

onreadystatechange事件

當readyState屬性發生變化時，就會觸發onreadystatechange事件，該事件經過回調函數獲取到響應的數據信息。

readyState值:

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

status值：

• 200: 請求成功
• 404: 未找到頁面

簡單的get請求。

var xhr;
if (!xhr && typeof xhr !== 'object') {
    var xhr = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.open('get','https://www.abc.com/service.php?tamp='+Date.parse(new Date()),true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log(xhr.responseText);
        }
    }
}
xhr.send();

複製代碼

模擬數據

模擬的JSON數據

// 保存爲data.json文件
{
    "msg": "get_succ",
    "code": 201,
    "data": {
        "list": [
            {
                "id":1,
                "name": "alun"
            },
            {
                "id":2,
                "name": "mark"
            },
            {
                "id":3,
                "name": "jean"
            }
        ]
    }
}
複製代碼

模擬的Nodejs的api

請確保你的系統安裝有node.js環境。

// 保存爲node.js文件
// 引入http模塊
const http = require('http');

const port = 3000;

const success = {
    msg: "get_succ",
    code: 201,
    data: {
        list: [
            {"id":1,"name": "alun"},
            {"id":2,"name": "mark"},
            {"id":3,"name": "jean"}
        ]
    }
}

const error = {
    msg: "get_fail",
    code: 101,
    data: {
        info: 'this request failed,again try!'
    }
}

const authy = {
    msg: "no visited!",
    code: 403,
    data: {
        info: 'not visited!'
    }
}

// 創建http服務
const serve = http.createServer((req,res) => {
    var lawDomainList = "http://localhost:9925";
    res.setHeader('Content-Type', 'text/plain;charset=utf8');
    res.setHeader("Access-Control-Allow-Origin",lawDomainList);
    if (req.url == '/api') {
        res.end(JSON.stringify(success));
    } else {
        res.end(JSON.stringify(error));
    }
    res.end(authy);
})
// 監聽端口
serve.listen(port,function(){
    console.log('serve is running on port 3000!');
})
複製代碼

封裝的ajax函數

// 保存爲ajax.js文件
$g = {
    get: function(url) {
        return new Promise(function(resolve,reject) {
            if (!url && !(typeof url == 'string')) { throw new Error('SysantaxError: this get request must had url!'); }
            var xhr = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP');
            xhr.open('GET',url,true);
            xhr.onreadystatechange = function() {
                if (this.readyState === 4) {
                    if (this.status === 200) {
                        resolve(this.responseText,this);
                    } else {
                        var resJson = { code: this.status, response: this.response }
                        reject(resJson, this)
                    }
                }
            }
            xhr.send();
        })
    },
    post: function(url,data) {
        return new Promise(function(resolve,reject) {
            if (!url) { throw new Error('SysantaxError: this post request must had url!'); }
            if (!data) { throw new Error('SysantaxError: this post request must had data!'); }
            var xhr = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP');
            xhr.open('POST',url,true);
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            xhr.onreadystatechange = function() {
                if (this.readyState === 4) {
                    if (this.status === 200) {
                        resolve(this.responseText,this);
                    } else {
                        var resJson = { code: this.status, response: this.response }
                        reject(resJson, this)
                    }
                }
            }
            xhr.send(JSON.stringify(data));
        })
    }
}
複製代碼

示例：獲取數據渲染頁面

經過點擊按鈕獲取數據，渲染列表。

<button class="btn">請求數據</button>
<ul class="res">結果：暫無結果</ul>
<script src="ajax.js"></script>
複製代碼

let btn = document.querySelector('.btn');
let resbox = document.querySelector('.res');
btn.onclick = function() {
    var url = 'http://localhost:3000/api'; // node api
    var urlJson = 'data.json'; // mock api
    $g.get(url).then(function(res) {
        if (typeof res == 'string') {
            let responTxt = JSON.parse(res);
            if (responTxt.msg == 'get_succ' && responTxt.code == 201) {
                let list = responTxt.data.list;
                let str = '';
                for (let i=0;i<list.length;i++) {
                    str += '<li>'+ list[i].id + ':' + list[i].name + '</li>';
                }
                resbox.innerHTML = str;
            }
        }
    }).catch(function(err){
        throw new Error(err);
    });
}
複製代碼

寫在最後

這只是我總結的一小部分知識點，其實這個技術仍是有不少地方沒有說到，之後再補充吧！