數據交互 http請求 xhr

web瀏覽器經過http請求來獲取服務器的數據或服務，http請求是一種無狀態鏈接，用完即關閉，再用需重鏈接。這麼設計能極大地減輕服務器壓力。

 

HTTP請求：
　　一個http請求分爲如下7個步驟：
　　1，創建TCP鏈接
　　2，瀏覽器向服務器發送請求命令
　　3，瀏覽器想服務器發送請求頭信息
　　4，服務器響應
　　5，服務器發送響應頭信息
　　6，服務器向瀏覽器發送數據
　　7，服務器關閉TCP鏈接

 

HTTP請求之請求request：
　　一個http請求通常由4個部分組成：
　　1，http請求的方法，常見的有get和post
　　2，請求的url
　　3，請求頭信息，包括一些瀏覽器信息和用戶身份信息等
　　4，請求體，即請求正文，包括一些用戶的查詢信息，表單信息等。請求頭和請求體有一個空行來分開。

 

如下是一個請求體示例：

　　get方法，請求地址，協議版本
　　GET/login.php HTTP/1.1
　　如下是請求頭信息
　　Host:localhost
　　Connecction:keep-alive
　　Accept:text/javascript,application/javascript,application/ecmascript,application/x-ecmascript;q=0.01
　　X-Requser-With:XMLHttpRequest
　　User-Agent:Mozilla/5.0(Windows NT 6.1)
　　Referer:http://www.baidu.com
　　Accept-Encoding:gzip,ddeflate,sdcn
　　Accept-Langauage:zh-CN,zh,q=0.8,en;q=0.6
　　// 空行斷開請求頭和請求體
　　如下是請求體信息
　　username=admin&pwd=123456

 

請求方法：
　　常見的請求方法有get和post，
　　get
　　　　通常用於信息獲取
　　　　參數附加在url上，人人可見
　　　　參數大小有限制
　　post
　　　　通常用於修改服務器資源
　　　　參數打包發送，通常不可見
　　　　參數大小理論上無限制

 

HTTP請求之響應response：
　　一個http響應通常由3個部分組成：
　　1，狀態碼，告訴瀏覽器請求成功與否
　　2，響應頭，和請求頭同樣，包含了一些環境信息，好比服務器類型，響應內容類型等
　　3，響應體，響應正文

 

如下是一個響應體示例：
　　狀態碼
　　HTTP/1.1 200 OK
　　響應頭
　　Date:Sun,23 Now 2017 10:15:33 GMT
　　Server:Apache
　　Content-Encoding:gzip
　　Content-Length:8548484
　　Connecction:keep-alive
　　Content-Type:application/javascript
　　// 空行斷開響應頭和響應體
　　// 響應體
　　alert('test')

 

    //實例化xhr對象
    var xhr = new xmlHttpRequest()
    //載入請求open方法：請求方式，請求地址，是否異步
    xhr.open(method,url,asncy)
    //發送：get方法時，不用發送string或發送null，post則須要寫入發送的數據。
    xhr.send(string)
        //eg.
        //get:
        xhr.open('GET','get.php',true)
        xhr.send()
        //post:
        xhr.open('POST','user.php',true)
        // post須要在請求頭裏指定發送數據的類型，下面是表單類型
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
        // send裏填參數便可
        xhr.send('name=hhh&pwd=123456')
    //監聽狀態變化
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4&&xhr.status ===200){
            // 處理響應正文responseText，多數是json數據
            alert(xhr.responseText)
        }
    }

 

請求狀態碼：xhr.readyState
　　0 請求未初始化，open方法未調用
　　1 鏈接已創建，open已經調用，正在發送請求
　　2 請求已經接收了，即接收了請求頭信息
　　3 解析 接收解析響應的內容
　　4 解析完成 瀏覽器能夠使用返回來的數據了。

http狀態碼:xhr.status
　　1xx 信息類，表示已經收到了瀏覽器請求，正在處理
　　2xx 成功
　　3xx 重定向
　　4xx 客戶端錯誤，好比可能發送了一個無效url
　　5xx 服務端錯誤

 

JSON
　　JSON是一個如今服務器和瀏覽器數據交互的經常使用格式，JSON數據能夠簡單地理解成沒有方法的對象，不過其鍵須要用雙引號包裹。JSON的本質是字符串，因此不能包含有JavaScript代碼。
　　JSON的反序列化形式能夠直接當成JavaScript對象使用，如.符號或[]訪問屬性
　　JSON的序列化形式就是一個字符串。
　　JSON.stringify(),JSON.parse()方法分別是用於JSON的序列化和反序列化

如下是一個JSON示例：

    {
        "nama":"zhouxiaohouer",
        "age":23,
        "data":[
            {
                "proid":112344,
                "proname":"小米6"
            },
            {
                "proid":112345,
                "proname":"小米7"
            }
        ]
    }