观 jqueryform 源码有感

话不多说

提交方式

• formdata
• ajax
• iframe( 创建iframe 利用其内的form进行提交 )

首先, 检测提交的内容中是否包含 type为file的input, 没有则使用jquery的ajax进行提交；
包含file，检测浏览是否支持formdata，支持则使用该方式；

   var formdata = new FormData();
   /* 利用api append 添加内容 **/
   ipts.forEach(function(ipt){ formdata.append(ipt.name, ipt.value || ipt.files[0]) })

  /* ajax 设置(重点) **/
  {
      * contentType: false,
      * processData: false,
      cache: false
  }
   

不支持 创建iframe进行提交 这里有几点值得注意的地方

1. 判断iframe加载完毕

    var iframe = document.createElement('iframe');
   
    iframe.attachEvent ? iframe.attachEvent('onload', cb)
                       : iframe.addEventListener('load', cb);
   

2. iframe内的form的target与iframe的name值一致

   var id = 'random_' + (new Date().getTime());
   
   iframe.setAttribute('name', id);iframe.setAttribute('src', 'about:blank');
   form.setAttribute('target', id);

3. 监听iframe内表单提交结果

   var xhr = {
       aborted: 0,
       responseText: null,
       responseXML: null,
       status: 0,
       statusText: 'n/a',
       getAllResponseHeaders: function() {},
       getResponseHeader: function() {},
       setRequestHeader: function() {},
       abort: function() {
                this.aborted = 1;
                $io.attr('src','about:blank'); // abort op in progress
       }
   };
    
   var data, doc;
   /* iframe 文档获取 **/
   doc = iframe.contentWindow ? iframe.contentWindow.document
                              : iframe.contentDocument
                              ? iframe.contentDocument  
                              : iframe.document;

   xhr.responseText = doc.body ? doc.body.innerHTML : null;
   xhr.responseXML = doc.XMLDocument ? doc.XMLDocument : doc;
   xhr.getResponseHeader= function(header)
   {
         var headers = { 'content-type': opts.dataType };
         return headers[header]
   }
if (opts.dataType == 'json' || opts.dataType == 'script') 
{
         var ta = doc.getElementsByTagName('textarea')[0];
         xhr.responseText = ta ? ta.value : xhr.responseText;
}
else if (opts.dataType == 'xml' && !xhr.responseXML && xhr.responseText != null)
 {
         xhr.responseXML = toXml(xhr.responseText);
}
data = $.httpData(xhr, opts.dataType);
function toXml(s, doc)
{
           if (window.ActiveXObject) 
           {
                doc = new ActiveXObject('Microsoft.XMLDOM');
                doc.async = 'false';
                doc.loadXML(s);
            }
            else
                doc = (new DOMParser()).parseFromString(s, 'text/xml');
            return (doc && doc.documentElement && doc.documentElement.tagName != 'parsererror') ? doc : null;
};
$.httpData=function( xhr, type, s )
 { 
           var ct = xhr.getResponseHeader( 'content-type'), 
               xml = type == 'xml' || !type && ct && ct.indexOf( 'xml' ) >=0, 
               data = xml ? xhr.responseXML: xhr.responseText; 
           if ( xml && data.documentElement.tagName == 'parsererror' )
                throw 'parsererror' ;   
           if ( s && s.dataFilter ) 
               data = s.dataFilter( data, type );
           if ( typeof data === 'string' )
           {
             if ( type == 'script' ) jQuery.globalEval( data ); 
             if ( type == 'json' )   data = window[ "eval" ]( '(' + data + ')' ); 
          } 
          return data; 
};