看看這些基礎概念你瞭解多少？

一、服務器

類型

• 按照服務類型：文件服務器，數據庫服務器，郵件服務器，Web服務器
• 按照操作系統：Linux服務器，Windows服務器
• 按照應用軟件：Apache服務器，Nginx服務器，IIS服務器，Tomcat服務器，WebSphere服務器，boss服務器，Node服務器

軟件

• 文件服務器：Server-U，FileZilla，VsFTP（File Transfer Protocol）等
• 數據庫服務器：oracle，mysql，SQL server，DB2，ACCESS等
• 郵件服務器：Postfix，Sendmail等
• HTTP服務器：Apache，Nginx，IIS，Tomcat，NodeJS等

HTTP服務器

• 網站服務器，主要提供文檔（文本，圖片，視頻，音頻）瀏覽服務
• 可以結合某一種編程語言處理業務邏輯，由此進行開發，被稱爲服務端開發
• 常見的編程語言有php，java，.net，Python，Ruby，Perl等

客戶端

• 向服務端索取服務能力的終端
• 以瀏覽器爲環境，結合HTML，CSS，JavaScript進行的開發叫做前端開發

二、網絡

IP地址

• 32位（二進制），查看本機IP地址：ping，ipconfig，ifconfig（Linux）

域名

• IP基於數字，不方便記憶，用域名代替IP地址

DNS服務

• Domain Name System：域名和IP地址相互映射的一個分佈式數據庫
• 記錄IP地址和域名之間對應關係的服務
• 優先級：本機的host優先於DNS服務器
• ipconfig、flushdns刷新DNS
• 客戶端將域名傳入DNS，DNS把域名轉換成IP地址返回給客戶端，之後客戶端根據IP地址發送請求給服務器，服務器響應，返回信息
  

端口

• 端口是計算機與外界通訊交流的出口，每個端口對應不同的服務
• 查看端口占用情況：netstat-an
• 常見端口：80，8080，3306，21，22

三、架構

C/S結構

• Client Sever不同的服務器需要安裝不同的客戶端軟件
• 比如 QQ，迅雷等一系列軟件。換一臺電腦就要重新安裝。並且還需要適配不同的系統。不方便

B/S結構

• Broswer Sever所有的服務都可以通過瀏覽器來完成，不需要兼容操作系統，不同客戶端都可以操作
• 比如百度腦圖
• 操作穩定性較差，流暢度較弱

四、PHP

簡單程序

• 地址欄模擬
• 默認返回的內容，瀏覽器解析成html
• 每句代碼必須加分號
• PHP：Hypertext Preprocessor超文本預處理器
• PHP語言的運算符和JS一樣

<?php
      //用來指定編碼集
    header('Content-Type:text/html;charset=utf-8');
    //這是一個最簡單的PHP程序
    echo 'hello world!';
?>

變量

• 變量以$開頭，由字母數字下劃線組成，不能以數字開頭
• 大小寫敏感（區分大小寫）
• 輸出順序是自上向下的，相當於js中的document.write()
• 單引號中的內容就是字符串
• 雙引號中的內容會執行
• 符後面的內容和構成一個變量名稱
• 如果前邊聲明的變量是$name=xgg;
• 輸出echo “$name17” 會報錯，因爲找不到名爲”name17”的變量
• 輸出echo “$name 17” 會輸出 xgg 17

數據類型

<?php
      //字符型
    $str='hello world';
    //整型
    $num=10;
    //浮點型
    $float=10.5;
    //布爾型
    //布爾型在輸出的時候，true爲1，false爲空
    $bool=true;
?>

• 要注意索引數組和關聯數組的區別

<?php
      //索引數組
    $indexarr=array(1,2,3);
    echo $indexarr[0];
    echo $indexarr[2];
    //關聯數組
    $arr=array('name'=>'itcast','age'=>10);
    echo $arr['name'];
    echo $arr['age'];
?>

• public相當於JS中的全局變量
• private相當於JS中的局部變量
• 對象

<?php
      class Person {
        public $name='itcast';
          public $age=10;
    }
    $person=new Person;
    echo $person->name;
?>

• null是PHP中一種特殊的數據類型，表示空值，表示爲該變量設置任何值null，不區分大小寫，null和NULL一樣

運算符&內容輸出

• echo：輸出簡單數據類型，如字符串，數值。如果用echo輸出數組，只能得到類型名字，得不到內容
• print_r()：輸出複雜數據類型的結構，如數組
• var_dump()：輸出詳細信息，如對象，數組

