在了解ajax之前,我們先粗略的了解一下http協(xié)議
HTTP協(xié)議
http事務(wù)
- 一個完整的http請求是怎樣的呢?
- 瀏覽器端會向服務(wù)器端發(fā)送一個包含命令和url的http請求報文
- 服務(wù)器端接收到請求,會進(jìn)行一系列的計算,向瀏覽器返回一個包含事務(wù)結(jié)果的http響應(yīng)報文
請求報文格式
格式
- 第一部分
-
get:http方法 -
music.com主機(jī)地址 -
http/1.1http版本
-
- 第二部分
-
Accept:瀏覽器接收的媒體類型 -
Accept-Encoding:瀏覽器接收的媒體類型的編碼方式 -
Accept-Language瀏覽器端接收的語言方式 -
Cache-Control:緩存策略 -
Cookie:發(fā)送cookie值 -
User- Agent瀏覽器的版本
-
-
Get方法請求體為空
響應(yīng)報文格式
| 方法 | 描述 | 是否包含主體 |
|---|---|---|
GET |
從服務(wù)器獲取一份文檔 | 否 |
POST |
向服務(wù)器發(fā)送需要處理的數(shù)據(jù) | 是 |
PUT |
將請求的主體部分存儲在服務(wù)器上 | 是 |
DELETE |
從服務(wù)器刪除一份文檔 | 否 |
響應(yīng)格式
常用HTTP方法
| 方法 | 描述 | 是否包含主體 |
|---|---|---|
GET |
從服務(wù)器獲取一份文檔 | 否 |
POST |
向服務(wù)器發(fā)送需要處理的數(shù)據(jù) | 是 |
PUT |
將請求的主體部分存儲在服務(wù)器上 | 是 |
DELETE |
從服務(wù)器刪除一份文檔 | 否 |
URL構(gòu)成
url
常見http狀態(tài)碼
狀態(tài)碼
ajax 是什么？有什么作用？
-
Ajax(Asynchronous JavaScript and Xml)- 能夠向服務(wù)器請求額外的數(shù)據(jù)而無需卸載整個頁面，會帶來良好的用戶體驗
- Ajax是一種技術(shù)的泛稱,可以和后端交換數(shù)據(jù)，不用刷新頁面
優(yōu)點:
- 更新數(shù)據(jù)而不需要刷新頁面： 它能在不刷新整個頁面的前提下與服務(wù)器通信維護(hù)數(shù)據(jù)，由于ajax是按照需求請求數(shù)據(jù)，避免發(fā)送那些沒有改變的數(shù)據(jù)。
- 異步通信： 它與服務(wù)器使用異步的方式通信，不會打斷用戶的操作（卡死頁面）。
- 前后端負(fù)載平衡： 可以將后端服務(wù)器的一些工作轉(zhuǎn)移給客戶端，利用客戶端限制的能力來處理，減輕了服務(wù)器的負(fù)擔(dān)。
- 數(shù)據(jù)與呈現(xiàn)分離： 利于分工，降低前后耦合。
缺點:
- 瀏覽器歷史記錄的遺失： 在使用AJAX對頁面進(jìn)行改變后，由于并沒有刷新頁面，沒有改變頁面的訪問歷史，當(dāng)用戶想要回到上一個狀態(tài)時，無法使用瀏覽器提供的后退。
- AJAX的安全問題： AJAX的出現(xiàn)就像建立起了一直通服務(wù)器的另一條通道，容易遭受到一些攻擊。
一個ajax調(diào)用示例
ajax API
open開啟一個請求
xhr.open('method',url[,async = true])
參數(shù):
method: // GET/POST/DELETE/HEAD...
url: // 我要請求的資源相對當(dāng)前文檔的路徑
默認(rèn)為true異步求情 : //false同步
setRequestHeader(非必須)
xhr.setRequestHeader(header,value)
參數(shù):
header: //Content-type
send正式向服務(wù)端發(fā)請求
xhr.send([data = null])
我們注意到前面的url都是相對當(dāng)前文檔的相對路徑,是受ajax的同源策略影響的
- 什么是同源策略呢?
兩個頁面擁有相同的協(xié)議(protocol),端口(port),主機(jī)(host),那么這兩個頁面你屬于同一個源(origin)
- 不是同一個地址,我們就需要跨域資源訪問
- 跨域后面再說
可參考:跨域Frame代理
前后端開發(fā)聯(lián)調(diào)需要注意哪些事情？后端接口完成前如何 mock 數(shù)據(jù)？
- 前后端聯(lián)調(diào)是一種 真實業(yè)務(wù)數(shù)據(jù)和 本地mock數(shù)據(jù)之間來回切換以達(dá)到前后端分離架構(gòu)下的不同開發(fā)速度時數(shù)據(jù)交換的一種方式方法,需要注意
- 接口是get還是post
- 接口的名字
- 參數(shù)是什么?我發(fā)給后端的參數(shù)
- 我要的是什么?后端發(fā)送給我,服務(wù)器？端口？方法？請求數(shù)據(jù)的一些限制？
- mock數(shù)據(jù)
- 使用 nodejs 搭建服務(wù)器
- anywhere
-
server-mock
mock數(shù)據(jù)
點擊按鈕，使用 ajax 獲取數(shù)據(jù)，如何在數(shù)據(jù)到來之前防止重復(fù)點擊?
//弄一個狀態(tài)鎖
var AjaxLock = false;
//事件觸發(fā)下面代碼
// ******start*****
if (!AjaxLock){
AjaxLock = true;
xhr.onreadystatechange = function(){
if( xhr.readyState == 4) {
//do sth
AjaxLock = false;
//當(dāng)接受完畢請求數(shù)據(jù)后將鎖打開
}
}
//ajax配置
xhr.send();
} else {
return;
}
題目4：實現(xiàn)加載更多的功能，效果范例415后端在本地使用server-mock來模擬數(shù)據(jù)
加載更多
代碼預(yù)覽,需要開啟mock-server數(shù)據(jù)
