在了解ajax之前,我們先粗略的了解一下http協(xié)議

HTTP協(xié)議

http事務(wù)

• 一個(gè)完整的http請(qǐng)求是怎樣的呢?
  1. 瀏覽器端會(huì)向服務(wù)器端發(fā)送一個(gè)包含命令和url的http請(qǐng)求報(bào)文
  2. 服務(wù)器端接收到請(qǐng)求,會(huì)進(jìn)行一系列的計(jì)算,向?yàn)g覽器返回一個(gè)包含事務(wù)結(jié)果的http響應(yīng)報(bào)文

請(qǐng)求報(bào)文格式

格式

• 第一部分
  • get:http方法
  • music.com主機(jī)地址
  • http/1.1http版本
• 第二部分
  • Accept:瀏覽器接收的媒體類型
  • Accept-Encoding:瀏覽器接收的媒體類型的編碼方式
  • Accept-Language瀏覽器端接收的語(yǔ)言方式
  • Cache-Control:緩存策略
  • Cookie:發(fā)送cookie值
  • User- Agent瀏覽器的版本
• Get方法請(qǐng)求體為空

響應(yīng)報(bào)文格式

響應(yīng)格式

URL構(gòu)成

url

常見(jiàn)http狀態(tài)碼

狀態(tài)碼

ajax 是什么？有什么作用？

• Ajax(Asynchronous JavaScript and Xml)
  • 能夠向服務(wù)器請(qǐng)求額外的數(shù)據(jù)而無(wú)需卸載整個(gè)頁(yè)面，會(huì)帶來(lái)良好的用戶體驗(yàn)
  • Ajax是一種技術(shù)的泛稱,可以和后端交換數(shù)據(jù)，不用刷新頁(yè)面

優(yōu)點(diǎn):

• 更新數(shù)據(jù)而不需要刷新頁(yè)面： 它能在不刷新整個(gè)頁(yè)面的前提下與服務(wù)器通信維護(hù)數(shù)據(jù)，由于ajax是按照需求請(qǐng)求數(shù)據(jù)，避免發(fā)送那些沒(méi)有改變的數(shù)據(jù)。
• 異步通信： 它與服務(wù)器使用異步的方式通信，不會(huì)打斷用戶的操作（卡死頁(yè)面）。
• 前后端負(fù)載平衡： 可以將后端服務(wù)器的一些工作轉(zhuǎn)移給客戶端，利用客戶端限制的能力來(lái)處理，減輕了服務(wù)器的負(fù)擔(dān)。
• 數(shù)據(jù)與呈現(xiàn)分離： 利于分工，降低前后耦合。

缺點(diǎn):

• 瀏覽器歷史記錄的遺失： 在使用AJAX對(duì)頁(yè)面進(jìn)行改變后，由于并沒(méi)有刷新頁(yè)面，沒(méi)有改變頁(yè)面的訪問(wèn)歷史，當(dāng)用戶想要回到上一個(gè)狀態(tài)時(shí)，無(wú)法使用瀏覽器提供的后退。
• AJAX的安全問(wèn)題： AJAX的出現(xiàn)就像建立起了一直通服務(wù)器的另一條通道，容易遭受到一些攻擊。

一個(gè)ajax調(diào)用示例

ajax API

• open開(kāi)啟一個(gè)請(qǐng)求

xhr.open('method',url[,async = true])

參數(shù):
method:  //  GET/POST/DELETE/HEAD...
url:  // 我要請(qǐng)求的資源相對(duì)當(dāng)前文檔的路徑
默認(rèn)為true異步求情  :  //false同步

• setRequestHeader(非必須)

xhr.setRequestHeader(header,value)
參數(shù):
header:  //Content-type

• send正式向服務(wù)端發(fā)請(qǐng)求

xhr.send([data = null])

我們注意到前面的url都是相對(duì)當(dāng)前文檔的相對(duì)路徑,是受ajax的同源策略影響的

• 什么是同源策略呢?

兩個(gè)頁(yè)面擁有相同的協(xié)議(protocol),端口(port),主機(jī)(host),那么這兩個(gè)頁(yè)面你屬于同一個(gè)源(origin)

• 不是同一個(gè)地址,我們就需要跨域資源訪問(wèn)
  • 跨域后面再說(shuō)

可參考:跨域Frame代理

前后端開(kāi)發(fā)聯(lián)調(diào)需要注意哪些事情？后端接口完成前如何 mock 數(shù)據(jù)？

1. 前后端聯(lián)調(diào)是一種 真實(shí)業(yè)務(wù)數(shù)據(jù)和 本地mock數(shù)據(jù)之間來(lái)回切換以達(dá)到前后端分離架構(gòu)下的不同開(kāi)發(fā)速度時(shí)數(shù)據(jù)交換的一種方式方法,需要注意

• 接口是get還是post
• 接口的名字
• 參數(shù)是什么?我發(fā)給后端的參數(shù)
• 我要的是什么?后端發(fā)送給我,服務(wù)器？端口？方法？請(qǐng)求數(shù)據(jù)的一些限制？

2. mock數(shù)據(jù)

• 使用 nodejs 搭建服務(wù)器
• anywhere

• server-mock

  
  
  mock數(shù)據(jù)

點(diǎn)擊按鈕，使用 ajax 獲取數(shù)據(jù)，如何在數(shù)據(jù)到來(lái)之前防止重復(fù)點(diǎn)擊?

//弄一個(gè)狀態(tài)鎖
var AjaxLock = false;
//事件觸發(fā)下面代碼
// ******start*****
if (!AjaxLock){
    AjaxLock = true;
    xhr.onreadystatechange = function(){
        if( xhr.readyState == 4) {
            //do sth
            AjaxLock = false; 
            //當(dāng)接受完畢請(qǐng)求數(shù)據(jù)后將鎖打開(kāi)
        }
    }
    //ajax配置
    xhr.send();
} else {
    return;
}

題目4：實(shí)現(xiàn)加載更多的功能，效果范例415后端在本地使用server-mock來(lái)模擬數(shù)據(jù)

加載更多

代碼預(yù)覽,需要開(kāi)啟mock-server數(shù)據(jù)