JS、數據本地存儲、promise、php簡單學習、mysql增刪改查

數據交互

第一部分數據存儲

一、前言

（1）通訊協議

（2）HTTP協議

二、cookie

（1）概念

（2）特色

（3）使用

（4）封裝

（5）cookie與json

（6）XSS攻擊

三、localStorage

（1）概念

（2）優點

（3）侷限

（4）使用

四、後臺環境的搭建

前言

（1）Apache服務器

（2）webserver

五、PHP

（1）概念（2）做用

（3）輸出HTML

（4）變量命名規則

（5）變量數據類型

（6）變量做用域

（7）預約義變量

（8）數組

（9）數組的方法

（10）php與json的經常使用方法

六、mysql

（1）概念

（2）數據類型

（3）語法

七、PHP鏈接MySql

（1）鏈接MySql

（2）PHP操做數據庫

第二部分數據交互手段

一、Ajax

（1）概念

（2）優點

（3）使用

（4）封裝

（4）依賴調用

二、Promise（1）概念

（2）使用1

（3）使用2

三、跨域

（1）同源策略

（2）Jsonp跨域

（3）服務器端跨域

四、先後端不分離

（1）get與post

（2）post請求

（3）接口文件

五、接口文檔編寫

（1）接口文檔範例

（2）接口

第一部分數據存儲

一、前言

（1）通訊協議

通訊協議是指雙方實體完成通訊或服務所必須遵循的規則和約定。協議定義了數

據單元使用的格式，信息單元應該包含的信息與含義，鏈接方式，信息發送和接收的

時序，從而確保網絡中數據順利地傳送到肯定的地方。

在計算機通訊中，通訊協議用於實現計算機與網絡鏈接之間的標準，網絡若是沒

有統一的通訊協議，電腦之間的信息傳遞就沒法識別。 通訊協議是指通訊各方事前

約定的通訊規則，能夠簡單地理解爲各計算機之間進行相互會話所使用的共同語言。

兩臺計算機在進行通訊時，必須使用的通訊協議。

常見的協議有：TCP/IP協議、HTTP協議等等。

（2）HTTP協議超文本傳輸協議（HTTP，HyperText Transfer Protocol）是互聯網上應用最爲

普遍的一種網絡協議。全部的WWW文件都必須遵照這個標準。該協議用於從WWW

服務器傳輸超文本到本地瀏覽器的傳輸協議。它可使瀏覽器更加高效，使網絡傳輸

減小。它不只保證計算機正確快速地傳輸超文本文檔，還肯定傳輸文檔中的哪一部

分，以及哪部份內容首先顯示(如文本先於圖形)等。

HTTP協議是一個無狀態的通訊協議，一旦數據交換完畢，客戶端與服務器端的

鏈接就會關閉，再次交換數據須要創建新的鏈接。它基於TCP協議的一種高級協議，

用於客戶端和服務器直接的通訊。http 默認端口號 80 https（secure）協議 默

認端口號443

二、cookie

（1）概念

指某些網站爲了辨別用戶身份，進行session（會話）跟蹤而存儲在用戶本地終

端上的數據（一般通過加密）。以文本形式存在。

谷歌瀏覽器存儲地址： C:\Users\用戶名

\AppData\Local\Google\Chrome\User Data\Default\文件夾下的Cookies文件。

注：cookie 只有在服務器環境下才有用

禁用cookie：改變瀏覽器的cookie設置。若是瀏覽器徹底禁止cookie功能的

話，大多數網站的基本功能沒法正常使用。

（2）特色

chrome和safari沒有對cookie的個數作限制，通常瀏覽器限制同一域名數量爲

50個。

cookie文件的總大小通常爲4KB（同一個域名）。

只能使用文本文件。

讀取有域名限制。 域名 www.baidu.com www.taobao.com so.com

不可跨域讀取,只能由來自 寫入cookie的 同一域名 的網頁可進行讀取。 簡單的

講就是,誰寫的cookie,誰纔有權利讀取

時效限制。 每一個cookie都有時效,最短的有效期是,會話級別:就是當瀏覽器關閉,

那麼cookie當即銷燬。

（3）使用

添加cookie

1 document.cookie="key=value"//鍵值對的形式

2 document.cookie = 'test1=hello';

3 document.cookie = 'test2=world';

4 //在瀏覽器中查看一下如今的cookie是什麼樣子 打開控制檯 點擊application 就能看

到cookies

5 //注意 document.cookie一次只能寫入一個 Cookie，並且寫入並非覆蓋，而是添加讀取cookie

1 document.cookie

2 document.cookie // "test1=hello; test2=world"

3 //上面代碼從document.cookie一次性讀出兩個 Cookie，它們之間使用 分號空格 分隔。

必須手動還原，才能取出每個 Cookie 的值。

4 //對cookie數據進行處理

5 var cookies = document.cookie.split('; ');

6 for (var i = 0; i < cookies.length; i++) {

7 console.log(cookies[i]);

8 }

