前端技術(shù)：在瀏覽器中執(zhí)行的程序都是前端技術(shù)。如 html、css、js 等

后端技術(shù)：在服務(wù)器中執(zhí)行的長(zhǎng)須，使用 Java 等語(yǔ)言開(kāi)發(fā)的后端程序。servlet，jsp，jdbc，mysql，tomacat 等

全局刷新

• 使用表單 form，超鏈接 href 等發(fā)起的請(qǐng)求屬于全局刷新
• 用戶發(fā)起請(qǐng)求，視圖改變，跳轉(zhuǎn)視圖。使用新的數(shù)據(jù)添加到頁(yè)面

缺點(diǎn)：

• 數(shù)據(jù)量大，占據(jù)網(wǎng)絡(luò)帶寬
• 瀏覽器需要重新渲染整個(gè)頁(yè)面
• 用戶體驗(yàn)不是很好

局部刷新

• 在當(dāng)前頁(yè)面中發(fā)送請(qǐng)求，獲取數(shù)據(jù)，更新當(dāng)前頁(yè)面的 DOM 對(duì)象
• 對(duì)視圖部分刷新

特點(diǎn)：

• 數(shù)據(jù)量小，在網(wǎng)絡(luò)中傳輸速度快
• 更新部分頁(yè)面內(nèi)容，瀏覽器不用全部渲染視圖
• 在一個(gè)頁(yè)面中，可以設(shè)置多個(gè)局部刷新
• 從服務(wù)器獲取的是數(shù)據(jù)，拿到更新的視圖

原理：

• 不能由瀏覽器發(fā)送請(qǐng)求給服務(wù)端
• 瀏覽器委托瀏覽器內(nèi)存中的一個(gè)腳本對(duì)象代替瀏覽器發(fā)送請(qǐng)求
• 這個(gè)行為導(dǎo)致服務(wù)器端直接將【響應(yīng)包】發(fā)送到腳本對(duì)象內(nèi)存中
• 這個(gè)行為導(dǎo)致腳本對(duì)象內(nèi)容被覆蓋掉，但是此時(shí)瀏覽器內(nèi)存中絕大部分?jǐn)?shù)據(jù)并沒(méi)有更新

異步請(qǐng)求對(duì)象

• 在進(jìn)行局部刷新時(shí)，需要?jiǎng)?chuàng)建一個(gè)對(duì)象，代替瀏覽器發(fā)送請(qǐng)求的行為，這個(gè)對(duì)象存在內(nèi)存中
• 代替瀏覽器發(fā)起請(qǐng)求并接收響應(yīng)數(shù)據(jù)的對(duì)象，就是異步請(qǐng)求對(duì)象 XMLHttpRequest
• 存在于瀏覽器內(nèi)部的一種 JavaScript 對(duì)象
• 各大瀏覽器都能支持異步對(duì)象的使用

全局刷新是同步行為。局部刷新是一部行為（瀏覽器中的數(shù)據(jù)并沒(méi)有全部更新）

這個(gè)異步對(duì)象用于在后臺(tái)與服務(wù)器交換數(shù)據(jù)。

異步對(duì)象 XMLHttpRequest

異步對(duì)象的創(chuàng)建和使用：

• JS 中的一種對(duì)象，使用 JavaScript 語(yǔ)法創(chuàng)建和使用這個(gè)對(duì)象

var xhr = new XMLHttpRequest();

• 之后就可以使用 xhr 對(duì)象的屬性或者函數(shù)，進(jìn)行異步對(duì)象的操作

使用異步對(duì)象實(shí)現(xiàn)局部刷新，異步對(duì)象主要負(fù)責(zé)發(fā)起請(qǐng)求，傳遞請(qǐng)求的參數(shù)，并從服務(wù)器接收數(shù)據(jù)

局部刷新需要使用的技術(shù)：

• JavaScript：創(chuàng)建 XMLHttpRequest 對(duì)象，調(diào)用它的屬性或者方法
• DOM：處理 DOM，更新數(shù)據(jù)
• CSS：處理視圖，更新美化
• servlet：服務(wù)器端技術(shù)
• 數(shù)據(jù)格式：json，xml

以上技術(shù)的綜合使用稱為 Ajax （Asynchronous JavaScript and XML，異步的 JavaScript 和 XML）

Ajax

