一怠晴、HTTP服務(wù)

1.1 C/S和B/S

• B/S架構(gòu)：即Broswer、Server浴捆，將所有的服務(wù)都可以通過瀏覽器來完成龄寞，比如各種網(wǎng)站。
• C/S架構(gòu)：即Client汤功、Server，不同的服務(wù)需要安裝不同的客戶端軟件溜哮，比如QQ滔金、迅雷等。
• 兩者的區(qū)別：
  1. B/S架構(gòu)：
     • 免安裝茂嗓，所有服務(wù)都通過瀏覽器來完成餐茵，節(jié)省系統(tǒng)資源，開發(fā)效率高述吸，只需要開發(fā)一個(gè)基于html5的網(wǎng)頁忿族。
     • 安全性要差一些，所有的內(nèi)容都需要從服務(wù)端加載蝌矛，性能也要差一些道批。
  2. C/S架構(gòu)：
     • 安全性要好一些，性能要好一些入撒，安裝包中可能集成一些大型的圖片隆豹，運(yùn)行更流暢。
     • 必須下載客戶端軟件才能使用服務(wù)茅逮。

1.2 客戶端&服務(wù)端

1.2.1 客戶端

具有向服務(wù)器索取服務(wù)能力的終端璃赡，比如手機(jī)、電腦等献雅，通過安裝不同的客戶端軟件碉考，可以獲取不同的服務(wù)，比如通過QQ獲得即時(shí)通訊服務(wù)挺身、通過迅雷獲得下載服務(wù)等侯谁。

1.2.2 服務(wù)端

對(duì)外提供服務(wù)器的，一般的客戶端都對(duì)應(yīng)有服務(wù)端章钾，能夠提供某種服務(wù)的機(jī)器（計(jì)算機(jī)）稱為服務(wù)器良蒸。

• 服務(wù)器類型：

  按照不同的劃分標(biāo)準(zhǔn)，服務(wù)可劃分為以下類型：

  1. 按服務(wù)類型可分為：
     • 文件服務(wù)器
     • 數(shù)據(jù)庫服務(wù)器
  2. 按操作系統(tǒng)可分為：
     • Linux服務(wù)器體
     • Windows服務(wù)器等
  3. 按應(yīng)用軟件可分為：
     • Apache服務(wù)器
     • Nginx 服務(wù)器
     • IIS服務(wù)器
     • Tomcat服務(wù)器
     • Node服務(wù)器等

• 服務(wù)器軟件：

  使計(jì)算機(jī)具備提供某種服務(wù)能力的應(yīng)用軟件伍玖，稱為服務(wù)器軟件嫩痰，通過安裝相應(yīng)的服務(wù)軟件，然后進(jìn)行配置后就可以使計(jì)算具備了提供某種服務(wù)的能力窍箍。

  常見的服務(wù)器軟件有：

  1. 文件服務(wù)器：Server-U丽旅、FileZilla、VsFTP等榄笙；
  2. 數(shù)據(jù)庫服務(wù)器：Oracle祷蝌、MySQL、PostgreSQL、MSSQL等糊啡；
  3. 郵件服務(wù)器：Postfix拄查、Sendmail等；
  4. web服務(wù)器：Apache棚蓄、Nginx堕扶、IIS、Tomcat梭依、NodeJS等稍算。

• Web(http)服務(wù)器：

  即網(wǎng)站服務(wù)器，主要提供文檔(文本役拴、圖片邪蛔、視頻、音頻)瀏覽服務(wù)扎狱，一般安裝Apache侧到、Nginx服務(wù)器軟件。

  HTTP服務(wù)器可以結(jié)合某一編程語言處理業(yè)務(wù)邏輯淤击，由此進(jìn)行的開發(fā)匠抗，通常稱之為服務(wù)端開發(fā)。

  常見的運(yùn)行在服務(wù)端的編程語言包括 PHP污抬、Jsp汞贸、Asp、Python印机、Ruby矢腻、Perl等。

1.3 網(wǎng)絡(luò)基礎(chǔ)

1.3.1 IP地址

• 局域網(wǎng)IP：是由交換機(jī)或者路由器去分配的一個(gè)32位地址射赛。

  局域網(wǎng)：是指在某一區(qū)域內(nèi)由多臺(tái)計(jì)算機(jī)互聯(lián)成的計(jì)算機(jī)組多柑。

