使用原生javascript实现ajax提交form表单

使用原生javascript实现ajax提交form表单

============================

1准备表单
       首先我们需要编写一个html代码，这里我是采用nodejs里面的jade模板引擎来进行生成html代码的。

form(action="/ajaxTest2",method="post",enctype="text/plain",onsubmit="ajaxSubmit(this);return false;")        label username:        input(id="username",type="text",name="username")        br        br        label password:        input(id="password",type="password",name="password")        br        br        select(id="city",name="city")            option(value=1) 成都            option(value=2) 雅安        br        br        input(type="submit",value="测试ajax")

• 2 编写js代码
         利用ajax自定义form提交的数据，做的事情，不如form提交简单。但是自定义form提交又比较灵活，可以做添加一些自己想要的功能。既然要自定义ajax的表单提交功能，我们就需要了解form提交的四种类型。
  -1 method=”get”
  此格式要求的数据类型如下图所示
  
  每条数据以一个换行符做分隔”\r\n”,nodejs获取方法
  req.query.*
  -2 method=”post”,enctype=”text/plain”
  此格式要求的数据类型如下图所示
  
  与get方式相似.nodejs获取方法
  req.on(“data”,function(data){})
  -3 method=”post”,enctype=”application/x-www-form-urlencoded”
  此格式要求的数据类型如下图所示
  
  每条数据以&作为分隔符,jQuery.ajax();传递的数据就是这种类型
  nodejs获取方法
  req.body.username
  -4 method=”post”,enctype=”multipart/form-data”
  此格式要求的数据类型如下图所示
  input的name单独一行，然后空两行，写值，然后在是下一个值对.
  nodejs获取方法
  req.on(“data”,function(data){
  });
  了解了过程，以下便是实现代码

'use strict';if (!XMLHttpRequest.prototype.sendAsBinary) {    XMLHttpRequest.prototype.sendAsBinary = function(sData) {        var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);        for (var nIdx = 0; nIdx < nBytes; nIdx++) {            ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff;        }        /* send as ArrayBufferView...: */        this.send(ui8Data);        /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */    };}void function(global){    function ajaxComplete(){        ///成功        if(this.statusCode==200){        }    }    //提交    function ajax(myForm){        var xhr = new XMLHttpRequest();        xhr.addEventListener("load", ajaxComplete);        if(myForm.technique===0){            //如果是get方式            xhr.open("get",myForm.action.replace(/(?:\?.*)?$/,myForm.segments.length>0?"?"+myForm.segments.join("&"):"?"),true);            xhr.send(null);        } else{            xhr.open("post",myForm.action,true);            if(myForm.technique===3){                //如果是multipart/form-data                var sBoundary = "---------------------------" + Date.now().toString(16);                xhr.setRequestHeader("Content-type",sBoundary);                xhr.sendAsBinary("--" + sBoundary + "\r\n" + myForm.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n");            }else{                //如果是application/x-www-form-urlencoded或者text/plain                xhr.setRequestHeader("Content-type",myForm.contentType);                xhr.send(myForm.segments.join(myForm.technique===1?"\r\n":"&"));            }        }    }    //处理文件上传完毕时做的操作    function processUpload(event){        //this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n";        this.owener.segments[this.segIndex] = oFREvt.target.result + "\r\n";        this.owner.status--;        processSubmit(this.owner);    }    //status为0即所有图片都已经上传完毕，执行ajax    function processSubmit(myForm){        if(myForm.status>0){return;}        ajax(myForm);    }    //处理text/plain的编码    function plainScape(text){        //$&表示被替换的文本        return text.replace(/[\s\=\\]/g,"\\$&");    }    //上传数据到浏览器    // 0 get    // 1 text/plain    // 2 application/x-www-form-urlencoded    // 3 multipart/form-data    function submitData(form){        var elements = form.elements;        var i,j,oElement,oType,oFile,reader;        var isPost = form.method.toLowerCase()==="post"; //若没有指定method，默认按get操作;        this.action = form.action;        this.contentType = isPost && form.enctype ? form.enctype : "application\/x-www-form-urlencoded";        this.technique = isPost?this.contentType==="text/plain"?1:this.contentType==="application/x-www-form-urlencoded"?2:3:0;        this.segments = [];        this.status = 0;//还未上传的文件量        var fFilter = this.technique === 1?plainScape:global.encodeURIComponent;        for(i=0;i<elements.length;i++){            oElement = elements[i];            if(!oElement.hasAttribute("name")){continue;}//如果该元素没有name属性，则自动跳过            oType = oElement.nodeName.toLowerCase()==="input"?oElement.type:"text";            console.log(oElement);            if(oType === "file"){                //限制只能以post方式上传图片                if(isPost&&this.technique===3) {                    //如果是multipart/form-data 则传文件数据                    for(j=0;j<oElement.files.length;j++){                        oFile = oElement.files[j];                        reader = new FileReader();                        reader.owner = this;//                        reader.segIndex = this.segments.length;                        this.status++;                        this.segments.push("Content-Disposition: form-data; name=\"" +oElement.name+ "\"; filename=\"" +oFile.name+ "\"\r\nContent-Type: " +oFile.type+ "\r\n\r\n");                        reader.onload = processUpload;//文件读取完之后执行                        reader.readAsBinaryString(oFile);                    }                }                else{                    //不是，则只传文件名                    for(j=0;j<elements.files.length;j++){                        oFile = elements.files[j];                        this.segments.push(fFilter(oElement.name)+"="+fFilter(oFile.name));                    }                }            }else if((oType!=="radio"&&oType!=="checkbox")||oType.checked){               //处理类型不是file的表单数据,                if(this.technique === 3){                    //Content-Disposition: form-data; name=aa                    //heheda                    this.segments.push("Content-Disposition: form-data; name=\""+oElement.name+"\"\r\n\r\n"+oElement.value+"\r\n");                }else{                    this.segments.push(fFilter(oElement.name)+"="+fFilter(oElement.value));                }            }        }        processSubmit(this);    }    var ajaxSubmit = function(formElement){        if(formElement.action === ""){            return undefined;        }        submitData.call(ajaxSubmit,formElement);    }    Object.defineProperty(global,"ajaxSubmit",{       value: ajaxSubmit,       configurable: true    });}(this);