第三十六课:如何书写一个完整的ajax模块

本课主要教大家如何书写一个完整的ajax模块,讲解的代码主要跟ajax有关,而jQuery的ajax模块添加了Deferred异步编程的机制,因此对ajax的理解难度增大,还是忽略掉。但是我要讲解的代码跟jQuery的ajax模块思路是一样的,只是没有加入Deferred异步编程的思想,这样更有利于大家理解ajax的原理。

$.ajax = function(opts){    //大家如果用过jQuery的ajax,应该记得$.ajax({url:...,data:....,type:'POST',success:function(){}}),就可以进行一次ajax请求,这里的ajax方法也是一样,接收一个json对象。

  if(!opts || !opts.url){

    $.error("传入的参数必须为json对象,并且此对象要有url属性");

  }

  opts = setOptions(opts);   //处理用户传入的参数,比如:把type属性值大写化,把data的数据json对象转换成字符串格式等。

  var dummyXHR = new $.XMLHttpRequest(opts);    //创建一个xhr

  "complete success error".replace(/\S+/g, function(match){   //match = complete,success,error

    if(typeof opts[match] =="function") {   //如果传入的json对象中有此回调方法

      dummyXHR.bind(name, opts[name]);    //就给此xhr绑定此回调方法

      delete opts[name];  

    }

  })  

  if(opts.contentType){     //如果有设置请求内容类型的字段,就设置

    dummyXHR.setRequestHeader("Content-Type", opts.contentType);

  }

  for(var i in opts.headers){   //如果传入了请求头的字段集合,就设置

    dummyXHR.setRequestHeader(i, opts.headers[i]);

  }

  if(opts.async && opts.timeout){   //如果是异步请求,并且有超时字段

    dummyXHR.timeoutID = setTimeout(function(){

      dummyXHR.abort();

    }, opts.timeout);    //  超时后,将执行回调方法,把请求中断

  }

  dummyXHR.request();   //发送请求

  return dummyXHR;

}

$.XMLHttpRequest = function(opts){

  this.readyState = 0;

  this.options = opts;

  this._events = {};

  this.requestHeaders:{}

}

$.XMLHttpRequest.prototype = {

  constructor: $.XMLHttpRequest,

  bind: function(type,callback){

    var listeners = this._events[type];    //如果此类型的事件已经绑定过事件回调函数,那么就直接添加到数组中就行了

    if(listeners){

      listeners.push(callback);

    }else{

      this._events[type] = [callback];

    }

    return this;

  },

  setRequestHeader:function(name,value){

    this.requestHeaders[name] = value;

    return this;

  },

  request:function(){

    var opts = this.options;

    var xhr = this.xhr = new $.xhr();  //这里上一课已经讲了它的兼容性写法,因此这里不再书写

    if(opts.async){   //如果是异步请求,需要添加事件监听函数

      if(xhr.onerror === null){   //如果浏览器支持最新的xhr的接口,不支持的话,这里是undefined。

        var self = this;

        xhr.onload = xhr.onerror = function(e){

          this.readyState = 4;   //强制把状态变成4,兼容IE9+,IE浏览器可能会出现3,或4的情况,因此这里强制设置,兼容处理。

          self.respond();    //请求完成后,执行回调方法  

        }      

      }else{

        xhr.onreadystatechange = function(){

          self.respond();

        }

      }

    }

    if(opts.crossDomain && !("withCredentials" in  xhr)){

      $.error("本浏览器不支持跨域");

    }

    if(opts.username){     //调用xhr对象的open方法,打开连接,这里如果是get请求,在setOptions方法中,已经把data中的数据添加到url后面了。

      xhr.open(opts.type,opts.url,opts.async,opts.username,opts.password);

    }else{

      xhr.open(opts.type,opts.url,opts.async);

    }

    for(var i in this.requestHeaders){

      xhr.setRequestHeader(i,this.requestHeaders[i]);  //设置真正的xhr对象的请求头

    }

    xhr.send(opts.data || null);     //如果是post请求,这里就会有data数据,如果是get请求,这里就没有data属性,返回undefined,因此send(null)。

  },

  respond : function(forceAbort){

    var xhr = this.xhr;

    if(!xhr) return;   //onreadystatechange会执行多次,因此通过这个变量来判断是否已经执行过了。

    try{

      var completed = xhr.readyState ===4;   //状态为4时,就代表请求完成

      if(completed || forceAbort){  //如果超时,就会强制取消请求

        xhr.onerror = xhr.onload = xhr.onreadystatechange = null;

        if(forceAbort){

          xhr.abort();

        }else{

          var status = xhr.status;

          this.responseText = xhr.responseText;

          try{

            var xml = xhr.responseXML;   //以防返回的xml是一个不正规的xml,浏览器解析时会生成一个DOMException对象,访问时,会抛错。

          }catch(e){}

          if(xml && xml.documentElement){  //如果是xml文档

            this.responseXML = xml;

          }         

          try{

            var statusText = xhr.statusText;   //跨域情况下,火狐访问它会抛错

          }catch(e){

            statusText = "火狐访问错误";

          }

          this.dispatch(status,statusText);

        }  

      }

    }catch(e){   //如果网络出现问题,访问xhr的属性,在火狐下会抛错。

      this.dispatch(500,e+"");

    }

  },

  abort:function(){

    this.respond(true);

    return this;

  },

  dispatch:function(status,statusText){

    this.readyState = 4;

    var eventType = "error";

    if(status >=200 && status < 300 || status ===304 ||status ===1223||status ===0){  //status=204,代表请求成功,但是没有内容返回。

      eventType = "success";

      if(status == 204 ||status ===1223||status ===0 ){

        statusText = "noContent";

      }else if(status == 304){

        statusText = "noModified"

      }

      else{

        var dataType = this.xhr.getResponseHeader("Content-Type") || "text"; //得到数据的类型

        try{

          this.response = $.ajaxConverters[dataType].call(this,this.responseText,this.responseXML);  //处理不同数据

        }catch(e){

          eventType = "error";      //如果数据解析出错

          statusText = "parsererror:"+e;

        }

      }

    }

    this.status = status;

    this.statusText = statusText;

    if(this.timeoutID){     //清除定时器

      clearTimeout(this.timeoutID);

      delete this.timeoutID;

    }

    if(eventType === "success"){

      this.fire(eventType, this, statusText , this.response);   //如果请求成功,就触发成功的回调函数

    }else{

      this.fire(eventType, this, statusText);

    }

    this.fire("complete", this, statusText);   //不管成功或者失败,只要请求完成后,都会调用complete回调方法。

    delete this.xhr;

  },

  fire:function(type){

    var listeners = this._events[type] || [];

    if(listeners.length){   //如果有此类型的回调方法

      var args = [].slice.call(arguments);

      for(var i=0,callback;callback = listeners[i++];){

        callback.apply(window,args);

      }

    }  

  }

}

