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

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

全局刷新

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

缺點：

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

局部刷新

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

特點：

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

原理：

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

異步請求對象

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

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

這個異步對象用于在后臺與服務(wù)器交換數(shù)據(jù)。

異步對象 XMLHttpRequest

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

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

var xhr = new XMLHttpRequest();

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

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

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

• JavaScript：創(chuàng)建 XMLHttpRequest 對象，調(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ǎng)頁的情況下，能夠更新部分頁面內(nèi)容的新方法
• Ajax 不是新的編程語言，是多種技術(shù)的綜合使用
• 包含了 JavaScript，dom，CSS，服務(wù)器端技術(shù)，servlet，jsp，jdbc 等，還有 json 數(shù)據(jù)格式

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

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

異步對象的屬性和方法

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

• var xhr = new XMLHttpRequest();

異步對象方法

open()

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

send()

• 使用異步對象發(fā)送請求

異步對象屬性

readyState 屬性

請求的狀態(tài)

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

status 屬性

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

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

responseText 屬性

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

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

異步對象的使用步驟

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

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

原生 Ajax

Ajax 簡介

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

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

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

XML 簡介

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

XML 被設(shè)計用來傳輸和存儲數(shù)據(jù)

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

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

Ajax 的特點

Ajax 的優(yōu)點

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

Ajax 的缺點

• 沒有瀏覽歷史，不能回退
• 存在跨域問題（同源）
• SEO 不友好

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

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

請求報文

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

1. 請求行：

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

2. 請求頭：

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

3. 空行

4. 請求體

響應(yīng)報文

Ajax 的使用

核心對象

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

使用步驟

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

• var xhr = new XMLHttpRequest();

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

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

3. 發(fā)送請求

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

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)前頁面的 DOM 對象，完成請求處理var data = xhr.responseText;// 更新 DOM 對象document.getElementById('mydiv').innerHTML = data;}}</script>

封裝 Ajax 請求

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 緩存問題

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

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

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

Ajax 請求狀態(tài)

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

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

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

JQuery 中的 Ajax

get 請求

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

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

post 請求

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

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

跨域

同源策略

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

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

違背同源策略就是跨域

如何解決跨域

JSONP

1. JSONP是什么

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

2. JSON 怎么工作的

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

3. JSONP 的使用

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

    <script>// 動態(tài)的創(chuàng)建一個 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("收到請求");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 是官方的跨域解決方案，它的特點是不需要在客戶端做任何特殊的操作，完全在服務(wù)器中進(jìn)行處理，支持 get 和 post 請求

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

CORS 怎么工作的

CORS 是通過設(shè)置一個響應(yīng)頭來告訴瀏覽器，該請求允許跨域，瀏覽器收到該響應(yīng)以后就會對響應(yīng)放行

CORS 的使用

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

    <script>router.get("/testAJAX", function(req, res) {// 通過 res 設(shè)置響應(yī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>