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

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

与此同时，我们会相应的去找一些插件，来代替我们在开发过程中执行一些功能，比如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. charles注册码及中文版本，支持window和mac

    安装证书: 安装完证书之后设置代理 2个* ,代表全部 注册码: Registered Name: https://zhile.io License Key: 48891cf209c6d32bf4 破 ...

  2. mockjs 在项目中vue项目中使用

    一.为什么要使用mockjs 总结起来就是在后端接口没有开发完成之前,前端可以用已有的接口文档,在真实的请求上拦截ajax,并根据mockjs的mock数据的规则,模拟真实接口返回的数据,并将随机的模 ...

  3. 将多个sass文件合并到一个文件中

    将多个sass文件合并到一个文件中 应用场景:制作angular npm包的时候,定义的一些全局样式,自定义主题色这类的情况下,多个scss文件会要合并成一个文件并写到dist文件里,发布到仓库中. ...

  4. Linux 的一些命令记录

    FTP:https://www.cnblogs.com/leoxuan/p/8329998.html YUM:https://blog.csdn.net/allyli0022/article/deta ...

  5. ActiveMQ反序列化(CVE-2015-5254) && ActiveMQ任意文件写入 (CVE-2016-3088)

    ActiveMQ 反序列化漏洞(CVE-2015-5254) 漏洞详情 ActiveMQ启动后,将监听61616和8161两个端口,其中消息在61616这个端口进行传递,使用ActiveMQ这个中间件 ...

  6. php导出百万数据到csv

    <?php set_time_limit(0); // 设置超时 ini_set('memory_limit', '100M'); // 设置最大使用的内存 header("Conte ...

  7. 【Mysql】初识MySQL

    一. MySQL是客户端/服务器架构1)macOS操作系统上的默认安装目录:/usr/local/mysql/  在MySQL的安装目录下有一个bin目录,这个目录下存放着许多可执行文件.2)将该bi ...

  8. odoo10学习笔记十五：仪表板

    转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/11189353.html 仪表盘可以通过外部ID引用其他视图文件的内容,整合到一个界面进行显示. 一:建立仪表 ...

  9. 04.UTXO：未使用的交易输出，比特币核心概念之一

    在比特币系统上其实并不存在“账户”,而只有“地址”.只要你愿意,你就可以在比特币区块链上开设无限多个钱包地址,你拥有的比特币数量是你所有的钱包地址中比特币的总和.比特币系统并不会帮你把这些地址汇总起来 ...

  10. Linux---文件压缩与解压缩命令

    压缩格式: zip.gz.bz2.tar .tar.gz.tar.bz2.tar.xz.xz.z 最常用的是.tar.gz格式和.tar.bz2格式 1.zip格式 命令  说明  zip 压缩文件名 ...