7-2 http,get,post · 前端筆記

* [1.http請求](http://www.hmoore.net/chengbenchao/javascript/780058#1http_1) * [2.請求響應](http://www.hmoore.net/chengbenchao/javascript/780058#2_8) * [3.一個完整的ajax的步驟](http://www.hmoore.net/chengbenchao/javascript/780058#3ajax_13) * [1.創建](http://www.hmoore.net/chengbenchao/javascript/780058#1ajax_14)[ajax核心](http://www.hmoore.net/chengbenchao/javascript/780058)對象 * [2.與服務器建立](http://www.hmoore.net/chengbenchao/javascript/780058#2_15)[連接](http://www.hmoore.net/chengbenchao/javascript/780058) * [3.發送](http://www.hmoore.net/chengbenchao/javascript/780058#3_16)[請求](http://www.hmoore.net/chengbenchao/javascript/780058) * [4.響應](http://www.hmoore.net/chengbenchao/javascript/780058#4_17) * [get請求](http://www.hmoore.net/chengbenchao/javascript/780058#get_18) * [post請求](http://www.hmoore.net/chengbenchao/javascript/780058#post_38) * [Post方式要設置一個](http://www.hmoore.net/chengbenchao/javascript/780058#Post_39)[請求頭](http://www.hmoore.net/chengbenchao/javascript/780058) ## 1.http請求 > 定義:http計算機通過網絡進行通信的規則 > ![](https://box.kancloud.cn/4b3f4191f299bb5da204ba2068e06f13_633x403.png) > ![](https://box.kancloud.cn/5270eec3ea4ba4f62af01112ea5b1da3_753x299.png) > ![](https://box.kancloud.cn/744c00043585906db046b0f520d1b195_762x258.png) > ![](https://box.kancloud.cn/28b71b4a5bdf8c5a1443818bf0116b15_741x242.png) > ![](https://box.kancloud.cn/513735421f4d819d4dcf1561e3d5a10d_703x297.png) ## 2.請求響應 * open(method,url,asyn) asyn值默認為true * send() * onreadystatechange ## 3.一個完整的ajax的步驟 #### 1.創建[ajax核心](http://www.hmoore.net/chengbenchao/javascript/780058)對象 #### 2.與服務器建立[連接](http://www.hmoore.net/chengbenchao/javascript/780058) #### 3.發送[請求](http://www.hmoore.net/chengbenchao/javascript/780058) #### 4.響應 ### get請求 ~~~ var url = "https://www.easy-mock.com/mock/5bac6df10132334db7167178/testDemo/testDemo"; var xhr = new XMLHttpRequest(); xhr.open('get',url,true); xhr.send(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var txt = JSON.parse(xhr.responseText); console.log(txt); } } ~~~ JSON.parse()方法將json對象解析為JavaScript對象。 JSON.stringify()將javascript的值,轉換為JSON字符串。 * responseText:獲取字符串形式的響應數據 * status:以數字形式返回http的狀態碼 * readystate值代表服務器響應的變化 ![](https://box.kancloud.cn/55be8b52b6916319a3852475c056f77f_718x354.png) ### post請求 #### Post方式要設置一個[請求頭](http://www.hmoore.net/chengbenchao/javascript/780058) ~~~ <div id="test"></div> <script> var test = document.getElementById("test"); var xhr = new XMLHttpRequest(); xhr.open("post","https://www.easy-mock.com/mock/5b230e1e6bed703a9b488c69/www.getTest.com/push",true); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.send(null); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var data = JSON.parse(xhr.responseText); test.innerHTML = data.data.content } } </script> ~~~