时间久了，在工作中会有很多方法和见解。

随着时间的推移，慢慢的写的代码越来越多，封装分方法也越来越多，为的是方便后续工作，加快开发效率！

与此同时，我们会相应的去找一些插件，来代替我们在开发过程中执行一些功能，比如jQuery封装的 xhr Ajax请求方法。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>XMLHttpRequest原生封装</title>

     </head>

     <body>

         <script type="text/javascript">

             // Ajax封装

             var xhr;

             if (window.XMLHttpRequest) { // Mozilla,Safari

                 xhr = new XMLHttpRequest();

             } else if (window.ActiveXObject) { // IE

                 try {

                     xhr = new ActiveXObject('Msxml2.XMLHTTP');

                 } catch (e) {

                     try {

                         xhr = new ActiveXObject('Microsoft.XMLHTTP'); // IE5,IE6

                     } catch (e) {}

                 }

             }

             // get 请求

             xhr.open('GET', 'url', true);

             xhr.send();

             /* POST 请求封装 */

             var xhr;

             if (window.XMLHttpRequest) {

                 xhr = new XMLHttpRequest();

             } else if (window.ActiveXObject) {

                 try {

                     xhr = new ActiveXObject('Msml2.XMLHTTP');

                 } catch (e) {

                     try {

                         xhr = new ActiveXObject('Microsoft.XMLHTTP');

                     } catch (e) {}

                 }

             }

             if (xhr) {

                 xhr.onreadystatechange = onReadyStateChange;

                 xhr.open('POST', '/api', true);

                 // 设置Content-Type 为application/x-www-form-urlencoded

                 // 以表单的形式传递数据

                 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

                 xhr.send('username=admin&password=root');

             }

             // onReadyStateChange 方法

             function onReadyStateChange() {

                 // 该函数会被调用四次

                 if (xhr.readyState === 4 && xhr.status === 200) {

                     console.log('发送成功！');

                 } else {

                     console.log('发送失败！')

                 }

             }

         </script>

     </body>

 </html>

JavaScript原生请求数据的方法，使用的是XMLHttpRequest方法，但是为了兼容微软的低版本 IE 浏览器，我们需要使用XMLActiveXObject()方法来实现低版本的IE浏览器的数据交互，Get和Post请求方式，还是存在一定的区别的，如：参数的个数和类型的不同，代表的含义也不一样。判断的状态也不相同！

XMLHttpRequest原生方法的更多相关文章

  1. 通过js调用android原生方法

    有时候我们有这样一个需求,监听html中控件的一些事件.例如点击html中某个按钮,跳转到别的activity,复制某段文本. 首先是对webview的设置: myWebView = (WebView ...

  2. 再探JS数组原生方法—没想到你是这样的数组

    最近作死又去做了一遍javascript-puzzlers上的44道变态题,这些题号称"JS语言专业八级"的水准,建议可以去试试,这里我不去解析这44道题了, ...

  3. 【转】3篇：Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告：官方原生方法分析

    作者: 牛A与牛C之间 时间: 2013-11-17 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第3篇:Xilium CefGlue 关于 CLR Object 与 JS ...

  4. javascript 原生方法监听DOM结构改变事件

    js原生方法监听DOM结构改变事件 document.addEventListener('DOMNodeInserted',function(){alert(1)},false);document.a ...

  5. javacpp-opencv图像处理3：使用opencv原生方法遍历摄像头设备及调用(增加实时帧率计算方法)

    javaCV图像处理系列: javaCV图像处理之1:实时视频添加文字水印并截取视频图像保存成图片,实现文字水印的字体.位置.大小.粗度.翻转.平滑等操作 javaCV图像处理之2:实时视频添加图片水 ...

  6. JS 中 原生方法 (四) --- Object

    Javascript 中 str. arr.date.obj 等常见的原生方法总结 本文也说主要阐释了 Javascript 中的基础类型和 引用类型的自带方法,那么熟悉的同学又可以绕道了 总是绕道, ...

  7. JS 中 原生方法 (三) --- Date 日期

    本文也说主要阐释了 Javascript 中的基础类型和 引用类型的自带方法,那么熟悉的同学又可以绕道了 总是绕道,真是羞耻悳boy 当然 本文阐述的主要类容 from MDN ( zh-cn ) D ...

  8. JS 中 原生方法 (一) --- 字符串

    目录 Javascript 中 str. arr.date.obj 等常见的原生方法总结 Javascript 中 str. arr.date.obj 等常见的原生方法总结 本文也说主要阐释了 Jav ...

  9. 客户端优化之使用javascript原生方法替代复杂的数学运算和jquery方法

    尽管jQuery等js框架相比原生javascript使用起来极为方便但是为什么在一些大型互联网公司还是一致强调前端开发人员的js基础,因为尽管javascript使用起来可能非常不便不仅体现在语法而 ...

随机推荐

  1. 关于 L3 缓存行 cacheLIne 的研究！还是对程序有举足轻重的作用！

    https://www.cnblogs.com/PurpleTide/archive/2010/11/25/1887506.html CLR via C# 读书笔记 2-3 Cache Lines a ...

  2. animations与transition

    transition过渡 和animation 动画 要知道 transition过渡和animation动画都是实现元素运动的一种方式.区别在于: transition过渡需要人为触发,例如点击触发 ...

  3. Bacula Plugins

    1. loadPlugin 插件通过加载动态库loadPlugin函数开始,此函数包括bacula的回调和Plugin的注册 bacula的回调 typedef struct s_baculaFunc ...

  4. 详解Vue的slot新用法

    摘要: 理解Vue插槽. 作者:前端小智 原文:vue 2.6 中 slot 的新用法 Fundebug经授权转载,版权归原作者所有. 为了保证的可读性,本文采用意译而非直译. 最近发布不久的Vue ...

  5. 当MySQL数据库遇到Syn Flooding

    Syn攻击是最常见又最容易被利用的一种攻击手法,利用TCP协议的缺陷,发送大量伪造TCP连接请求,常用假冒的IP发来海量的SYN包,被攻击的服务器回应SYN+ACK,因为对方是假冒的IP,永远收不到包 ...

  6. Django ajax 简单介绍

    AJAX Asynchronous Javascript And XML是 "异步Javascript和XML".即使用 Javascript 语言与服务器进行异步交互,传输的数据 ...

  7. sed 常用命令 网址

    https://wangchujiang.com/linux-command/c/sed.html https://linux.cn/article-11367-1.html https://juej ...

  8. Python列表操作与深浅拷贝（7）——列表深浅拷贝、删除、反转、排序

    列表复制 浅拷贝:简单类型元素全复制,引用类型元素只复制引用 L1 = [3,2,1,[4,5,6],8,'abc'] L1 [3, 2, 1, [4, 5, 6], 8, 'abc'] L2 = L ...

  9. win10企业版LTSC批量激活

    slmgr -ipk M7XTQ-FN8P6-TTKYV-9D4CC-J462D   slmgr -skms kms.03k.org slmgr -ato slmgr -dlv

  10. Python3——根据m3u8下载视频（下）之requests

    下半场ING,好吧,本来准备明天写的(拖延真快乐.gif),请然而,,,早上八点多跑公司加班(看书+学习)去,发现大门上挂着一把大锁,我只想说门禁是拿来看的嘛,加啥破锁o(╥﹏╥)o,严重打击了好员工 ...