9 // foo=bar// baz=bar

修改cookie

1 document.cookie = 'test2=hah';

2 document.cookie // "test1=hello; test2=hah"

失效時間

1 //expires ，沒有設置失效時間的cookie 在瀏覽器關閉之後就會自動刪除，若是設置了失

效時候在將來的時間，就可讓cookie保存的時間長一點

2 //設置失效時間格式：document.cookie = 「key=value;expires=」+ oDate;

3 var oDate = new Date();//電腦當前的時間

4 oDate.setDate(oDate.getDate() + 7);

5 document.cookie = 「key=value;expires=」+ oDate;

6 //上面代碼設置cookie的過時時間爲7天之後

刪除cookie

1 //將cookie的值覆蓋爲空，並將失效時間設置爲過去的時間

2 var oDate = new Date();

3 oDate.setDate(oDate.getDate() ‐7);

4 document.cookie = 「test=;expires=」+ oDate;

5 //將cookie的過時時間設置爲 7天前，test 這個cookie 就獲取不到了

設置域名domain設置路徑path

1 //設置域名：document.cookie = 「key=value;domain=www.baidu.com「;

2 //注：必須在綁定域名的服務器才能夠設置域名，上不一樣服務器之間的cookie文件不能共

享。

3 //設置路徑：path

4 //設置路徑： document.cookie = 「key=value;path=/「;

5 //注：在同一路徑下的網頁能夠共享cookie，路徑不一樣時，不能夠訪問。

6 document.cookie = 「key=value;path=/「;//設置cookie的路徑爲跟路徑，這樣咱們網

站下的全部頁面能夠共享cookie

中文的處理

1 //若是有中文內容，須要用encodeURIComponent(‘xxxx’)進行編碼，再使用decodeURICo

mponent(‘xxxx’)進行解碼，解決中文亂碼的問題。（4）封裝

1 let Cookie = {}

2 ;(function(){

3 console.log(1)

4 function setCookie({

5 key,

6 value,

7 day,

8 path = '/'

9 }) {

10 console.log(key, value)

11 if (day) {

12 let d = new Date()

13 d.setDate(d.getDate() + day)

14 document.cookie = `${key}=${value};expires=${d};path=${path}`

15 } else {

16 console.log(`${key}=${value}`)

17 document.cookie = `${key}=${value};path=${path}`

18 }

19 }

20 function removeCookie({

21 key,

22 path = '/'

23 }) {

24 console.log({

25 key,

26 path,

27 day: ‐7

28 })

29 setCookie({

30 key,

31 path,

32 day: ‐7

33 })

34 }

35 // removeCookie({key:'age'})

36 function getCookie({

37 key

38 }) {

39 //abc=你好; age=18; name=aaa40 console.log(document.cookie)

41 let arr = document.cookie.split('; ')

42 for (let i = 0; i < arr.length; i++) {

43 let tmpArr = arr[i].split('=')

44 if (tmpArr[0] == key) {

45 return tmpArr[1]

46 }

47 }

48 return null

49 }

50 Cookie.setCookie = setCookie

51 Cookie.getCookie = getCookie

52 Cookie.removeCookie = removeCookie

53 })();

54 // Math.random()

55 // random()

56 console.log(Cookie)

57 Cookie.getCookie({key:'age'})

（5）cookie與json

JSON 格式（JavaScript Object Notation 的縮寫）是一種用於數據交換的文本

格式，2001年由 Douglas Crockford 提出，目的是取代繁瑣笨重的 XML 格式。

相比 XML 格式，JSON 格式有兩個顯著的優勢：書寫簡單，一目瞭然；符合

JavaScript 原生語法，能夠由解釋引擎直接處理，不用另外添加解析代碼。因此，

JSON 迅速被接受，已經成爲各大網站交換數據的標準格式，並被寫入標準。

每一個 JSON 對象就是一個值，多是一個數組或對象

JSON 對值的類型和格式有嚴格的規定

1. json的值只能是數組或對象，不能是函數、正則表達式對象、日期對象。

2. 字符串必須使用雙引號表示，不能使用單引號。

3. 對象的鍵名必須放在雙引號裏面。

4. 數組或對象最後一個成員的後面，不能加逗號。

如下都是合法的 JSON。

1 如下都是合法的 JSON。

2 ["one", "two", "three"]

3 { "one": 1, "two": 2, "three": 3 }

4 {"names": ["張三", "李四"] }

5 [ { "name": "張三"}, {"name": "李四"} ]

如下都是不合法的 JSON。

1 { name: "張三", 'age': 32 } // 屬性名必須使用雙引號2 [32, 64, 128, 0xFFF] // 不能使用十六進制值

3 { "name": "張三", "age": undefined } // 不能使用 undefined

4 { "name": "張三",

5 "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),

6 "getName": function () {

7 return this.name;

8 }} // 屬性值不能使用函數和日期對象

