博客列表 >原生js实现ajax封装

原生js实现ajax封装

Fergus的博客
Fergus的博客原创
2017年09月05日 14:44:40540浏览


/**
* Created by fergus on 2017/6/6.
*/
function ajax(options) {
   options = options || {};
   options.type = (options.type || "GET").toUpperCase();
   options.dataType = options.dataType || "json";
   var params = formatParams(options.data);

   //创建 - 非IE6 - 第一步
   if (window.XMLHttpRequest) {
       var xhr = new XMLHttpRequest();
   } else { //IE6及其以下版本浏览器
       var xhr = new ActiveXObject('Microsoft.XMLHTTP');
   }

   //接收 - 第三步
   xhr.onreadystatechange = function () {
       if (xhr.readyState == 4) {
           var status = xhr.status;
           if (status >= 200 && status < 300) {
               options.success && options.success(xhr.responseText, xhr.responseXML);
           } else {
               options.fail && options.fail(status);
           }
       }
   }

   //连接 和 发送 - 第二步
   if (options.type == "GET") {
       xhr.open("GET", options.url + "?" + params, true);
       xhr.send(null);
   } else if (options.type == "POST") {
       xhr.open("POST", options.url, true);
       //设置表单提交时的内容类型
       xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
       xhr.send(params);
   }
}
//格式化参数
function formatParams(data) {
   var arr = [];
   for (var name in data) {
       arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
   }
   //设置随机数,防止缓存
   arr.push(("v=" + Math.random()).replace(".",""));
   return arr.join("&");
}



声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议