• 公網(wǎng)IP：一般需要去電信部門申請(qǐng)。

• 查看本機(jī)IP地址：ping楣责、ipconfig竣灌、ifconfig

  如百度的IP地址：http://119.75.217.109

1.3.2 域名

由于IP地址基于數(shù)字聂沙，不方便記憶，于是便用域名來代替IP地址初嘹，域名是一個(gè)IP地址的“面具”及汉。

一個(gè)域名下面可以配置多個(gè)二級(jí)域名。

域名可以去阿里云等網(wǎng)站申請(qǐng)屯烦，購買使用坷随。

查看域名對(duì)應(yīng)的IP地址 ping、tracert

1.3.3 端口

端口號(hào)是計(jì)算機(jī)與外界通訊交流的出口驻龟，每個(gè)端口對(duì)應(yīng)不同的服務(wù)温眉。一臺(tái)計(jì)算機(jī)大概有6w多個(gè)端口，假設(shè)我的計(jì)算機(jī)要對(duì)外提供服務(wù)迅脐，我就必須占用一個(gè)端口對(duì)外提供服務(wù)。一臺(tái)計(jì)算機(jī)可以對(duì)外提供多個(gè)服務(wù)豪嗽，只要占用的端口不一樣即可谴蔑。web的端口是默認(rèn)80，mysql對(duì)外提供數(shù)據(jù)庫服務(wù)龟梦，默認(rèn)端口是3306隐锭。

• 查看端口占用情況 netstat -an
• 常見端口號(hào) 80、8080计贰、3306钦睡、21、22

1.3.4 DNS服務(wù)

DNS（Domain Name System）域名系統(tǒng)躁倒，作用是進(jìn)行域名管理荞怒。它記錄了IP 地址和域名的映射關(guān)系。

查找優(yōu)先級(jí)：本機(jī)hosts文件 --> DNS服務(wù)器秧秉。

1.4 搭建Web服務(wù)器

1.4.1 安裝WampServer

如果只安裝apache褐桌，解析不了php，所以要安裝wamp（windows apache mysql php）集成環(huán)境象迎。

1.4.2 訪問本機(jī)

• http://192.168.136.80:80
• http://127.0.0.1:80
• http://localhost:80

1.4.3 apache的配置

進(jìn)入到這個(gè)目錄下面去配置：C:\wamp\bin\apache\Apache2.2.21\conf\httpd.conf

• 配置所有的用戶都可以訪問我的服務(wù)器：在235行添加Allow from all荧嵌。
• 修改默認(rèn)訪問路徑：文件的178行DocumentRoot "f:/webwokspace"，文件的205 行 <Directory "f:/webwokspace/">砾淌。
• 修改默認(rèn)端口號(hào)：修改文件第46行Listen后邊的數(shù)值即可啦撮。

1.4.4 配置虛擬主機(jī)

在一臺(tái)Web服務(wù)器上，我們可以通過配置虛擬主機(jī)汪厨，然后分別設(shè)定根目錄赃春，實(shí)現(xiàn)對(duì)多個(gè)網(wǎng)站的管理。

• 開啟虛擬主機(jī)輔配置：

  1. 在C:\wamp\bin\apache\Apache2.2.21\conf\httpd.conf467行找到Include conf/extra/httpd-vhosts.conf劫乱，打開前邊的注釋聘鳞。

  2. 配置虛擬主機(jī)薄辅，打開conf/extra/httpd-vhosts.conf，分別修改以下三項(xiàng)：

     • DocumentRoot "文件路徑"
     • ServerName "example.com"
     • ServerAlias "www.example.com"

  3. 修改DNS（hosts）文件：

     打開C:\Windows\System32\drivers\etc\hosts抠璃，目錄是固定的站楚。

     127.0.0.1  example.com
     127.0.0.1  www.example.com
     

1.4.5 資源

我們把服務(wù)器上面的這些文件都統(tǒng)稱為資源。

• 靜態(tài)資源：可以通過瀏覽器直接打開搏嗡，直接解析的我們成為靜態(tài)資源窿春。html、js采盒、css旧乞、image我們可以理解成靜態(tài)資源。
• 動(dòng)態(tài)資源：php磅氨、jsp尺栖、asp我們可以理解為動(dòng)態(tài)資源。
• 瀏覽器只認(rèn)識(shí)靜態(tài)資源烦租。如果我的客戶端瀏覽器訪問的服務(wù)器上面的動(dòng)態(tài)資源延赌，服務(wù)器會(huì)把動(dòng)態(tài)資源轉(zhuǎn)換成靜態(tài)資源，然后再丟給客戶端瀏覽器叉橱。
• 動(dòng)態(tài)資源是在服務(wù)端運(yùn)行的挫以，靜態(tài)資源是在客戶端運(yùn)行的。

