原生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
收藏
暂无评论信息
- 相关文章
- 文章推荐
-
乐视官方确认还有 400 多人:消息称员工“没有内卷和 996”,过着“没有老板”的神仙日子
7 月 11 日消息,近期,微博博主 @Fenng 分享了一个冷知识:乐视居然还剩下 400 多人,有不少是五年以上的老员工。这些老员工称“幸福感是很多老乐视人留下来的理由”,没有内卷和 996,没拖欠过留下来的员工的工资,也没停过社保。
-
HTML 面试知识点总结
本部分主要是笔者在复习 HTML 相关知识和一些相关面试题时所做的笔记,如果出现错误,希望大家指出!
-
眼镜试戴的装饰效果
开发眼镜类产品的时候需要使用试戴的功能,这里就有你需要的学习资料哦!
-
Node 配置sequelize + mysql,根据模型自动创建数据库表
研究了一下午的node + sequelize + mysql。
- 点击排行
- 站长推荐
- 猜你喜欢
- 网站信息
- 站内问答:12篇
- 站内文章:212篇
- 建站时间:已运行1107天
- 备案号: 浙ICP备2022018799号
- 语言:
English(USA)
French(FR)
Chinese(ZH)
无数据