第一章
http 協(xié)議
① 學(xué)習(xí)http協(xié)議的目標(biāo)
? 1. 調(diào)試ajax應(yīng)用程序中"看不見模不著"的錯誤
? 2. 進(jìn)行web訪問優(yōu)化 ——— 高階面試題
②URL
? 世界上任何一個建筑必須有一個"地址"
? 互聯(lián)網(wǎng)上任何一個資源(html/img/css/js/php)必須有一個"URL"才能被訪問
標(biāo)準(zhǔn)URL語法:<scheme>://<user>:<pwd>@<host>:<port>/<path>;<params>?<query>#<frage>
<scheme> 方案:?指定以哪種 協(xié)議 從服務(wù)器上獲取指定資源
? 常見方案: ?http/https/ftp/mailto/file/telnet等
<host> 主機名: 資源所在服務(wù)器ip地址或者域名(DNS轉(zhuǎn)換IP)
? http://127.0.0.1 ?<=> ?localhost，本地計算機
<port> 端口號: 每個程序在計算機上運行時都有一個監(jiān)聽端口號，整型數(shù)字(1～65535)
? DOS操作系統(tǒng)命令: netstat -an/ano
apache ?80,443
mysql ? 3306
? ftp ? ? 21 ?文件上傳下載
ssh ? ? 22?安全的遠(yuǎn)程登錄
? telnet? 23? 遠(yuǎn)程登錄(不加密)
? smtp ? ?25 ?郵件傳輸
? dns ? ? 53? 域名解析(把網(wǎng)址轉(zhuǎn)換成ip地址)
http? ? 80 超文本傳輸協(xié)議(傳送網(wǎng)頁)
? pop3 ? ?110 郵件接收協(xié)議
https? 443 加密超文本傳輸協(xié)議(https的SSL加密是在傳輸層實現(xiàn)的)
?<query> 參數(shù): http://127.0.0.1/1.php?uname=tom&upwd=123
# 相對URL/絕對URL:1. 以方案開頭絕對URL: ?
? ? ? ? ? ? ? ? ? 2. 不以方案開頭相對URL: ?<a herf="1.html"/>
③ URL/URN/URI
Unified ResourceLocator統(tǒng)一的資源定位符
Unified ResourceNaming統(tǒng)一的資源命名符
Unified ResourceIdentifier統(tǒng)一的資源識別符,URI 包含 URL 和 URN
? URL: ?<a ></a>
? ? ? ? <img src="http://tmooc.cn/1.jpg" />
? URN: ?<a href="mailto:admin@tmooc.cn"></a>
? ? ? ? <a href="tel:12345678910"></a>
_______________________________________________________________________________________________
HTTP 協(xié)議概述:用于傳輸網(wǎng)頁的內(nèi)容(html/css/js/img/mp3/avi...)
互聯(lián)早期沒有http協(xié)議，IETF (國際互聯(lián)網(wǎng)任務(wù)委員會)制定協(xié)議標(biāo)準(zhǔn)
1990年 http/0.9 ?有嚴(yán)重缺陷
1996年 http/1.0 ?標(biāo)準(zhǔn) RFC1945
1999年 http/1.1 ?沿用到現(xiàn)在
2015年?http/2發(fā)布，但不叫http/2.0，因為標(biāo)準(zhǔn)委員會不打算再發(fā)布子版本，所以下一個新版本將是http/3
http/2的特點:
? ①?二進(jìn)制協(xié)議，頭信息和數(shù)據(jù)體都是二進(jìn)制，統(tǒng)稱為幀(frame)，并定義了近十種幀
? ②?多工，復(fù)用TCP連接，在一個連接里,客戶端和瀏覽器都可以同時發(fā)送多個請求或回應(yīng),避免了隊頭堵塞
? ③?數(shù)據(jù)流，http/2將每個請求或回應(yīng)的所有數(shù)據(jù)包稱為一個數(shù)據(jù)流，都有一個獨一無二的編號，數(shù)據(jù)包發(fā)送時，必須標(biāo)記數(shù)據(jù)流id，用于區(qū)分?jǐn)?shù)據(jù)哪個數(shù)據(jù)流。規(guī)定客戶端發(fā)出的id為奇數(shù)，服務(wù)端發(fā)出的id為偶數(shù)
? ④?引入頭信息壓縮機制，一方面頭信息使用gzip或compress壓縮后再發(fā)送，另一方面客戶端和服務(wù)端同時維護(hù)一張頭信息表，所有字段都存入這個表，生成一個索引號，只發(fā)送索引號，而不需要發(fā)送同樣的字段
? ⑤?服務(wù)器推送，http/2允許服務(wù)端未經(jīng)請求主動向客戶端發(fā)送資源
http協(xié)議工作原理:請求響應(yīng)式
① 客戶端瀏覽器發(fā)送請求給web服務(wù)器(apache)，請求
② web服務(wù)器接收請求，處理數(shù)據(jù)，并且將結(jié)果返回客戶瀏覽器，響應(yīng)
http協(xié)議的數(shù)據(jù)組成:
請求(request): 請求起始行，請求頭信息，請求主體內(nèi)容
? ? ? ? ? ? ?? 客戶端瀏覽器 發(fā)送給 服務(wù)器
請求方法:GET/POST/PUT/DELETE/HEAD/CONNECT/TRACE/OPTIONS
Content-Type: 描述請求主體的內(nèi)容類型(三種) ? ? ? ? ? ?//指定提交給服務(wù)器表單數(shù)據(jù)的編碼方式
text/plain? ? ? ? ? 請求數(shù)據(jù)是普通文本，特殊字符不行
application/x-www-form-urlencoded? 請求主體經(jīng)過二進(jìn)制編碼，可以是普通字符/特殊字符/標(biāo)點符號
multipart/form-data? 表單中包含上傳文件數(shù)據(jù)，進(jìn)行二進(jìn)制編碼，普通字符/特殊字符/標(biāo)點符號不行
響應(yīng)(response): 響應(yīng)起始行，響應(yīng)頭消息，響應(yīng)主體
? ? ? ? ? ? ? ? 服務(wù)器 發(fā)送給 客戶端瀏覽器
響應(yīng)狀態(tài)碼:
100-199 ?提示性信息。100: 繼續(xù)；101: 切換協(xié)議
200-299 ?成功響應(yīng)。200: OK成功響應(yīng)
300-399 ?需要客戶端重定向。301: 永久性轉(zhuǎn)移；302: 暫時性轉(zhuǎn)移；304: 沒有被修改過
400-499 ?客戶端請求錯誤。403: 服務(wù)器收到請求但拒絕提供服務(wù)；404: Not Found請求資源不存在
? ? ? ? ? ?400:前端提交的數(shù)據(jù)字段與后臺不一致，或沒有將對象用JSON.stringify轉(zhuǎn)化為字符串
500-599 ?服務(wù)端運行錯誤。500: 內(nèi)部服務(wù)器錯誤
響應(yīng)主體的內(nèi)容類型(Content-Type):①AJAX接收服務(wù)器返回的數(shù)據(jù)
text/plain ?純文本
text/html ? 文本與網(wǎng)頁
text/css ? ?css文件
application/javascript ?js程序
application/xml ? ? ? ? xml格式的數(shù)據(jù)
application/json ? ? json格式的數(shù)據(jù)
?header('Content-Type:text/html;charset=utf-8');? //設(shè)置響應(yīng)主體類型(放在php頂部，指定php發(fā)送給ajax的數(shù)據(jù)類型)
面試題: http/1.1比http/1.0改進(jìn)了哪些地方
① 支持虛擬主機技術(shù)，在一個web服務(wù)器上同時并存多個不同域名網(wǎng)站。Host: tmooc.cn/tts/jobshow
② 支持持久化連接技術(shù)，早期http1.0不支持持久連接。服務(wù)器機制: 三次握手/四次揮手
? Connection:keep-alive 持久化連接(默認(rèn)打開)，客戶端和服務(wù)器之間的連接會保持一段時間,網(wǎng)頁數(shù)據(jù)傳輸完畢后才會斷開
③ 支持代理連接:?Proxy:xxx，對于軟件很有必要
第二章*****************************************************************************************
面試題: get請求和post請求的區(qū)別
?GETPOST
語義客戶端想獲取服務(wù)器(程序)上指定資源客戶端想傳遞數(shù)據(jù)給服務(wù)器端(程序)
如何發(fā)起瀏覽器地址欄輸入URL、超鏈接、標(biāo)簽href /src、js跳轉(zhuǎn)、表單GET、AJAX-GET表單-POST提交、AJAX-POST
安全級別不安全不安全
表單提交請求URL地址中請求數(shù)據(jù)主體
數(shù)據(jù)長度總長度(1KB),字母數(shù)字1000個(請求在url地址中)沒限制(在請求主體中)
是否需要編碼需要編碼,一個漢字9個字節(jié)自動編碼
是否適合緩存類似于查找的過程，不用每次都與數(shù)據(jù)庫連接，適合使用緩存一般是修改、刪除的操作，必須與數(shù)據(jù)庫交互，一般不使用緩存
注意: http協(xié)議并未規(guī)定GET/POST的請求長度限制是多少，對GET請求參數(shù)的限制是來源于瀏覽器或web服務(wù)器，瀏覽器或web服務(wù)器限制了url的長度，不同的瀏覽器和web服務(wù)器，限制的最大長度不一樣
瀏覽器中如何發(fā)起PUT請求: ?AJAX-PUT
瀏覽器中如何發(fā)起DELETE請求:? AJAX-DELETE
_______________________________________________________________________________________________
Ajax: Asynchronous JavaScript AND Xml: 異步JavaScript和Xml，用于在Web頁面中實現(xiàn)異步數(shù)據(jù)交互，實現(xiàn)頁面局部刷新
php內(nèi)容無變化，html中form的action="#"，input不需要name屬性，使用type="button"提交(不會跳轉(zhuǎn))
不使用ajax時需要用<input type="submit">或者<button></button>提交數(shù)據(jù)，用name添加數(shù)據(jù)
為type="button"綁定事件(注意大小寫):
① 創(chuàng)建ajax對象:var xhr = new XMLHttpRequest();
② 為xhr綁定監(jiān)聽(狀態(tài)改變觸發(fā),觸發(fā)4次)事件: ? ? ? ? ? ?//在里面加if(...)判斷使只執(zhí)行一次
xhr.onreadystatechange=function(){
if(xhr.readyState===4&&xhr.status===200){//判斷的固定格式
elem.innerHTML=xhr.responseText;//接收服務(wù)器(程序)返回數(shù)據(jù)，即請求url(php)的返回結(jié)果
}}//php尖括號外面不能有回車或空格，Network→Response調(diào)試
GET請求方法:
③ 創(chuàng)建一個與服務(wù)器程序的連接
?xhr.open('GET','login.php?name=(請求url)'+name+'&...',true(是否異步));
④ 發(fā)送請求消息: ?xhr.send(null);
POST請求方法:
③創(chuàng)建一個與服務(wù)器程序的連接:xhr.open('POST','login.php(請求url)',true(是否異步));
④ 設(shè)置請求主體內(nèi)容類型:
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
⑤ 發(fā)送請求消息: ?xhr.send('name='+name+'&pwd='+pwd+'&...');
ajax簡介:
2002年，由Google在搜索引擎，提出GoogleSuggest自動提示，提出AJAX概念
AJAX=HTML+CSS+JS+DOM+HTTP+XML
ajax的作用:?實現(xiàn) 無刷新、無提交、無跳轉(zhuǎn) 的情況下頁面內(nèi)容局部更新
ajax應(yīng)用場合:?股票走勢圖、搜索建議、聊天室、注冊...
交互模型就是Ajax在客戶端引入一個執(zhí)行引擎，它一邊應(yīng)付用戶的請求，一邊把接收到的數(shù)據(jù)傳送給服務(wù)器，同時把服務(wù)器端返回的數(shù)據(jù)，展現(xiàn)給客戶的技術(shù)模式
工作方式:
同步請求: 不使用ajax的請求方式均屬于同步，阻塞的
? ?客戶端 ? ? ? ? ? ? ? ?服務(wù)器
填寫表單等待
點擊提交發(fā)送(等待) ? ? ?操作
接收數(shù)據(jù)等待
異步請求:只有ajax一種實現(xiàn)方式，非阻塞的
? 填寫表單 ? ? ? ? ? ? ? ?操作
? 點擊提交發(fā)送(操作) ? ? ?操作
? 接收數(shù)據(jù) ? ? ? ? ? ? ? ?操作
第三章*****************************************************************************************
AJAX對象與屬性
核心對象:xhr=newXMLHttpRequest();//作用發(fā)送請求并且接收服務(wù)器返回數(shù)據(jù)
兼容性:
if(window.XMLHttpRequest){
? var xhr = newXMLHttpRequest();? ? ? ? ? ? ? ? ? ?? //W3C(IE9、chrome、firefox、safari)
}else{
? var xhr = newActiveXObject("Microsoft.XMLHTTP");//IE6、7、8(極少)
}
屬性:
readyState: 表示xhr對象當(dāng)前狀態(tài)，不能賦值，其值會隨請求→響應(yīng)過程自動改變(0→4)
? ? ? ? ? ? 可取值:?0 UNSENT ? ? 請求信息尚未發(fā)送
? ? ? ? ? ? ? ? ? ? 1 OPENED ? ? xhr己經(jīng)創(chuàng)建與web服務(wù)器連接
? ? ? ? ? ? ? ? ? ? 2 HEADERS_RECEVICED ? ?xhr己經(jīng)接收到響應(yīng)消息頭部
? ? ? ? ? ? ? ? ? ? 3 LOADING ? ?xhr正在收到響應(yīng)消息主體
4DONE ? ? ? xhr接收完成響應(yīng)消息主體
status: ? ? ? ?服務(wù)器響應(yīng)狀態(tài)碼，主要:200成功響應(yīng)
responseText: ?保存響應(yīng)消息主體(文本,響應(yīng)數(shù)據(jù))
responseXML: ? 保存響應(yīng)消息主體(XML)
成員方法:
open(method,url,isAsyn);創(chuàng)建/打開一個服務(wù)器連接
? ? method: 請求方法 GET/POST/DELETE...
? ? url: ? ?請求地址
isAsyn ?發(fā)送請求方式是異步請求(true)/同步請求(false)
send();發(fā)送請求主體
GET: ?send(null);
POST: send('name=tom&age=10(拼接)');
成員事件:
onreadystatechange(): ?當(dāng)xhr狀態(tài)改變時觸發(fā)該事件
第四章*****************************************************************************************
AJAX處理不同的數(shù)據(jù)類型(JSON/JavaScript/XML)
XML是字符串格式，用于描述數(shù)據(jù)，麻煩→重量級
JSON是字符串格式，用于描術(shù)數(shù)據(jù)，簡單→輕量級，是字符串格式的數(shù)組或?qū)ο?/p>
JSON(JavaScript Object Notation，js對象表示法)是一種輕量級的數(shù)據(jù)交換格式，易于閱讀和編寫，語法基于JS，但目前己經(jīng)被各種語言支持，成為一種"異構(gòu)系統(tǒng)交互數(shù)據(jù)的標(biāo)準(zhǔn)"
JSON字符串語法要求:
①一個JSON字符串有且只有一個根:?{...}對象 ?[...]數(shù)組
比如:'[1,2,3,4]' ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//數(shù)組
? ? ?'{?"name":"tao","age":10?}' ? ? ? ? ? ? ? ? ?//對象
? ? ?'[?{"name":"tao"},{"name":"james"}?]' ? ? ? ?//由對象組成的數(shù)組
$output=["page"=>$num];//組成數(shù)組，再用函數(shù)轉(zhuǎn)為json
echo'{"code":1,"count":'.$counts.'}';//直接拼接輸出
② JSON中可以表示數(shù)字、bool、null、字符串 ————— 字符串必須用雙引號引起來
③ []數(shù)組可以包含多個值，使用逗號分隔
④ {}對象中可以包含多個鍵值對，使用逗號分隔，鍵和值之間用冒號，鍵必須是用雙引號貼身引起來
_______________________________________________________________________________________________
PHP→AJAX→JSON開發(fā)流程
服務(wù)器端php: ?將數(shù)組轉(zhuǎn)換成json字符串，并發(fā)送給客戶端瀏覽器(注意輸出的類型,在客戶端輸出確認(rèn))
? ? ? ? ? ? ? ? ? ? ? ? ? 可能是'數(shù)組'也可能是'對象'
header('Content-Type:application/json;charset=utf-8');? //修改響應(yīng)主體內(nèi)容類型為json
$json = json_encode($arr);?//$arr數(shù)組可手工創(chuàng)建(創(chuàng)建時要加單引號)對象或 索引/關(guān)聯(lián)數(shù)組
? ? ? ? ? //或從數(shù)據(jù)庫中得到(可僅轉(zhuǎn)換字符串的某個下標(biāo)的值，再與手寫的json語句按php語法拼接)
echo '結(jié)果為:'.$json； ? ? ? //$json: json格式的字符串，可按php語法與其它數(shù)據(jù)(如php變量)拼接
json_decode($json); ? ? ? ?? //把JSON字符串解析為PHP對象或數(shù)組
客戶端js: ?將json字符串轉(zhuǎn)換成js對象
["...":"..."]json字符串 ?→ ?js數(shù)組(對象組成的數(shù)組)[{},{},{}] ?→ ?用模板字符串拼接創(chuàng)建DOM
var obj = JSON.parse(xhr.responseText);//把xhr.responseText(后端響應(yīng)的數(shù)據(jù)),轉(zhuǎn)換成對象
varstr=""；
for(var i=0;i<obj.length;i++){
? var o =?obj[i]；
?str?+= `<tr>
? ? ? ? ? ?<td>${o.name}</td>
? ? ? ? ? ?<td>${o.price}</td>
? ? ? ? ? </tr>`
}
tb1.innerHTML=str；
對象轉(zhuǎn)json字符串: var json =JSON.stringify(obj);
json字符串轉(zhuǎn)對象: var obj =JSON.parse(json);
jQuery中的API: json字符串轉(zhuǎn)為對象: var obj =$.parseJSON(json);
jQuery的ajax中:
若服務(wù)器端代碼直接返回一個常量字符串(沒有定義String變量)，success會自動將json轉(zhuǎn)為對象
若服務(wù)器端返回一個定義過的String，則success會接收到一個json字符串，不會轉(zhuǎn)為對象
_______________________________________________________________________________________________
jquery中的 ajax 方法
①$("選擇器").load('URL',[data],[fn]);發(fā)起一個 XHR 請求，data為null則為GET，否則發(fā)起POST請求，get會把服務(wù)器端返回的響應(yīng)數(shù)據(jù)(必須是html片段)追加為選定元素的innerHTML
1.若有參數(shù)fn,則在請求成功后，調(diào)用該函數(shù)
2. 接收響應(yīng)數(shù)據(jù)必須是html片段，且會被追加到$(...)中，用于添加動態(tài)php中的header和footer
比如:$("#header").load('data/header.php');
? 3. 選中元素內(nèi)容必然被清除
jQuery load() 方法是簡單但強大的 AJAX 方法
load() 方法從服務(wù)器加載數(shù)據(jù)，并把返回的數(shù)據(jù)放入被選元素中
$(selector).load(URL,[data],[callback]);
可加載: ?*.txt、*.php、*.html等文件
.load()方法，與$.get()不同，允許規(guī)定要插入的遠(yuǎn)程文檔的某個部分，通過url參數(shù)的特殊語法實現(xiàn)，如果該字符串中包含一個或多個空格，緊接第一個空格的字符串則是決定所加載內(nèi)容的jQuery選擇器
例如:?$("#result").load("ajax/test.html #container");
如果執(zhí)行該方法，則會取回ajax/test.html的內(nèi)容，不過jQuery會解析被返回的文檔，來查找?guī)в腥萜?ID的元素,該元素連同其內(nèi)容，會被插入帶有結(jié)果ID的元素中，所取回文檔的其余部分會被丟棄
jQuery使用瀏覽器的 .innerHTML 屬性來解析被取回的文檔，并把它插入當(dāng)前文檔。在此過程中，瀏覽器常會從文檔中過濾掉元素，比如<html>,<title>或<head>元素。結(jié)果是，由.load()取回的元素可能與由瀏覽器直接取回的文檔不完全相同
②?$.get('URL',[data],[fn]); 發(fā)起一個XHR GET請求,如果成功接收返回數(shù)據(jù),調(diào)用fn
③ $.post('URL',[data],fn); 發(fā)起一個XHR POST請求,并在請求主體中提交請求數(shù)據(jù),如果服務(wù)器返回成功響應(yīng)消息,調(diào)用參數(shù)fn,在該方法中處理響應(yīng)數(shù)據(jù)
④ $.getJSON('URL',[data],fn); ?發(fā)送get請求，接收響應(yīng)數(shù)據(jù)格式為json,會自動執(zhí)行JSON.parse();
⑤ $.getScript('URL',[data],fn); ?發(fā)送get請求，發(fā)送get請求，接收響應(yīng)數(shù)據(jù)格式為script,會自動執(zhí)行 eval(xhr.responseText)
⑥ jquery中對ajax操作封裝函數(shù)—————ajax(); ?萬能
語法（放在監(jiān)聽事件里，比如button）:
$.ajax({ type:'?', url:'xx.php', data:'?',?:function(接收的參數(shù),可不寫){...} });
? ? ? ? ? ? ? ? ? ? ? ? //function是回調(diào)函數(shù)(可用箭頭函數(shù)簡化)，ajax請求返回結(jié)果自動調(diào)用函數(shù)
//接收的參數(shù)是數(shù)組(對象組成的數(shù)組)[{},{},{}]或?qū)ο?，不必再轉(zhuǎn)化
type:'GET', ? ? ?請求方式POST/PUT/DELETE/HEAD...
url:'xx.php', ? ?請求的php地址 ? ? ? ? ? ? ? ? ? ? ? ? ?//url必須寫，其它可不寫
data:'name=tom&age='+num, ? ?往服務(wù)器php傳的參數(shù),寫法1，自動轉(zhuǎn)為json字符串
data:{name:'tom',age:num},? ?往服務(wù)器php傳的參數(shù),寫法2(屬性不加引號)，自動轉(zhuǎn)為json字符串
beforeSend:fn ? 請求消息發(fā)送之前回調(diào)函數(shù)(沒有網(wǎng)絡(luò)也會調(diào)用)
success:fn ? ?? 響應(yīng)完成并且響應(yīng)成功回調(diào)方法，200
error:fn ? ? ?? 響應(yīng)完成并且出錯回調(diào)方法，404,500，json格式不正確
complete:fn ? ? 響應(yīng)完成后回調(diào)(不論成敗)
獲取數(shù)據(jù)時，有時jQuery不會自動轉(zhuǎn)換為JSON格式
方法① 判斷是不是對象，是否需要從json轉(zhuǎn)換為對象
if(typeof res !== 'object'){ ?? //判斷是不是對象，是否需要從json轉(zhuǎn)換為對象
? res =?JSON.parse(res);? ? ? ? //或 res = JSON.parse(res);
}
if(Object.prototype.toString.call(res).slice(8,-1) === 'String'){? ? //更嚴(yán)格
? res = JSON.parse(res);
}
方法②?設(shè)置dataType: 'json'
若返回的不是json格式，即使?fàn)顟B(tài)碼返回200，也會執(zhí)行eroor回調(diào)函數(shù)
可通過返回的狀態(tài)碼判斷要執(zhí)行的代碼
可通過dataType選項指定其他不同數(shù)據(jù)處理方式:
"xml": ?? 返回 XML 文檔，可用 jQuery 處理
"html": ? 返回純文本 HTML 信息；包含的script標(biāo)簽會在插入dom時執(zhí)行
"script": 返回純文本 JavaScript 代碼，不會自動緩存結(jié)果，除非設(shè)置了"cache"參數(shù)
? ? 注意:在遠(yuǎn)程請求時(不在同一個域下)，所有POST請求都將轉(zhuǎn)為GET請求(因為將使用DOM的script標(biāo)簽來加載)
"json": ? 返回 JSON 數(shù)據(jù)
"jsonp": ?JSONP 格式，使用 JSONP 形式調(diào)用函數(shù)時，如 "myurl?callback=?" jQuery 將自動替換?為正確的函數(shù)名，以執(zhí)行回調(diào)函數(shù)
"text": ? 返回純文本字符串
async: false ?? //同步加載數(shù)據(jù)，發(fā)送請求時鎖住瀏覽器(需要鎖定用戶交互操作時可使用同步方式)
? ? ? ? ? ? ? ? //若有操作DOM的函數(shù)寫在ajax之前，等ajax執(zhí)行完畢才會操作DOM
processData: false ? ?//設(shè)置 rocessData 選項為 false，可防止自動轉(zhuǎn)換數(shù)據(jù)格式
