| 使用XMLHttpRequest发送网络请求 | 您所在的位置：网站首页 › 请求402 › 使用XMLHttpRequest发送网络请求 |
|
使用XMLHttpRequest发送get请求
步骤 创建xhr对象调用xhr.open()函数调用xhr.send函数监听onreadystatechange事件 未携带参数的get请求 var xhr = new XMLHttpRequest(); xhr.open("get","http://127.0.0.1:8000"); xhr.send(); xhr.onreadystatechange = function() { if(xhr.readyState === 4 && xhr.status ===200){ console.log(xhr.responseText); } } xhr.onerror = function (error) { console.log(error) };携带参数的get请求 var xhr = new XMLHttpRequest(); xhr.open("get","http://127.0.0.1:8000?name=js&age=18"); xhr.send(); xhr.onreadystatechange = function() { if(xhr.readyState === 4 && xhr.status ===200){ console.log(xhr.responseText); } } xhr.onerror = function (error) { console.log(error) } 输出：{"name":"js","age":"18"} 使用XMLHttpRequest发送get请求未携带参数的post请求 var xhr = new XMLHttpRequest(); xhr.open("post","http://127.0.0.1:8000/post"); xhr.send(); xhr.onreadystatechange = function() { if(xhr.readyState === 4 && xhr.status ===200){ console.log(xhr.responseText); } } xhr.onerror = function (error) { console.log(error) }携带参数(application/x-www-form-urlencoded)的post请求 var xhr = new XMLHttpRequest(); xhr.open("post","http://127.0.0.1:8000/post"); xhr.setRequestHeader("content-Type","application/x-www-form-urlencoded"); xhr.send("name=js&age=18"); xhr.onreadystatechange = function() { if(xhr.readyState === 4 && xhr.status ===200){ console.log(xhr.responseText); } } xhr.onerror = function (error) { console.log(error) } 输出：{"name":"js","age":"18"}携带参数(application/json)的post请求 var xhr = new XMLHttpRequest(); xhr.open("post","http://127.0.0.1:8000/post"); xhr.setRequestHeader("content-Type","application/json"); xhr.send(JSON.stringify({name:"js",age: 18})); xhr.onreadystatechange = function() { if(xhr.readyState === 4 && xhr.status ===200){ console.log(xhr.responseText); } } xhr.onerror = function (error) { console.log(error) } 输出：{"name":"js","age":"18"} post请求头的常见数据格式1、application/json（JSON数据格式） xhr.setRequestHeader("Content-type","application/json; charset=utf-8");这种类型是我们现在最常用的，越来越多的人把它作为请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数，使用 JSON 不会遇上什么麻烦。 2、application/x-www-form-urlencoded xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");这应该是最常见的 POST 提交数据的方式了。浏览器的原生 form 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据 **3、multipart/form-data ** xhr.setRequestHeader("Content-type", "multipart/form-data; charset=utf-8");这又是一个常见的 POST 数据提交的方式。我们使用表单上传文件时，必须让 form 的 enctyped 等于这个值 4、text/xml xhr.setRequestHeader("Content-type", "text/xml; charset=utf-8");它是一种使用 HTTP 作为传输协议，XML 作为编码方式的远程调用规范，这种方式现在不常用 响应头常见数据格式1）、text/html ： HTML格式 2）、text/plain ：纯文本格式 3）、application/json：json格式 4）、text/xml ： XML格式 5）、image/gif ：gif图片格式 6）、image/jpeg ：jpg图片格式 7）、image/png：png图片格式 8）、application/pdf：pdf格式 9）、application/msword ： Word文档格式 10）、application/octet-stream ： 二进制流数据（如常见的文件下载） 5、前后端交互时，常用的content-type application/json |
| CopyRight 2018-2019 实验室设备网 版权所有 |