[TOC] ## 1.HTTP請求      ## 2.請求響應 * open(method,url,asyn) //asyn值默認為true * send() * onreadystatechange ## 3. 一個完整的Ajax步驟 ### 1.創建ajax核心對象 ### 2.與服務器建立連接 ### 3.發送請求 #### 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值代表服務器響應的變化  #### post請求 * 要有請求頭setRequestHeader ``` <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> ``` #### get/post的不同 > Get是向服務器發索取數據的一種請求，而Post是向服務器提交數據的一種請求 GET和POST只是發送機制不同 > GET一般用于獲取/查詢資源信息，而POST一般用于更新資源信息 ``` 1）視覺上傳參， Get 方式在通過 URL 提交數據，數據 在URL中可以看到；POST方式，數據放置在HTML HEADER內提交。 2）大小 GET方式提交的數據最多只能有1024字節（瀏覽器限制的），而POST則沒有此限制。 3）安全性 使用 Get 的時候，參數會顯示在地址欄上，而 Post 不會。所以，如果這些數據是中文數據而且是非敏感數據，那么使用 get ；如果用戶輸入的數據不是中文字符而且包含敏感數據，那么還是使用 post 為好。 ``` ### 4.響應