使用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 实验室设备网 版权所有 |