[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.响应