$arr=array('itcast','今年','10歲了');
//只能輸出簡單類型
echo $arr;
//輸出詳細信息
print_r($arr);
$hello='hello';
//輸出詳細信息
var_dump($hello);

函數

• PHP中有超過700個內建函數
• 函數名對大小寫不敏感
• 有參數一定傳，但是如果有默認值可以不傳

表單

• 表單name屬性設置服務端接收所傳遞數據，如果不帶name屬性就無法提交
• 表單action屬性設置接收數據的處理程序，表示提交的地址（後臺處理程序）
• 表單method屬性設置發送數據的方式，表示提交的方式
• 當上傳文件時需要設置enctype=”multipart/form-data”，並且只能用post的方式上傳
• 遞交方式和獲取方式要對應
• $_GET，PHP的內置變量，接收get傳值（簡單數據類型）默認提交方式（提交數據拼接到URL地址欄中）提交大小4k左右（地址欄長度有限）
• $_POST，PHP的內置變量，接收post傳值（簡單數據類型）數據提交到請求報文中（更安全）。提交大小幾乎沒有限制。
• $_FILES，PHP的內置變量，接收文件上傳（獲取文件類型）
• $ _POST，$_GET獲取的都是字符串類型的數據
• $_FILES獲取文件類型數據

文件導入

• include導入的是HTML頁面
• require導入的是PHP程序

五、傳輸協議

HTTP

• HTTP（HyperText Transfer Protocol）超文本傳輸協議
• HTML（HyperText Markup Language）超文本標記語言
• http協議是由客戶端到服務器的請求（request）和從服務器到客戶端的響應（response）進行了約束和規範。即http協議主要由請求和響應組成。
• 常用的請求方法POST，GET，PUT，DELETE
• GET和POST請求方式的差異
• GET沒有請求主體，使用xhl.send(null)
• GET可以通過在請求URL上添加請求參數
• POST可以通過設置xhl.send(‘name=itcast&age=17’)
• POST需要設置
• GET效率更好
• GET大小限制4k，POST沒有限制

請求和請求報文

• 由客戶端發起，規範爲：請求行，請求頭，請求主體
• 請求行：
  • get方式會在地址後面拼接參數
    • /heima11/day02/03.form.php?username=xgg&password=1 HTTP/1.1
  • post方式就是簡單的地址
    • /heima11/day02/03.form.php HTTP/1.1
• 請求頭：
  • Host：localhost請求的主機
  • User-Agent：很重要，包含客戶端的信息
  • Accept：接受的文檔MIME類型，text/html，application/xhtml+xml等內容
  • Accept-Language：可接受的語言，zh-CN等內容
  • Accept-Encoding：可接受的壓縮格式，gzip，deflate，sdch，br等內容
  • Cache-Control：max-age=0控制緩存
  • Content-Type：application/x-www-form-urlencoded以post形式提交表單的時候，請求頭中會設置這一項，以get形式提交，則沒有
  • Referer：從哪個URL跳轉過來的
• 請求主體：
  • post方式，傳遞給服務端的數據
  • get方式，空的

響應和響應報文

• 由服務器發起，規範爲：狀態行，響應頭，響應主體
• 狀態行：
  • 由協議版本號，狀態碼和狀態信息構成
  • 200成功，304緩存，403權限，404未找到，500+服務端錯誤
• 響應頭：
  • Date：響應時間
  • Server：服務器信息
  • Content-Length：響應主體長度
  • Content-Type：響應資源的類型
• 響應主體：
  • 服務端返給客戶端的內容

六、Ajax編程

異步

程序執行時不會阻塞其他程序執行，程序的執行順序不依賴程序本身的書寫順序。相反則爲同步（按照程序的順序，依次往下執行，必須等上一程序執行完成之後才能執行下一程序，阻礙程序的執行）。

XMLHttpRequest

<script>
      window.onload=function() {
        renderBanner();
          renderNav();
    }
    var renderBanner=function() {
        var xhr=new XMLHttpRequest();
          xhr.open('get','banner.php');
          xhr.send(null);
          xhr.onreadystatechange=function() {
            if(xhr.readyState==4){
                if(xhr.status==200) {
                    document.querySelector('.banner').innerHTML=xhr.responseText;
                }
            }
        }
    }
    var renderNav=function() {
        var xhr=new XMLHttpRequest();
          xhr.open('post','nav.php');
          xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
          xhr.send('');
          xhr.onreadystatechange=function() {
            if(xhr.readyState==4){
                if(xhr.status==200) {
                    document.querySelector('.nav').innerHTML=xhr.responseText;
                }
            })
        }
    }
