前端筆記之服務器&Ajax（上）服務器&PHP&數據交互&HTTP

本文轉載自查看原文 2019-04-14 10:08 604 服務器和Ajax/ WEB前端學習筆記

一、服務器

1.1 什么是服務器，做什么的？

服務器，就是放在機房中的電腦，和我們的電腦的區別在與服務器有固定的IP，服務器的安全性和穩定性相當的高;性能一般就可以了，但是CPU的性能要比普通的客戶機高的多。

服務器，就是給計算機網絡提供服務的設備。服務器要長時間的運行，所以要求穩定性極強。

服務器的硬件：處理器、硬盤、內存、系統總線等等和我們的電腦一樣。但是系統架構是服務器級別的。所有的硬件基礎設施都是在處理能力、穩定性、可靠性、安全性、擴展性、管理性能都要求高。

1.2 服務器呢是做什么的？

我們看到的網頁上所有的信息內容都來源於服務器。

服務器就是存儲網站上所有的數據信息的（數據庫、后台的語言、前端的語言、服務器環境）。

我們通過瀏覽器發送HTTP（超文本協議）請求到服務器。請求的內容（圖片、文字、視頻、音頻等等），服務器再通過響應把數據發送到客戶機上。

1.3 服務的信息從何而來？

通過FTP（文件傳輸協議）工具把本地的數據上傳到服務器上的。

在公司怎樣管理服務器呢？是運維工程師們（直接操作服務器環境）或產品、運營（后台的圖形頁面）來管理。

1.4 什么是虛擬主機？

簡單來說，就是把一台服務器很具容量的大小，划分給不同的多個用戶使用。

目前的互聯網上，很多都是幾百元的虛擬主機。大多數使用的是低配的服務器，網速很，導致的問題很多。

1.5 服務器的分類

根據服務器的用途分類：

國內的服務器：一般都是電信和網通的機房。是純物理服務器。（需要備案）

雲服務器：一般是多線路機房。采用的是雲端的技術，但是費用高。一般用於大型的商業項目

免備案的服務器：一般指的是放置在香港、韓國、美國等海外的服務器。

二、在瀏覽器地址欄中輸入URL，按下回車后究竟發生了什么？

答：當用戶在地址欄當中輸入網址之后，它會發起上行請求（get、post、delete、checkout、delete...）;當服務器接收到請求之后做出相應的響應；客戶端就能看見頁面（請求回來的數據）；

1、在瀏覽器中輸入網址（域名）

2、瀏覽器會查找對應的服務器IP地址（去DNS服務器上【域名和IP對應的一個關系型服務器】）

3、瀏覽器打開TCP連接（默認端口是80），向查過來的IP服務器發送一條HTTP請求，如果瀏覽器存儲了cookie的話，那么cookie也會放入HTTP請求中去。

4、服務器接收HTTP請求解析請求的文件（后台語言的文件），再生成HTTP響應，將響應發給客戶端。

5、瀏覽器接收到響應的內容，生成頁面的框架，進行渲染。請求的頁面中若有2級或多級請求（img、css、js）再次的向服務器發送HTTP請求，直到頁面所有的信息接收完成。

6、整個過程結束后，瀏覽器將關閉TCP連接。

	在瀏覽器里輸入要網址:
	瀏覽器查找域名的IP地址
	瀏覽器給web服務器發送一個HTTP請求
	服務器“處理”請求
	服務器發回一個HTTP響應
	瀏覽器開始顯示HTML
	瀏覽器發送獲取嵌入在HTML中的對象
客戶機與服務器斷開！	最后完成

DNS（Domain Name server）：域名服務器，是進行域名和與之對應的IP地址轉換的一個關系型服務器。

TCP/IP 協議：是網絡層和傳輸層的協議。（主要是解決數據如何在網絡中傳輸的）

HTTP（HyperText Transfer Protocol）：是超文本協議。（主要是解決數據如何在服務器端和客戶機上應用的）。

https://www.taobao.com/:80

1、紅色部分：https超文本傳輸協議；應用層的一個協議

2、藍色部分：二級域名的別名

3、黃色部分：域名

4、綠色部分：域名的后綴

5：紫色部分：端口號（port），虛擬短褲、實際端口（USB），虛擬端口一般默認為80，（0~65535）

三、PHP后端語言

3.1 PHP介紹

所有的后台都要運行在服務器環境上（Java、PHP、node），在不同的服務器環境運行不同的語言。

