前端筆記之伺服器&Ajax(上)伺服器&PHP&資料互動&HTTP

mufengsm發表於2019-04-14

一、伺服器

1.1 什麼是伺服器,做什麼的?

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

伺服器,就是給計算機網路提供服務的裝置。伺服器要長時間的執行,所以要求穩定性極強。

伺服器的硬體:處理器、硬碟、記憶體、系統匯流排等等和我們的電腦一樣。但是系統架構是伺服器級別的。所有的硬體基礎設施都是在處理能力、穩定性、可靠性、安全性、擴充套件性、管理效能都要求高。


1.2 伺服器呢是做什麼的?

我們看到的網頁上所有的資訊內容都來源於伺服器。

伺服器就是儲存網站上所有的資料資訊的(資料庫、後臺的語言、前端的語言、伺服器環境)。

我們通過瀏覽器傳送HTTP(超文字協議)請求到伺服器。請求的內容(圖片、文字、視訊、音訊等等),伺服器再通過響應把資料傳送到客戶機上。


 

1.3 服務的資訊從何而來?

通過FTP(檔案傳輸協議)工具把本地的資料上傳到伺服器上的。

在公司怎樣管理伺服器呢?是運維工程師們(直接操作伺服器環境)或產品、運營(後臺的圖形頁面)來管理。


1.4 什麼是虛擬主機?

簡單來說,就是把一臺伺服器很具容量的大小,劃分給不同的多個使用者使用。

目前的網際網路上,很多都是幾百元的虛擬主機。大多數使用的是低配的伺服器,網速很,導致的問題很多。


1.5 伺服器的分類

根據伺服器的用途分類:

國內的伺服器: 一般都是電信和網通的機房。是純物理伺服器。 (需要備案)

雲伺服器: 一般是多線路機房。採用的是雲端的技術,但是費用高。一般用於大型的商業專案

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


二、在瀏覽器位址列中輸入URL,按下回車後究竟發生了什麼?

 