stringify方法---將json對象轉爲字符串 存入cookie。

1 //將json對象轉換成字符串

2 JSON.stringify([1, 1])// '[1,1]'

3 JSON.stringify({ name: "張三" })// '{"name":"張三"}'

parse將json字符串轉成對象。

1 JSON.parse('{}') // {}

2 JSON.parse('[1, 5]') // [1, 5]

3 var o = JSON.parse('{"name": "張三"}');

4 o.name // 張三

（6）XSS攻擊

跨站腳本攻擊(Cross Site Scripting)，爲不和層疊樣式表(Cascading Style

Sheets, CSS)的縮寫混淆，故將跨站腳本攻擊縮寫爲XSS。惡意攻擊者往Web頁面裏

插入惡意Script代碼，當用戶瀏覽該頁之時，嵌入其中Web裏面的Script代碼會被執

行，從而達到惡意攻擊用戶的目的。

跨站腳本攻擊的核心在於腳本的成功注入，並二次展現。一般服務器端都會對文

本內容進行安全性的過濾。

三、localStorage

（1）概念

HTML5新特性，用來做爲本地存儲使用。

解決了cookie存儲空間不足的問題(cookie中每條cookie的存儲空間爲4k)。

localStorage中通常瀏覽器支持的是5M大小，這個在不一樣的瀏覽器中localStorage會

有所不一樣。

（2）優點

localStorage拓展了cookie的4K限制

localStorage會能夠將第一次請求的數據直接存儲到本地，這個至關於一個5M大小的

針對於前端頁面的數據庫，相比於cookie能夠節約帶寬，可是這個倒是隻有在高版本的瀏

覽器中才支持的。

（3）侷限

瀏覽器的大小不統一，而且在IE8以上的IE版本才支持localStorage這個屬性。目前全部的瀏覽器中都會把localStorage的值類型限定爲string類型，這個在對咱們日

常比較常見的JSON對象類型須要一些轉換。

（4）使用

數據寫入

1 var storage=window.localStorage;

2 //寫入a字段

3 storage["a"]=1;

4 //寫入b字段

5 storage.a=1;

6 //寫入c字段

7 storage.setItem("c",3);

數據讀取

1 //第一種方法讀取

2 var a=storage.a;

3 console.log(a);

4 //第二種方法讀取

5 var b=storage["b"];

6 console.log(b);

7 //第三種方法讀取

8 var c=storage.getItem("c");

9 console.log(c)

數據修改

1 var storage=window.localStorage;

2 //寫入a字段

3 storage["a"]=1;

4 storage.a=4; //修改

5 console.log(storage.a)

數據刪除

1 storage.setItem("c",3);

2 console.log(storage);

3 storage.removeItem("a");

清空localStorage

1 storage.clear();

注意事項

1. 通常咱們會將JSON(js中的對象)存入localStorage中，可是在localStorage會自動

將localStorage轉換成爲字符串形式

2. 這個時候咱們可使用JSON.stringify()這個方法，來將JSON轉換成爲JSON字符

串1 var data={

2 name:'zhangsan',

3 sex:'man',

4 };

5 var d=JSON.stringify(data);

6 storage.setItem("data",d);

7 //將JSON字符串轉換成爲JSON對象輸出

8 var json=storage.getItem("data");

9 var jsonObj=JSON.parse(json);

四、後臺環境的搭建

前言

目前咱們的計算機中有兩個web服務器（hbuilder自帶的web服務一個是wamp

中的apache）其中自帶的web服務訪問地址：127.0.0.1：8020，wamp提供的web

服務地址：localhost

自帶的web服務不具備解析php的能力

--LAMP（linux+apache+mysql+php）

--WAMP（window+apache+mysql+php）

（1）Apache服務器

Apache HTTP Server（簡稱APache）是Apache軟件基金會的一個開放源碼的

網頁服務器

apache是世界使用排名第一的Web服務器軟件。它能夠運行在幾乎全部普遍使

用的計算機平臺上，因爲其跨平臺和安全性被普遍使用，是最流行的Web服務器端

軟件之一。它快速、可靠而且可經過簡單的API擴充，將Perl/Python等解釋器編譯

到服務器中。同時Apache音譯爲阿帕奇。

Apache的誕生極富有戲劇性。當NCSAWWW服務器項目停頓後，那些使用

NCSAWWW服務器的人們開始交換他們用於該服務器的補丁程序，他們也很快認識

到成立管理這些補丁程序的論壇是必要的。就這樣，誕生了Apache Group，後來這

個團體在NCSA的基礎上建立了Apache。

（2）webserver

Web Server中文名稱叫網頁服務器或web服務器。WEB服務器也稱爲

WWW(WORLD WIDE WEB)服務器，主要功能是提供網上信息瀏覽服務

Web服務器能夠解析(handles)HTTP協議。當Web服務器接收到一個HTTP請求

(request)，會返回一個HTTP響應(response)，例如送回一個HTML頁面。爲了處理

