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

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

与此同时，我们会相应的去找一些插件，来代替我们在开发过程中执行一些功能，比如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. Winform中设置ZedGraph鼠标焦点位置画出十字线并在鼠标移出时十字线消失

    场景 Winforn中设置ZedGraph曲线图的属性.坐标轴属性.刻度属性: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...

  2. C 输入和输出、char类型

    参考链接:https://www.runoob.com/cprogramming/c-input-output.html 标准输入输出头文件stdio.h #include是一个预处理指令,用于引入s ...

  3. 面试题深入解析：Synchronized底层实现

    本文为synchronized系列第二篇.主要内容为分析偏向锁的实现. 偏向锁的诞生背景和基本原理在上文中已经讲过了,强烈建议在有看过上篇文章的基础下阅读本文. 本文将分为几块内容: 1.偏向锁的入口 ...

  4. strace命令 系统调用

    简介 strace常用来跟踪进程执行时的系统调用和所接收的信号. 在Linux世界,进程不能直接访问硬件设备,当进程需要访问硬件设备(比如读取磁盘文件,接收网络数据等等)时,必须由用户态模式切换至内核 ...

  5. bootstrap基础样式学习（二）——栅格

    (1)最外层必须使用容器 div.container或 div.container-fluid (2)容器可以放置任何内容,若想使用栅格系统必须用 div.row div.container > ...

  6. odoo10学习笔记九：Odoo10 API

    转载请转载原文地址:https://www.cnblogs.com/ygj0930/p/11189315.html 一:纪录集API model中的数据是以集合的形式使用的,因此可以使用集合运算来操作 ...

  7. 201871010134-周英杰《面向对象程序设计（java）》第十六周学习总结

    项目 内容 <面向对象程序设计(java)> https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/ ...

  8. halcon笔记1

    * 获得二值图 Image_binread_image(Image, 'C:/Alex/halcon/test.bmp') // 读图 threshold (Image, Regions, , ) / ...

  9. JUnit 4 和 TestNG

    JUnit 4和TestNG都是Java中非常受欢迎的单元测试框架.两种框架在功能上看起来非常相似.哪一个更好?在Java项目中应该使用哪个单元测试框架? 下面表中概括了JUnit 4和TestNG之 ...

  10. Kubernetes 集群分析查看内存，CPU

    Kubernetes方式 top命令查看所有pod,nodes中内存,CPU使用情况 查看pod root @ master ➜ ~ kubectl top pod -n irm-server NAM ...