原生js实现Ajax请求，包含get和post

现在web从服务器请求数据，很多用到Ajax，不过都是用的JQuery封装好的，之前做项目，由于无法引用JQuery，所以就只能用原生了，话不多说，请看代码。

 /*-------------------Ajax start--------------------*/

 function ajax(options) {

     options = options || {};

     options.type = (options.type || "GET").toUpperCase();

     options.dataType = options.dataType || "json";

     var params = formatParams(options.data);

     var xhr;

     //创建 - 第一步

     if (window.XMLHttpRequest) {

       xhr = new XMLHttpRequest();

     } else if(window.ActiveObject) {         //IE6及以下

       xhr = new ActiveXObject('Microsoft.XMLHTTP');

     }

     //连接 和 发送 - 第二步

     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);

     }

      //接收 - 第三步

     xhr.onreadystatechange = function () {

       if (xhr.readyState == 4) {

         var status = xhr.status;

         if (status >= 200 && status < 300 || status == 304) {

           options.success && options.success(xhr.responseText, xhr.responseXML);

         } else {

           options.error && options.error(status);

         }

       }

     }

   }

 //格式化参数

 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("&");

 }

 /*-------------------Ajax end-------------------*/

自己封装Ajax，主要分三步：

第一步：创建需要的对象，这里主要用到的是XMLHttpRequest，注意需要考虑早期的IE；

第二步：连接和发送；

第三步：接收；

这里为了格式化请求参数，封装了一个formatParams(data)函数。

巴特西

原生js实现Ajax请求，包含get和post

最新文章

热门文章