封装 Ajax

因为Ajax 使用起来比较麻烦，主要就是参数问题，比如到底使用GET 还是POST；到

底是使用同步还是异步等等，我们需要封装一个Ajax 函数，来方便我们调用。

   封装支持接收来自服务端的数据，不可以发送数据到服务端

  1. /**
  2.  
  3. * 此封装只支持接收来自服务端的数据，不可以发送数据到服务端
  4.  
  5.  */
  6.  
  7. function ajax(obj) {
  8.  
  9.     var xhr = new XMLHttpRequest();
  10.  
  11.     obj.url = obj.url + '?rand=' + Math.random();
  12.  
  13.     xhr.open(obj.method, obj.url, obj.async);
  14.  
  15.     xhr.send(null);
  16.  
  17.     if (obj.async === false) {
  18.  
  19.         callback();
  20.  
  21.     }
  22.  
  23.     if (obj.async === true) {
  24.  
  25.         xhr.onreadystatechange = function () {
  26.  
  27.             if (xhr.readyState == 4) {
  28.  
  29.                 callback();
  30.  
  31.             }
  32.  
  33.         };
  34.  
  35.     }
  36.  
  37.     function callback () {
  38.  
  39.         if (xhr.status == 200) {
  40.  
  41.             obj.success(xhr.responseText); //回调
  42.  
  43.         } else {
  44.  
  45.             alert('数据返回失败！状态代码：' + xhr.status + '，状态信息：' + xhr.statusText);
  46.  
  47.         }
  48.  
  49.     }
  50.  
  51. }

　　

把上面的代码封装在ajax2.js中，在页面上引入该文件。

  1. <!DOCTYPE html>
  2.  
  3. <html>
  4.  
  5. <head>
  6.  
  7.     <title>Ajax的封装</title>
  8.  
  9.     <meta charset="utf-8">
  10.  
  11.     <script src="ajax2.js"></script>
  12.  
  13. </head>
  14.  
  15. <body>
  16.  
  17. <button id="btn">调用Ajax</button>
  18.  
  19. <script>
  20.  
  21.     document.getElementById("btn").onclick=function(){
  22.  
  23.         ajax({
  24.  
  25.             method : 'get',
  26.  
  27.             url : 'http://localhost:3000/api/2',
  28.  
  29.             success : function (text) {
  30.  
  31.                 alert(text);
  32.  
  33.             },
  34.  
  35.             async :false
  36.  
  37.         });
  38.  
  39.     };
  40.  
  41. </script>
  42.  
  43. </body>
  44.  
  45. </html>
  46.  
  47. 7.2  封装支持接收来自服务端的数据，又可以发送数据到服务端
  48.  
  49. function ajax(obj) {
  50.  
  51.     var xhr = new XMLHttpRequest();
  52.  
  53.     obj.url = obj.url + '?rand=' + Math.random();
  54.  
  55.     obj.data = params(obj.data);
  56.  
  57.     if (obj.method === 'get') {
  58.  
  59.         obj.url = obj.url.indexOf('?') == -1 ? obj.url + '?' + obj.data : obj.url + '&' + obj.data;
  60.  
  61.     }
  62.  
  63.     if (obj.async === true) {
  64.  
  65.         xhr.onreadystatechange = function () {
  66.  
  67.             if (xhr.readyState == 4) {
  68.  
  69.                 callback();
  70.  
  71.             }
  72.  
  73.         };
  74.  
  75.     }
  76.  
  77.     xhr.open(obj.method, obj.url, obj.async);
  78.  
  79.     if (obj.method === 'post') {
  80.  
  81.         xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  82.  
  83.         xhr.send(obj.data);
  84.  
  85.     } else {
  86.  
  87.         xhr.send(null);
  88.  
  89.     }
  90.  
  91.     if (obj.async === false) {
  92.  
  93.         callback();
  94.  
  95.     }
  96.  
  97.     function callback () {
  98.  
  99.         if (xhr.status == 200) {
  100.  
  101.             obj.success(xhr.responseText); //回调
  102.  
  103.         } else {
  104.  
  105.             alert('数据返回失败！状态代码：' + xhr.status + '，状态信息：' + xhr.statusText);
  106.  
  107.         }
  108.  
  109.     }
  110.  
  111. }
  112.  
  113. //名值对编码
  114.  
  115. function params(data) {
  116.  
  117.     var arr = [];
  118.  
  119.     for (var i in data) {
  120.  
  121.         arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
  122.  
  123.     }
  124.  
  125.     return arr.join('&');
  126.  
  127. }

　         希望能够帮到你！

