原生js实现GET和POST

        // success成功回调   error失败回调// params格式k=v&k=v...// get异步请求function getHttp({url,params,success,error}) {let xhr = new XMLHttpRequest()if (params) {xhr.open('get', url + '?' + params, true)} else {xhr.open('get', url, true)}xhr.send()xhr.onreadystatechange = function() {if (xhr.readyState === 4) {if (xhr.status === 200 || xhr.status === 304) {success(JSON.parse(xhr.responseText));} else {error('请求失败');}}}}// post异步请求function postHttp({url,params,success,error}) {// params格式为对象let xhr = new XMLHttpRequest();xhr.open('post', url, true)xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")xhr.send(JSON.stringify(params))xhr.onreadystatechange = function() {if (xhr.readyState === 4) {if (xhr.status === 200 || xhr.status === 304) {success(JSON.parse(xhr.responseText))} else {error('请求失败')}}}}// xhr.readyState 属性一共有5个值，代表5种状态//0 服务器已就绪，但什么都还没开始（还没调用open()）//1 服务器已连接 ( 还没有调用send() )//2 请求已接收，但尚未响应(通常现在可以从响应中获取内容头)//3 请求处理中，还没有完成（通常响应中已有部分数据可用了，但服务器还没有完全完成响应）//4 响应已经完成，可以获取并使用服务器返回的数据// xhr.status 状态码：// 1xx：信息响应类，表示接收到请求并继续处理// 2xx：处理成功响应类，表示动作被成功接收，理解和接受// 3xx：重定向响应类，为了完成指定的动作，必须接受进一步处理// 4xx：客户端错误，客户请求包含语法错误或者是不能正确执行// 5xx：服务端错误，服务器不能正确执行一个正确的请求  1.post请求安全，数据量比get大
2.get请求不需要设置请求头，参数以 ?name=张三&age=18&sex=男 形式进行拼接
3.post需要设置请求头参数在send方法中以字符串形式传递

原生js实现GET和POST相关推荐

原生js循环展示dom_【前端面试】用一道题讲 js 的事件循环队列
昨天去面了滴滴,一口气面了三面,考了 promise 和事件循环.之前的猿辅导也考察了这些,几乎所有的大厂中厂都一定会考原生 js 的事件循环队列. 今天,我把昨天考察的原题拿出来分析一下. setT ...
进一步封装axios并调用其读取数据（吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持，在这两种情况下的系统只能使用ajax或者原生js请求后台数据）
注意!!!(修改于2020年7月18日) 在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据报错截图如下报错内容: {&quo ...
黄聪：原生js的音频播放器，兼容pc端和移动端（原创）
更新时间:2018/9/3 下午1:32:54 更新说明:添加音乐的loop设置和ended事件监听 loop为ture的时候不执行ended事件 1 2 3 4 5 6 7 8 9 10 11 12 ...
原生js实现点击按钮切换全屏！
使用fullScreen API实现全屏 <head><meta charset="UTF-8"><meta name="viewport& ...
原生js清空上一个元素内容_原生JS实现动态添加新元素、删除元素方法
1. 添加新元素动态添加新元素 Coffee Tea Coffee Tea var child = document.getElementsByClassName("child" ...
蓝鸥原生JS：js的历史及JavaScript的优缺点
蓝鸥原生JS:js的历史及JavaScript的优缺点蓝鸥零基础学习HTML5-html+css基础 http://11824614.blog.51cto.com/11814614/1852769 ...
用原生 js jquery 实现知乎收起答案功能
Update 2016.12.7 已封装为插件原生 js 插件$ npm install foldcontent-zhihu@">=3.0.12" --save Usage ...
移动端实现文字轮播_使用原生JS实现移动端图片轮播效果(一)
PC端上实现图片轮播效果非常简单,只要通过使用click事件就可以非常简单的实现效果,但是在移动端上,就要通过核心的touch事件来实现.话不多说,现在我们就开始移动端轮播效果的实现. 首先就是原生J ...
原生遍历_细品原生JS从初级到高级知识点汇总（三）
作者:火狼1 转发链接:https://juejin.im/post/5daeefc8e51d4524f007fb15 目录细品原生JS从初级到高级知识点汇总(一) 细品原生JS从初级到高级知识点汇 ...
原生js实现发短信~chat
首先给大家说一声抱歉,小编最近和女朋友闹矛盾,断更了一周呀唉,实在是罪过呀,不远两千多公里从北京跑到广州,哄女朋友开心,我也没谁了宝宝心里苦,宝宝就是不说. 好了,言归正传,咱们回到就是实现发短信 ...

原生js实现GET和POST

原生js实现GET和POST相关推荐

最新文章

热门文章