</script> 

瀏覽器內建對象，用於在後臺與服務器通信（交換數據），可以實現對網頁的部分更新，而不是刷新整個頁面

Get請求

• 請求行數據直接加到地址欄後面
• 請求頭內容默認
• 請求主體爲空
• 通過encodeURI()用來對中文參數進行轉碼，防止亂碼

<script>
      //利用js內置對象
      //初始化XMLHttpRequest
      var xhr=new XMLHttpRequest();
      //遵循http協議
      //請求行
      xhr.open('get','09.ajax.php?name=xgg&age=17');
      //請求頭 爲空
  
      //請求主體
      xhr.send(null);
</script>

Post請求

• 請求行就是地址
• 請求頭需要Content-Type的設置
• 請求主體發送請求

<script>
      //利用js內置對象
      //初始化XMLHttpRequest
      var xhr=new XMLHttpRequest();
      //遵循http協議
      //請求行
      xhr.open('post','09.ajax.php');
      //請求頭
      xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
      //請求主體
      xhr.send('name=xgg&age=17');
</script>

響應

• readyState有五種狀態
• 0 請求未初始化
• 1 請求已經建立，但是還沒有發送
• 2 請求已經發送，正在處理中
• 3 請求在處理中，響應有部分數據可用
• 4 響應已完成
• 服務器作出響應需要時間，所以需要監聽服務器的狀態
• 當readyState的狀態發生改變的時候，觸發onreadystatechange函數

<script>
  xhr.onreadystatechange=function () {
    if(xhr.readyState==4) {
      /*代表通信完成，這個時候取響應報文*/
      /*響應報文*/
      /*響應狀態行*/
      /*狀態碼*/
      console.log(xhr.status);
      /*狀態信息*/
      console.log(xhr.statusText);
      /*響應頭*/
      /*獲取所有內容，字符串形式*/
      console.log(xhr.getAllResponseHeaders());
      console.log(xhr.getResponseHeader('Content-Type'));
      /*正確返回的內容*/
      if(xhr.status==200) {
        console.log(xhr.responseText);
      }
    }
  }
</script>

XML

• 指的是可擴展標記語言，主要用來輸出和存儲數據
• 必須有一個根元素，可以自定義，標籤也可以自定義
• 空格會被保留，所以不可有空格，不可以數字或點開頭，大小寫敏感
• 不可交叉嵌套
• 可以在標籤裏定義屬性，屬性雙引號單引號都可以（瀏覽器自動修正成雙引號）
• 特殊符號用實體 & gt;& lt;& nbsp;
• 註釋寫法和HTML一樣，不能放在開頭
• 必須閉合（雙標籤）
• xml本質是字符串，瀏覽器在解析的時候，會按照xml格式去預覽
• 可以描述和傳輸複雜的數據，但是解析獲取複雜並且體積大，開發很少使用
• 在忽略互聯網速度的內網還是可以用XML
• 銀行網銀系統中大量使用
• XML是用來傳輸和存儲數據的，而HTML被設計用來顯示數據的
• XML旨在傳輸數據，HTML旨在顯示信息
• php中用file_get_contents的方式獲取xml元素
• header中一定要把html改成xml否則會報錯
• 通過responseText獲取的內容是字符串
• 通過responseXML獲取的內容

JSON

• 輕量級文本數據交換格式
• 獨立於語言（每種語言都認識）
• 數據在名稱/值對中
• 不能寫註釋
• 數據由逗號分隔（最後一個鍵值對不能帶逗號）
• 花括號裏面只有一條數據的時候，不加逗號（相當於最後一條數據）
• 花括號保存對象方括號保存數組
• 使用雙引號
• json對象沒有變量
• json形式的數據結尾沒有分號
• json數據中的鍵必須用雙引號包括
• 比XML更小更快更容易解析
• 在數據的傳輸過程中，json以文本方式傳輸，JS操作的是json對象，所以json對象和json字符串之間需要相互轉換
• JSON.parse json轉換成javascript
• JSON.stringify javascript轉換成json
• json_decode json轉換成php
• json_encode php轉換成json

七、模板引擎 artTemplate

語法概述