1.5 PHP基礎(chǔ)

1.5.1 語法

• php代碼必須放在：

  <?php
    /** 這里是代碼 **/ 
  ?>
  

• 避免使用中文目錄和中文文件名窃祝。

1.5.2 變量

• 變量以$開頭 字母/數(shù)字/下劃線 不能以數(shù)字開頭
• 大小寫敏感（區(qū)分大小寫）

1.5.3 數(shù)據(jù)類型

• 字符串
• 整型
• 浮點(diǎn)型
• 布爾型
• 數(shù)組

1.5.4 內(nèi)容輸出

• echo：輸出簡(jiǎn)單數(shù)據(jù)類型掐松，如字符串、數(shù)值粪小。
• print_r()：輸出復(fù)雜數(shù)據(jù)類型大磺，如數(shù)組。
• var_dump()：輸出詳細(xì)信息探膊，如對(duì)象量没、數(shù)組。

1.5.5 運(yùn)算符

• 基本與Javascript語法一致突想。
• .號(hào)表示字符串拼接符殴蹄，Javascript中為+號(hào)。

1.5.6 函數(shù)

• 與Javascript基本一致猾担。
• 函數(shù)名對(duì)大小寫不敏感袭灯。
• PHP中函數(shù)的參數(shù)可以設(shè)置一個(gè)默認(rèn)值。
• 幾個(gè)常用的函數(shù)：
  1. in_array()：是否在數(shù)組中绑嘹。
  2. count()：計(jì)算數(shù)組長(zhǎng)度稽荧。
  3. array_key_exists()：檢測(cè)數(shù)組中是否存在key。
  4. file_get_contents：讀取文件工腋。
  5. move_upload_file()：移動(dòng)上傳的文件姨丈。

1.5.7 表單處理

• 表單name屬性的是用來提供給服務(wù)端接收所傳遞數(shù)據(jù)而設(shè)置的畅卓。
• 表單action屬性設(shè)置接收數(shù)據(jù)的處理程序。
• 表單method屬性設(shè)置發(fā)送數(shù)據(jù)的方式蟋恬。
• 當(dāng)上傳文件是需要設(shè)置 enctype="multipart/form-data"翁潘，且只能post方式。
• $_GET接收 get 傳值歼争。
• $_POST接收 post 傳值拜马。
• $_FILES接收文件上傳。

1.6 客戶端與服務(wù)端交互

1.6.1 客戶端

• 提交途徑：
  1. 地址欄輸入
  2. 超鏈接（href沐绒，src）
  3. 表單提交
• 提交方式：
  1. get：地址欄輸入俩莽、超鏈接（href，src）乔遮，表單提交默認(rèn)是get扮超。
  2. post：表單提交可以設(shè)置成post。

1.6.2 服務(wù)端

• 接受請(qǐng)求：$_GET $_POST 這兩個(gè)變量得到的值都是一個(gè)關(guān)聯(lián)數(shù)組蹋肮，客戶端的數(shù)據(jù)放在關(guān)聯(lián)數(shù)組里面出刷，我們要取數(shù)據(jù)，根據(jù)key去獲取括尸。
• 處理請(qǐng)求：連接數(shù)據(jù)庫巷蚪，增刪改查。
• 響應(yīng)數(shù)據(jù)：根據(jù)處理請(qǐng)求的邏輯，給客戶端不同的響應(yīng)結(jié)果醋粟。

1.6.3 文件上傳

• 客戶端：
  1. 表單提交
  2. post方式提交
  3. 必須有一個(gè)input type=file
  4. 必須給form 設(shè)置一個(gè)屬性enctype="multipart/form-data"
• 服務(wù)端：
  1. 接收數(shù)據(jù)
  2. $_FILES接收到的數(shù)據(jù)也是一個(gè)關(guān)聯(lián)數(shù)組

1.7 網(wǎng)絡(luò)傳輸協(xié)議

