什么是前端堂竟？
- 前端 = 漂亮的頁面 + 在正確的區(qū)域渲染出服務(wù)端數(shù)據(jù)
在正式了解交互使用的幾種方法之前我們先來了解一下瀏覽器是如何展示一個頁面的。
-
瀏覽器在完整展示一個頁面時做了些什么玻佩？
- 加載： URL請求-->域名解析-->服務(wù)器響應(yīng)請求-->瀏覽器接收文件(...)
- 解析：從HTML解析出dom樹出嘹，解析css產(chǎn)生css規(guī)則樹（css-rule-tree）（計算css樣式），解析js通過dom api操作dom樹和css規(guī)則樹咬崔。
- 渲染：dom tree + css rule tree = rendering tree(渲染樹)税稼，包括定位和大小，是否換行
- 繪制：調(diào)用操作系統(tǒng)的Native GUI的API繪制垮斯。
-
前后端交互的幾種方式：
- 服務(wù)端渲染
- Ajax
- comet
前端渲染 VS 服務(wù)端渲染
前端渲染：
指的是后端返回json數(shù)據(jù)郎仆，前端利用預先寫的html模板，循環(huán)讀取json數(shù)據(jù)兜蠕，拼接字符串扰肌，并插入頁面。
后端渲染：
前端請求熊杨，后端用后臺模板引擎直接生成htm曙旭，前端接受到數(shù)據(jù)之后，直接插入頁面晶府。
ajax
ajax：一種請求數(shù)據(jù)的方式桂躏，不需要刷新整個頁面；
ajax的技術(shù)核心是 XMLHttpRequest 對象川陆；
ajax 請求過程：創(chuàng)建 XMLHttpRequest 對象剂习、連接服務(wù)器、發(fā)送請求、接收響應(yīng)數(shù)據(jù)鳞绕；
- jq實現(xiàn)Ajax的方法：
$.ajax({
url: ' ',
type: ' ',
dataType: ' ' ,
data: { },
success: function () {},
error: function () {}
})
- 原生js實現(xiàn)Ajax方法：
var Ajax={
get: function(url, fn) {
var obj = new XMLHttpRequest(); // XMLHttpRequest對象用于在后臺與服務(wù)器交換數(shù)據(jù)
obj.open('GET', url, true); // true:異步,false:同步請求
obj.onreadystatechange = function() {
if (obj.readyState == 4 && obj.status == 200 || obj.status == 304) { // readyState == 4說明請求已完成
fn.call(this, obj.responseText); //從服務(wù)器獲得數(shù)據(jù)
}
};
obj.send();
},
post: function (url, data, fn) { // datat應(yīng)為'a=a1&b=b1'這種字符串格式失仁，在jq里如果data為對象會自動將對象轉(zhuǎn)成這種字符串格式
var obj = new XMLHttpRequest();
obj.open("POST", url, true);
obj.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // 添加http頭，發(fā)送信息至服務(wù)器時內(nèi)容編碼類型
obj.onreadystatechange = function() {
if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) { // 304未修改
fn.call(this, obj.responseText);
}
};
obj.send(data);
}
}
注釋：readyState 狀態(tài)碼
0-未初始化们何，尚未調(diào)用open()方法萄焦；
1-啟動，調(diào)用了open()方法垂蜗，未調(diào)用send()方法楷扬；
2-發(fā)送，已經(jīng)調(diào)用了send()方法贴见，未接收到響應(yīng)烘苹；
3-接收，已經(jīng)接收到部分響應(yīng)數(shù)據(jù)片部；
4-完成镣衡，已經(jīng)接收到全部響應(yīng)數(shù)據(jù)；
comet
基于長輪詢的一種技術(shù)
where：由于某些特定的業(yè)務(wù)需求档悠， 當我們需要有及時的數(shù)據(jù)更新
短輪詢：setInterval
“反向Ajax”廊鸥，由服務(wù)器進行數(shù)據(jù)推送署照， Comet能夠讓信息近乎實時的被推送到頁面上周蹭，非常適合要求實時性的獲取的數(shù)據(jù)的頁面掌逛。
實現(xiàn)模型：
交互方式
post VS get
GET和POST是HTTP請求的兩種基本方法,都是基于TCP鏈接的請求彤路。
區(qū)別和聯(lián)系：
友情參考：
前后端交互的幾種方式
post&get