• Ajax （Asynchronous JavaScript and XML，異步的 JavaScript 和 XML）
• Ajax 是一種在無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況下，能夠更新部分頁(yè)面內(nèi)容的新方法
• Ajax 不是新的編程語(yǔ)言，是多種技術(shù)的綜合使用
• 包含了 JavaScript，dom，CSS，服務(wù)器端技術(shù)，servlet，jsp，jdbc 等，還有 json 數(shù)據(jù)格式

Ajax 的主要目的：實(shí)現(xiàn)局部刷新

Ajax 核心是 JavaScript 和 XML / json：使用JavaScript 操作異步對(duì)象XMLHttpRequest，與服務(wù)器端交互使用 json 數(shù)據(jù)格式

異步對(duì)象的屬性和方法

創(chuàng)建異步對(duì)象，使用 JS 語(yǔ)法

• var xhr = new XMLHttpRequest();

異步對(duì)象方法

open()

• open(請(qǐng)求方式，服務(wù)器端的訪問(wèn)地址，異 / 同步);
• 例如：xhr.open('get', 'loginServlet', true);

send()

• 使用異步對(duì)象發(fā)送請(qǐng)求

異步對(duì)象屬性

readyState 屬性

請(qǐng)求的狀態(tài)

• 創(chuàng)建異步對(duì)象 new XMLHttpRequest() 時(shí)，readyState 的值為 0
• 執(zhí)行 open() 方法時(shí)，初始對(duì)象的請(qǐng)求參數(shù)?readyState 為 1
• 使用 send() 方法發(fā)送請(qǐng)求時(shí)，readyState 為 2
• 使用異步對(duì)象從服務(wù)器端接收數(shù)據(jù)，readyState 為 3
• 異步對(duì)象接收了數(shù)據(jù)，并在異步對(duì)象內(nèi)部處理完成后，readyState 為 4

status 屬性

網(wǎng)絡(luò)的狀態(tài)，和 http 的狀態(tài)碼相對(duì)應(yīng)

• 200：請(qǐng)求成功
• 404：服務(wù)器資源沒(méi)有找到
• 500：服務(wù)器內(nèi)部代碼出錯(cuò)

responseText 屬性

表示服務(wù)器端返回的數(shù)據(jù)

• var data = xhr.responseText;
• data 的值為接收到的服務(wù)器端的數(shù)據(jù)
• 拿到的數(shù)據(jù)可以用來(lái)更新 DOM 對(duì)象，返回結(jié)果

異步對(duì)象的使用步驟

1. 創(chuàng)建對(duì)象：var xhr = new XMLHttpRequest();
2. 綁定事件處理函數(shù)：事件名稱 onreadystatechange（在綁定事件中做什么，根據(jù) readyState 值做請(qǐng)求的處理）
3. 初始化請(qǐng)求參數(shù)，執(zhí)行 open() 函數(shù)
4. 發(fā)送請(qǐng)求，執(zhí)行 send()?

    <script>// 異步對(duì)象做請(qǐng)求的處理工作// 從瀏覽器內(nèi)部完成請(qǐng)求的發(fā)送// 1.創(chuàng)建對(duì)象var xhr = new XMLHttpRequest();// 2.綁定事件處理函數(shù)xhr.readyStatechange = function() {if (xhr.readyState == 4 && xhr.status == 200) {// 從服務(wù)器端獲取到數(shù)據(jù)// 更新當(dāng)前頁(yè)面的 DOM 對(duì)象，完成請(qǐng)求處理var data = xhr.responseText;// 更新 DOM 對(duì)象document.getElementById('mydiv').innerHTML = data;}}// 3.初始化請(qǐng)求的參數(shù),執(zhí)行 open() 函數(shù)xhr.open('get', 'loginServlet', true);// 4.發(fā)送請(qǐng)求,執(zhí)行 send()xhr.send();</script>

原生 Ajax

Ajax 簡(jiǎn)介

Ajax 全稱為 Asynchronous JavaScript and XML，異步的 JavaScript 和 XML

通過(guò) Ajax 可以在瀏覽器中向服務(wù)器發(fā)送異步請(qǐng)求，最大的優(yōu)勢(shì)：無(wú)刷新獲取數(shù)據(jù)

Ajax 不是新的編程語(yǔ)言，而是一種將現(xiàn)有標(biāo)準(zhǔn)組合在一起使用的新方式

XML 簡(jiǎn)介

XML 可擴(kuò)展標(biāo)記語(yǔ)言

XML 被設(shè)計(jì)用來(lái)傳輸和存儲(chǔ)數(shù)據(jù)