PHP要運行在Apache服務器環境上，需要安裝PHPnow，PHPnow集成包已經包含Apache服務器環境，並且還一起安裝了MySQL數據庫。

提示：

1、PHP文件的文件夾、文件名都不能是漢字和空格，就要是英文、數字

2、PHP的程序可以嵌套到HTML的任意一個位置。【PHP也稱為“狗皮膏葯”】

舉個例子，在HTML中寫PHP語法：

<h1>我買了一個iPhone<?php echo 5+3; ?>，花了<?php echo 1000+7000; ?>塊錢</h1>

提示：在本地（沒有在服務器上）運行的時候，會發現PHP代碼當做了注釋。

將文件放在服務器上運行，訪問，結果：

通過源代碼查看：沒有任何的php代碼，也就是說，php文件在訪問后，被服務端執行了。

提示：

1、PHP代碼是在服務器上執行的，將執行完畢的結果返回給客戶端

2、HTML、CSS、JS都在本地執行

3.2 PHP基本語法

php殼子：

<?php ?>

所有的PHP語句要在殼子里面寫，PHP文件擴展名是.php，殼子可以寫在HTML的任意位置

echo輸出：在PHP中輸出到頁面中，echo是關鍵字，所以沒有括號。

echo "輸出的語句";

注意：PHP的每一條語句必須加分號，如果沒有分號會嚴重出錯。

echo還可以當函數：

<p>
    <?php
        echo(1+2+3*5);
    ?>
</p>

頁面輸出：18

3.3 PHP變量

<p>
    <?php
        echo(1+2+3*5);
        $i = 8888;
    ?>
</p>
<h1>
    <?php
        echo $i;
    ?>
</h1>

殼子沒有閉包的性質，所以php所有的殼子其實是一句話。

<?php
    $j = 5;
    $k = 3;
    $str = "abc";
    $boo = true;
    $num = $j + $k;
    echo "結果是：".$num."字符串：".$str."布爾類型：".$boo;
?>

PHP中變量命名：以$開頭，變量名區分大小寫。

PHP中變量不需要定義，可以直接使用。

提示：

1、PHP文件可以沒有HTML骨架，因為服務器返回的時候已經變為靜態頁面返回

2、出現亂碼使用<meta charset="UTF-8" />標簽

3、變量可以進行簡單的數學運算（數字與數字）

4、字符串拼接有兩種方式

第一種：用“.”進行拼接

第二種：{$變量名稱}

 <?php
     $year = 2018;
     echo "今年是".$year."年";
     echo "今年是{$year}年";
 ?>

在花括號中不能有邏輯運算：

echo "a和b的和是：{$a+$b}";

解決方案：

<?php
    $a = 1;
    $b = 2;
    //echo "a和b的和是：{$a+$b}";
    $sum = $a + $b; //先運算，再輸出
    echo "a和b的和是：{$sum}";
?>

3.4 PHP運算符和條件語句

PHP運算符和JavaScript是一樣的

PHP核心語句（for、if...esle...while、switch、do while）和JS一樣。

PHP運算符和JavaScript一樣的。

PHP的核心語句（for、if……else()、while、switch、do while）和JavaScript一樣。

<p>
    <?php
        for ($i=0; $i < 100; $i++) {
            echo "<span>❤</span>";
        }
    ?>
</p>

推薦使用下面的寫法：循環語句是分開的。

<?php
    for ($i=0; $i < 100; $i++) {
?>
        <span>❤</span>
<?php
   } ?>

3.5 PHP函數

PHP中的函數和JS中一樣，但是php中的函數不能new，只能用()執行。

function fun($a,$b){
     return $a+$b;
}
echo fun(1,2);

PHP的作用域：在PHP當中並沒有JS世界當中全局變量。if、for 也不產生作用域。

在函數體內部使用global關鍵字聲明，使用的是全局當中變量。

<?php
    $a = 123;
    function fn(){
        global $a; //聲明可以使用全局的$a變量
        echo $a; //默認情況下不能用函數外的全局變量
    }
    fn();
?>

找質數：

<?php
    function checkzhishu($num){
        $count = 0;
        for ($i=1; $i <= $num; $i++) {
            if( $num % $i == 0){
                $count++ ;
            };
        };
        if($count == 2){
            return true;
        }else{
            return false;
        };
    };
    if( checkzhishu(88)){
        echo "是質數";
    }else{
        echo "不是質數";
    }
