原生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
收藏
暂无评论信息
- 相关文章
- 文章推荐
-
群辉nas docker容器 配置svn仓库,并实现外网访问
2022-08-11的这一天, 群辉nas到手了, 实现svn仓库外网的访问,折腾了好久。记录一下。
-
半导体短缺即将结束?分析师:如果没有 1 美元芯片会影响更多
德勤咨询(Deloitte Consulting)的芯片分析师认为,随着芯片行业资本支出的增加,需求度较高的工厂已经开工,预示着短缺情况即将结束。
-
Node 配置sequelize + mysql,根据模型自动创建数据库表
研究了一下午的node + sequelize + mysql。
-
HTML 面试知识点总结
本部分主要是笔者在复习 HTML 相关知识和一些相关面试题时所做的笔记,如果出现错误,希望大家指出!
- 点击排行
- 站长推荐
- 猜你喜欢
- 网站信息
- 站内问答:12篇
- 站内文章:213篇
- 建站时间:已运行1268天
- 备案号: 浙ICP备2022018799号
- 语言:
- English(USA)
- French(FR)
- Chinese(ZH)
无数据