1. /*
  2. *
  3. *create by royal in 2019/1/23
  4. *
  5. *royalAjax 自封装ajax函数
  6. *
  7. *paramsObj JSON类型参数
  8. *require params:
  9. * type : string
  10. * url : string
  11. * data : JSON
  12. * success : function
  13. *
  14. *注:get无参请求时,data参数可以不写
  15. *
  16. */
  17. (function(){
  18. function royalAjax(paramsObj){
  19. //处理参数
  20. if(paramsObj.type.toLowerCase()=='get'){
  21. var arr=[];
  22. for(var pro in paramsObj.data){
  23. var str =pro+'='+paramsObj.data[pro];
  24. arr.push(str);
  25. }
  26. var canshuStr = arr.join('&');
  27. //将参数添加到url后
  28. paramsObj.url +=paramsObj.url.indexOf('?')== -1
  29. ?'?'+canshuStr
  30. :'&'+canshuStr;
  31. }else if(paramsObj.type.toLowerCase()=='post'){
  32. var formdata =new FormData();
  33. for(var pro in paramsObj.data){
  34. formdata.append(pro,paramsObj.data[pro]);
  35. }
  36. }else{
  37. console.log("无效的请求类型!!");
  38. }
  39.  
  40. //准备xhr对象
  41. var xhr = new XMLHttpRequest();
  42. xhr.onreadystatechange =function(){
  43. if(xhr.readyState==4){
  44. if(xhr.status==200){
  45. //请求回来后调用success
  46. paramsObj.success(JSON.parse(xhr.responseText));
  47. }
  48. }
  49. }
  50.  
  51. //准备发送
  52. xhr.open(paramsObj.type, paramsObj.url, true);
  53. //发送请求
  54. if(paramsObj.type.toLowerCase()=='get'){
  55. xhr.send(null);
  56. }else if(paramsObj.type.toLowerCase()=='post'){
  57. xhr.send(formdata);
  58. }else{
  59. console.log("请求类型错误!");
  60. }
  61. }
  62. window.royalAjax= royalAjax;
  63. })();

自封装的AJAX的更多相关文章

  1. 先定一个小目标,自己封装个ajax

    你是否发现项目中有很多页面只用到了框架不到十分之一的内容,还引了压缩后还有70多kb的jquery库 你是否发现项目中就用了两三个underscore提供的方法,其他大部分的你方法你甚至从来没有看过 ...

  2. 封装的ajax请求

    在做登录注册这类提交表单数据时,我们经常需要局部刷新网页来验证用户输入的信息,这就需要用到ajax请求,我们通常需要获取表单中的数据,发起ajax请求,通过服务程序,与数据库的数据进行比对,判断信息的 ...

  3. 自己封装个ajax

    你是否发现项目中有很多页面只用到了框架不到十分之一的内容,还引了压缩后还有70多kb的jquery库 你是否发现项目中就用了两三个underscore提供的方法,其他大部分的你方法你甚至从来没有看过 ...

  4. 封装一个Ajax工具函数

    /*封装一个ajax工具函数*/ window.$ = {}; /*通过$定义一个ajax函数*/ /* * 1. type   string   请求的方式  默认是get * 2. url     ...

  5. 原生封装的ajax

    原生封装的ajax的代码如下: //将数据转换成 a=1&b=2格式; function json2url(json){ var arr = []; //加随机数防止缓存; json.t = ...

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

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

  7. 自己封装的AJAX (带JSON)

    最简单的封装的AJAX: function myajax(url,onsuccess,fail){ //确定是否支持xhr var xhr = new XMLHttpRequest ? new XML ...

  8. mui封装的ajax请求

    由于项目中引进MUI框架,所以就不需要引进jquery,但需要和后台交互时,常写为jquery格式:所以笔者觉得有必要将mui封装的ajax请求在这里提一下: 1,mui框架基于htm5plus的XM ...

  9. jQuery 封装的ajax

    jquery封装的ajax 具体操作: $.get(url  [,data]  [,fn回调函数]   [, dataType]); data:给服务器传递的数据,请求字符串 .json对象 都可以设 ...

  10. Jquery封装的ajax的使用过程发生的问题

    Jquery封装的ajax的使用过程发生的问题 今天在做项目的时候使用到了ajax来完成项目前后端数据交互,在之后发现在前端没有数据显示,而后端数据确实存在,在多次检查代码之后,发现代码并不存在问题, ...

随机推荐

  1. 牛客假日团队赛1 D.Promotion Counting

    链接: https://ac.nowcoder.com/acm/contest/918/D 题意: Bessie the cow is helping Farmer John run the USA ...

  2. chapter06

    /** * Created by EX-CHENZECHAO001 on 2018-03-30. */class Chapter06 { } // 6 对象// 用对象作为单例或存放工具的方法// 类 ...

  3. spark_20180328

    // 2.1 条件表达式val x = 2val s = if (x > 0) 1 else -1if (x > 0) "positive" else -1// 返回值 ...

  4. 文件系统满的话(filesystem full),该如何处理。(du and ls)

    #!/bin/bash function ergodic(){ ` do "/"$file ] then ergodic $"/"$file else loca ...

  5. C# this索引器

  6. Python 2.x和3.x不同点

    1.print和print() 2.yield 出现下面的错误Traceback (most recent call last): File “<pyshell#32>”, line 1, ...

  7. (转)Linux 文件和目录的属性

    linux 文件属性与权限 原文:https://www.cnblogs.com/kzloser/articles/2673790.html https://www.cnblogs.com/danh/ ...

  8. python学习四(处理数据)

    head first python中的一个数据处理的例子 有四个U10选手的600米成绩,请取出每个选手跑的最快的3个时间.以下是四位选手的9次成绩 James 2-34,3:21,2.34,2.45 ...

  9. RS485相关学习

    TIA-485-A (Revision of EIA-485) Standard ANSI/TIA/EIA-485-A-1998Approved: March 3, 1998Reaffirmed: M ...

  10. Xcode8-beat升级需谨慎

    Xcode8-beat版本在打开xib文件的时候,出现了如下的弹窗 在这里要选择Cancel,选择Choose后xib文件的verson会改变,那么Xcode7就没法打开了(坑队友啦), 更没法运行 ...