$.ajaxConverters = {

  text:function(text){

    return text || "";

  },

  xml:function(text,xml){

    return xml != undefined ? xml : $.parseXML(text);

  },

  html:function(text){

    return $.parseHTML(text);

  },

  json:function(text){

    return $.parseJSON(text);

  },

  script:function(text){

    return $.parseJS(text);

  }

}

jsonp原理,请前端开发人员必须去看,很容易理解,但是非常重要。面试必问,而且还有一个问题,也是面试官非常喜欢问的,就是解析一个url的方法。一般进入方法里面,需要一个正则来匹配这个url是否是一个正确的url,写出这个正则,就基本上可以得80分了。

当我们要给url后面添加查询字符串时,我们可以用url + (url.test(/\?/) ? "&" : "?") + name + "=" +value;    //这里没有考虑有hash的情况,如果url有?,就代表它本身有查询字符串,那么只要在后面添加&name=value就行了。如果没有,就需要在url添加?name=value。

最后,我们来讲一下,上一节课留下的问题,如何模拟老版本浏览器进行FormData的ajax请求。

请看源代码:

function request = function(opts){

  var form = opts.form;   //form指向的是页面上的form元素

  var ID = "iframe-upload";

  var iframe = createIframe(ID);   //创建一个新的id=ID,name =ID的iframe,并添加到页面中。但是这个iframe在页面中是隐藏的,不会显示在页面上

  var backups = {   //先把form元素的这些属性值保存起来,因为提交form表时,需要重写这些属性

    target:form.target ||"",

    action:form.action||"",

    enctype:form.enctype,

    method:form.method

  };

  var fields = opts.data ? addDataToForm(form, opts.data) : [];  //如果同时还需要提交其他数据,那么需要把这些数据放到form元素中。

  form.target = ID;   //以防提交时,刷新当前页面,现在只会刷新隐藏的iframe。

  form.action = opts.url;

  form.method = "POST";       //必须指定method与enctype,不然在Firefox下会报错。同时,如果form中包含文件域(<input type=file>)时,如果缺少method="POST",以及enctype = "multipart/form-data",文件将不会被发送给url。

  form.enctype = "multipart/form-data";   //form元素的enctype属性值,1:application/x-www-form-urlencoded    在发送前,编码所有字符(post请求默认就是此值)。2:text/plain  不对特殊字符编码。3:multipart/form-data  不对字符编码,在使用包含文件上传控件的表单时,必须使用该值。

  $.bind(iframe,"load",function(e){  //绑定iframe的load事件,当form表提交后,会触发iframe的刷新,这时就会触发iframe的load事件

    respond(e,iframe);

  });

  form.submit();    //提交form表

  for(var i in backups){

    form[i] = backups[i];   //恢复form元素的那些属性值

  }

  fields.forEach(function(input){

    form.removeChild(input);  //移除之前添加的隐藏的input元素

  })

}

function createIframe(ID){

  var iframe = $.parseHTML("<iframe "+"id='" + ID + "'"+ " name='"+ ID + "'" + " style='position:absolute;left:-9999px;top:-9999px;' />").firstChild;

  return (document.body || document.documentElement).insertBefore(iframe);   //把新创建的iframe添加到页面的最后面(第二个参数不写或写成null),并返回这个iframe。

}

function addDataToForm(form,data){

  var el,ret=[];

  for(var d in data){

    el = document.createElement("input");

    el.type = "hidden";  //隐藏的input

    el.name = d;

    el.value = data[d];

    form.appendChild(el);   //添加到form元素中

    ret.push(el);

  }

  return ret;

}

function respond(e,iframe){

  var node = iframe;

  var responseText;

  if(e && e.type == "load"){

    var doc = node.contentWindow.document;   //取得iframe中的document对象,这里的document对象就是url返回的数据

    responseText = doc;

    if(doc.body){  //如果返回的数据存在body,说明返回的不是xml。

      responseText = doc.body.innerHTML;

    }

    dispatch(200,"success",responseText);   //请求成功,执行回调函数  

    $.unbind(node,"load",function(e){  //绑定iframe的load事件,当form表提交后,会触发iframe的刷新,这时就会触发iframe的load事件

      respond(e,iframe);

    });

    setTimeout(function(){

      node.parentNode.removeChild(node);   //移除页面上的iframe。

    });

  }

}

这一课难度还是蛮大的,ajax这一章节也已经讲完,下一课,将讲解动画引擎。

加油!

上一篇:关于WordPress搬家方法步骤的整理


下一篇:Android 实现在线程中联网