?>

3.6 PHP的數組

概述：PHP中也有數組，數組是一個容器，這個容器可以裝任意類型的數據，也有下標，JS中數組的下標是length。

array()函數創建數組。

在 PHP 中，有三種數組類型：

索引數組 - 帶有數字索引的數組
關聯數組 - 帶有指定鍵的數組

多維數組 - 包含一個或多個數組的數組

數組方法大全：http://www.w3school.com.cn/php/php_ref_array.asp

數組的聲明方式1：

1 $arr = array('李達康','黃小明','李雲龍','曹操','呂布');

2 print_r($arr);

結果：Array ( [0] => 李達康 [1] => 黃小明 [2] => 李雲龍 [3] => 曹操 [4] => 呂布 )。

數組的聲明方式2，可以指定鍵值對：

<?php
    $arr = array("姓名"=>"李達康","年齡"=>88,"性別"=>"不詳");
    print_r($arr);
?>

Array( [姓名] => 李達康 [年齡] => 88 [性別] => 不詳 )

$arr2= array(1,2,3,4,5,6,7,8);
$sum = array_sum($arr2);
echo $sum .'<br />';

結果：36

array_unique() 刪除數組中的重復值，並返回結果數組：

$arr3 = array(1,2,3,4,5,6,7,8,8,8,9,9,10,11,11);
$arr4 = array_unique($arr3);
print_r($arr4);

數組的聲明方式3：數組嵌套數組

<?php
    $arr = array("水果"=>array('蘋果','香蕉','鴨梨'));
    print_r($arr);
?>

提示：

1、PHP中聲明數組的方法array()內置方法

2、第一種創建方式，圓括號里面傳遞元素，如果有多個用逗號隔開，通過枚舉索引值從0開始

3、第二種，鍵值對用=>箭頭這種形式，如果要使用數據，需要[key]

方法：

echo一般輸出的是字符串、變量、數字、布爾值

print_r：也是輸出方法，輸出的是引用類型（數組）

四、前后端數據交互方式

4.1兩種請求方式

概述：GET和POST是兩種上行請求的方式。

需求：寫JS代碼，用戶在瀏覽器輸入年齡和性別，驗證是否可婚。

var age = document.getElementById('age');
var sex = document.getElementById('sex');
var btn = document.getElementsByTagName('button')[0];
btn.onclick = function(){
   var ageVal = age.value;
   var sexVal = sex.value;
   if(sexVal == "男" && ageVal >= 22 || sexVal == "女" && ageVal >= 20){
       alert('可以領證結婚');
   }else{
       alert('不可以結婚');
   }
}

提示：現在這個判斷是否可婚的業務，是在本地瀏覽器客戶端進行處理的。

現在想讓服務器給解決出能否可婚，需要將判斷的邏輯放到服務器去執行，那么需要向服務器傳遞一些數據（年齡、性別）。

服務器判斷的邏輯和JS一樣，但是我們遇到一個問題，用戶填寫的信息怎么傳到后台？

有兩種方式：GET和POST上行請求發送HTTP到服務器。

1、GET請求：通過請求的地址后面追加一些參數

http://127.0.0.1/01.php?user=20&pwd=男

2、POST請求，參數不是通過URL攜帶的，我們請求的數據時，發送HTTP請求，這個請求里面有報文（包含報文頭和報文體），每次請求都會攜帶報文。我們將數據通過報文體攜帶到服務器中。

4.2 GET上行請求

通過GET請求偽裝URL網址的形式向服務器傳遞數據，?k=v&k=v形式傳遞數據。

get請求的信息也就是?后面一堆參數，這堆參數有個術語叫“query string”【查詢字符串】

PHP獲取GET中的參數：

$_GET["key"]

請求的服務器地址及參數：

http://127.0.0.1/04-GET.php?age=23&sex=男

服務器的PHP語句獲取數據的和處理邏輯：

<meta charset="UTF-8" />
<?php
    //獲取GET請求的數據
    $age = $_GET["age"];
    $sex = $_GET["sex"];

    if($sex == "男" && $age >= 22 || $sex == "女" && $age >= 20){
        echo "可以結婚";
    }else{
        echo "不可以結婚";
    }
?>

現在點擊前端的頁面驗證信息，會發送HTTP請求。請求的地址是http://127.0.0.1/04-GET.php。攜帶的信息是：?age=23&sex=男