答:當使用者在位址列當中輸入網址之後,它會發起上行請求(getpostdeletecheckoutdelete...;當伺服器接收到請求之後做出相應的響應;客戶端就能看見頁面(請求回來的資料);

 1、在瀏覽器中輸入網址(域名)

 2、瀏覽器會查詢對應的伺服器IP地址(去DNS伺服器上【域名和IP對應的一個關係型伺服器】)

 3、瀏覽器開啟TCP連線(預設埠是80),向查過來的IP伺服器傳送一條HTTP請求,如果瀏覽器儲存了cookie話,那麼cookie也會放入HTTP請求中去。

 4、伺服器接收HTTP請求 解析請求的檔案(後臺語言的檔案),再生成HTTP響應,將響應發給客戶端。

 5、瀏覽器接收到響應的內容,生成頁面的框架,進行渲染。請求的頁面中若有2級或多級請求(imgcssjs)再次的向伺服器傳送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介紹

 

所有的後臺都要執行在伺服器環境上(JavaPHPnode),在不同的伺服器環境執行不同的語言。

PHP要執行在Apache伺服器環境上,需要安裝PHPnowPHPnow整合包已經包含Apache伺服器環境,並且還一起安裝了MySQL資料庫。

 

提示:

1、PHP檔案的資料夾、檔名都不能是漢字和空格,就要是英文、數字

2、PHP的程式可以巢狀到HTML的任意一個位置。【PHP也稱為“狗皮膏藥”】

舉個例子,在HTML中寫PHP語法:

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

 

提示:在本地(沒有在伺服器上)執行的時候,會發現PHP程式碼當做了註釋。

 

將檔案放在伺服器上執行,訪問,結果:

 

通過原始碼檢視:沒有任何的php程式碼,也就是說,php檔案在訪問後,被服務端執行了。

 

提示:

1PHP程式碼是在伺服器上執行的,將執行完畢的結果返回給客戶端

2HTMLCSSJS都在本地執行


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中變數不需要定義,可以直接使用。

 

提示:

 1PHP檔案可以沒有HTML骨架,因為伺服器返回的時候已經變為靜態頁面返回

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

 3、變數可以進行簡單的數學運算(數字與數字)

 4、字串拼接有兩種方式

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

     第二種:{$變數名稱}

 

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

 

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

 echo "ab的和是:{$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核心語句(forif...esle...whileswitchdo while)和JS一樣。

PHP運算子和JavaScript一樣的。

PHP的核心語句(forif……else()whileswitchdo 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世界當中全域性變數iffor 也不產生作用域。

 

在函式體內部使用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('李達康','黃小明','李雲龍','曹操','呂布');

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兩種請求方式

概述:GETPOST是兩種上行請求的方式。

需求:寫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一樣,但是我們遇到一個問題,使用者填寫的資訊怎麼傳到後臺?

有兩種方式:GETPOST上行請求傳送HTTP到伺服器。

 

1GET請求:通過請求的地址後面追加一些引數

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

 

2POST請求,引數不是通過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  是請求的介面地址,通常請求的頁面以phpaspxjsp字尾結尾的檔案。

method 是這個表單提交的方式:getpost,小寫。

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

name值對應是query string 中的kValue 值對應是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>

4.3 POST上行請求

Post請求不多見,POST請求傳送資訊的時候很複雜。攜帶的資訊將在傳送的報文體中。

Post請求一般傳送form表單。(保密的資料、大檔案【圖片、doc檔案】、長文字、視訊、音訊),資訊量比較大的內容用post請求。因為post不限制位元組數。

概述:GET向伺服器傳遞資料是以偽裝URL形式上傳資料。但是POST就不一樣了,POST用的是報文報文體上傳資料。

報文:報文頭+報文體

 報文頭:一般裝載的是瀏覽器的資訊

 報文體:一般是空的

 

報文:

1、客戶端與伺服器端傳遞資料的基本(報文體和報文頭),不管是上行請求,還是下行響應都有報文

2、GETPOST請求都有報文,只不過GET偽裝URL形式報文體為空,POST請求向伺服器傳遞資料用報文體。

3、客戶端發起的是GET伺服器端就用GET,客戶端發起的是POST服務端就用POST

 

當你點選submit時候,瀏覽器會幫你元件報文中的資訊,在報文體中插入有關post請求的資訊。


4.4 GETPOST的區別

概述:市場上幾乎都是GET請求;登入、註冊等可以用POST請求

GET請求:

POST請求:

GET請求便於分享

GET請求可被快取

GET請求保留在瀏覽器歷史記錄中

GET請求可被收藏為書籤

GET請求不應在處理敏感資料時使用

GET請求有長度限制

GET請求只應當用於取回資料

POST請求不便於分享

POST請求不會被快取

POST請求不會保留在瀏覽器歷史記錄中

POST請求不能被收藏為書籤

POST請求對資料長度沒有要求

 

那,有了這個比較,你應該知道什麼時候用get什麼時候用post了。

get:一般用於資訊獲取使用url傳遞引數,對傳送的資料有位元組限制,get請求是向伺服器獲取訊息

post:一般用於儲存或修改伺服器上的資源,post請求都是通過form表單形式提交,post請求可以看成向伺服器推送訊息

 

一個完整的URL包括哪些部分:

 https://mbd.baidu.com/newspage/data/index.php?newsid=12345%pagenum=10#name

 


五、HTTP請求和響應

不管是什麼檔案,只要從伺服器過來,就是http請求和響應的這個過程。

 

HTTP報文詳解:http://blog.csdn.net/wzx19840423/article/details/47811559

通用:

Request URL: 請求地址

Request Method:請求方式

Status Code:狀態碼


5.1 響應的報文頭

Cache-Control: 告訴瀏覽器的如何快取頁面

Connection:keep-alive  保持連線

Content-Encoding:gzip  表示伺服器傳送壓縮的資料格式

Content-Type:text/html;charset=utf-8  內容的格式和編碼

Date:Sat, 09 Dec 2017 06:23:56 GMT  伺服器的時間

Server:BWS 伺服器環境


5.2 響應的報文體

 

Response Header它代表的是下行響應的報文頭

Query String:是GET請求向伺服器傳遞的資料,偽裝URL


5.3 請求報文頭

Accept:text/html,application/xhtml+xml   (告訴伺服器瀏覽器所接收的文字,網頁的圖片、視訊)

Accept-Encoding:gzip, deflate, br (可以接收gzip,deflate壓縮後的資料)

Accept-Language:zh-CN,zh;q=0.9 (瀏覽器支援的語言)

Cache-Control:max-age=0   (瀏覽器的快取)

Connection:keep-alive (請求資料後,保持連線)

Cookie: (身份驗證資訊)

Host:mbd.baidu.com (瀏覽器要找的主機)

User-Agent: (瀏覽器核心)

 

它代表的是上行請求的報文頭


 

5.4 請求的報文體

Form Data:是post請求上行請求的報文體


 

相關文章