一個請求(request)，Web服務器能夠響應(response)一個靜態頁面或圖片，進行頁

面跳轉(redirect)，或者把動態響應(dynamic response)的產生委託(delegate)給一

些其它的程序例如CGI腳本，JSP(JavaServer Pages)腳本，servlets，ASP(ActiveServer Pages)腳本，服務器端(server-side)JavaScript，或者一些其它的服務器端技

術。不管它們(譯者注：腳本)的目的如何，這些服務器端的程序一般產生一個HTML

的響應(response)來讓瀏覽器能夠瀏覽，通俗的講，當你在瀏覽器輸入一個網址的時

候，就發起了一個http請求，請求某一個服務器，而後服務器 上的程序（服務端）

決定給你什麼網頁

五、PHP

（1）概念

PHP 是 "PHP Hypertext Preprocessor" 的首字母縮略詞，是一種建立動態交

互性站點的強有力的服務器端腳本語言。PHP 是免費的，而且使用普遍。對於像微

軟 ASP 這樣的競爭者來講，PHP 無疑是另外一種高效率的選項。

（2）做用

PHP 可以生成動態頁面內容

PHP 可以建立、打開、讀取、寫入、刪除以及關閉服務器上的文件

PHP 可以接收表單數據

PHP 可以發送並取回 cookies

PHP 可以添加、刪除、修改數據庫中的數據

PHP 可以限制用戶訪問網站中的某些頁面

PHP 可以對數據進行加密

（3）輸出HTML

不帶格式的HTML

帶格式的HTML

使用定界符表示HTML（<<<EOD(...HTML代碼...)EOD）

把PHP切入HTML

PHP註釋：單行註釋（//或者#）與多行註釋（/**/）

（4）變量命名規則

變量以 $ 符號開頭，其後是變量的名稱

變量名稱必須以字母或下劃線開頭

變量名稱不能以數字開頭

變量名稱只能包含字母數字字符和下劃線（A-z、0-9 以及 _）

變量名稱對大小寫敏感（$y 與 $Y 是兩個不一樣的變量）

php沒有建立變量的命令，變量在賦值時被建立

（5）變量數據類型

布爾值：true true var_dump()

整型integer

浮點型flaot字符串string

數組array

對象object（php經過定義類聲明變量）

測試php類型---var_dump(變量)

echo只能接受字符串類型

php根據變量的值，自動將變量轉換爲正確的數據類型

（6）變量做用域

php變量能夠在腳本的任意位置進行聲明。

三種做用域

1. 全局做用域（global）

1 index.php文件

2 <!DOCTYPE html>

3 <html>

4 <head>

5 <meta charset="UTF‐8">

6 <title></title>

7 </head>

8 <body>

9 <?php

10 $x=5; // 全局做用域

11

12 function myTest() {

13 $y=10; // 局部做用域

14 global $x;

15 echo "<p>測試函數內部的變量：</p>";

16 echo "變量 x 是：$x";

17 echo "<br>";

18 echo "變量 y 是：$y";

19 }

20 myTest();

21 echo "<p>測試函數以外的變量：</p>";

22 echo "變量 x 是：$x";

23 echo "<br>";

24 echo "變量 y 是：$y";

25 ?>

26 </body>

27 </html>

重寫全局變量1 <?php

2 $x=5;

3 $y=10;

4 function myTest() {

5 $GLOBALS['y']=$GLOBALS['x']+$GLOBALS['y'];

6 }

7 myTest();

8 echo $y; // 輸出 15

9 ?>

2. 局部做用域（local）

3. 靜態（static）

函數完成或執行後，會刪除全部變量。不過，有時我須要不刪除某個局部變量。

實現這一點須要進一步工做。要完成這一點須要在聲明變量時使用static關鍵字。每

次函數調用時，所存儲的信息都是函數最後一次被調用時所包含的信息。---該變量

依然是函數的局部變量

1 <?php

2 function myTest() {

3 static $x=0;

4 echo $x;

5 $x++;

6 }

7 myTest();

8 myTest();

9 myTest();

10 ?>

（7）預約義變量

服務器變量$_SERVER,保存頭信息，路徑，腳本位置等的數組

Cookie變量$_COOKIE，保存cookie值的數組

HTTP GET變量$_GET，保存url請求和表單get提交的變量的數組

HTTP POST變量$_POST，保存post方法生成的變量的數組

Request變量$_REQUEST

PHP的變量大小寫敏感，而用戶定義的大小寫不敏感

（8）數組

數組的建立

不帶索引的數組

帶索引的數組

二維數組使用變量建立數組compact() $a = 「aaa」;$b = 「bbb」; $c=array(1,2);

compact(「a」,」b」,」c」);「a」,」b」,」c」在結果中對應key值

使用兩個數組建立一個數組 $a=array(1,2,3);$b=array(「a」,」b」,」c」);

array_combine($a,$b);$a的值爲key，$b的值爲value

