Ajax技術的一些總結
ajax全稱叫Asynchronous JavaScript and XML ,意思是非同步的 JavaScript 和 XML。
ajax是現有標準的一種新方法,不是程式語言,可以在不重新整理網頁的情況下,和伺服器交換資料並且更新部分頁面內容,不需要任何外掛,只需要遊覽器允許執行JavaScript就可以。
而傳統的網頁(不使用ajax的)如果需要更新頁面內容,就需要重新請求伺服器,返回網頁內容,重新渲染重新整理頁面。
ajax的原理
原理:ajax的執行過程包括以下幾個方面
-
Browser遊覽器通過事件觸發方法,本地通過
XMLHttpRequest
物件,建立並且傳送請求通過網際網路到伺服器; - Server伺服器收到請求的內容,響應請求,傳送所需資料到遊覽器;
-
Browser遊覽器通過
XMLHttpRequest
物件的onreadystatechange
的方法收到請求的資料後,解析和渲染資料到頁面中。
注意:ajax依賴的標準有以下幾個
- XMLHttpRequest物件,非同步的與伺服器交換資料
- JavaScript/DOM,資訊顯示/互動
- 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); }); } 複製程式碼
寫在最後
這只是我總結的一小部分知識點,其實這個技術還是有很多地方沒有說到,以後再補充吧!