Ajax的封装。的更多相关文章

  1. 原生态AJAX详解和jquery对AJAX的封装

    AJAX: A :Asynchronous [eI`sinkrenes] 异步 J :JavaScript    JavaScript脚本语言 A: And X :XML 可扩展标记语言 AJAX现在 ...

  2. 【前端学习笔记04】JavaScript数据通信Ajax方法封装

    //Ajax 方法封装 //设置数据格式 function setData(data){ if(!data){ return ''; } else{ var arr = []; for(k in da ...

  3. 原生ajax与封装的ajax使用方法

    当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...

  4. Ajax入门（二）Ajax函数封装

    如果看了的我上一篇博客<Ajax入门(一)从0开始到一次成功的GET请求>的话,肯定知道我们已经完成了一个简单的get请求函数了.如下: 1234567891011121314151617 ...

  5. js进阶ajax函数封装（匿名函数作为参数传递）（封装函数引入文件的方式非常好用）

    js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用) 一.总结 2.匿名函数作为参数传递 二.js进阶ajax函数封装 ajax1.js function ajax(ur ...

  6. jQuery-实现简单的Ajax请求封装

    封装的意义在于复用,在于减少重复的代码. 我在项目中做了简单的Ajax请求封装,实现方式如下: //封装Ajax请求 $.extend({ ajaxDirect:function(url,type,d ...

  7. JQ中的Ajax的封装

    1.认识JQ中ajax的封装      jQ 对于ajax的封装有两层实现:$.ajax 为底层封装实现:基于 $.ajax ,分别实现了$.get 与$.post 的高层封装实现: 2.Ajax的底 ...

  8. Jquery Ajax简单封装(集中错误、请求loading处理)

    Jquery Ajax简单封装(集中错误.请求loading处理) 对Jquery Ajax做了简单封装,错误处理,请求loading等,运用到项目中集中处理会很方便. 技术层面没有什么好说的,请求是 ...

  9. Ajax的封装，以及利用jquery的ajax获取天气预报

    1.Ajax的封装 function ajax(type,url,param,sync,datetype,callback){//第一个参数是获取数据的类型,第二个参数是传入open的url,第三个是 ...

随机推荐

  1. org.apache.httpcomponents:httpclient 工具类

    基于httpclient 版本4.4.1 因为http连接需要三次握手,在需要频繁调用时浪费资源和时间 故采用连接池的方式连接 根据实际需要更改  连接池最大连接数.路由最大连接数 另一个需要注意的是 ...

  2. 关于微信小程序 modal弹框组件的介绍

    微信小程序 modal: 这里对微信小程序中 modal组件进行详细解析,我想开发微信小程序的小伙伴可以用到,这里小编就记录下modal的知识要点. modal modal类似于javascript中 ...

  3. python学习笔记(1)：python基础

    python基础回顾 1.Ipython魔术命令 %timeit //多次执行一条语句,并返回平均时间,%%time->多条语句,用于测试一条语句用了多少时间 %time //返回执行一条语句的 ...

  4. Java实现文件上传-按钮弹出上传页面

    转自: https://blessht.iteye.com/blog/1405057 最近自己在做一个小系统玩的时候涉及到了文件的上传,于是在网上找到Java上传文件的方案,最后确定使用common- ...

  5. Nginx优化_数据包头部信息过大问题

    如果客户端发出请求的URL头部信息过大,网站将不能及时响应,并通过状态码414报错. <center><h1>414 Request-URI Too Large</h1& ...

  6. 如何设置Linux虚拟机的IP地址

    本文会详细的解释如何在Linux虚拟机下设置IP地址 我的虚拟机是CentOS 首先,打开你的虚拟机 1.修改主机名 修改完主机名之后,别忘了用:wq命令保存退出 然后我们来设置虚拟机的IP地址 首先 ...

  7. Python核心技术与实战——四|Python黑箱：输入与输出

    抽象的看,Python程序可以被看成一个黑箱:通过输入流将数据送达,经过处理后在输入,也就是说具备了一个图灵机运作的必要条件. 输入输出基础 最简单的输入是来自键盘的操作 name = input(' ...

  8. Django【第18篇】：Django之缓存

    Django 之缓存 一.缓存 由于Django是动态网站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显,最简单解决方式是使用:缓存,缓存将一个某个views的返回值保存 ...

  9. 字符编码、python2和python3编码的区别

    目录 字符编码 文本编辑器存储信息的过程 python解释器解释python代码的流程 python解释器与文本编辑器的异同 不同编码格式存入与读取数据的过程 乱码的分析 python2和python ...

  10. vue-cli3热更新配置，解决热更新失败的问题，保存代码浏览器自动刷新

    在vue,config.js中配置css热更新 const IS_PROD = ['production', 'test'].includes(process.env.NODE_ENV) css: { ...