接上期后續(xù)

本期分享第七章節(jié)

servlet

第三篇章

已經(jīng)分享過(guò)半了，你們都跟上了嗎？

每天都在學(xué)習(xí)嘛？

有什么不會(huì)的嘛？

今日教學(xué)文檔分享來(lái)了?

今日新篇章

【AJax】

1.?傳統(tǒng)開(kāi)發(fā)模式的不足

傳統(tǒng)開(kāi)發(fā)模式基于瀏覽器數(shù)據(jù)傳輸功能,頁(yè)面填寫(xiě)數(shù)據(jù)/展示數(shù)據(jù)。瀏覽器通過(guò)訪問(wèn)一個(gè)URL地址，將頁(yè)面的數(shù)據(jù)提交給服務(wù)器。服務(wù)器將需要展示的數(shù)據(jù)返回給瀏覽器，瀏覽器再進(jìn)行數(shù)據(jù)解析，將數(shù)據(jù)呈現(xiàn)在用戶(hù)面前。這種模式主要依賴(lài)于瀏覽器的渲染功能，并且瀏覽器每次渲染是都是整個(gè)頁(yè)面進(jìn)行渲染。整個(gè)頁(yè)面包含：樣式文件,圖片資源,DOM標(biāo)簽.每次瀏覽器渲染時(shí)都要進(jìn)行重新統(tǒng)一渲染,重新請(qǐng)求一些重復(fù)的資源數(shù)據(jù).但是實(shí)際上變化的只是頁(yè)面上的數(shù)據(jù),一些靜態(tài)資源沒(méi)有發(fā)生變化.這種統(tǒng)一的重新渲染,導(dǎo)致以下不足:

1.?操作服務(wù)器額外的負(fù)擔(dān),因?yàn)闉g覽器重新請(qǐng)求重復(fù)數(shù)據(jù),服務(wù)器又不記錄是否發(fā)送過(guò),導(dǎo)致服務(wù)器重新發(fā)送,網(wǎng)絡(luò)/磁盤(pán)讀寫(xiě)都造成額外的負(fù)擔(dān).

2.?瀏覽器重復(fù)解析數(shù)據(jù),瀏覽器本身也產(chǎn)生了額外的開(kāi)銷(xiāo).

程序的設(shè)計(jì)者,提出了一個(gè)理念,能不能只返回想要的數(shù)據(jù)?如果做到了根據(jù)需要返回?cái)?shù)據(jù),減少了服務(wù)器和瀏覽器的負(fù)擔(dān).提出了異步交互的理念.瀏覽器本身在渲染時(shí),瀏覽器是占用狀態(tài),無(wú)法做其它事情的.異步交互,就是指瀏覽器在渲染時(shí),將渲染的等待時(shí)間利用起來(lái),做其它行為.就像同時(shí)在做多件事情.

1.1?什么是同步交互

首先用戶(hù)向HTTP服務(wù)器提交一個(gè)處理請(qǐng)求。接著服務(wù)器端接收到請(qǐng)求后，按照預(yù)先編寫(xiě)好的程序中的業(yè)務(wù)邏輯進(jìn)行處理，比如和數(shù)據(jù)庫(kù)服務(wù)器進(jìn)行數(shù)據(jù)信息交換。最后，服務(wù)器對(duì)請(qǐng)求進(jìn)行響應(yīng)，將結(jié)果返回給客戶(hù)端，返回一個(gè)HTML在瀏覽器中顯示，通常會(huì)有CSS樣式豐富頁(yè)面的顯示效果。

如果瀏覽器在使用中,用戶(hù)都是等待狀態(tài).用戶(hù)全程的參與了整個(gè)請(qǐng)求到數(shù)據(jù)渲染的過(guò)程.類(lèi)似早期排隊(duì)充值話(huà)費(fèi)/打飯.

1.2?同步交互的不足

1.?同步交互的不足之處，會(huì)給用戶(hù)一種不連貫的體驗(yàn),當(dāng)服務(wù)器處理請(qǐng)求時(shí)，用戶(hù)只能等待狀態(tài)，頁(yè)面中的顯示內(nèi)容只能是空白。

2.?因?yàn)橐呀?jīng)跳轉(zhuǎn)到新的頁(yè)面,原本在頁(yè)面上的信息無(wú)法保存,好多信息需要重新填寫(xiě)

3.?這種交互的方式對(duì)于服務(wù)器和瀏覽器而言都存在壓力.存在性能的損耗

2.?異步交互的概念

指發(fā)送一個(gè)請(qǐng)求,不需要等待返回,隨時(shí)可以再發(fā)送下一個(gè)請(qǐng)求，即不需要等待。例如:在支付寶上充值話(huà)費(fèi).

在部分情況下，我們的項(xiàng)目開(kāi)發(fā)中都會(huì)優(yōu)先選擇不需要等待的異步交互方式。將用戶(hù)請(qǐng)求放入消息隊(duì)列，并反饋給用戶(hù)，系統(tǒng)遷移程序已經(jīng)啟動(dòng)，你可以關(guān)閉瀏覽器了。然后程序再慢慢地去寫(xiě)入數(shù)據(jù)庫(kù)去。這就是異步。異步不用等所有操作等做完，就響應(yīng)用戶(hù)請(qǐng)求。即先響應(yīng)用戶(hù)請(qǐng)求，然后慢慢去寫(xiě)數(shù)據(jù)庫(kù)，用戶(hù)體驗(yàn)較好.類(lèi)似于多個(gè)線程在進(jìn)行運(yùn)行.

