今天來講一下ajax的有關知識點。 ajax概念 ajax全稱叫 Asynchronous JavaScript and XML ,意思是非同步的 JavaScript 和 XML。 ajax是現有標準的一種新方法，不是編程語言，可以在不刷新網頁的情況下，和伺服器交換數據並且更新部分頁面內容，不需要任 ...
今天來講一下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 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);
});
}寫在最後
這隻是我總結的一小部分知識點，其實這個技術還是有很多地方沒有說到，以後再補充吧！