指服務(wù)器和客戶端間進(jìn)行通信時(shí)的約束和規(guī)范筝闹，客戶端與服務(wù)端的數(shù)據(jù)交互并不是雜亂無章的，需要遵照（基于）一定的規(guī)范進(jìn)行焕檬。

• 常見協(xié)議：

  1. HTTP、HTTPS 超文本傳輸協(xié)議。
  2. FTP 文件傳輸協(xié)議雀摘。
  3. SMTP 簡(jiǎn)單郵件傳輸協(xié)議。

• HTTP協(xié)議：

  即超文本傳輸協(xié)議八拱，網(wǎng)站是基于HTTP協(xié)議的阵赠，例如網(wǎng)站的圖片、CSS肌稻、JS等都是基于HTTP協(xié)議進(jìn)行傳輸?shù)摹?/p>

  HTTP協(xié)議是由從客戶機(jī)到服務(wù)器的請(qǐng)求(Request)和從服務(wù)器到客戶機(jī)的響應(yīng)(Response)進(jìn)行了約束和規(guī)范清蚀。

  即HTTP協(xié)議主要由請(qǐng)求和響應(yīng)構(gòu)成。

  常用請(qǐng)求方法 POST爹谭、GET枷邪、PUT、DELETE诺凡。

  • 請(qǐng)求/請(qǐng)求報(bào)文：請(qǐng)求由客戶端發(fā)起东揣，其規(guī)范格式為：請(qǐng)求首行践惑、請(qǐng)求頭、請(qǐng)求空行嘶卧、請(qǐng)求體尔觉。

    1. 請(qǐng)求首行：由請(qǐng)求方式、請(qǐng)求URL和協(xié)議版本構(gòu)成脸候。

       GET /work/code/01http/01get.html HTTP/1.1
       

    2. 請(qǐng)求頭：

       • Host：localhost請(qǐng)求的主機(jī)穷娱。

       • Cache-Control：max-age=0控制緩存。

       • Accept：/ 接受的文檔MIME類型运沦。

       • User-Agent：告訴服務(wù)器客戶端瀏覽器的版本泵额，操作系統(tǒng)的版本。

         Referer的頭：告訴服務(wù)器請(qǐng)求來自于那個(gè)頁面携添，廣告流量統(tǒng)計(jì)嫁盲，防盜鏈。
         

       • Referer：從哪個(gè)URL跳轉(zhuǎn)過來的烈掠。

       • Accept-Encoding：可接受的壓縮格式羞秤。

    3. 請(qǐng)求空行：分隔請(qǐng)求頭和請(qǐng)求體。

    4. 請(qǐng)求體：即傳遞給服務(wù)端的數(shù)據(jù)左敌。

    注：當(dāng)以post形式提交表單的時(shí)候瘾蛋，請(qǐng)求頭里會(huì)設(shè)置Content-Type: application/x-www-form-urlencoded，以get形式提交不需要矫限。

  • 響應(yīng)/響應(yīng)報(bào)文：響應(yīng)由服務(wù)器發(fā)出哺哼，其規(guī)范格式為：狀態(tài)行、響應(yīng)頭叼风、響應(yīng)空行取董、響應(yīng)主體。

    1. 狀態(tài)行：由協(xié)議版本號(hào)无宿、狀態(tài)碼和狀態(tài)信息構(gòu)成茵汰。

       HTTP/1.1 200 OK
       

       • 狀態(tài)碼：200（代表成功），403（代表沒有權(quán)限）孽鸡，404（代表請(qǐng)求的資源沒有找到）蹂午，405（代表請(qǐng)求的方式不支持），302（請(qǐng)求重定向）彬碱，304（文檔未修改）豆胸，500（代表服務(wù)器內(nèi)部錯(cuò)誤）。

    2. 響應(yīng)頭：

       • Date：響應(yīng)時(shí)間堡妒。
       • Server：服務(wù)器信息配乱。
       • Last-Modified：文件的最后修改時(shí)間。
       • Content-Length：響應(yīng)主體長(zhǎng)度。
       • Content-Type：響應(yīng)資源的MIME類型搬泥。（MIME是標(biāo)識(shí)文件類型的桑寨，文件后綴并不能正確無誤的標(biāo)識(shí)文件的類型。）

       客戶端與服務(wù)器在進(jìn)行數(shù)據(jù)傳輸?shù)臅r(shí)候都是以字節(jié)形式進(jìn)行的忿檩，咱們可以理解成是以“文本形式”傳輸尉尾，這時(shí)瀏覽器就需要明確知道該怎么樣來解析這些文本形式的數(shù)據(jù)，MIME就是明確告知瀏覽器該如何來處理燥透。

    3. 響應(yīng)空行：分隔響應(yīng)頭和響應(yīng)體沙咏。

    4. 響應(yīng)體：即服務(wù)端返回給客戶端的內(nèi)容。

