ajax概述

Ajax

服務器

類型

• 按照服務類型：文件服務器，數據庫服務器，郵件服務器，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}}默認索引&dollar;index 默認值&dollar;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();
    }
  }
})