当前位置:首页 - 博客 - 正文

使用原生js仿Jquery的ajax请求

  1. var Ajax = {
  2. ajax: function (param) {
  3. var url = param['url'];
  4. if (isEmpty(url)) {
  5. param.error.call(this, "url不能为空");
  6. return false;
  7. }
  8. var dataType = param["dataType"];
  9. var type = param["type"];
  10. var data = param["data"];
  11. var methodType = "POST";
  12. var requestData = "";
  13. if (data != null && data != undefined) {
  14. // 参数转换
  15. var objs = Object.keys(data);
  16. for (var i = 0,len = objs.length, key = ""; i < len; i++) {
  17. key = objs[i];
  18. if (i >= 1) {
  19. requestData += "&";
  20. }
  21. requestData += key + "=" + data[key];
  22. }
  23. }
  24. if (isEmpty(type) || type.toLowerCase() == "get") {
  25. methodType = "GET";
  26. if (url.indexOf("?") != -1 && requestData != "") {
  27. // 如果url有参数重新拼接
  28. url += "&" + requestData;
  29. } else {
  30. url += "?"+ requestData;
  31. }
  32. }
  33. this.send(url, methodType, data, dataType, param.success, param.error)
  34. },
  35. /**
  36. * 发送ajax请求
  37. *
  38. * @param url 请求链接
  39. * @param methodType 请求方法 POST、GET
  40. * @param data 请求数据
  41. * @param dataType 返回数据类型
  42. * @param success 成功回调
  43. * @param error 失败回调
  44. */
  45. send: function (url, methodType, data, dataType, success, error) {
  46. // XMLHttpRequest对象用于在后台与服务器交换数据
  47. var xhr = new XMLHttpRequest();
  48. xhr.open(methodType, url , true);
  49. if (methodType == "POST") {
  50. // 添加http头,发送信息至服务器时内容编码类型
  51. xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  52. }
  53. //每当readyState改变时就会触发onreadystatechange函数
  54. //0: 请求未初始化
  55. //1: 服务器连接已建立
  56. //2: 请求已接收
  57. //3: 请求处理中
  58. //4: 请求已完成,且响应已就绪
  59. xhr.onreadystatechange = function() {
  60. if (xhr.readyState != 4) {
  61. return;
  62. }
  63. if (xhr.status == 200 || xhr.status == 304) {
  64. try {
  65. if (dataType != null && dataType.toLowerCase() == "json") {
  66. success.call(this, JSON.parse(xhr.responseText));
  67. } else {
  68. success.call(this, xhr.responseText);
  69. }
  70. } catch (e) {
  71. error.call(this, e);
  72. }
  73. } else{
  74. error.call(this, xhr);
  75. }
  76. };
  77. //发送数据
  78. xhr.send(data);
  79. },
  80. isEmpty: function(str) {
  81. if (str == null || str == undefined || str == "") {
  82. return true;
  83. }
  84. return false;
  85. }
  86. }

调用示例:

  1. Ajax.ajax({
  2. type: "GET",
  3. url: "/web/login-status",
  4. dataType: "JSON",
  5. //请求成功
  6. success: function (result) {
  7. console.log(result);
  8. },
  9. //请求失败,包含具体的错误信息
  10. error: function (e) {
  11. console.log(e);
  12. }
  13. });