• 調(diào)試工具：

  1. 利用HTTP抓包工具在開發(fā)中可以幫我們進(jìn)行調(diào)試班套，常用抓包工具：HttpWatch肢藐、Fiddler、Charles吱韭、FireBug等吆豹。
  2. 瀏覽器插件：Firebug、HttpWatch理盆、chrome dev tools痘煤。
  3. 代理軟件：Charles、Fiddler猿规。

二衷快、AJAX編程

即 Asynchronous Javascript And XML，AJAX 不是一門的新的語言姨俩，而是對(duì)現(xiàn)有持術(shù)的綜合利用蘸拔。

本質(zhì)是在HTTP協(xié)議的基礎(chǔ)上以異步的方式與服務(wù)器進(jìn)行通信。

2.1 同步&異步

• 異步：指某段程序執(zhí)行時(shí)不會(huì)阻塞其它程序執(zhí)行哼勇，其表現(xiàn)形式為程序的執(zhí)行順序不依賴程序本身的書寫順序都伪，其優(yōu)勢(shì)在于不阻塞程序的執(zhí)行呕乎，從而提升整體執(zhí)行效率积担。反之則為同步。
• 異步交互：客戶端請(qǐng)求服務(wù)器猬仁，服務(wù)器接收到請(qǐng)求并處理請(qǐng)求帝璧，然后給客戶端一個(gè)響應(yīng)，響應(yīng)的數(shù)據(jù)不會(huì)把原來的頁面給覆蓋湿刽，我們把這種交互成為異步交互的烁。如果響應(yīng)的數(shù)據(jù)把原來的頁面給覆蓋，則為同步交互诈闺。

2.2 XMLHttpRequest

瀏覽器內(nèi)建對(duì)象渴庆，用于在后臺(tái)與服務(wù)器通信(交換數(shù)據(jù)) ，由此我們便可實(shí)現(xiàn)對(duì)網(wǎng)頁的部分更新，而不是刷新整個(gè)頁面襟雷。

2.2.1 請(qǐng)求

• 請(qǐng)求首行：

  xhr.open('get','index.php');
  

• 請(qǐng)求頭：get請(qǐng)求可以不設(shè)置

  xhr.setRequestHeader("Content-Type","text/html");
  

• 請(qǐng)求主體：

  xhr.send(null);
  

2.2.2 響應(yīng)

HTTP響應(yīng)是由服務(wù)端發(fā)出的刃滓，作為客戶端更應(yīng)關(guān)心的是響應(yīng)的結(jié)果。

由于服務(wù)器做出響應(yīng)需要時(shí)間（比如網(wǎng)速慢等原因）耸弄，所以我們需要監(jiān)聽服務(wù)器響應(yīng)的狀態(tài)咧虎，然后才能進(jìn)行處理。

onreadystatechange是Javascript的事件的一種计呈，其意義在于監(jiān)聽XMLHttpRequest的狀態(tài)砰诵。

• 獲取狀態(tài)行（包括狀態(tài)碼&狀態(tài)信息）：

  xhr.status            //狀態(tài)碼
  xhr.statusText        //狀態(tài)信息
  

• 獲取響應(yīng)頭：

  xhr.getResponseHeader('Content-Type');        //獲取指定頭信息
  xhr.getAllResponseHeaders();              //獲取所有響應(yīng)頭信息
  

• 響應(yīng)主體：

  xhr.responseText;
  xhr.responseXML;
  
  我們需要檢測(cè)并判斷響應(yīng)頭的MIME類型后確定使用request.responseText或者request.responseXML
  

2.2.3 API

