原生js创建XMLhttpRequest对象
分类专栏: Javascript&
简介 原生javascript封装通用的xhr对象, 兼容各个版本.
<p><span class="ql-size-large"> // 封装通用的xhr对象, 兼容各个版本</span></p><p><span class="ql-size-large"> function createXHR(){</span></p><p><span class="ql-size-large"> // 判断浏览器是否将XMLHttpRequest作为本地对象实现,针对IE8</span></p><p><span class="ql-size-large"> if (typeof XMLHttpRequest != 'undefined') {</span></p><p><span class="ql-size-large"> return new XMLHttpRequest();</span></p><p><span class="ql-size-large"> } else if (typeof ActiveXObject != 'undefined') {</span></p><p><span class="ql-size-large"> // 将所有可能出现的ActiveXObject版本放在一个数组中</span></p><p><span class="ql-size-large"> var xhrArr = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP.4.0'];</span></p><p><span class="ql-size-large"> // 遍历创建XMLHttpRequest对象</span></p><p><span class="ql-size-large"> var len = xhrArr.length, xhr;</span></p><p><span class="ql-size-large"> for(let i = 0; i < len; i++) {</span></p><p><span class="ql-size-large"> try{</span></p><p><span class="ql-size-large"> // 创建XMLHttpRequest对象</span></p><p><span class="ql-size-large"> xhr = new ActiveXObject(xhrArr[i]);</span></p><p><span class="ql-size-large"> break;</span></p><p><span class="ql-size-large"> }catch(err){</span></p><p><span class="ql-size-large"> console.log(err);</span></p><p><span class="ql-size-large"> }</span></p><p><span class="ql-size-large"> }</span></p><p><span class="ql-size-large"> return xhr;</span></p><p><span class="ql-size-large"> } else {</span></p><p><span class="ql-size-large"> throw new Error('No XHR object availabel!')</span></p><p><span class="ql-size-large"> }</span></p><p><span class="ql-size-large"> }</span></p><p><span class="ql-size-large"> // XMLHttpRequest对象</span></p><p><span class="ql-size-large"> var xhr = createXHR(), data;</span></p><p><span class="ql-size-large"> // 响应XMLHttpRequest对象状态变化的函数,OnreadyStatechange在readyState属性发生改变时触发</span></p><p><span class="ql-size-large"> xhr.onreadystatechange = function () {</span></p><p><span class="ql-size-large"> // 响应内容解析完成,可以在客户端调用</span></p><p><span class="ql-size-large"> if (xhr.readyState == 4) {</span></p><p><span class="ql-size-large"> // 异步调用成功, 304表示请求资源没有改变</span></p><p><span class="ql-size-large"> if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {</span></p><p><span class="ql-size-large"> // 获得服务器返回的数据。</span></p><p><span class="ql-size-large"> console.log(JSON.parse(xhr.responseText))</span></p><p><span class="ql-size-large"> data = JSON.parse(xhr.responseText)</span></p><p><span class="ql-size-large"> // 渲染数据到页面中</span></p><p><span class="ql-size-large"> renderDataToDom();</span></p><p><span class="ql-size-large"> }</span></p><p><span class="ql-size-large"> }</span></p><p><span class="ql-size-large"> }</span></p><p><span class="ql-size-large"> // 创建请求</span></p><p><span class="ql-size-large"> xhr.open("GET", "http://106.55.147.49:12005/public/list", true);</span></p><p><span class="ql-size-large"> // 发送请求 xhr.send({user: "zhangsan", id: 6})</span></p><p><span class="ql-size-large"> xhr.send(null);</span></p><p><span class="ql-size-large"> // 设置http头部信息</span></p><p><span class="ql-size-large"> // xhr.setRequestHeader("Content-type", "application/x-wwww-form-urlencoded");</span></p><p><span class="ql-size-large"> </span></p>
分享到:
转载:
喜欢 3
收藏
暂无评论信息
- 文章推荐
-
亚马逊推出“无需收银员”的新技术,以此帮助品牌和广告商提高销量
北京时间 6 月 30 日早间消息,据报道,亚马逊发明了一种无需收银员的技术,可以加快人们去杂货店或便利店的速度。现在,该公司希望利用这个跟踪系统来帮助品牌和广告商提高销量。&
-
Docker 常用命令
docker目前代替虚拟机使用的一个容器,灵活好用。
-
半导体短缺即将结束?分析师:如果没有 1 美元芯片会影响更多
德勤咨询(Deloitte Consulting)的芯片分析师认为,随着芯片行业资本支出的增加,需求度较高的工厂已经开工,预示着短缺情况即将结束。
-
Node 配置sequelize + mysql,根据模型自动创建数据库表
研究了一下午的node + sequelize + mysql。
- 点击排行
- 站长推荐
- 猜你喜欢
- 网站信息
- 站内问答:12篇
- 站内文章:203篇
- 建站时间:已运行798天
- 备案号: 浙ICP备2022018799号
- 语言:
English(USA)
French(FR)
Chinese(ZH)
无数据