• 模板：參照html代碼和數據綁定
• script type=”text/html”不讓內容當做js解析執行，在頁面中不存在
• 模板綁定後可以在模板內書寫模板語法
• 模板語法只能書寫在<% %>中
• 使用數據的時候，如果這個數據是傳入對象的屬性，這個屬性相當於一個模板內可以使用的變量
• 模板的特殊語法和js一樣，模板內部可以定義變量，使用分支循環語句
• 不能使用模板外部變量（全局變量），例如$，window，console等
• 默認渲染方式是字符串：<%= %>默認渲染方式是字符串，防止xss攻擊（cross site scripting 跨站腳本攻擊） <%=# %>默認渲染方式是html，從後臺傳過來的數據可以是 html標籤
• 簡潔模板必須寫在{{}}中
• {{each model}} {{/each}}默認索引$index 默認值$value
• {{each model as item i}} {{/each}}默認索引item值 i索引
• {{if}}{{else}}{{/if}}分支
• 簡介模板不能定義變量
• 模板引擎作用，渲染工具（把數據動態生成html格式的代碼渲染在頁面當中）
• 國外：handlebars，mustache
• 國內：artTemplate最好，baiduTemplate，velocity
• 使用步驟：準備數據，準備模板，數據和模板綁定返回html格式的字符串，渲染頁面

瀑布流加載方法

• window.onload和$(function)的區別
• window.onload是將文檔中所有的元素都加載出來
• $(function() {})是將文檔中主要元素加載出來
• 圖片還沒有加載出來的時候，下面如果排新的子容器，就會把上面的圖片蓋住，出現圖片黏連的情況
• 兩種解決方案：
  • 需要用window.onload，先把圖片都加載出來，防止這種情況發生
  • 限定圖片的尺寸，圖片沒有加載出來的時候，尺寸也可以先佔空間，尺寸可以由後臺數據傳到前端，根據子容器的比例，算出圖片的大小再進行設置
• 一部分瀏覽器有兼容問題，在動態渲染20個容器的時候，選擇器可能會失效

八、跨域

跨域&同源

• 同源：協議域名端口號一樣

• 瀏覽器一般會阻止跨域的操作（同源策略）

• 具有跨域能力的標籤，不具有操作跨域元素的能力

  • link可以請求跨域的數據，不能取到內容
  • script通過src的請求，都是get請求，後臺返回的內容引入進來，不管返回的是什麼類型，都會被解析成JS並執行，但是可能會報錯（不符合JS語法）
  • iframe能對同源文檔中的元素進行操作，實際是在頁面中開了一個內嵌的頁面

domain

• 手動設置頂級域名，跨域可以互相操作，但是兩個域的頂級域名必須相同，並且兩個域需要同時設置document.domain=’頂級域名’

其他

• hash、name、postMessage

JSONP

• xhr無法進行跨域請求
• JSONP原理：動態創建script標籤，通過src屬性發送跨域請求，服務端返回一個預先定義好的javascript函數的調用
• 發送之前必須顯示先聲明一個函數，函數名字與參與傳遞的名字要一致
• 核心是動態添加script標籤來調用服務器提供的
• 遵循js語法，定義一個變量，根據變量獲取後臺數據
• 前端定義一個函數success，後臺返回一個函數 callback=success，理解成成功回調函數
• 可以傳複雜數據，通過拼接JSON格式的數據，返回的就是JSON對象
• 一端維護，callback值是前後端的約定，jQuery會自動生成callback
• 因爲是get請求，所以只能在地址欄拼接數據
• JSONP的jQuery語法，與JSON的jQuery的語法比較，強制類型轉換改成jsonp就可以了

cors

• 如果傳輸的數據量比較大，那麼需要用post的方式進行傳輸，就不能再使用JSONP，應該使用cors
• 使用方法：添加屬性，允許某個域名訪問。弊端：存在瀏覽器兼容問題
• *表示通配符，表示所有網站都可以訪問，不安全
• 可以加具體的域名，比如http://yueban.com

jQuery提供的方法

$.ajax({
  //以何種方式進行傳輸
  type:'post',
  //地址
  url:'../api/removeUser.php',
  //傳輸的數據
  data:{id:id},
  //傳輸數據的類型，默認是json，有jsonp形式
  dataType:'json',
  //發送數據之前的函數
  beforeSend:function(){
          $btn.addClass('btn-loading')
  },
  //成功之後的函數，可以傳入數據
  success:function(data){
        $btn.removeClass('btn-loading');
        if(data.status=='ok'){
        $deletModal.modal('hide');
          render();
    }
  }
})