提示：http://127.0.0.1/?k = v &k = v(紅色部分稱之為queryString)。相當於你去淘寶買東西前半部分相當於你家的地址；問號后面的數據是額外信息（相當於客戶端給服務器傳遞的一些額外數據）

如果客戶端發起的是GET上行請求，那么服務器端（PHP文件）接受數據也必須是GET方法；

$_GET[“key”]后台工程師管它叫‘超全局變量’。

form 標簽的兩個屬性：

action 是請求的接口地址，通常請求的頁面以php、aspx、jsp后綴結尾的文件。

method 是這個表單提交的方式：get和post，小寫。

submit 的功能。本質上不是提交。就是幫我們生成一個get請求的地址,訪問了你的接口頁面。

name值對應是query string 中的k。Value 值對應是query string 中的v。沒有其中任意一個值，php端無法識別。

GET請求的優點和缺點：

優點： get便於分享網址。網絡中90%以上請求都是get請求。

缺點：相對而言不安全（見仁見智），不能提交很多字節。

Http GET方法提交的數據大小長度並沒有限制，HTTP協議規范沒有對URL長度進行限制。這個限制是特定的瀏覽器及服務器對它的限制。

IE瀏覽器對URL的最大限制為2083個字符，超過這個數字，提交按鈕沒有任何反應。

Firefox瀏覽器：URL的長度限制為65536個字符。

Safari瀏覽器：URL最大長度限制為80000個字符。

Opera瀏覽器：URL最大長度限制為190000個字符。

Chrome瀏覽器：URL最大長度限制為8182個字符。

Apache服務器：能接受最大url長度為8192個字符。

IIS服務器：能接受最大url的長度為16384個字符。

通過上面的數據可知，為了讓所有的用戶都能正常瀏覽， URL最好不要超過IE的最大長度限制(2083個字符），當然，如果URL不直接提供給用戶，而是提供給程序調用，這時的長度就只受Web服務器影響了。

理論上講，POST是沒有大小限制的。HTTP協議規范也沒有進行大小限制，起限制作用的是服務器的處理程序的處理能力。

GET請求超出最大長度，報錯：

4.2.1學習小調查-GET請求

案例：需要有一些調查的數據；學習的情況，留言部分這些是需要用戶端提交的數據

將這些數據寫入一個文件，保存‘我’服務器這里。

HTML：

<form action="06.php" method="get">
   <p>
       學習情況：
        <label><input type="radio" name="qingkuang" value="一臉懵逼"/>一臉懵逼</label>
        <label><input type="radio" name="qingkuang" value="有點懵逼"/>有點懵逼</label>
        <label><input type="radio" name="qingkuang" value="還行還行"/>還行還行</label>
        <label><input type="radio" name="qingkuang" value="還跟得上"/>還跟得上</label>
        <label><input type="radio" name="qingkuang" value="很好很好"/>很好很好</label>
   </p>
   <p>
       晚上回家干什么？
        <label><input type="radio" name="huijia" value="玩游戲"/>玩游戲</label>
        <label><input type="radio" name="huijia" value="電視劇"/>電視劇</label>
        <label><input type="radio" name="huijia" value="發呆"/>發呆</label>
        <label><input type="radio" name="huijia" value="學習"/>學習</label>
        <label><input type="radio" name="huijia" value="其它"/>其它</label>
   </p>
   <p>
       留言？
      <textarea  name="liuyan" cols="30" rows="5"></textarea>
   </p>
   <p><input type="submit" /></p>
</form>

PHP：

<?php
    $qingkuang = $_GET["qingkuang"];
    $huijia = $_GET["huijia"];
    $liuyan = $_GET["liuyan"];
    $myfile = fopen("result/jieguo.txt","a");①創建文件對象，a代表追加
    ②寫入文件 fwrite($myfile,"情況：".$qingkuang ."---"."回家做：".$huijia."留言：".$liuyan."\r\n");
    fclose($myfile); ③關閉文件
    echo "提交成功";
?>

4.2.1新聞-GET請求

http://127.0.0.1/0_9.php?id=2

<?php
    $array = array( 
        array("title"=>"標題1","content"=>"內容1"),
        array("title"=>"標題2","content"=>"內容2"),
        array("title"=>"標題3","content"=>"內容3")
    );
?>
<h1><?php echo $arr[0]["title"];?></h1>
<h1><?php echo $arr[$_GET["id"]]["title"];?></h1>
<p><?php echo $arr[$_GET["id"]]["content"];?></p>