創建指定範圍單元的數組range(start,end,step)

（9）數組的方法

in_array($val,$arr) 判斷數組中是否包含某個值，返回布爾值

取得鍵名和鍵值 array_keys($arr) array_values($arr)

移除數組中重複的值,返回去重以後的數組 array_unique($arr)

list($a,$b) = $arr;把數組中的值賦給指定的變量

foreach($arr as $val) 遍歷數組

計算數組的長度 count($arr)

添加刪除 array_push($arr,1,2) array_pop($arr)

統計數組中全部的值出現的次數array_count_values($arr)

（10）php與json的經常使用方法

isset($a)判斷一個變量是否認義

json_encode($val) 用於對變量進行 JSON 編碼，該函數若是執行成功返回

JSON 數據，不然返回 FALSE。

json_encode($students,JSON_UNESCAPED_UNICODE)

json_decode($val,true) 函數用於對 JSON 格式的字符串進行解碼，並轉換爲

PHP 變量。

True表示轉換成數組，false轉換成對象。

六、mysql

（1）概念

數據庫（Database）是按照數據結構來組織、存儲和管理數據的倉庫，每一個數

據庫都有一個或多個不一樣的API用於建立，訪問，管理，搜索和複製所保存的數據。

咱們也能夠將數據存儲在文件中讀寫數據速度相對較慢。因此，如今咱們使用關係型

數據庫管理系統（RDBMS）來存儲和管理的大數據量。所謂的關係型數據庫，是建

立在關係模型基礎上的數據庫，藉助於集合代數等數學概念和方法來處理數據庫中的

數據。

MySQL是一個關係型數據庫管理系統，由瑞典MySQL AB公司開發，目前屬於

Oracle公司。MySQL是一種關聯數據庫管理系統，關聯數據庫將數據保存在不一樣的

表中，而不是將全部數據放在一個大倉庫內，這樣就增長了速度並提升了靈活性。

數據庫：數據庫是一些關聯表的集合

數據表：表是數據的矩陣。在一個數據庫中的表看起來像一個簡單的電子表格主鍵：主鍵是惟一的。一個數據表中只能包含一個主鍵。你能夠用主鍵來查詢數

據。

（2）數據類型

mysql支持多種類型，大體能夠分爲三類：數值、日期/時間和字符串（字符）

類型。

數值類型：INT或INTEGER 大整數值；decimal 類型能夠精確地表示很是大或

很是精確的小數 ，用於定義貨幣要求精確度高的數據

字符串類型：VARCHAR 變長字符串

日期和時間類型：DATETIME 混合日期和時間值 格式 YYYY-MM-DD

HH:MM:SS

（3）語法

查找數據

1 SELECT

2 student.id,

3 student.username,

4 student.time,

5 student.money

6 FROM

7 student

8 WHERE

9 student.id = 1 Limit 10

10 //至關於

11 SELECT * FROM student WHERE student.id > 1 Limit 10

插入數據