3.?什么是AJax

Ajax是基于異步交互思想,誕生的復(fù)合的前端技術(shù).其核心瀏覽器廠商約定的一套用于進(jìn)行網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù)交互的API.瀏覽器廠商通過(guò)Javascript暴露了一套API,可以用于使用JS時(shí)就能通過(guò)網(wǎng)絡(luò)從服務(wù)器獲取特定的數(shù)據(jù),然后在利用DOM技術(shù)和CSS技術(shù),實(shí)現(xiàn)頁(yè)面的數(shù)據(jù)變化.

由于AJax技術(shù)是瀏覽器廠商提供的API,瀏覽器廠商各自早期沒(méi)有統(tǒng)一規(guī)范,還由于瀏覽器技術(shù)一直在迭代.前端技術(shù)一直在更新.市面上就出現(xiàn)了一些對(duì)原生ajax技術(shù)進(jìn)行封裝的插件.比較早期就是jQuery插件,現(xiàn)在比較流行的axios插件.由于現(xiàn)在前端推薦DOM操作,比較推崇MVVM思想,而jQuery中很大比重的都是在進(jìn)行DOM操作,很多企業(yè)中,提出了去”j”的理念.

3.1?jQuery中的ajax

由于原生的Ajax存在一些不足,瀏覽器的兼容性,整個(gè)請(qǐng)求需要分為5個(gè)步驟相對(duì)繁瑣.基于這樣的原因.jQuery插件對(duì)原生ajax進(jìn)行了封裝.簡(jiǎn)化了ajax的使用.

在使用ajax時(shí),開(kāi)發(fā)者主要請(qǐng)求地址和請(qǐng)求參數(shù)及返回的數(shù)據(jù).jQuery中的ajax在使用時(shí),主要只需要定義請(qǐng)求地址,參數(shù)及返回?cái)?shù)據(jù)的處理即可.

3.1.1?jQuery中ajax使用

1.?在頁(yè)面引入jQuery的JS

2.?編寫(xiě)前端代碼

3.1.2?jQuery中核心方法

3.1.3?ajax方法核心配置參數(shù)

3.1.3.1?ajax方法的演示

3.1.3.1.1?前端代碼

3.1.3.1.2?后端代碼

3.1.4?get/post方法演示

在實(shí)際使用中,開(kāi)發(fā)者只關(guān)注2個(gè)點(diǎn),請(qǐng)求信息和返回的數(shù)據(jù).jQuery提供一些方法對(duì)ajax方法進(jìn)行簡(jiǎn)化,如:get(url,[param],function)/post(url,[param],function).分別表示get類(lèi)型的異步請(qǐng)求和post異步請(qǐng)求(比較常用).

3.1.4.1?演示案例

3.2?axios的使用

首先要在頁(yè)面引入axios的js插件.參考:axios中文網(wǎng).

3.2.1?axios應(yīng)用

3.2.1.1?后端代碼

3.2.1.2?前端代碼

4.?瀏覽器跨域訪問(wèn)

在Ajax請(qǐng)求中,JS是基于瀏覽器進(jìn)行網(wǎng)絡(luò)通信的.這種功能必須依附瀏覽器,出于安全的考慮,瀏覽器會(huì)對(duì)JS通信的數(shù)據(jù)進(jìn)行檢查.瀏覽器對(duì)數(shù)據(jù)檢查通過(guò)之后,才會(huì)將通信數(shù)據(jù)移交給JS程序.瀏覽器最基本檢查策略叫同源策略.是一種最基本安全保護(hù)機(jī)制

4.1?同源策略

在網(wǎng)絡(luò)訪問(wèn)中,必須存在3種數(shù)據(jù):協(xié)議/域名/端口.如果3種數(shù)據(jù)一致就標(biāo)識(shí)同源訪問(wèn),如果不一致就是非同源訪問(wèn).默認(rèn)瀏覽器只支持同源訪問(wèn).

以下就是非同源訪問(wèn)的瀏覽器異常信息.也被稱(chēng)之為跨域訪問(wèn).

?

當(dāng)前瀏覽器訪問(wèn)地址:http://localhost:8080/ajax_crud/index.html

ajax的訪問(wèn)地址:http://127.0.0.1:8080/ajax_crud/user.do

由于當(dāng)前瀏覽器地址的域名:localhost,但是ajax的地址是127.0.0.1雖然都是標(biāo)識(shí)同一個(gè)地址,但是瀏覽器檢測(cè)時(shí)認(rèn)為和自己的不一致,所以進(jìn)行拋出了異常,認(rèn)為存在跨域訪問(wèn).

4.2?跨域解決

跨域問(wèn)題解決方案比較多,例如:jsonp,服務(wù)器允許跨域訪問(wèn)設(shè)置.瀏覽器既然會(huì)檢查數(shù)據(jù),服務(wù)器返回?cái)?shù)據(jù)時(shí),直接通知瀏覽器本次訪問(wèn)是允許跨域訪問(wèn)的.需要通過(guò)響應(yīng)頭通知瀏覽器.

5.?Ajax綜合案例

利用ajax 實(shí)現(xiàn)增/刪除/查/改.

5.1?后端代碼

5.1.1?servlet

5.1.2?dao

5.2?列表頁(yè)面

?

5.3?新增列表

5.4?修改頁(yè)面

?

更多干貨我們下期再說(shuō)！

下期會(huì)分享

第七章節(jié)

servlet

第四篇章

相關(guān)知識(shí)~

下期見(jiàn)！