• xhr.open() 發(fā)起請(qǐng)求，可以是get捌显、post方式茁彭。
• xhr.setRequestHeader() 設(shè)置請(qǐng)求頭。
• xhr.send() 發(fā)送請(qǐng)求主體get方式使用xhr.send(null)扶歪。
• xhr.onreadystatechange = function () {} 監(jiān)聽響應(yīng)狀態(tài)尉间。
• xhr.status表示響應(yīng)碼，如200?击罪。
• xhr.statusText表示響應(yīng)信息哲嘲，如OK??。
• xhr.getAllResponseHeaders() 獲取全部響應(yīng)頭信息媳禁。
• xhr.getResponseHeader('key') 獲取指定頭信息眠副。
• xhr.responseText、xhr.responseXML都表示響應(yīng)主體竣稽。

2.3 GET與POST的區(qū)別（面試中經(jīng)常問到）

• GET沒有請(qǐng)求主體囱怕，使用xhr.send(null)。
• GET可以通過在請(qǐng)求URL上添加請(qǐng)求參數(shù)毫别。
• POST可以通過xhr.send('name=itcast&age=10')娃弓。
• POST需要設(shè)置：xhr.setRequestHeader("Content-Type","application/x-www-form-ullencoded");
• GET效率更好（應(yīng)用多）。
• GET大小限制約4K岛宦，POST則沒有限制台丛。

2.4 XML

XML是一種可擴(kuò)展的標(biāo)記語言，很類似HTML砾肺，其宗旨是用來傳輸數(shù)據(jù)挽霉，具有自我描述性（它里面的標(biāo)簽是自定義的）。

2.4.1 語法

• 必須有且僅有一個(gè)根元素变汪。

• 第一行必須是文檔申明：

  <?xml version="1.0" encoding="utf-8" ?>
  

• 不可有空格侠坎、不可以數(shù)字或.開頭、大小寫敏感裙盾。

• 不可交叉嵌套实胸。

• 屬性雙引號(hào)（瀏覽器自動(dòng)修正成雙引號(hào)了）他嫡。

• 特殊符號(hào)要使用實(shí)體。

• 注釋和HTML一樣庐完。

雖然可以描述和傳輸復(fù)雜數(shù)據(jù)涮瞻，但是其解析過于復(fù)雜并且體積較大，所以實(shí)現(xiàn)開發(fā)已經(jīng)很少使用了假褪。

2.4.2 示例

2.5 JSON

即 JavaScript Object Notation署咽，另一種輕量級(jí)的文本數(shù)據(jù)交換格式，獨(dú)立于語言生音。

2.5.1 語法

• 數(shù)據(jù)在名稱/值對(duì)中宁否。
• 數(shù)據(jù)由逗號(hào)分隔(最后一個(gè)健/值對(duì)不能帶逗號(hào))。
• 花括號(hào)保存對(duì)象方括號(hào)保存數(shù)組缀遍。
• 使用雙引號(hào)慕匠。

2.5.2 json解析

JSON數(shù)據(jù)在不同語言進(jìn)行傳輸時(shí)，類型為字符串域醇，不同的語言各自也都對(duì)應(yīng)有解析方法台谊，需要解析完成后才能讀取。

• Javascript 解析方法：eavl()譬挚、JSON對(duì)象 JSON.parse()锅铅、JSON.stringify()；?
• PHP解析方法：json_encode()减宣、json_decode()盐须。

總結(jié)：JSON體積小、解析方便且高效漆腌，在實(shí)際開發(fā)成為首選贼邓。

2.6 jQuery中的ajax

jQuery ajax介紹

jQuery為我們提供了更強(qiáng)大的Ajax封裝：

• $.ajax({}) 可配置方式發(fā)起Ajax請(qǐng)求
• $.get() 以GET方式發(fā)起Ajax請(qǐng)求
• $.post() 以POST方式發(fā)起Ajax請(qǐng)求
• $('form').serialize() 序列化表單（即格式化key=val&key=val）
• url 接口地址
• type 請(qǐng)求方式
• timeout 請(qǐng)求超時(shí)
• dataType 服務(wù)器返回格式
• data 發(fā)送請(qǐng)求數(shù)據(jù)
• beforeSend: function () {} 請(qǐng)求發(fā)起前調(diào)用
• success 成功響應(yīng)后調(diào)用
• error 錯(cuò)誤響應(yīng)時(shí)調(diào)用
• complete 響應(yīng)完成時(shí)調(diào)用（包括成功和失敗）

6個(gè)方法：ajax get post getScript getJSON load

2.7 模板引擎

2.7.1 原理剖析

