首页 > 代码库 > Ajax,ajax封装

Ajax,ajax封装

  1. /**
  2. * Created by liyinghao on 2016/8/23.
  3. */
  4. /*仿jQuery中的ajax方法,简单版实现;封装ajax的工具函数*/
  5. /*
  6. * 1 请求方式 type get post 默认是get方式
  7. * 2.接口地址 url 都是地址 默认的是当前地址
  8. * 3.是否异步 async true false 默认的true 异步请求
  9. * 4.请求数据 data {}对象形式 默认是空对象
  10. *
  11. *
  12. * 5.成功回调函数(成功需要做的事情) success
  13. * 6.失败回调函数(失败需要做的事情) error
  14. *
  15. * 比如 发送前要做的事情 beforeSend
  16. * */
  17. window.$ ={
  18. /* ajax:function(){
  19. }*/
  20. };
  21. /*定义一个ajax工具函数*/
  22. /*options 是一个对象*/
  23. $.ajax = function(options){
  24. /*如果你什么都没传呢?停止执行*/
  25. /*if(options && typeof options == ‘object‘){
  26. }*/
  27. if(!options || typeof options != ‘object‘) return fasle;
  28. /*如果传了*/
  29. var type = options.type || ‘get‘;
  30. var url = options.url || location.pathname;
  31. /* false true "" false */
  32. var async = options.async === false ? false : true;
  33. /*需要传递的数据*/
  34. var data = options.data || {};
  35. /*需要data转化成ajax传递数据的格式 {name:‘‘,age:‘‘} ===>>> name=gc&age=10 */
  36. var dataStr = ‘‘;
  37. for(key in data){
  38. dataStr += key+‘=‘+data[key]+‘&‘;
  39. };
  40. /*str.slice(0,-1); 取到倒着数几个字符*/
  41. dataStr = dataStr && dataStr.slice(0,-1);
  42. /*ajax编程*/
  43. /*初始化*/
  44. var xhr = new XMLHttpRequest();
  45. /*设置请求行*/
  46. /*如果是get请求 参数是不是该拼接在url后面*/
  47. xhr.open(type,type==‘get‘?url+‘?‘+dataStr:url,async);
  48. /*设置请求头*/
  49. if(type == ‘post‘){
  50. xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);
  51. }
  52. /*设置请求内容*/
  53. xhr.send(type==‘get‘?null:dataStr);
  54. /*响应*/
  55. xhr.onreadystatechange = function(){
  56. /*首先确定通讯完全完成*/
  57. if(xhr.readyState == 4){
  58. /*如果是成功的请求 status == 200 */
  59. if(xhr.status == 200){
  60. /*成功*/
  61. /*知道后台想要返回什么数据类型 application/json;charset=utf-8*/
  62. /*application/xml application/json text/html text/xml text/json text/css*/
  63. var contentType = xhr.getResponseHeader(‘Content-Type‘);
  64. var result = null;
  65. if(contentType.indexOf(‘xml‘) > -1){
  66. /*返回什么数据类型xml*/
  67. result = xhr.responseXML;
  68. }else if(contentType.indexOf(‘json‘) > -1){
  69. /*返回什么数据类型json*/
  70. var data = xhr.responseText;
  71. result = data && JSON.parse(data);
  72. }else{
  73. result = xhr.responseText;
  74. }
  75. /*执行成功回调函数*/
  76. options.success && options.success(result);
  77. }else{
  78. /*失败*/
  79. options.error && options.error({status:xhr.status,statusText:xhr.statusText});
  80. }
  81. }
  82. }
  83. };
  84. /*get*/
  85. $.get = function(options){
  86. options.type = ‘get‘;
  87. $.ajax(options);
  88. }
  89. /*post*/
  90. $.post = function(options){
  91. options.type = ‘post‘;
  92. $.ajax(options);
  93. }



来自为知笔记(Wiz)


Ajax,ajax封装