XML 和 HTML 類似，不同的是 HTML 中都是預(yù)定義標(biāo)簽，而 XML 中沒(méi)有預(yù)定義標(biāo)簽，都是自定義標(biāo)簽，用來(lái)表示一些數(shù)據(jù)

現(xiàn)在已經(jīng)被 json 取代

Ajax 的特點(diǎn)

Ajax 的優(yōu)點(diǎn)

• 可以無(wú)需刷新頁(yè)面而與服務(wù)器進(jìn)行通信
• 允許根據(jù)用戶事件來(lái)更新部分頁(yè)面內(nèi)容

Ajax 的缺點(diǎn)

• 沒(méi)有瀏覽歷史，不能回退
• 存在跨域問(wèn)題（同源）
• SEO 不友好

HTTP 協(xié)議請(qǐng)求報(bào)文和響應(yīng)文本格式

HTTP （hypertext transport protocol）協(xié)議【超文本傳輸協(xié)議】，協(xié)議詳細(xì)規(guī)定了瀏覽器和萬(wàn)維網(wǎng)服務(wù)器之間互相通信的規(guī)則

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

重點(diǎn)是格式與參數(shù)：

1. 請(qǐng)求行：

• 包括三部分：請(qǐng)求類型（GET，POST）；URL 路徑；版本 HTTP/2.0

2. 請(qǐng)求頭：

• host：atguigu.com
• Coolie：name=guigu
• Content-type：application/x-www-form-urlencoded;

3. 空行

4. 請(qǐng)求體

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

Ajax 的使用

核心對(duì)象

XMLHttpRequest，Ajax 的所有操作都是通過(guò)該對(duì)象進(jìn)行的

使用步驟

1. 創(chuàng)建 XMLHttpRequest 對(duì)象

• var xhr = new XMLHttpRequest();

2. 設(shè)置請(qǐng)求信息

• xhr.open(method, url);
• 可以設(shè)置請(qǐng)求頭，一般不設(shè)置
• xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

3. 發(fā)送請(qǐng)求

• xhr.send(body);?
• get 請(qǐng)求不傳 body 參數(shù)，只有 post 請(qǐng)求使用

4. 接收響應(yīng)