1 INSERT INTO student (username, time, money) VALUES ('趙雲', '2018‐05‐15 2

3:53:52', '44');

修改

1 UPDATE student SET username='韓信' WHERE (id='10')

刪除

1 DELETE FROM student WHERE (id='4')

七、PHP鏈接MySql

（1）鏈接MySql

1 $dbhost = 'localhost:3306'; // mysql服務器主機地址

2 $dbuser = 'root'; // mysql用戶名

3 $dbpass = ''; // mysql用戶名密碼

4 $conn = mysqli_connect($dbhost, $dbuser, $dbpass);

5 if($conn )6 {

7 echo '數據庫鏈接成功！';

8 }

9 ?>

（2）PHP操做數據庫

插入數據

1 <?php

2 $dbhost = 'localhost:3306'; // mysql服務器主機地址

3 $dbuser = 'root'; // mysql用戶名

4 $dbpass = ''; // mysql用戶名密碼

5 $conn = mysqli_connect($dbhost, $dbuser, $dbpass);

6 if(! $conn )

7 {

8 die('鏈接失敗: ' . mysqli_error($conn));

9 }

10 echo '鏈接成功<br />';

11 // 設置編碼，防止中文亂碼

12 mysqli_query($conn , "set names utf8");

13

14 $username = '魯班七號';

15 $money = '250';

16 $time = '2018‐03‐06';

17 //注意這裏在字符串內部也能夠寫變量

18 $sql = "INSERT INTO student ".

19 "(username,money, time) ".

20 "VALUES ".

21 "('$username','$money','$time')";

22

23 mysqli_select_db( $conn, 'db1' );

24 $retval = mysqli_query( $conn, $sql );

25 if(! $retval )

26 {

27 die('沒法插入數據: ' . mysqli_error($conn));

28 }

29 echo "數據插入成功\n";

30 mysqli_close($conn);

31 ?>

修改數據庫數據

1 <?php

2 $dbhost = 'localhost:3306'; // mysql服務器主機地址3 $dbuser = 'root'; // mysql用戶名

4 $dbpass = ''; // mysql用戶名密碼

5 $conn = mysqli_connect($dbhost, $dbuser, $dbpass);

6 if(! $conn )

7 {

8 die('鏈接失敗: ' . mysqli_error($conn));

9 }

10 echo '鏈接成功<br />';

11 // 設置編碼，防止中文亂碼

12 mysqli_query($conn , "set names utf8");

13 $sql = "UPDATE student SET username='韓信33' WHERE (id='10')";

14 mysqli_select_db( $conn, 'db1' );

15 $retval = mysqli_query( $conn, $sql );

16 if(! $retval )

17 {

18 die('沒法更改數據: ' . mysqli_error($conn));

19 }

20 echo "數據更新成功\n";

21 mysqli_close($conn);

22 ?>

刪除數據庫數據

1 <?php

2 $dbhost = 'localhost:3306'; // mysql服務器主機地址

3 $dbuser = 'root'; // mysql用戶名

4 $dbpass = ''; // mysql用戶名密碼

5 $conn = mysqli_connect($dbhost, $dbuser, $dbpass);

6 if(! $conn )

7 {

8 die('鏈接失敗: ' . mysqli_error($conn));

9 }

10 echo '鏈接成功<br />';

11 // 設置編碼，防止中文亂碼

12 mysqli_query($conn , "set names utf8");

13 $sql = "DELETE FROM student WHERE (id='6')";

14

15 mysqli_select_db( $conn, 'db1' );

16 $retval = mysqli_query( $conn, $sql );

17 if(! $retval )

18 {

19 die('沒法刪除數據: ' . mysqli_error($conn));20 }

21 echo '數據刪除成功！';

22 mysqli_close($conn);

23 ?>

第二部分數據交互手段

一、Ajax

（1）概念

全稱：Asynchronous(異步) Javascript And Xml。前端常常須要使用後端提供

的接口獲取數據，怎麼向服務器請求數據呢，就是使用ajax

AJAX不是一種新的編程語言，而是一種用於建立更快更好以及交互性更強的

WEB應用程序技術，該技術在98年先後獲得了應用。

經過AJAX，你的JS能夠經過JS的XMLHttpRequest對象在頁面不重載的狀況下

與服務器直接進行通訊。這樣能夠在服務器請求到想要的數據，而不是整個頁面。

AJAX的核心就是JS的XMLHttpRequest對象。xhr對象是在IE5中首次引入，它是一

種支持異步請求的對象。

（2）優點

無刷新更新數據。（局部刷新）

異步與服務器通訊。（不讓界面卡頓）

基於標準被普遍支持。

界面與應用分離。（先後端分離）

節省帶寬

（3）使用

全部現代瀏覽器(IE7+，chrome，firefox，opera，safari)均內建XMLHttpRequest

對象。可是IE五、6使用ActiveXObject對象

1. 第一步建立XMLHttpRequest對象

1 var xhr = null;

2 xhr = new XMLHttpRequest();

2. 第二步打開服務器的鏈接

1 // url（接口）

2 var url = 'https://api.readhub.me/topic?lastCursor=40462&pageSize=20'

3 xhr.open('GET', url);

3. 第三步發送請求

1 //發送

2 xhr.send(null)

4. 第四步回調函數1 //xhr.onload 回調函數是在異步請求加載完成後所執行的函數,當JavaScript 監測到請

求的數據所有傳輸完成後就會觸發該函數

2 //指定回調函數，請求成功（回調）調用這個函數

3 xhr.onload= function() {

4 if(xhr.status == 200) {

5 //請求成功

6 //console.log(xhr.responseText)

7 var obj = JSON.parse(xhr.responseText)

8 console.log(obj)

9 }

10 }

5. 綜合代碼

1 //發起 ajax

2 //1.建立xmlhttprequest 對象

3 var xhr = null;

4 if(window.ActiveXObject) {

5 xhr = new ActiveXObject(’Microsoft.XMLHTTP’);

6 } else if(window.XMLHttpRequest) {

7 xhr = new XMLHttpRequest();

8 }

9 //2. 打開連接 請求方式get

10 // url（接口）

11 var url = 'https://api.readhub.me/topic?lastCursor=40462&pageSize=20'

12 xhr.open('GET', url);

13 //3.發送

14 xhr.send(null);

15 //4.指定回調函數，請求成功（回調）調用這個函數

16 xhr.onload= function() {

17 if(xhr.status == 200) {

18 //請求成功

19 //console.log(xhr.responseText)

20 var obj = JSON.parse(xhr.responseText)

21 console.log(obj)

22 }

23 }

（4）封裝

1 let zxios = {}

2 zxios.get = function(url){

3 let p = new Promise(function(resolve,reject){

4 let xhr = new XMLHttpRequest()5 xhr.open('get',url)

6 xhr.send(null)

7 xhr.onload = function(){

8 if(xhr.status==200){

9 let jsonStr= xhr.responseText

10 let obj = JSON.parse(jsonStr)

11 resolve(obj)

12 }else{

13 reject(xhr.status)

14 }

15 }

16 })

17 return p

18 }

19 //使用方法

20 // zxios

21 // .get(url)

22 // .then(function(){

23 // })

24 // .catch(function(){

25 // })

26

（4）依賴調用

Ajax請求須要順序，如何設置呢？

1 //登陸

2 ajax(loginAPi,function(obj){

3 console.log(obj)

4 //獲取用戶信息

5 ajax(getUserInfoAPi,function(obj1){

6 console.log(obj1)

7 })

8 });

二、Promise

（1）概念

異步編程的一種解決方案，比傳統解決方案（回調函數和事件）更合理強大。它

由社區最先提出和實現，ES6 將其寫進了語言標準，統一了用法，原生提供了

Promise對象

ES6 規定，Promise對象是一個構造函數，用來生成Promise實例。（2）使用1

1 const promise = new Promise(function(resolve, reject) {

2 // ... some code 這裏寫異步操做代碼

3 ajax(api1,function(res){

4 // 異步操做成功,請求數據成功

5 resolve(value);//將promise設置爲resolved（完成狀態）

6 },function(error){

7 // 異步操做失敗,請求數據失敗

8 reject(error);////將promise設置爲rejected （失敗狀態）

9 })

10 });

11 //resolve函數的做用是 在異步操做成功時調用，並將異步操做的結果，做爲參數傳遞出

去；

12 //reject函數的做用是 在異步操做失敗時調用，並將異步操做報出的錯誤，做爲參數傳遞

出去

13 //Promise實例生成之後，能夠用then方法分別指定resolved狀態和rejected狀態的回調

函數

（3）使用2

then方法能夠接受兩個回調函數做爲參數。第一個回調函數是Promise對象的狀

態變爲resolved時調用，第二個回調函數是Promise對象的狀態變爲rejected時調

用。其中，第二個函數是可選的，不必定要提供。這兩個函數都接受Promise對象傳

出的值做爲參數。

1 promise.then(function(value) {

2 // success

3 ajax(api2,function(res){

4

5 })

6 }).catch(function(error){

7 //error

8 })

9 //在success 裏面咱們能夠發起第二個請求使ajax請求有順序

10 //new Promise(ajax1).then(ajax2).catch() ，使用了鏈式調用代替了嵌套結構，這

樣就避免了層層嵌套使的代碼可讀性太差！

三、跨域

（1）同源策略

1. 概念

同源策略是一種約定，只有在本網站的網頁上才能使用本網站的接口。

所謂同源：是指協議、域名、端口都相同

（2）Jsonp跨域1. 由來

同源策略的限制，使得他們要想一想方設法要跨域！即域名不一樣，別人也能使用你

們的接口！這個技術就是jsonp跨域，JSONP = JSON WITH PADDING，就是把

json數據裝在內部。

2. 原理

咱們發現凡是擁有src這個屬性的標籤都擁有跨域的能力，如img，script。那我

們就能夠把數據裝載到JS文件內，供客戶端調用和進一步處理。

3. 使用

1 /定義回調函數

2 window.fn = function(res) {

3 }

4 //建立script標籤

5 var sc = document.createElement('script')

6 sc.src = api;

7 document.body.appendChild(sc)；

（3）服務器端跨域

CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。

它容許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用

的限制。

CORS須要瀏覽器和服務器同時支持。目前，全部瀏覽器都支持該功能，IE瀏覽器不能

低於IE10。整個CORS通訊過程，都是瀏覽器自動完成，不須要用戶參與!

四、先後端不分離

（1）get與post

方式名稱 數據位置 數據大小 安全性

get 數據附在url以後，存放在HTTP

協議頭中

傳送數據量較小，最大

2kb，受瀏覽器限制 安全性較低

post 數據存放在HTTP包體中

傳送數據量大，通常不

受限制，通常受瀏覽器

限制

安全性較高

（2）post請求

1 //發起 ajax

2 //1.建立xmlhttprequest 對象

3 var xhr = new XMLHttpRequest();

4 //2. 打開連接 請求方式 post

5 var url = 'http://127.0.0.1/bk/mysql‐api‐username.php'

6 xhr.open('POST', url);

7 //3.發送8 //post 模擬表單的 須要增長請求頭

9 xhr.setRequestHeader('Content‐Type', 'application/x‐www‐form‐urlencoded')

10 //get 請求 參數在url中

11 //post 請求參數 body中

12 //post參數以下形式

13 //lastCursor=40462&pageSize=20

14 var pa = 'username=張三';

15 xhr.send(pa);//設置請求體的內容

16 //指定回調函數，請求成功（回調）調用這個函數

17 //請求耗時操做

18 xhr.onreadystatechange = function() {

19 console.log(111, xhr.readyState)

20 if(xhr.status == 200) {

21 //請求成功

22 //console.log(xhr.responseText)

23 var obj = JSON.parse(xhr.responseText)

24 console.log(obj)

25 }

26 }

（3）接口文件

1 接口文件以下

2 mysql‐api‐username.php

3 <?php

4 header('Access‐Control‐Allow‐Origin:*');

5 //只須要在服務器上設置一句話，就可以讓接口支持服務器跨域

6 $dbhost = 'localhost:3306'; // mysql服務器主機地址

7 $dbuser = 'root'; // mysql用戶名

8 $dbpass = ''; // mysql用戶名密碼

9 $conn = mysqli_connect($dbhost, $dbuser, $dbpass);

10 if(! $conn )

11 {

12 die('鏈接失敗: ' . mysqli_error($conn));

13 }

14 // 設置編碼，防止中文亂碼

15 mysqli_query($conn , "set names utf8");

16 $findUsername =$_REQUEST['username'];

17 //$findUsername = '張三22';

18 //編寫sql語句

19 $sql = "SELECT * FROM student WHERE

student.username='$findUsername'";20 //選擇要查詢的數據庫名稱

21 mysqli_select_db( $conn, 'db1' );

22 //查詢數據

23 $retval = mysqli_query( $conn, $sql );

24 if(! $retval )

25 {

26 die('沒法讀取數據: ' . mysqli_error($conn));

27 }

28 //echo json_encode(mysqli_fetch_all($retval,MYSQLI_ASSOC));

29 // 把 全部的查詢結果轉爲數組

30 $res = mysqli_fetch_all($retval,MYSQLI_ASSOC);

31 if(count($res)){

32 $arr['isExist'] = true;

33 }else{

34 $arr['isExist'] = false;

35 }

36 //返回json數據

37 echo json_encode($arr);

38 mysqli_close($conn);

39 ?>

五、接口文檔編寫

（1）接口文檔範例

1 接口地址：http://127.0.0.1/mysql‐api‐username.php

2 接口功能：檢測用戶名是否存在

3 接口類型：get請求

4 接口參數：

5 參數 是否必選 參數說明

6 username y 用戶名

7 接口請求示例：http://127.0.0.1/mysql‐api‐username.php?username=張三

8 返回json數據：

9 {

10 "isExist":false//表示是否存在用戶

11 }

（2）接口

php接口

1 <?php

2 $dbhost = 'localhost:3306'; // mysql服務器主機地址

3 $dbuser = 'root'; // mysql用戶名

4 $dbpass = ''; // mysql用戶名密碼5 $conn = mysqli_connect($dbhost, $dbuser, $dbpass);

6 if(! $conn )

7 {

8 die('鏈接失敗: ' . mysqli_error($conn));

9 }

10 // 設置編碼，防止中文亂碼

11 mysqli_query($conn , "set names utf8");

12 $findUsername =$_GET['username'];

13 //$findUsername = '張三22';

14 //編寫sql語句

15 $sql = "SELECT * FROM student WHERE

student.username='$findUsername'";

16 //選擇要查詢的數據庫名稱

17 mysqli_select_db( $conn, 'db1' );

18 //查詢數據

19 $retval = mysqli_query( $conn, $sql );

20 if(! $retval )

21 {

22 die('沒法讀取數據: ' . mysqli_error($conn));

23 }

24 //echo json_encode(mysqli_fetch_all($retval,MYSQLI_ASSOC));

25 // 把 全部的查詢結果轉爲數組

26 $res = mysqli_fetch_all($retval,MYSQLI_ASSOC);

27 if(count($res)){

28 $arr['isExist'] = true;

29 }else{

30 $arr['isExist'] = false;

31 }

32 //返回json數據

33 echo json_encode($arr);

34 mysqli_close($conn);

35 ?>

第三部分繼承

一、閉包

（1）概念

閉包就是可以讀取其餘函數內部變量的函數。在JS中，只有函數內部的子函數才

能讀取局部變量，所以能夠把閉包簡單理解爲」定義在一個函數內部的函數」。

（2）特色能夠讀取函數內部的變量。

變量的做用域無非就是兩種：全局變量和局部變量。

JS語言的特殊之處，就在於函數內部能夠直接讀取全局變量。另外一方面，函數外部天然

沒法讀取函數內的局部變量

讓這些變量的值始終保存在內存中。

（3）閉包的應用場景

函數做爲返回值。

1 function box() {

2

3 var n = 1; //

4 function cox() {

5 n++;

6 return n;

7 }

8 return cox;

9 }

10 //res 就是一個閉包 ，n像是一個全局變量

11 var res = box();

12

13 console.log(res()); //2

14 console.log(res()); //3

函數做爲參數被傳參----回調函數

二、繼承

（1）構造函數繼承

本質是在子類中調用父類的構造函數，從而讓子類擁有父類的屬性和方法

call/applay

原型

原型鏈繼承

混合繼承