🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
[TOC] ## 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核心对象 #### 2.与服务器建立连接 #### 3.发送请求 #### 4.响应 ### get请求 ~~~ var url = "xxx"; 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请求 Post方式要设置一个请求头 ~~~ <div id="test"></div> <script> var test = document.getElementById("test"); var xhr = new XMLHttpRequest(); xhr.open("post","xxx",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> ~~~