• xhr.responseXML? 接收 xml 格式的響應(yīng)數(shù)據(jù)
• xhr.responseText? ?接收文本格式的響應(yīng)數(shù)據(jù)

    <script>xhr.readyStatechange = function() {if (xhr.readyState == 4 && xhr.status == 200) {// 從服務(wù)器端獲取到數(shù)據(jù)// 更新當(dāng)前頁(yè)面的 DOM 對(duì)象，完成請(qǐng)求處理var data = xhr.responseText;// 更新 DOM 對(duì)象document.getElementById('mydiv').innerHTML = data;}}</script>

封裝 Ajax 請(qǐng)求

function ajaxPromise() {let promise = new Promise((resolve, reject) => {let xhr = new XMLHttpRequest()xhr.open('get', url, true)xhr.onreadystatechange = () => {if (xhr.readyState === 4) {if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {resolve(xhr.responseText)} else {reject(new Error(xhr.statusText))}}}xhr.send(null)})return promise
}

解決 IE 緩存問(wèn)題

問(wèn)題：在一些瀏覽器中（IE），由于緩存機(jī)制的存在，Ajax 只會(huì)發(fā)送第一次請(qǐng)求，剩余多次請(qǐng)求不會(huì)再發(fā)送給瀏覽器而是直接加載緩存中的數(shù)據(jù)

解決方法：瀏覽器的緩存是根據(jù) url 地址來(lái)記錄的，所以我們只需要修改 url 地址即可避免緩存問(wèn)題

xhr.open("get", "/testAjax?t=" + Data.now());

Ajax 請(qǐng)求狀態(tài)

XMLHttpRequest.readyState - Web API 接口參考 | MDN

xhr,readyState 可以用來(lái)查看請(qǐng)求當(dāng)前的狀態(tài)

• 0：表示 XMLHttpRequest 實(shí)例已經(jīng)生成，但是 open() 方法還沒(méi)有被調(diào)用
• 1：表示 send() 方法還沒(méi)有被調(diào)用，仍然可以使用 setRequstHeader()，設(shè)定 HTTP 請(qǐng)求的頭信息
• 2：表示 send() 方法已經(jīng)執(zhí)行，并且頭信息和狀態(tài)碼已經(jīng)收到
• 3：表示正在接收服務(wù)器傳來(lái)的 body 部分的數(shù)據(jù)
• 4：表示服務(wù)器數(shù)據(jù)已經(jīng)完全接收，或者本次接收已經(jīng)失敗

JQuery 中的 Ajax

get 請(qǐng)求

$.get(url,[data],[callback],[type])

• url：請(qǐng)求的 URL 地址
• data：請(qǐng)求攜帶的參數(shù)
• callback：載入成功時(shí)回調(diào)函數(shù)
• type：設(shè)置返回內(nèi)容格式：xml，html，script，json，text，_default

post 請(qǐng)求

$.post(url,[data],[callback],[type])

• url：請(qǐng)求的 URL 地址
• data：請(qǐng)求攜帶的參數(shù)
• callback：載入成功時(shí)回調(diào)函數(shù)
• type：設(shè)置返回內(nèi)容格式：xml，html，script，json，text，_default

跨域

同源策略

同源策略（Same-Origin Policy）最早由 Netscape 公司提出，是瀏覽器的一種安全策略

同源：協(xié)議、域名、端口號(hào)必須完全相同

違背同源策略就是跨域

如何解決跨域

JSONP

1. JSONP是什么

• JSON with Padding
• 一個(gè)非官方的跨域解決方案，純粹憑借程序員的聰明才智開(kāi)發(fā)出來(lái)，只支持 get 請(qǐng)求

2. JSON 怎么工作的

• 在網(wǎng)頁(yè)有一些標(biāo)簽天生具有跨域功能，比如 img，link，iframe，script
• JSONP 就是利用 script 標(biāo)簽的跨域能力來(lái)發(fā)送請(qǐng)求的

3. JSONP 的使用

1. 動(dòng)態(tài)的創(chuàng)建一個(gè) script 標(biāo)簽
2. 設(shè)置 script 的 src，設(shè)置回調(diào)函數(shù)
3. 將 script 添加到 body 中
4. 服務(wù)器中路由的處理

    <script>// 動(dòng)態(tài)的創(chuàng)建一個(gè) script 標(biāo)簽var script = document.createElement("script");// 設(shè)置 script 的 src，設(shè)置回調(diào)函數(shù)script.src = "http://localhost:3000/testAJAX?callback=abc";function abc() {alert(data.name);}// 將 script 添加到 body 中document.body.appendChild(script);// 服務(wù)器中路由的處理router.get("/testAJAX", function(req, res) {console.log("收到請(qǐng)求");var callback = req.query.callback;var obj = {name: "孫悟空",age: 18}res.send(callback + "+JSON.stringify(obj)+");});</script>

4. JQuery 中的 JSONP?

<body><button id="btn">按鈕</button><ul id="list"></ul><script type="text/javascript" src="./jquery-1.12.3.js"></script><script type="text/javascript">window.onload = function() {var btn = document.getElementById('btn');btn.onclick = function() {$.getJSON("http://api.douban.com/v2/movie/in_theater?callback=?", function(data) {console.log(data);// 獲取所有電影條目var subjects = data.subjects;// 遍歷電影條目for (var i = 0; i < subjects.length; i++) {$("#list").append("<li>" +subjects[i].title + "<br/>" +"<img src=\"" + subjects[i].images.large + "\">" +"</li>")}});}}</script>
</body>

CORS

跨源資源共享（CORS） - HTTP | MDN

CORS 是什么

CORS（Cross-Origin Resource Sharing），跨域資源共享

CORS 是官方的跨域解決方案，它的特點(diǎn)是不需要在客戶端做任何特殊的操作，完全在服務(wù)器中進(jìn)行處理，支持 get 和 post 請(qǐng)求

跨域資源共享標(biāo)準(zhǔn)新增了一組 HTTP 首部字段，允許服務(wù)器聲明哪些源站通過(guò)瀏覽器有權(quán)限訪問(wèn)哪些資源

CORS 怎么工作的

CORS 是通過(guò)設(shè)置一個(gè)響應(yīng)頭來(lái)告訴瀏覽器，該請(qǐng)求允許跨域，瀏覽器收到該響應(yīng)以后就會(huì)對(duì)響應(yīng)放行

CORS 的使用

主要是服務(wù)器端的設(shè)置：

    <script>router.get("/testAJAX", function(req, res) {// 通過(guò) res 設(shè)置響應(yīng)頭，允許跨域請(qǐng)求// res.set("Access-Control-Allow-Origin", "http://127.0.0.1:3000");res.set("Access-Control-Allow-Origin", "*");res.send("textAJAX 返回的響應(yīng)");});</script>