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

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

与此同时，我们会相应的去找一些插件，来代替我们在开发过程中执行一些功能，比如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. Linux文件共享服务 FTP，NFS 和 Samba

    Linux 系统中,存储设主要有下面几种: DAS DAS 指 Direct Attached Storage,即直连附加存储,这种设备直接连接到计算机主板总线上,计算机将其识别为一个块设备,例如常见 ...

  2. 实验6：Mapreduce实例——WordCount

          实验目的1.准确理解Mapreduce的设计原理2.熟练掌握WordCount程序代码编写3.学会自己编写WordCount程序进行词频统计实验原理MapReduce采用的是“分而治之”的 ...

  3. CTF必备技能丨Linux Pwn入门教程——调整栈帧的技巧

    Linux Pwn入门教程系列分享如约而至,本套课程是作者依据i春秋Pwn入门课程中的技术分类,并结合近几年赛事中出现的题目和文章整理出一份相对完整的Linux Pwn教程. 教程仅针对i386/am ...

  4. 团队作业第3周——需求改进&系统设计

    目录 团队作业第3周--需求改进&系统设计 1.需求&原型改进 2.系统设计 3.Alpha任务分配计划 4.测试计划 1 测试术语 4.2 有关项目人员组成 2 任务概述 3.测试策 ...

  5. CI/CD DevOps

    CI/CD DevOps 通过技术工具链完成持续集成CI.持续交付CD.用户反馈和系统优化的整合,实现跨团队的无缝协作(DevOps). 什么是持续集成? 他是开发每天代码更新的副本,所有的开发工作都 ...

  6. Vue+ElementUI 导航组件

    创建导航页组件 在components目录下新建一个navigation目录,在Navi目录中新建一个名为Navi.vue的组件.至此我们的目录应该是如下图所示: 然后我们修改main.js文件,修改 ...

  7. DjangoForm 提交验证

    用户提交数据的验证 1.创建模版 -- class LoginForm(forms.Form):.... 2.将请求交给模版,创建一个对象 -- obj = LoginForm(request.POS ...

  8. 2-1Numpy概述

    In [1]: import numpy as np In [2]: array=[1,2,3,4,5] array+1#没定义成numpy.ndarray类型是不能直接操作的   --------- ...

  9. 两种方式实现浅拷贝 for in实现和Object.assign({}, 对象1, 对象2);

    浅拷贝只拷贝对象的一层,如果对象的属性还是对象,那么user3和user4这两个对象对应的值都会发生改变 // 拷贝分为浅拷贝和深拷贝. // 浅拷贝的实现 通过for in实现 var user1 ...

  10. JS高阶---作用域与执行上下文

    一句话介绍 .