觀察HTTP協議中用戶端向伺服器發送的請求,理解並實現一個最簡單的AJAX請求案例

標籤：ready   伺服器的響應   alert   var   asc   val   基礎   網站   java   

一.什麼是HTTP協議

    HTTP協議即超文字傳輸通訊協定 (HTTP),網站就是基於HTTP協議的,例如網站的圖片、CSS、JS等都是基於HTTP協議進行傳輸的。HTTP協議是由從客戶機到伺服器的請求(Request)和從伺服器到客戶機的響應(Response)進行了約束和規範。

    大白話的說，就是你在瀏覽器輸入一個網址，例如http://baidu.com,這時你就是向百度的伺服器發送了請求了....經過一系列你看不到的處理之後,你的瀏覽器出現一個百度的首頁,這就是百度的伺服器對你的瀏覽器的成功的響應.

二.在瀏覽器的NETWORK處觀察請求的報文

1.請求:客服端向伺服器發起

2.響應:由伺服器發出...

三.AJAX

     1.Ajax 的原理簡單來說通過 XmlHttpRequest 對象來向伺服器發非同步請求， 從伺服器獲得資料，然後用javascript來操作DOM而非同步更新頁面。

     2.本質:本質是在HTTP協議的基礎上以非同步方式與伺服器進行通訊。

     3.一個簡單的AJAX請求：

<form action="login.php" method="get">    使用者名稱：<input type="text" name="userName" id="userName"><br>    密碼：<input type="password" name="userPwd"> <br>    <input type="submit" value="註冊"></form><script>  /*需求:當輸入使用者名稱時,立即去伺服器端幫我驗證目前使用者名是否存在*/    document.getElementById("userName").onblur=function(){        var name=document.getElementById("userName").value;        /*1.建立一個能夠實現非同步請求的對象*/        var xhr=new XMLHttpRequest();        console.log(xhr.readyState);        /*2.產生請求報文*/        /*2.1請求報文行*/        xhr.open("get","register.php?name="+name);        /*2.2請求報文頭*/        /*如果是get請求就沒有設定設定報文頭，但是如果是post請求就必須設定Content-Type*/        /*2.3請求報文體*/        /*如果是get請求，那麼就應該在url裡面進行傳遞,那麼 send(null)        如果是post請求，那麼才需要建立單獨的請求報文體   send(username=** & pwd=**)*/        xhr.send(null);        /*監聽伺服器的響應*/        xhr.onreadystatechange=function(){            console.log(xhr.readyState);            /*判斷當前的響應是否成功  1.伺服器做出了響應  2.響應的結果是正確的*/            if(xhr.status==200 && xhr.readyState==4){                console.log(xhr.readyState);                var result=xhr.responseText;                if(result==1){                    alert("使用者名稱已經存在，請重新輸入");                }            }        }    }</script>

四.總結

一個簡單的AJAX請求(以post為例)

1.建立一個非同步對象

var xhr=new XMLHttpRequest();

2.請求行

xhr.open(‘post‘,‘url地址‘);

3.請求體

xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);

4.請求體

xhr.send(‘name=...&age=....‘);//淺白的說就是: 需要向上面的url裡傳輸的資料

5.get和post請求的區別

    5.1get不需要佈建要求頭

    5.2get的資料傳遞通過url進行傳遞,而post在send方法中傳遞。

 

 

 

        

 

觀察HTTP協議中用戶端向伺服器發送的請求,理解並實現一個最簡單的AJAX請求案例