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

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

与此同时，我们会相应的去找一些插件，来代替我们在开发过程中执行一些功能，比如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. webapi 导入excel处理数据

    参考资料     https://blog.csdn.net/pan_junbiao/article/details/82935992 https://www.cnblogs.com/dansedia ...

  2. python with语句与contextlib

    参考链接:https://www.ibm.com/developerworks/cn/opensource/os-cn-pythonwith/ with语句用于异常处理,适用于存在资源访问的场合,无论 ...

  3. 2019大厂Java岗面试题全曝光，刷完这1020道，金三银四大厂等你

    2019大厂Java岗面试题全曝光,刷完这1020道,金三银四大厂等你 前言: 本文收集整理了各大厂常见面试题N道,你想要的这里都有 内容涵盖:Java.MyBatis.ZooKeeper.Dubbo ...

  4. webpack4 plugins 篇

    demo 代码点此,篇幅有限,仅介绍几个常用的. start 什么是 plugins ? While loaders are used to transform certain types of mo ...

  5. 第1篇Scrum冲刺博客

    目录 第1篇Scrum冲刺博客 各个成员在 Alpha 阶段认领的任务 各个成员的任务安排 整个项目预期的任务量 敏捷开发前的感想 团队期望 第1篇Scrum冲刺博客 各个成员在 Alpha 阶段认领 ...

  6. 对于不返回任何键列信息的 SelectCommand，不支持 DeleteCommand 的动态 SQL 生成

    VS新增操作数据库出现如下报错. 原因是数据库表未添加主键 MySQL: CREATE TABLE Customer (SID integer, Last_Name ), First_Name ), ...

  7. (转)linux内核虚拟文件系统浅析【转】

    转自:https://www.cnblogs.com/woainilsr/p/3590716.html 转自http://hi.baidu.com/_kouu/item/4e9db8758032824 ...

  8. Linux IO 概念(2)【转】

    转自:https://www.cnblogs.com/qq289736032/p/9188455.html 在上一篇IO底层的概念中杂合了很多模糊的概念,受知识水平的限制,只是从网上抄了很多过来.从l ...

  9. 吴丽丽-201871010123《面向对象程序设计（Java）》第七周学习总结

    吴丽丽-201871010123<面向对象程序设计(Java)>第七周学习总结 项目 内容 这个作业属于哪个课程 http://www.cnblogs.com/nwnu-daizh/ 这个 ...

  10. 唐敬博-201871010118 《面向对象程序设计（java）》第七周学习总结

    在博客园撰写博客(随笔),总结7周实验内容,作业格式要求如下: 博文名称:学号-姓名<面向对象程序设计(java)>第七周学习总结(1分) 博文正文开头格式:(2分) 项目 内容 这个作业 ...