其本質(zhì)是利用正則表達(dá)式闷尿，替換模板當(dāng)中預(yù)先定義好的標(biāo)簽塑径。

2.7.2 流行模板引擎

• BaiduTemplate：http://tangram.baidu.com/BaiduTemplate/
• ArtTemplate：https://github.com/aui/artTemplate
• velocity.js：https://github.com/shepherdwind/velocity.js/
• Handlebars：http://handlebarsjs.com/
• 參考資料：http://blog.jobbole.com/56689/

2.7.3 artTemplate

1. 引入template-native.js
2. <% 與%>符號(hào)包裹起來的語句則為模板的邏輯表達(dá)式
3. <%=content%>為輸出表達(dá)式

<script type="text/template" id="tempalteId">
    <% for(var i=0;i<rows.length;i++){%>
        <tr>
            <td><%=rows[i].username %></td>
            <td><%=rows[i].age %></td>
        </tr>
    <%}%>
</script>

$(function () {
    $("input").on("click", function () {
        $.ajax({
            url: "01template.php",
            type: "get",
            success: function (data) {
                //解析數(shù)據(jù)，將數(shù)據(jù)放到頁面上面.
                //之前：data 轉(zhuǎn)成JavaScript 對(duì)象
                //創(chuàng)建標(biāo)簽填具，然后將標(biāo)簽跟數(shù)據(jù)組裝到一起
                //現(xiàn)在:使用template 來解析
                //js/template-native.js 文件里面提供.
                //alert(data);
                //1:模板id
                //2：數(shù)據(jù)统舀，這里要求的數(shù)據(jù)一定要是一個(gè)對(duì)象.{}
                //[] 改成這個(gè)格式 {}
                var obj = {
                    rows: data
                }
                var html = template("tempalteId", obj);
                console.log(html);
                $("table").append(html);
            }
        })
    });
})

2.8 同源&跨域

2.8.1 同源

同源策略是瀏覽器的一種安全策略，所謂同源是指灌旧，域名绑咱，協(xié)議绰筛，端口完全相同枢泰。

2.8.2 跨域

不同源則跨域。

例如http://www.example.com/

2.8.3 跨域方案

1. 頂級(jí)域名相同的可以通過domain.name來解決，即同時(shí)設(shè)置 domain.name = 頂級(jí)域名（如example.com）
2. document.domain + iframe
3. window.name + iframe
4. location.hash + iframe
5. window.postMessage()

2.8.4 JSONP

JSONwith Padding

• 原理剖析

  其本質(zhì)是利用了<script src=""></script>標(biāo)簽具有可跨域的特性毛甲，由服務(wù)端返回一個(gè)預(yù)先定義好的Javascript函數(shù)的調(diào)用年叮，并且將服務(wù)器數(shù)據(jù)以該函數(shù)參數(shù)的形式傳遞過來，此方法需要前后端配合完成玻募。

  • 文件后綴并不能代表什么只损，關(guān)建我們要看服務(wù)器返回的內(nèi)容，比如css.php

    這時(shí)返回的內(nèi)容為 echo 'body {background:color}'我們可以通過content-type:text/css來指定瀏覽器該如何解析七咧，返回的內(nèi)容

  • 同樣我們也可以js文件以.php結(jié)尾跃惫，比如js.php 這時(shí)我們可以指定Content-Type: text/javascript可告知瀏覽器要以javascript來執(zhí)行我們返回的內(nèi)容，如果返回的是一個(gè)javascript的一個(gè)函數(shù)調(diào)用艾栋，那么在這個(gè)函數(shù)調(diào)用過程中可以將跨域請(qǐng)求來的數(shù)據(jù)以“實(shí)參”的傳遞過來爆存，并且這個(gè)實(shí)參一般是JSON格式的

  • 只能以GET方式請(qǐng)求

2.8.5 jQuery中的JSONP

jQuery 的$.ajax() 方法當(dāng)中集成了JSONP的實(shí)現(xiàn)，可以非常方便的實(shí)現(xiàn)跨域數(shù)據(jù)的訪問蝗砾。?

• dataType: 'jsonp' 設(shè)置dataType值為jsonp即開啟跨域訪問
• jsonp 可以指定服務(wù)端接收的參數(shù)的“key”值先较，默認(rèn)為callback
• jsonpCallback 可以指定相應(yīng)的回調(diào)函數(shù)，默認(rèn)自動(dòng)生成