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

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 apivar 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);}); } 復制代碼

寫在最后

這只是我總結的一小部分知識點，其實這個技術還是有很多地方沒有說到，以后再補充吧！

總結

以上是生活随笔為你收集整理的Ajax技术的一些总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。